代码添加 WordPress 面包屑导航功能

网站导航不足会导致不良的用户体验(UX)和跳出率上升。您的主菜单可能需要一些补充功能,以帮助用户筛选您的内容,例如 wordpress 面包屑导航。面包屑(其名称源自 Hansel 和 Gretel 的童话故事)向用户显示了他们通过您的文章和页面所经过的路径。他们留下了一些易于访问的链接,以引导访问者回到他们的来路。在本文中,我们将进一步探讨什么是面包屑导航,以及为什么应将它们包含在 WordPress 网站中。我们还将深入探讨如何添加面包屑导航,包括代码方案和插件方案。

面包屑是导航是一系列连接的导航链接,这些链接显示了您浏览网站页面的路径。它们在您浏览站点时出现,并形成一个层次结构,该层次结构从您访问的第一页开始,随后是每个后续页面。他们的主要目的是使用户能够轻松地回溯,从而改善站点的 UX,除此以外,面包屑导航对于整体网站体验和 SEO 都有好处。

增强的导航功能可能会降低跳出率,因为用户可以更轻松地找到所需内容。例如,当搜索产品,类别,品牌,价格等内容时,电子商务站点可能很快就变成一个兔子洞。通常的导航栏菜单可能会使用户走得比需要的更远,因此提供面包屑更有意义。这样一来,他们可以回退到特定类别或搜索前的界面。如前所述,面包屑还可以提高您网站的 SEO。他们通过协助搜索引擎浏览页面并了解其层次结构和链接结构。

代码实例

如果您的主题没有面包屑功能,您也可以自己实现该功能。这涉及编辑当前主题的 functions.php 文件。跳到此方法之前,请确保为您的站点创建备份。这样,如果发生故障,您可以回滚到干净的版本。您还应该使用子主题,以防止主题更新期间所做的更改被覆盖。将以下代码添加到现用主题的 functions.php 文件中:

  1. function ah_breadcrumb() {
  2. 
    
  3.   // Check if is front/home page, return
  4.   if ( is_front_page() ) {
  5.     return;
  6.   }
  7. 
    
  8.   // Define
  9.   global $post;
  10.   $custom_taxonomy  = ''; // If you have custom taxonomy place it here
  11. 
    
  12.   $defaults = array(
  13.     'seperator'   =>  '»',
  14.     'id'          =>  'ah-breadcrumb',
  15.     'classes'     =>  'ah-breadcrumb',
  16.     'home_title'  =>  esc_HTML__( 'Home', '' )
  17.   );
  18. 
    
  19.   $sep  = '<li class="seperator">'. esc_html( $defaults['seperator'] ) .'</li>';
  20. 
    
  21.   // Start the breadcrumb with a link to your homepage
  22.   echo '<ul id="'. esc_attr( $defaults['id'] ) .'" class="'. esc_attr( $defaults['classes'] ) .'">';
  23. 
    
  24.   // Creating home link
  25.   echo '<li class="item"><a href="'. get_home_url() .'">'. esc_html( $defaults['home_title'] ) .'</a></li>' . $sep;
  26. 
    
  27.   if ( is_single() ) {
  28. 
    
  29.     // Get posts type
  30.     $post_type = get_post_type();
  31. 
    
  32.     // If post type is not post
  33.     if( $post_type != 'post' ) {
  34. 
    
  35.       $post_type_object   = get_post_type_object( $post_type );
  36.       $post_type_link     = get_post_type_archive_link( $post_type );
  37. 
    
  38.       echo '<li class="item item-cat"><a href="'. $post_type_link .'">'. $post_type_object->labels->name .'</a></li>'. $sep;
  39. 
    
  40.     }
  41. 
    
  42.     // Get categories
  43.     $category = get_the_category( $post->ID );
  44. 
    
  45.     // If category not empty
  46.     if( !empty( $category ) ) {
  47. 
    
  48.       // Arrange category parent to child
  49.       $category_values      = array_values( $category );
  50.       $get_last_category    = end( $category_values );
  51.       // $get_last_category    = $category[count($category) - 1];
  52.       $get_parent_category  = rtrim( get_category_parents( $get_last_category->term_id, true, ',' ), ',' );
  53.       $cat_parent           = explode( ',', $get_parent_category );
  54. 
    
  55.       // Store category in $display_category
  56.       $display_category = '';
  57.       foreach( $cat_parent as $p ) {
  58.         $display_category .=  '<li class="item item-cat">'. $p .'</li>' . $sep;
  59.       }
  60. 
    
  61.     }
  62. 
    
  63.     // If it's a custom post type within a custom taxonomy
  64.     $taxonomy_exists = taxonomy_exists( $custom_taxonomy );
  65. 
    
  66.     if( empty( $get_last_category ) && !empty( $custom_taxonomy ) && $taxonomy_exists ) {
  67. 
    
  68.       $taxonomy_terms = get_the_terms( $post->ID, $custom_taxonomy );
  69.       $cat_id         = $taxonomy_terms[0]->term_id;
  70.       $cat_link       = get_term_link($taxonomy_terms[0]->term_id, $custom_taxonomy);
  71.       $cat_name       = $taxonomy_terms[0]->name;
  72. 
    
  73.     }
  74. 
    
  75.     // Check if the post is in a category
  76.     if( !empty( $get_last_category ) ) {
  77. 
    
  78.       echo $display_category;
  79.       echo '<li class="item item-current">'. get_the_title() .'</li>';
  80. 
    
  81.     } else if( !empty( $cat_id ) ) {
  82. 
    
  83.       echo '<li class="item item-cat"><a href="'. $cat_link .'">'. $cat_name .'</a></li>' . $sep;
  84.       echo '<li class="item-current item">'. get_the_title() .'</li>';
  85. 
    
  86.     } else {
  87. 
    
  88.       echo '<li class="item-current item">'. get_the_title() .'</li>';
  89. 
    
  90.     }
  91. 
    
  92.   } else if( is_archive() ) {
  93. 
    
  94.     if( is_tax() ) {
  95.       // Get posts type
  96.       $post_type = get_post_type();
  97. 
    
  98.       // If post type is not post
  99.       if( $post_type != 'post' ) {
  100. 
    
  101.         $post_type_object   = get_post_type_object( $post_type );
  102.         $post_type_link     = get_post_type_archive_link( $post_type );
  103. 
    
  104.         echo '<li class="item item-cat item-custom-post-type-' . $post_type . '"><a href="' . $post_type_link . '">' . $post_type_object->labels->name . '</a></li>' . $sep;
  105. 
    
  106.       }
  107. 
    
  108.       $custom_tax_name = get_queried_object()->name;
  109.       echo '<li class="item item-current">'. $custom_tax_name .'</li>';
  110. 
    
  111.     } else if ( is_category() ) {
  112. 
    
  113.       $parent = get_queried_object()->category_parent;
  114. 
    
  115.       if ( $parent !== 0 ) {
  116. 
    
  117.         $parent_category = get_category( $parent );
  118.         $category_link   = get_category_link( $parent );
  119. 
    
  120.         echo '<li class="item"><a href="'. esc_url( $category_link ) .'">'. $parent_category->name .'</a></li>' . $sep;
  121. 
    
  122.       }
  123. 
    
  124.       echo '<li class="item item-current">'. single_cat_title( '', false ) .'</li>';
  125. 
    
  126.     } else if ( is_tag() ) {
  127. 
    
  128.       // Get tag information
  129.       $term_id        = get_query_var('tag_id');
  130.       $taxonomy       = 'post_tag';
  131.       $args           = 'include=' . $term_id;
  132.       $terms          = get_terms( $taxonomy, $args );
  133.       $get_term_name  = $terms[0]->name;
  134. 
    
  135.       // Display the tag name
  136.       echo '<li class="item-current item">'. $get_term_name .'</li>';
  137. 
    
  138.     } else if( is_day() ) {
  139. 
    
  140.       // Day archive
  141. 
    
  142.       // Year link
  143.       echo '<li class="item-year item"><a href="'. get_year_link( get_the_time('Y') ) .'">'. get_the_time('Y') . ' Archives</a></li>' . $sep;
  144. 
    
  145.       // Month link
  146.       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>' . $sep;
  147. 
    
  148.       // Day display
  149.       echo '<li class="item-current item">'. get_the_time('jS') .' '. get_the_time('M'). ' Archives</li>';
  150. 
    
  151.     } else if( is_month() ) {
  152. 
    
  153.       // Month archive
  154. 
    
  155.       // Year link
  156.       echo '<li class="item-year item"><a href="'. get_year_link( get_the_time('Y') ) .'">'. get_the_time('Y') . ' Archives</a></li>' . $sep;
  157. 
    
  158.       // Month Display
  159.       echo '<li class="item-month item-current item">'. get_the_time('M') .' Archives</li>';
  160. 
    
  161.     } else if ( is_year() ) {
  162. 
    
  163.       // Year Display
  164.       echo '<li class="item-year item-current item">'. get_the_time('Y') .' Archives</li>';
  165. 
    
  166.     } else if ( is_author() ) {
  167. 
    
  168.       // Auhor archive
  169. 
    
  170.       // Get the author information
  171.       global $author;
  172.       $userdata = get_userdata( $author );
  173. 
    
  174.       // Display author name
  175.       echo '<li class="item-current item">'. 'Author: '. $userdata->display_name . '</li>';
  176. 
    
  177.     } else {
  178. 
    
  179.       echo '<li class="item item-current">'. post_type_archive_title() .'</li>';
  180. 
    
  181.     }
  182. 
    
  183.   } else if ( is_page() ) {
  184. 
    
  185.     // Standard page
  186.     if( $post->post_parent ) {
  187. 
    
  188.       // If child page, get parents
  189.       $anc = get_post_ancestors( $post->ID );
  190. 
    
  191.       // Get parents in the right order
  192.       $anc = array_reverse( $anc );
  193. 
    
  194.       // Parent page loop
  195.       if ( !isset( $parents ) ) $parents = null;
  196.       foreach ( $anc as $ancestor ) {
  197. 
    
  198.         $parents .= '<li class="item-parent item"><a href="'. get_permalink( $ancestor ) .'">'. get_the_title( $ancestor ) .'</a></li>' . $sep;
  199. 
    
  200.       }
  201. 
    
  202.       // Display parent pages
  203.       echo $parents;
  204. 
    
  205.       // Current page
  206.       echo '<li class="item-current item">'. get_the_title() .'</li>';
  207. 
    
  208.     } else {
  209. 
    
  210.       // Just display current page if not parents
  211.       echo '<li class="item-current item">'. get_the_title() .'</li>';
  212. 
    
  213.     }
  214. 
    
  215.   } else if ( is_search() ) {
  216. 
    
  217.     // Search results page
  218.     echo '<li class="item-current item">Search results for: '. get_search_query() .'</li>';
  219. 
    
  220.   } else if ( is_404() ) {
  221. 
    
  222.     // 404 page
  223.     echo '<li class="item-current item">' . 'Error 404' . '</li>';
  224. 
    
  225.   }
  226. 
    
  227.   // End breadcrumb
  228.   echo '</ul>';
  229. 
    
  230. }

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

第一个片段将面包屑添加到您的主题。第二个“调用”相关功能,以便导航链接出现在页眉中。请注意,您可能需要删除开头的搜索外观。

启用面包屑后,您将可以访问用于配置它们的多个选项。在大多数情况下,默认设置就足够了。但是,请随时进行更改以适合您的口味。之后,单击“ 保存更改”按钮。如果您的主题不支持面包屑,则仍需要包含一些代码以完成启用它们。在您的子主题的 header.php 文件末尾添加以下代码段:

  1. <?php
  2. if ( function_exists('yoast_breadcrumb') ) {
  3.   yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
  4. }
  5. ?>

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

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/76627

WordPress安全防护插件
服务项目 服务内容 收费标准(元)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

电子邮件地址不会被公开。 必填项已用*标注

51建站客服微信二维码
点击这里购买