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

DIVIbreadnum

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%; }
}

微信扫一扫,关注微信公众号,获取最新资讯

留下回复

您的电邮不会被公布 必填字段标记为*