首页综合资源技术文章正文

为WordPress添加面包屑导航功能

琪琪技术文章

2022-08-27 百度已收录

网站导航不足会导致不良的用户体验（UX）和跳出率上升。您的主菜单可能需要一些补充功能，以帮助用户筛选您的内容，例如WordPress面包屑导航。

面包屑（其名称源自Hansel和Gretel的童话故事）向用户显示了他们通过您的文章和页面所经过的路径。他们留下了一些易于访问的链接，以引导访问者回到他们的来路。

在本文中，我们将进一步探讨什么是面包屑导航，以及为什么应将它们包含在WordPress网站中。我们还将深入探讨如何添加面包屑导航，包括代码方案和插件方案。

什么是面包屑导航以及其重要性

面包屑是导航是一系列连接的导航链接，这些链接显示了您浏览网站页面的路径。它们在您浏览站点时出现，并形成一个层次结构，该层次结构从您访问的第一页开始，随后是每个后续页面。

面包屑通常显示在页面顶部，以方便访问：

他们的主要目的是使用户能够轻松地回溯，从而改善站点的UX，除此以外，面包屑导航对于整体网站体验和SEO都有好处。

增强的导航功能可能会降低跳出率，因为用户可以更轻松地找到所需内容。例如，当搜索产品，类别，品牌，价格等内容时，电子商务站点可能很快就变成一个兔子洞。

通常的导航栏菜单可能会使用户走得比需要的更远，因此提供面包屑更有意义。这样一来，他们可以回退到特定类别或搜索前的界面。

如前所述，面包屑还可以提高您网站的SEO。他们通过协助搜索引擎浏览页面并了解其层次结构和链接结构。

如何添加WordPress面包屑导航

让我们看一下可以在站点上启用面包屑的三种方法。尽管它们都能达到类似的效果，但在难度和便利性方面却有所不同。哪种解决方案最适合您，取决于您的需求。

1.选择一个包含面包屑导航的主题

可以说，将面包屑导航添加到你的网站最简单的方法是通过安装带有此功能的内置主题。现在大多数专业的主题都会自带面包屑导航，所以，你可以很容易找到这类主题。

如果您不满意直接编辑主题文件，或者不想安装新插件，那么这可能是您的最佳选择。但是，在已建立的网站上切换主题可能很困难，并且通常需要在一定程度上进行品牌重塑。

此外，可能找不到适合自己口味且具有面包屑功能的主题。如果是这种情况，您将要探索以下其他方法之一。

2.通过自定义代码实现面包屑

如果您的主题没有面包屑功能，您也可以自己实现该功能。这涉及编辑当前主题的functions.php文件。

跳到此方法之前，请确保为您的站点创建备份。这样，如果发生故障，您可以回滚到干净的版本。您还应该使用子主题，以防止主题更新期间所做的更改被覆盖。

您还需要考虑使自己熟悉微数据，以帮助您获得面包屑的全部SEO好处。Google提供了一些有关如何实现BreadcrumbList模式的示例。

您可以通过三种方式访问主题文件，以便对其进行编辑：

使用文件传输协议（FTP）和FTP客户端（例如FileZilla）连接到服务器。
使用您的网站托管服务商的文件管理器工具，该工具应可从您的帐户仪表板访问。
通过导航到外观> 主题编辑器来访问WordPress的内置代码编辑器。

如果您需要快速修复，则可以将以下代码添加到现用主题的functions.php文件中：

// WordPress Breadcrumb Function
// Add this code into your theme function file.
function ah_breadcrumb() {
// Check if is front/home page, return
if ( is_front_page() ) {
return;
}
// Define
global $post;
$custom_taxonomy = ''; // If you have custom taxonomy place it here
$defaults = array(
'seperator' => '»',
'id' => 'ah-breadcrumb',
'classes' => 'ah-breadcrumb',
'home_title' => esc_html__( 'Home', ''%20)
);
$sep = '<li class="seperator">'. esc_html( $defaults['seperator'] ) .'</li>';
// Start the breadcrumb with a link to your homepage
echo '<ul id="'. esc_attr( $defaults['id'] ) .'" class="'. esc_attr( $defaults['classes'] ) .'">';
// Creating home link
echo '<li class="item"><a href="'. get_home_url() .'">'. esc_html( $defaults['home_title'] ) .'</a></li>'%20. $sep;
if ( is_single() ) {
// Get posts type
$post_type = get_post_type();
// If post type is not post
if( $post_type != 'post'%20) {
$post_type_object = get_post_type_object( $post_type );
$post_type_link = get_post_type_archive_link( $post_type );
echo '<li class="item item-cat"><a href="'. $post_type_link .'">'. $post_type_object->labels->name .'</a></li>'. $sep;
}
// Get categories
$category = get_the_category( $post->ID );
// If category not empty
if( !empty( $category ) ) {
// Arrange category parent to child
$category_values = array_values( $category );
$get_last_category = end( $category_values );
// $get_last_category = $category[count($category) - 1];
$get_parent_category = rtrim( get_category_parents( $get_last_category->term_id, true, ','%20), ','%20);
$cat_parent = explode( ',', $get_parent_category );
// Store category in $display_category
$display_category = '';
foreach( $cat_parent as $p ) {
$display_category .= '<li class="item item-cat">'. $p .'</li>'%20. $sep;
}
}
// If it's a custom post type within a custom taxonomy
$taxonomy_exists = taxonomy_exists( $custom_taxonomy );
if( empty( $get_last_category ) && !empty( $custom_taxonomy ) && $taxonomy_exists ) {
$taxonomy_terms = get_the_terms( $post->ID, $custom_taxonomy );
$cat_id = $taxonomy_terms[0]->term_id;
$cat_link = get_term_link($taxonomy_terms[0]->term_id, $custom_taxonomy);
$cat_name = $taxonomy_terms[0]->name;
}
// Check if the post is in a category
if( !empty( $get_last_category ) ) {
echo $display_category;
echo '<li class="item item-current">'. get_the_title() .'</li>';
} else if( !empty( $cat_id ) ) {
echo '<li class="item item-cat"><a href="'. $cat_link .'">'. $cat_name .'</a></li>'%20. $sep;
echo '<li class="item-current item">'. get_the_title() .'</li>';
} else {
echo '<li class="item-current item">'. get_the_title() .'</li>';
}
} else if( is_archive() ) {
if( is_tax() ) {
// Get posts type
$post_type = get_post_type();
// If post type is not post
if( $post_type != 'post'%20) {
$post_type_object = get_post_type_object( $post_type );
$post_type_link = get_post_type_archive_link( $post_type );
echo '<li class="item item-cat item-custom-post-type-'%20. $post_type . '"><a href="'%20. $post_type_link . '">'%20. $post_type_object->labels->name . '</a></li>'%20. $sep;
}
$custom_tax_name = get_queried_object()->name;
echo '<li class="item item-current">'. $custom_tax_name .'</li>';
} else if ( is_category() ) {
$parent = get_queried_object()->category_parent;
if ( $parent !== 0 ) {
$parent_category = get_category( $parent );
$category_link = get_category_link( $parent );
echo '<li class="item"><a href="'. esc_url( $category_link ) .'">'. $parent_category->name .'</a></li>'%20. $sep;
}
echo '<li class="item item-current">'. single_cat_title( '', false ) .'</li>';
} else if ( is_tag() ) {
// Get tag information
$term_id = get_query_var('tag_id');
$taxonomy = 'post_tag';
$args = 'include='%20. $term_id;
$terms = get_terms( $taxonomy, $args );
$get_term_name = $terms[0]->name;
// Display the tag name
echo '<li class="item-current item">'. $get_term_name .'</li>';
} else if( is_day() ) {
// Day archive
// Year link
echo '<li class="item-year item"><a href="'. get_year_link( get_the_time('Y') ) .'">'. get_the_time('Y') . ' Archives</a></li>'%20. $sep;
// Month link
echo '<li class="item-month item"><a href="'. get_month_link( get_the_time('Y'), get_the_time('m') ) .'">'. get_the_time('M') .' Archives</a></li>'%20. $sep;
// Day display
echo '<li class="item-current item">'. get_the_time('jS') .' '. get_the_time('M'). ' Archives</li>';
} else if( is_month() ) {
// Month archive
// Year link
echo '<li class="item-year item"><a href="'. get_year_link( get_the_time('Y') ) .'">'. get_the_time('Y') . ' Archives</a></li>'%20. $sep;
// Month Display
echo '<li class="item-month item-current item">'. get_the_time('M') .' Archives</li>';
} else if ( is_year() ) {
// Year Display
echo '<li class="item-year item-current item">'. get_the_time('Y') .' Archives</li>';
} else if ( is_author() ) {
// Auhor archive
// Get the author information
global $author;
$userdata = get_userdata( $author );
// Display author name
echo '<li class="item-current item">'. 'Author: '. $userdata->display_name . '</li>';
} else {
echo '<li class="item item-current">'. post_type_archive_title() .'</li>';
}
} else if ( is_page() ) {
// Standard page
if( $post->post_parent ) {
// If child page, get parents
$anc = get_post_ancestors( $post->ID );
// Get parents in the right order
$anc = array_reverse( $anc );
// Parent page loop
if ( !isset( $parents ) ) $parents = null;
foreach ( $anc as $ancestor ) {
$parents .= '<li class="item-parent item"><a href="'. get_permalink( $ancestor ) .'">'. get_the_title( $ancestor ) .'</a></li>'%20. $sep;
}
// Display parent pages
echo $parents;
// Current page
echo '<li class="item-current item">'. get_the_title() .'</li>';
} else {
// Just display current page if not parents
echo '<li class="item-current item">'. get_the_title() .'</li>';
}
} else if ( is_search() ) {
// Search results page
echo '<li class="item-current item">Search results for: '. get_search_query() .'</li>';
} else if ( is_404() ) {
// 404 page
echo '<li class="item-current item">'%20. 'Error 404'%20. '</li>';
}
// End breadcrumb
echo '</ul>';
}

然后，您还需要将以下行添加到主题的header.php文件中：

<?php
// Call the breadcrumb function where you want to display
if ( function_exists('ah_breadcrumb') ) ah_breadcrumb();
?>

第一个片段将面包屑添加到您的主题。第二个“调用”相关功能，以便导航链接出现在页眉中。请注意，您可能需要删除开头的<?php，此代码才能与主题的现有文件一起使用。

根据您的代码流利程度，您可以编写自定义函数来在站点上启用面包屑。您还可以使用CSS修改其外观。

3.使用插件添加面包屑

向您的WordPress网站添加面包屑功能的最后一种方法需要使用插件。有专门的工具可用于此目的，例如Breadcrumb NavXT。

另外，也许您已经在使用Yoast SEO。如果是这样，此插件还提供了一种启用面包屑的方法。这不足为奇，因为我们已经注意到此功能可以增强您网站的SEO。

我们将继续向您展示该流程如何与Yoast SEO一起使用。首先，您需要安装并激活它。接下来，导航到SEO>搜索外观。

在此处，从“ 面包屑导航”选项卡启用面包屑功能：

启用面包屑后，您将可以访问用于配置它们的多个选项。在大多数情况下，默认设置就足够了。但是，请随时进行更改以适合您的口味。之后，单击“ 保存更改”按钮。

如果您的主题不支持面包屑，则仍需要包含一些代码以完成启用它们。在您的子主题的header.php文件末尾添加以下代码段：

<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>'%20);
}
?>

请注意，根据您的主题，您可能不需要包括<?php和?>标记。此外，您可以在其他模板文件中添加上述代码，比如single.php或page.php，位于页面标题眉之后，这些取决于您先要在哪里显示面包屑导航。

总结

面包屑导航可以作为WordPress网站上主要导航菜单的必要补充。这个漂亮的功能改善了您网站的用户体验，并帮助搜索引擎了解您的内容及其整体结构。

收藏 (0) 打赏

感谢您的支持，我会继续努力的!

打开微信扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在

免责声明 1、本站所发布的全部内容源于互联网搬运，（包括源代码、软件、学习资料等）本站提供的一切软件、教程和内容信息仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的23个小时之内，从您的电脑或手机中彻底删除上述内容。
2、访问本站的用户必须明白，本站对所提供下载的软件和程序代码不拥有任何权利，其版权归该软件和程序代码的合法拥有者所有，如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。我们非常重视版权问题，如本站不慎侵犯您的版权请联系我们，我们将及时处理，并撤下相关内容！敬请谅解! 侵删请致信E-mail：messi0808@qq.com
3、如下载的压缩包需要解压密码，若无特殊说明，那么文件的解压密码则为www.77code.com
4、如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！

琪琪源码网技术文章为WordPress添加面包屑导航功能 https://www.77code.com/zh/jishu/11556.html