自己写的wordpress breadcrumb

几乎所有网站都需要一个 breadcrumb

wordpress有默认的函数生成一个基本的 breadcrumb

 

 <?php echo get_category_parents($cat, TRUE, ' &raquo; '); ?>

 见详细介绍 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;}