也想出現在這里?聯系我們

wordpress主題優化細節之wordpress面包屑導航

  • 文章介紹
  • 升級版本
  • 評價&建議

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面包屑導航的功能基本就大功告成了,刷新下頁面試試哈,樣式效果都還不錯吧!

有用3
  • 2013.09.22初次和大家見面了!

已擁有5人對該主題的建議

  1. 話說你自己這個主題是收費的么?然后阿里云的推廣活動已經下架了,你還搞個幻燈片沒啥用阿

    2013-10-08 下午 9:26 [回復]
    • 網站小編:

      現用主題不賣,自己做的,望理解。。。阿里云不談活動,通過推介的都有提成,而且,我這有代金券,消費690送130,消費1200。。。。

      2013-10-09 上午 11:31 [回復]
  2. 0樓
    alwynwong:

    又過來看到好東西了。哈哈哈。 :mrgreen:

    2013-09-22 下午 2:51 [回復]
  3. 哈~這東西好呀!!

    2013-09-22 上午 9:18 [回復]

發表評論

還能輸入240個字

Hi, 歡迎加入Wordpress技術交流群,帶你裝逼帶你飛!

我要入群
也想出現在這里?聯系我們
wordpress加速

我來推薦一個更牛逼的給你看看?

  • 猛戳我吧
夫妇野外交换HD高清版,免费A片在线观看,亚洲精品国产自在现线,中国老妇人60OLDMANTV