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="https://www.wordpressleaf.com">首页</a> &gt;      <a itemprop="breadcrumb" href="https://www.wordpressleaf.com/category/wordpresstheme">WordPress主题</a> &gt; wordpress英文主题codilight_lite增加面包屑导航
      </div>
    </div>
 </aside>

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里。