WordPress面包屑导航代码

面包屑导航（Breadcrumbs）是网页导航设计中一个标准设计模式，在网站浏览中非常有用。添加面包屑导航可以优化网站的SEO，提高访客体验和搜索引擎优化。因此，大多数网站都会设计面包屑导航。在WordPress主题开发过程中，面包屑导航通常需要添加在文章页面或独立页面。以下是如何在WordPress中实现面包屑导航的详细步骤。

整理和修正后的代码

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

function get_breadcrumbs() {
    global $wp_query;
    if (!is_home()) {
        // Start the UL
        echo '<ul class="breadcrumbs">';
        // Add the Home link
        echo '<li><a href="' . get_home_url() . '">' . get_bloginfo('name') . '</a></li>';

        if (is_category()) {
            $catTitle = single_cat_title("", false);
            $cat = get_cat_ID($catTitle);
            echo "<li> &raquo; " . get_category_parents($cat, TRUE, " &raquo; ") . "</li>";
        } elseif (is_archive() && !is_category()) {
            echo "<li> &raquo; Archives</li>";
        } elseif (is_search()) {
            echo "<li> &raquo; Search Results</li>";
        } elseif (is_404()) {
            echo "<li> &raquo; 404 Not Found</li>";
        } elseif (is_single()) {
            $category = get_the_category();
            $category_id = get_cat_ID($category[0]->cat_name);
            echo '<li> &raquo; ' . get_category_parents($category_id, TRUE, " &raquo; ");
            echo the_title('', '', FALSE) . "</li>";
        } elseif (is_page()) {
            $post = $wp_query->get_queried_object();
            if ($post->post_parent == 0) {
                echo "<li> &raquo; " . the_title('', '', FALSE) . "</li>";
            } else {
                $title = the_title('', '', FALSE);
                $ancestors = array_reverse(get_post_ancestors($post->ID));
                array_push($ancestors, $post->ID);
                foreach ($ancestors as $ancestor) {
                    if ($ancestor != end($ancestors)) {
                        echo '<li> &raquo; <a href="' . get_permalink($ancestor) . '">' . strip_tags(apply_filters('single_post_title', get_the_title($ancestor))) . '</a></li>';
                    } else {
                        echo '<li> &raquo; ' . strip_tags(apply_filters('single_post_title', get_the_title($ancestor))) . '</li>';
                    }
                }
            }
        }
        // End the UL
        echo "</ul>";
    }
}

2. 在需要使用到的面包屑导航页面位置添加以下调用代码：

<?php
if (function_exists('get_breadcrumbs')) {
    get_breadcrumbs(); 
}
?>

3. 在主题的CSS样式文件中添加以下样式代码：

ul.breadcrumbs {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 12px;
}
ul.breadcrumbs li {
    float: left;
    margin: 0 5px 0 0;
    padding: 0;
}
ul.breadcrumbs li a {
    text-decoration: none;
    color: #0073aa;
}
ul.breadcrumbs li a:hover {
    text-decoration: underline;
}
ul.breadcrumbs li::after {
    content: " / ";
    padding: 0 5px;
}
ul.breadcrumbs li:last-child::after {
    content: "";
}

代码解析

• get_breadcrumbs 函数：该函数生成面包屑导航条。首先，它检查当前页面是否为首页。如果不是首页，则开始生成面包屑导航条。

• 添加“首页”链接。

• 根据当前页面类型（如分类页面、存档页面、搜索结果页面、404页面、文章页面或独立页面），生成相应的导航条。

• 使用 get_category_parents 函数获取分类的父级分类。

• 使用 get_post_ancestors 函数获取页面的父级页面。

• 将所有链接放入 ul 列表中，并用 li 标签包裹。

• 调用 get_breadcrumbs 函数：在需要显示面包屑导航的位置调用此函数。

• CSS样式：为面包屑导航条设置样式，确保其外观整洁美观。

通过这些步骤，你可以在WordPress网站中添加面包屑导航功能，提升用户体验和SEO优化。希望这能满足你的需求，如有进一步问题，请随时告知。