DIVI教程：如何添加面包屑导航

Divi主题没有内建的面包屑功能，但是我们可以使用免费的插件实现，有两个热门的免费插件可以在Divi主题里实现添加面包屑导航的功能。

WordPress SEO by Yoast
这是一款全面的SEO插件，包含面包屑功能。

Breadcrumb NavXT
这是一款简单的面包屑插件。

如何添加面包屑导航

现在，我将显示给你如何整合这些面包屑导航至 Divi。
在激活插件后，到外观 -> 编辑，
然后添加下面的代码。

WordPress SEO by Yoast

添加这些代码到 header.php 的底部

<?php if(function_exists('yoast_breadcrumb') && !is_front_page()) {
echo '<div class="container">';
yoast_breadcrumb('<p id="breadcrumbs">','</p>');
echo '</div>';
} ?>

添加下面的css至style.css的底部

#breadcrumbs{ float: left; width: 75%; margin-bottom: 1em; position:relative; z-index:1; }
@media screen and (max-width: 980px){
#breadcrumbs{ width: 100%; }
}

Breadcrumb NavXT

添加这些代码到 header.php 的底部：

<?php if(function_exists('bcn_display') && !is_front_page()) {
echo '<div class="container">';
echo '<div class="breadcrumbs" xmlns:v="http://rdf.data-vocabulary.org/#">';
bcn_display();
echo '</div>';
echo '</div>';
} ?>

添加下面的css至style.css的底部

.breadcrumbs{ float: left; width: 75%; margin-bottom: 1em; position:relative; z-index:1; }
@media screen and (max-width: 980px){
.breadcrumbs{ width: 100%; }
}