添加面包屑导航功能对WordPress的好处-连界优站

内容目录

# 添加面包屑导航功能对WordPress的好处 🔍
• 1. 提升用户体验
• 2. 改善SEO
• 3. 降低跳出率
# 如何在WordPress中添加面包屑导航功能 🛠️
• 1. 使用插件添加面包屑导航
—— 方法1: 使用Yoast SEO插件
—— 方法2: 使用Breadcrumbs NavXT插件
• 2. 手动添加面包屑导航
—— 方法1: 使用代码片段
• 3. 自定义面包屑样式
# 常见问题及解决方案 ❗
• 问题1: 面包屑导航不显示
• 问题2: 面包屑导航样式不正确
• 问题3: 面包屑导航显示不完整
• 问题4: 面包屑导航影响SEO
• 问题5: 面包屑导航与主题冲突
# 结语 🌟

在运营WordPress网站时，面包屑导航是一个非常有用的功能，可以显著提升用户体验和搜索引擎优化（SEO）。本文将详细介绍添加面包屑导航功能对WordPress的好处，并提供详细的实现方法和常见问题的解决方案。

添加面包屑导航功能对WordPress的好处 🔍

1. 提升用户体验

导航便捷：面包屑导航为用户提供了一种方便的返回上级页面的方式，减少了用户的点击次数。
清晰路径：用户可以清楚地看到自己当前所在的位置，以及如何到达该页面的路径。

2. 改善SEO

增强页面结构：面包屑导航有助于搜索引擎更好地理解网站的结构，提升抓取和索引效率。
提高点击率：在搜索引擎结果页中显示面包屑导航，可以提高点击率，吸引用户点击进入网站。

3. 降低跳出率

减少用户困惑：面包屑导航减少了用户在网站中迷失的风险，降低了跳出率。
提升用户满意度：用户可以更容易地找到所需信息，提升整体满意度。

如何在WordPress中添加面包屑导航功能 🛠️

1. 使用插件添加面包屑导航

方法1: 使用Yoast SEO插件

安装Yoast SEO 📦

在WordPress后台，导航到“插件” > “添加新插件”，搜索“Yoast SEO”，点击“安装”并“激活”。

启用面包屑导航 🍞

导航到“SEO” > “通用” > “面包屑”，勾选“启用面包屑”选项，然后保存更改。

自定义面包屑样式 🖌️

在主题的style.css文件中添加自定义样式，例如：

.breadcrumb {
    background-color: #f9f9f9;
    padding: 10px;
    margin-bottom: 20px;
}
.breadcrumb a {
    color: #0073aa;
}

方法2: 使用Breadcrumbs NavXT插件

安装Breadcrumbs NavXT 📦

在WordPress后台，导航到“插件” > “添加新插件”，搜索“Breadcrumbs NavXT”，点击“安装”并“激活”。

配置面包屑导航 🍞

导航到“设置” > “Breadcrumbs NavXT”，配置面包屑导航的设置，例如显示格式、分隔符等。

添加面包屑代码 🛠️

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

if ( function_exists('bcn_display') ) {
    bcn_display();
}

2. 手动添加面包屑导航

方法1: 使用代码片段

创建函数 🛠️

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

function custom_breadcrumbs() {
    $delimiter = ' › ';
    $home = '首页';
    $before = '<span class="current">';
    $after = '</span>';

    if (!is_home() && !is_front_page() || is_paged()) {
        echo '<div id="crumbs">';
        global $post;
        $homeLink = home_url('/');
        echo '<a href="' . $homeLink . '">' . $home . '</a> ' . $delimiter . ' ';

        if (is_category()) {
            global $wp_query;
            $cat_obj = $wp_query->get_queried_object();
            $thisCat = $cat_obj->term_id;
            $thisCat = get_category($thisCat);
            $parentCat = get_category($thisCat->parent);
            if ($thisCat->parent != 0) echo(get_category_parents($parentCat, TRUE, ' ' . $delimiter . ' '));
            echo $before . single_cat_title('', false) . $after;
        } elseif (is_day()) {
            echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
            echo '<a href="' . get_month_link(get_the_time('Y'), get_the_time('m')) . '">' . get_the_time('F') . '</a> ' . $delimiter . ' ';
            echo $before . get_the_time('d') . $after;
        } elseif (is_month()) {
            echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
            echo $before . get_the_time('F') . $after;
        } elseif (is_year()) {
            echo $before . get_the_time('Y') . $after;
        } elseif (is_single() && !is_attachment()) {
            if (get_post_type() != 'post') {
                $post_type = get_post_type_object(get_post_type());
                $slug = $post_type->rewrite;
                echo '<a href="' . $homeLink . '/' . $slug['slug'] . '/">' . $post_type->labels->singular_name . '</a> ' . $delimiter . ' ';
                echo $before . get_the_title() . $after;
            } else {
                $cat = get_the_category(); $cat = $cat[0];
                echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
                echo $before . get_the_title() . $after;
            }
        } elseif (is_attachment()) {
            $parent = get_post($post->post_parent);
            $cat = get_the_category($parent->ID); $cat = $cat[0];
            echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
            echo '<a href="' . get_permalink($parent) . '">' . $parent->post_title . '</a> ' . $delimiter . ' ';
            echo $before . get_the_title() . $after;
        } elseif (is_page() && !$post->post_parent) {
            echo $before . get_the_title() . $after;
        } elseif (is_page() && $post->post_parent) {
            $parent_id = $post->post_parent;
            $breadcrumbs = array();
            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 $crumb . ' ' . $delimiter . ' ';
            echo $before . get_the_title() . $after;
        } elseif (is_search()) {
            echo $before . '搜索结果：' . get_search_query() . $after;
        } elseif (is_tag()) {
            echo $before . '标签：' . single_tag_title('', false) . $after;
        } elseif (is_author()) {
            global $author;
            $userdata = get_userdata($author);
            echo $before . '作者：' . $userdata->display_name . $after;
        } elseif (is_404()) {
            echo $before . '404 错误' . $after;
        }

        if (get_query_var('paged')) {
            if (is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author()) echo ' (';
            echo __('第', 'textdomain') . get_query_var('paged') . __('页', 'textdomain');
            if (is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author()) echo ')';
        }

        echo '</div>';
    }
}

调用函数 🛠️

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

<?php if (function_exists('custom_breadcrumbs')) custom_breadcrumbs(); ?>

3. 自定义面包屑样式

编辑样式文件 🖌️

在主题的style.css文件中添加自定义样式，例如：

#crumbs {
    background-color: #f9f9f9;
    padding: 10px;
    margin-bottom: 20px;
}
#crumbs a {
    color: #0073aa;
}
#crumbs .current {
    font-weight: bold;
}