欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

自己写的wordpress breadcrumb

程序员文章站 2022-04-29 23:47:40
...

几乎所有网站都需要一个 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;}