几乎所有网站都需要一个 breadcrumb
wordpress有默认的函数生成一个基本的 breadcrumb
<?php echo get_category_parents($cat, TRUE, ' » '); ?>
见详细介绍 http://codex.wordpress.org/Function_Reference/get_category_parents
一般用Breadcrumb NavXT 插件也可实现效果
而往往不能符合我们的要求,我们需要手动写一个breadcrumb控件
本例中将基本的breadcrumb生成方法告知大家
见如下代码
// the_breadcrumb, lists the path to current post/category
function ooec_the_breadcrumb($cat=''){
?>
<script type="text/javascript">
// reverse the links in the breadcrumb, and wrap them with <ul><li>
$(document).ready(function() {
$bc = $(".breadcrumb");
$bc.children().addClass("deepblue").each(function(i, $a){$bc.prepend($a)});
$(".breadcrumb a").wrap("<li/>");
$(".breadcrumb li").wrapAll("<ul/>");
})
</script>
<div class="breadcrumb">
<a href="<?php echo site_url();?>" title="Home">Home</a>
<?php
if (is_category() || is_single()){
if(empty($cat)) $cat = the_category_ID(false);
echo get_category_parents($cat, TRUE, '');
} else if(is_page()){
echo '<a href="'.get_page_link().'">'.get_the_title().'</a>';
} else {
// show nothing
}
?>
</div>
<?php
}
style如下
.breadcrumb{ width:720px; text-align:right; margin:75px 0 10px 10px; }
.breadcrumb ul li{ display:inline; padding:10px 0 0 0; color:#003d68;}
.breadcrumb ul li a{ display:inline; background:url(images/ooec_breadcrumb.png) no-repeat right center; padding-right:20px;}