WordPress英文主题codilight_lite增加面包屑导航

WordPress英文主题codilight_lite增加面包屑导航

WordPress英文主题codilight_lite增加面包屑导航

导语:一直很奇怪,面包屑导航为什么叫面包屑导航,导航和面包有什么关系,这不是相处万里么?直到有一天看美剧《神盾局特工》有一句话里说用面包屑来作为路线的标记,才恍然大悟,原来在西方国家里,有用面包屑来避免迷路的典故。

为codilight_lite增加面包屑导航很简单:

1、HTML代码。

2、CSS样式。

3、wordpress里的php代码。

我们来看看具体的html:

 <aside id="ft_trending_now-1" class="home-widget trending_widget">
    <div class="treding_wrapper">
      <div class="trending_text">
        <a itemprop="breadcrumb" href="http://www.wordpressleaf.com">首页</a> &gt;      <a itemprop="breadcrumb" href="http://www.wordpressleaf.com/category/wordpresstheme">WordPress主题</a> &gt; wordpress英文主题codilight_lite增加面包屑导航
      </div>
    </div>
 </aside>
wordpress英文主题codilight_lite增加面包屑导航
《糖果屋历险记》里有面包屑导航的章节

CSS样式很简单,基本上是使用了codilight_lite的CSS样式,大家可以下载本站汉化增强主题后直接打开wp-content/themes/codilight-lite/style.css来看。如果不想下载主题,也可以右键查看网页源代码来打开style.css查看。也可以在谷歌浏览器中使用审查元素来查看。

php代码其实很简单,在template-parts/content-breadcrumb.php中调用函数cmp_breadcrumbs()就可以了。cmp_breadcrumbs()是我自己在网上找到的,大家可以下载主题来看看,它包含在functions.php里,我在这里就不放源代码了。content-breadcrumb.php放在content-single.php中使用。

 <?php if(function_exists('cmp_breadcrumbs')) cmp_breadcrumbs();?>

顺序是这样的:在content-single.php中加载content-breadcrumb.php;在content-breadcrumb.php中调用cmp_breadcrumbs()函数;cmp_breadcrumbs()函数定义在functions.php里。

编辑 杨

我们是一群WordPress的爱好者,爱它的简单快捷,爱它的变化多样。

或许您还喜欢下面的文章

1 条评论

  1. 我在瀑布下拿着金箍棒
    2016-06-16 在 08:26
    回复

    面包屑导航还是很有用的,站长的主题免费分享,太感谢了。

留下一条回复

关闭