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

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

面包屑对于一个网站来说,相当于是页面结构的一个导航,是网页导航设计中一个标准设计模式,而今天我们讲的是如何通过代码来实现wordpress面包屑导航的功能,本站的老访客都知道,小编在用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面包屑导航的功能基本就大功告成了,刷新下页面试试哈,样式效果都还不错吧!

原文链接:http://www.zhengwuku.com/jianzhan/wordpresszhu-ti-you-hua-xi-jie-zhi-wordpressmian-bao-xie-dao-hang

© 版权声明
THE END
喜欢就支持一下吧
点赞11 分享