wordpress手动实现面包屑导航

方法 1：手动实现面包屑导航

1. 基本思路

根据页面类型（如首页、分类页、文章页）动态生成导航结构。

2. 实现代码

在主题的 functions.php 文件中添加以下代码：

function custom_breadcrumbs() {
    // 不显示面包屑的页面类型
    if (is_front_page() || is_home()) return;

    echo '<nav class="breadcrumbs"><a href="' . home_url() . '">首页</a>';

    if (is_category()) {
        // 分类页
        echo ' &raquo; ' . single_cat_title('', false);
    } elseif (is_single()) {
        // 单篇文章页
        $category = get_the_category();
        if (!empty($category)) {
            // 获取第一个分类
            $cat_link = get_category_link($category[0]->term_id);
            echo ' &raquo; <a href="' . esc_url($cat_link) . '">' . esc_html($category[0]->name) . '</a>';
        }
        echo ' &raquo; ' . get_the_title();
    } elseif (is_page()) {
        // 静态页面
        if ($post->post_parent) {
            // 获取父页面
            $parent_id  = $post->post_parent;
            $breadcrumbs = [];
            while ($parent_id) {
                $page = get_page($parent_id);
                $breadcrumbs[] = '<a href="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a>';
                $parent_id = $page->post_parent;
            }
            $breadcrumbs = array_reverse($breadcrumbs);
            foreach ($breadcrumbs as $crumb) echo ' &raquo; ' . $crumb;
        }
        echo ' &raquo; ' . get_the_title();
    } elseif (is_search()) {
        // 搜索结果页
        echo ' &raquo; 搜索结果：' . get_search_query();
    } elseif (is_404()) {
        // 404 页面
        echo ' &raquo; 页面未找到';
    }

    echo '</nav>';
}

3. 在主题模板中调用

将以下代码放置在合适的位置（通常是 header.php 或 single.php 文件中）：

<?php custom_breadcrumbs(); ?>

方法 2：使用插件实现面包屑导航

如果不想手动编写代码，可以使用插件实现。例如：

1. Yoast SEO

Yoast SEO 插件内置了面包屑导航功能：

在 WordPress 后台，进入 SEO > 外观设置 > 面包屑导航，启用面包屑。
将以下代码添加到主题的合适位置（如 header.php 或 single.php）：

<?php if (function_exists('yoast_breadcrumb')) {
    yoast_breadcrumb('<nav class="breadcrumbs">', '</nav>');
} ?>

2. Breadcrumb NavXT

这是一个专门用于面包屑导航的插件，功能丰富且易于自定义：

安装并激活插件。
在后台设置插件配置。
在主题模板中调用以下代码：

<?php if (function_exists('bcn_display')) {
    echo '<nav class="breadcrumbs">';
    bcn_display();
    echo '</nav>';
} ?>

方法 3：自定义样式优化

无论使用哪种方法，都可以为面包屑导航添加自定义样式：

.breadcrumbs {
    font-size: 14px;
    margin: 10px 0;
}
.breadcrumbs a {
    color: #0073aa;
    text-decoration: none;
}
.breadcrumbs a:hover {
    text-decoration: underline;
}
.breadcrumbs &raquo; {
    color: #666;
    margin: 0 5px;
}