摘要：对于wordpress主题优化来说，面包屑是不可获缺的，不断可以提升用户体验，而且对seo来说也是非常友好的，虽然现在大...
对于wordpress主题优化来说，面包屑是不可获缺的，不断可以提升用户体验，而且对seo来说也是非常友好的，虽然现在大多成熟的主题都已经集成了这个功能，但对于想学习wordpress开发的小伙伴来讲，我们熟悉一下面包屑的写法也是很有帮助的，大挖分享出来给到大家
wordpress面包屑实现功能
将以下代码放到当前wordpress主题的functions.php文件中了。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
// 面包屑导航 function get_breadcrumbs() { global $wp_query; if ( !is_home() ){ // Start the UL echo '<ul id="crumbs">'; // Add the Home link echo '<li><i class="fa fa-home"></i><a href="'. get_settings('home') .'">'. get_bloginfo('name') .'</a></li>'; if ( is_category() ) { $catTitle = single_cat_title( "", false ); $cat = get_cat_ID( $catTitle ); echo "<li> » ". get_category_parents( $cat, TRUE, " » " ) ."</li>"; } elseif ( is_archive() && !is_category() ) { echo "<li> » Archives</li>"; } elseif ( is_search() ) { echo "<li> » Search Results</li>"; } elseif ( is_404() ) { echo "<li> » 404 Not Found</li>"; } elseif ( is_single() ) { $category = get_the_category(); $category_id = get_cat_ID( $category[0]->cat_name ); echo '<li> » '. get_category_parents( $category_id, TRUE, " » " ); echo the_title('','', FALSE) ."</li>"; } elseif ( is_page() ) { $post = $wp_query->get_queried_object(); if ( $post->post_parent == 0 ){ echo "<li> » ".the_title('','', FALSE)."</li>"; } else { $title = the_title('','', FALSE); $ancestors = array_reverse( get_post_ancestors( $post->ID ) ); array_push($ancestors, $post->ID); foreach ( $ancestors as $ancestor ){ if( $ancestor != end($ancestors) ){ echo '<li> » <a href="'. get_permalink($ancestor) .'">'. strip_tags( apply_filters( 'single_post_title', get_the_title( $ancestor ) ) ) .'</a></li>'; } else { echo '<li> » '. strip_tags( apply_filters( 'single_post_title', get_the_title( $ancestor ) ) ) .'</li>'; } } } } // End the UL echo "</ul>"; } } |
面包屑代码调用
在需要引用的位置放以下代码，以本站的面包屑导航为例，具体div可自行修改。
|
1 2 3 |
<div class="crumbs_box"> <?php get_breadcrumbs(); ?> </div> |
面包屑css样式
大挖给出基本的css样式，请各位根据自己的wordpress主题样式来自行修改。
|
1 2 3 |
.crumbs_box{padding:15px 0 30px;color:#9c9c9c;font-size:14px} .crumbs_box a{color:#9c9c9c;margin: 0 2px;} .crumbs_box a:hover{color:#45B6F7;} |
