f
wordpress面包屑导航制作(含非插件方法)
wordpress面包屑导航制作(含非插件方法)
二呆 3年前 (2017-09-07) 代码  #wordpress# 
浏览:2086

引言:此文由子域名转移而来,因为细微强迫症和放弃子域名而不舍得完全丢弃,所以将会逐步第二次转移文章到主域名上来,二者主题(阿里白秀和D8)均来自大前端,追求完美的同时有一丝小懒,主题就不换了,D8主题用起来挺好。

众所周知,面包屑导航是一个可以指引用户去向、非常友好的导航,不仅能让用户浏览网页时来去自如,还对搜索引擎优化SEO非常友好,因此,wordpress网站善于利用面包屑导航会起到百利而无一害的效果。

相对wordpress面包屑导航制作的方法有三种,可以直接将面包屑导航插入到代码中、也可以利用functions.php全局定义面包屑导航然后再进行调用,为了简便省去代码的麻烦,当然还可以使用Breadcrumb NavXT插件制作wordpress面包屑导航。具体方法如下:

一、直接在相关页面添加面包屑导航代码

  1. <div class="mbx-dh">
  2. 当前位置:<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a> &raquo;
  3. <?php
  4. if( is_single() ){
  5. $categorys = get_the_category();
  6. $category = $categorys[0];
  7. echo( get_category_parents($category->term_id,true,' &raquo; ') );
  8. the_title();
  9. elseif ( is_page() ){
  10. the_title();
  11. elseif ( is_category() ){
  12. single_cat_title();
  13. elseif ( is_tag() ){
  14. single_tag_title();
  15. elseif ( is_day() ){
  16. the_time('Y年Fj日');
  17. elseif ( is_month() ){
  18. the_time('Y年F');
  19. elseif ( is_year() ){
  20. the_time('Y年');
  21. elseif ( is_search() ){
  22. echo $s.' 的搜索结果';
  23. }
  24. ?>
  25. </div>

二、利用functions.php全局定义再调用面包屑导航

  1. //面包屑导航
  2. function mbw_breadcrumbs() {
  3.     $delimiter = '&raquo;';
  4.     $name = '您的位置:'.'<a href="'.home_url().'">首页</a>'; //text for the 'Home' link
  5.     $currentBefore = '<span>';
  6.     $currentAfter = '</span>';
  7.     if ( !is_home() && !is_front_page() || is_paged() ) {
  8.         echo '<div id="crumbs" class="breadcrumbs">';
  9.         global $post;
  10.         $home = get_bloginfo('url');
  11.         echo  . $name . ' ' . $delimiter . ' ';
  12.         if ( is_category() ) {
  13.             global $wp_query;
  14.             $cat_obj = $wp_query->get_queried_object();
  15.             $thisCat = $cat_obj->term_id;
  16.             $thisCat = get_category($thisCat);
  17.             $parentCat = get_category($thisCat->parent);
  18.             if ($thisCat->parent != 0) echo(get_category_parents($parentCat, TRUE, ' ' . $delimiter . ' '));
  19.             echo $currentBefore . ;
  20.             single_cat_title();
  21.             echo  . $currentAfter;
  22.         } elseif ( is_day() ) {
  23.             echo  . get_the_time('Y') . ' ' . $delimiter . ' ';
  24.             echo  . get_the_time('F') . ' ' . $delimiter . ' ';
  25.             echo $currentBefore . get_the_time('d') . $currentAfter;
  26.         } elseif ( is_month() ) {
  27.             echo  . get_the_time('Y') . ' ' . $delimiter . ' ';
  28.             echo $currentBefore . get_the_time('F') . $currentAfter;
  29.         } elseif ( is_year() ) {
  30.             echo $currentBefore . get_the_time('Y') . $currentAfter;
  31.         } elseif ( is_single() ) {
  32.             $cat = get_the_category(); $cat = $cat[0];
  33.             echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
  34.             echo $currentBefore;
  35.             the_title();
  36.             echo $currentAfter;
  37.         } elseif ( is_page() && !$post->post_parent ) {
  38.             echo $currentBefore;
  39.             the_title();
  40.             echo $currentAfter;
  41.         } elseif ( is_page() && $post->post_parent ) {
  42.             $parent_id  = $post->post_parent;
  43.             $breadcrumbs = array();
  44.             while ($parent_id) {
  45.                 $page = get_page($parent_id);
  46.                 $breadcrumbs[] =  . get_the_title($page->ID) . ;
  47.                 $parent_id  = $page->post_parent;
  48.             }
  49.             $breadcrumbs = array_reverse($breadcrumbs);
  50.             foreach ($breadcrumbs as $crumbecho $crumb . ' ' . $delimiter . ' ';
  51.             echo $currentBefore;
  52.             the_title();
  53.             echo $currentAfter;
  54.         } elseif ( is_search() ) {
  55.             echo $currentBefore .  . get_search_query() .  . $currentAfter;
  56.         } elseif ( is_tag() ) {
  57.             echo $currentBefore . ;
  58.             single_tag_title();
  59.             echo  . $currentAfter;
  60.         } elseif ( is_author() ) {
  61.             global $author;
  62.             $userdata = get_userdata($author);
  63.             echo $currentBefore . $userdata->display_name . $currentAfter;
  64.         } elseif ( is_404() ) {
  65.             echo $currentBefore . '错误 404' . $currentAfter;
  66.         }
  67.         if ( get_query_var('paged') ) {
  68.             if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ' (';
  69.             echo __('Page') . ' ' . get_query_var('paged');
  70.             if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ')';
  71.         }
  72.         echo '</div>';
  73.     }
  74. }

调用方法:

  1. <?php if (function_exists('mbw_breadcrumbs')) mbw_breadcrumbs(); ?>

如果想美化下面包屑导航,可以添加上以下css样式即可。

  1. .mbx-dh {padding5px 10px;}

三、利用wordpress的Breadcrumb NavXT插件

安装好该Breadcrumb NavXT插件后,就可以用以下代码调用了:

  1. <div class="breadcrumbs">
  2. <?php if(function_exists('bcn_display')) {     bcn_display(); } ?>
  3. </div>

这个插件还可以设置,进入设置选项后,共有general、current item、posts&pages、categories、tags、date archives、miscellaneous等相关设置。

1.general设置(一般设置)

可以设置面包屑导航的分割符(Breadcrumb Separator)
Breadcrumb Max Title Length——设置面包屑导航标题的最大长度
Home Breadcrumb——主页的标题
Place the home breadcrumb in the trail:如果打勾的话表示在面包屑导航中显示主页,不打勾的话则不显示。
Home Title——填入主页的显示标题,默认是blog,你可以修改为你想要的标题。
Home Prefix——(主页前缀)可以在主页前面添加说明文字。
Home Suffix——(主页后缀)在主页后面添加说明文字
Home Anchor、Blog Anchor一般不需要修改,插件会自动生成链接。

2.current item设置

Link Current Item表示是否设置当前页面链接
Current Item Prefix和Current Item Suffix :当前页的前后缀
current Item Anchor默认就可以了
Paged Breadcrumb、Paged Prefix、Paged Suffix是用来设置页面的面包屑导航,设置方法同上。

3.posts&pages设置

Post Prefix、Post Suffix、Post Anchor、Page Prefix、Page Suffix、Attachment Prefix等选项的基本上设置方法同上,但是,Post Taxonomy Display如果勾选的话表示在按照主页-分类-子分类-文章等形式显示出来,如果不勾选的话表示只分按照主页-文章显示出来。Post Taxonomy表示按照什么来进行导航,有分类目录和标签可以选择。

4.categories设置

基本上设置方法同上

5.date archives这里可以修改文章日期分类面包屑导航显示样式。

6.miscellaneous选项里提供了Author、Search、404页面的面包屑导航设置。


关于本站产品
模板插件 普通粉丝 真爱粉丝
下载/获取
更新 ×
修复 ×
问答 ×
加入方法 加粉丝群(得单一产品) 加入星球(得所有产品)

推荐阅读
  • 插件截图:插件简介:TleUCenterForWordpress是一个用户中心插件,放置于前台网页的左下角,供用户登陆/管理只用,使用邮箱验证码登陆,登陆之后在使用TleWeiboForWordPressV2.0微博主题的情况下,可以显示微博列表、文章列表、评论列表,也可...
  • 插件截图:插件介绍:TleLiveCtrlForWordpress是一个基于Kplayer的直播遥控器插件,也可以叫做KplayerForWordPress插件,支持多平台直播推流,进行积分点播、查询、跳过等功能,支持Payjs微信、支付宝支付,是一个可以24小时直播推流的...
  • 主题截图:主题简介:一款Wordpress版本的TleWeiboForWordPress电脑/手机版微博主题使用方法:将本主题里的所有文件放在您网站目录的wp-content/themes内,注意文件夹名字必须为TleWeibo或TleWeiboWap。...
  • 插件介绍:本插件可以隐藏文章中的任意部分内容,当访客付费后,可查看隐藏内容,当前版本支持payjs微信支付。安装方法:第一步:下载本插件,放在 wp-content/plugins/ 目录中(插件文件夹名必须为WeMedia);第二步:激活插件;第三步:填写配置;第四...
  • 现已更新至用环信实现的全新的即时聊天插件,并WordPress、Typecho、Emlog版本即时聊天插件均已支持前台环信聊天。最新版本详情:前台环信即时聊天(以Typecho为例)WordPress版本(以V5.0为例)Typecho版本(以V1.2为例)Eml...

o p
Ú