面包屑导航(Breadcrumbs)是网页导航设计中一个标准设计模式,在网站浏览中非常有用。本教程介绍在WordPress中如何打造恰当、全面的面包屑导航,包括分类嵌套和页面嵌套。
当然已经有不错的WordPress插件来添加面包屑导航,但今天我将介绍这种古色古香的方式。
function get_breadcrumbs() { global $wp_query; if (!is_home()) { // Start the UL echo '<ul class="breadcrumbs">'; // Add the Home link echo '<li><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>"; } }
下面的代码放在你想显示面包屑导航的位置:
<?php if (function_exists('get_breadcrumbs')){ get_breadcrumbs(); } ?>
CSS代码
下面的CSS代码仅仅是使面包屑导航链接行内显示的简单样式,完全可以按你想要的方式去设计。ul.breadcrumbs { list-style: none; padding: 0; margin: 0; font-size:12px; } ul.breadcrumbs li { float: left; margin: 0 5px 0 0; padding: 0; }
说明
这些代码做了什么?让我们从头开始解释吧。- 首先,如果是首页则不显示面包屑导航;如果不是首页则添加首页的链接;
- 然后是一些列的判断语句,覆盖了所有可能出现的不同位置,一些语句已经不言自明,比如搜索、404页面、存档页;
- 如果是一个分类,先获取分类ID,然后通过ID获取其上级分类列表,这里使用了WordPress提供的函数
get_category_parents()
; - 如果是一篇文章,必须先获取所属分类ID,但方法和上面稍有不同。一旦获取了分类ID,就和上面一样添加文章标题即可。
- 首先获取页面标题;
- 然后获取页面的祖先并颠倒他们的顺序,借助WordPress内置的
get_post_ancestors()
函数可以轻松实现,下一行代码将当前页面添加到祖先数组中; - 最后使用
foreach
循环输出所有祖先,循环中的if语句确保最后一个祖先(即添加到数组中的当前页面)没有链接。
译者注
可以将上面的函数放在主题functions.php
中,然后调用即可。例如在twentyten中添加面包屑导航,首先将上面的函数粘贴至functions.php文件中,然后在header.php文件中插入以下代码:
</div><!-- #header --> <?php if (function_exists('get_breadcrumbs')){get_breadcrumbs(); } ?> <div id="main">添加样式即可看到下面的面包屑导航:
[caption id="attachment_86" align="alignnone" width="480"] 在twentyten主题中添加WordPress面包屑导航[/caption]
我个人习惯于将一些比较简单的插件合并到funchtion.php文件中,即可以剔除不需要的功能和设置界面,又避免加载插件时从数据库中读写插件配置,一定程度上提高加载速度,也不会在数据库中残留乱七八糟插件参数配置。