在WordPress中实现面包屑导航,可以显著提高网站的用户体验和SEO效果,下面将详细介绍如何在不使用插件的情况下,通过代码实现面包屑导航:
方法一:使用All in One SEO插件添加面包屑导航
1. 安装并激活All in One SEO插件
1、进入WordPress后台,点击“插件” > “添加新插件”。
2、搜索“All in One SEO”,找到插件后点击“安装”,激活”。
2. 配置面包屑导航设置
1、访问All in One SEO的General Settings页面,切换到Breadcrumbs选项卡。
2、启用面包屑功能,选择显示方式(简码、古腾堡块、小部件或自定义代码)。
3、根据需要调整面包屑的样式和显示选项。
3. 在模板文件中添加面包屑代码
1、编辑主题的functions.php文件,添加以下代码:
if( function_exists( 'aioseo_breadcrumbs' ) ) aioseo_breadcrumbs();
2、在需要显示面包屑的位置调用此函数。
方法二:手动编写代码实现面包屑导航
1. 添加面包屑导航函数到functions.php
1、打开主题的functions.php文件,添加以下代码:
function cmp_breadcrumbs() { $delimiter = '»'; // 分隔符 $before = '<span class="current">'; // 在当前链接前插入 $after = '</span>'; // 在当前链接后插入 if ( !is_home() && !is_front_page() || is_paged() ) { echo '<div itemscope itemtype="http://schema.org/WebPage" id="crumbs">'.__( 'You are here:' , 'cmp' ); global $post; $homeLink = home_url(); echo ' <a itemprop="breadcrumb" href="' . $homeLink . '">' . __( 'Home' , 'cmp' ) . '</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){ $cat_code = get_category_parents($parentCat, TRUE, ' ' . $delimiter . ' '); echo $cat_code = str_replace ('<a','<a itemprop="breadcrumb"', $cat_code ); } echo $before . '' . single_cat_title('', false) . '' . $after; } elseif ( is_day() ) { // 天存档 echo '<a itemprop="breadcrumb" href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' '; echo '<a itemprop="breadcrumb" 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 itemprop="breadcrumb" 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 itemprop="breadcrumb" href="' . $homeLink . '/' . $slug['slug'] . '/">' . $post_type>labels>singular_name . '</a> ' . $delimiter . ' '; echo $before . '' . get_the_title() . '' . $after; } else { echo $before . '' . get_the_title() . '' . $after; } } elseif ( is_page() ) { // 页面 echo $before . '' . get_the_title() . '' . $after; } elseif ( is_search() ) { // 搜索结果 echo '<a itemprop="breadcrumb" href="' . esc_url(home_url('/')) . '">' . __('Home', 'cmp') . '</a> ' . $delimiter . ' <span itemprop="breadcrumb">' . __('Search Results for:', 'cmp') . ' ' . get_search_query() . '</span>'; } } echo '</div>'; } add_action('init','cmp_breadcrumbs');
2、保存更改并将文件上传回服务器。
2. 在模板文件中调用面包屑导航函数
1、在需要显示面包屑的位置添加以下代码:
<div class="breadcrumb"><?php cmp_breadcrumbs(); ?></div>
2、保存更改并将文件上传回服务器。
方法三:使用Breadcrumb NavXT插件添加面包屑导航
1. 安装并激活Breadcrumb NavXT插件
1、进入WordPress后台,点击“插件” > “添加新插件”。
2、搜索“Breadcrumb NavXT”,找到插件后点击“安装”,激活”。
2. 配置面包屑导航设置
1、访问设置 > Breadcrumb NavXT页面来配置插件设置。
2、根据需要自定义设置,包括样式、显示选项等。
3. 在模板文件中添加面包屑代码
1、如果主题不支持自动显示面包屑,可以在需要显示面包屑的位置添加以下代码:
<?php if ( function_exists( 'bcn_display' ) ) bcn_display(); ?>
2、保存更改并将文件上传回服务器。
三种方法均可以实现在WordPress网站上添加面包屑导航,无需使用插件,第一种方法适合对代码不熟悉的用户,第二种方法适合有一定编程基础的用户,第三种方法则提供了更多的自定义选项,根据个人需求选择合适的方法即可轻松实现面包屑导航功能。
小伙伴们,上文介绍了“不用插件,轻松实现 wordpress 面包屑导航”的内容,你了解清楚吗?希望对你有所帮助,任何问题可以给我留言,让我们下期再见吧。