wordpress主题优化细节之wordpress面包屑导航

2019年12月21日05:22:28 发表评论 热度723 ℃

wordpress主题不仅仅是前端的事,工程师们还必须了解关于wordpress主题各方面细节的优化,之前小编讲到wordpress自动添加alt和title信息的文章,而今天紧接着给大家分享下wordpress面包屑导航功能的使用以及带来的好处 。

面包屑对于一个网站来说,相当于是页面结构的一个导航,是网页导航设计中一个标准设计模式,而今天我们讲的是如何通过代码来实现wordpress面包屑导航的功能,本站的老访客都知道,小编在用wordpress主题的时候十分的不喜欢用插件,尽管很方便,但会降低网站的打开速度!

教程开始了:

  1. function get_breadcrumbs()  
  2. {  
  3.     global $wp_query;  
  4.     
  5.     if ( !is_home() ){  
  6.     
  7.         // Start the UL  
  8.         echo '<ul class="breadcrumbs">';  
  9.         // Add the Home link  
  10.         echo '<li><a href="'. get_settings('home') .'">'. get_bloginfo('name') .'</a></li>';  
  11.     
  12.         if ( is_category() )  
  13.         {  
  14.             $catTitle = single_cat_title( "", false );  
  15.             $cat = get_cat_ID( $catTitle );  
  16.             echo "<li> &raquo; ". get_category_parents( $cat, TRUE, " &raquo; " ) ."</li>";  
  17.         }  
  18.         elseif ( is_archive() && !is_category() )  
  19.         {  
  20.             echo "<li> &raquo; Archives</li>";  
  21.         }  
  22.         elseif ( is_search() ) {  
  23.     
  24.             echo "<li> &raquo; Search Results</li>";  
  25.         }  
  26.         elseif ( is_404() )  
  27.         {  
  28.             echo "<li> &raquo; 404 Not Found</li>";  
  29.         }  
  30.         elseif ( is_single() )  
  31.         {  
  32.             $category = get_the_category();  
  33.             $category_id = get_cat_ID( $category[0]->cat_name );  
  34.     
  35.             echo '<li> &raquo; '. get_category_parents( $category_id, TRUE, " &raquo; " );  
  36.             echo the_title('','', FALSE) ."</li>";  
  37.         }  
  38.         elseif ( is_page() )  
  39.         {  
  40.             $post = $wp_query->get_queried_object();  
  41.     
  42.             if ( $post->post_parent == 0 ){  
  43.     
  44.                 echo "<li> &raquo; ".the_title('','', FALSE)."</li>";  
  45.     
  46.             } else {  
  47.                 $title = the_title('','', FALSE);  
  48.                 $ancestors = array_reverse( get_post_ancestors( $post->ID ) );  
  49.                 array_push($ancestors$post->ID);  
  50.     
  51.                 foreach ( $ancestors as $ancestor ){  
  52.                     if$ancestor != end($ancestors) ){  
  53.                         echo '<li> &raquo; <a href="'. get_permalink($ancestor) .'">'. strip_tags( apply_filters( 'single_post_title', get_the_title( $ancestor ) ) ) .'</a></li>';  
  54.                     } else {  
  55.                         echo '<li> &raquo; '. strip_tags( apply_filters( 'single_post_title', get_the_title( $ancestor ) ) ) .'</li>';  
  56.                     }  
  57.                 }  
  58.             }  
  59.         }  
  60.     
  61.         // End the UL  
  62.         echo "</ul>";  
  63.     }  
  64. }  

将上面的代码复制进wordpress主题文件夹下的functions.php中,然后,我们开始调用它

  1. <?php if (function_exists('get_breadcrumbs')){get_breadcrumbs(); } ?>  

将上面的调用函数放进wordpress主题文件下的archive.php、single.php、index.php、search.php等页面的相应位置,当然这是你想放哪就放哪,只要你觉得美观就好,我们都习惯放文章上方,header的下方。。。

  1. ul.breadcrumbs {  
  2.     list-style: none;  
  3.     padding: 0;  
  4.     margin: 0;  
  5.     font-size:12px;  
  6. }  
  7. ul.breadcrumbs li {  
  8.     float: left;  
  9.     margin: 0 5px 0 0;  
  10.     padding: 0;  
  11. }  

再将这段css放进主题文件下的css里即可。。。
这样wordpress面包屑导航的功能基本就大功告成了,刷新下页面试试哈,样式效果都还不错吧!

瓜皮猪

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: