几乎所有网站都需要一个 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;}
分享到:
相关推荐
Wordpress的breadcrumb-navxt.3.2.1插件 Wordpress的导航路径插件 解压wordpress2文件,解压后,将目录名称wordpress2,修改为breadcrumb-navxt
angularjs 增加 breadcrumb并支持翻译
Laravel开发-breadcrumb 将动态面包屑添加到Laravel应用程序的包
Laravel开发-laravel-breadcrumb Laravel面包屑
Laravel开发-breadcrumb-for-laravel 一个简单的拉拉维尔面包屑。
Breadcrumb-NavXT:WordPress维护时间最长的Breadcrumb插件
VC++ 2010 面包屑Breadcrumb 导航控件
breadcrumb(面包屑导航) 面包屑导航 漂亮的js面包屑导航
最权威的工程源码,breadcrumb。你值得拥有。加油加油
Codeigniter-breadcrumbs, 用于CodeIgniter的小breadcrumb库 Breadcrumbs是一个小型库,它帮助你使用CodeIgniter管理HTML面包屑。 * 不再维护 Instalation将 Breadcrumbs.php 放在应用程序/库文件夹中将 Breadcrumbs...
Web Invoice—invoicing and billing for WordPress 141 Setting up an invoice 143 Select the client 143 Client Information 143 Recurring Billing 143 Invoice Details 144 Publish 144 My Ad Manager ...
面包屑控制IOS 9的BreadCrumb控件(快速) 这是一个面包屑,Swift编写了用于IOS的控件。 开发人员可以完全访问“ BreadCrumb”的属性:颜色,动画等。此控件随示例应用程序一起提供,可让您实时更改控件的属性。在...
安装yarn add gatsby-plugin-breadcrumb 或者npm install gatsby-plugin-breadcrumb用法有两种方法可以使用gatsby-plugin-breadcrumb将面包gatsby-plugin-breadcrumb添加到您的Gatsby站点:单击“跟踪”和“自动生成...
主要介绍了Element Breadcrumb 面包屑的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
Bootstrap4 面包屑导航(Breadcrumb) 面包屑导航是一种基于网站层次信息的显示方式。以博客为例,面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置,是在用户界面中的一种导航辅助...
面包屑跟随面包屑到一块蛋糕安装npm install breadcrumb --savebower install breadcrumb.js --savebreadcrumb(cake, crumbs) 返回crumbs处的值。 例子: breadcrumb ( { foo : { bar : 'baz' } } , 'foo.bar' ) ;//...