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

  • A+
所属分类:WordPress教程

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

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

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

教程开始了:

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

将上面的代码复制进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: