如何添加面包屑导航到 Elegant Themes 的 Divi 主题中。

如何添加面包屑导航到 Elegant Themes 的 Divi 主题中。


标签: ,

正在查看 1 个帖子:1-1 (共 1 个帖子)
  • 作者
    帖子
  • 诗语
    管理员
    • 文章数量: 5,865
    @feibisi
    楼主

    Divi没有内置面包屑功能。但是你可以使用免费的插件来添加面包屑。有两种流行的插件可以添加面包屑。

    WordPress SEO by Yoast

    这是一个包含面包屑功能的综合SEO插件。

    Breadcrumb NavXT

    这是一个简单的面包屑插件。

    如何添加面包屑

    现在,我将向您展示如何将这些面包屑整合到Divi。
    激活插件后,在侧边栏上点击外观 – > 编辑。
    然后在下面添加代码。

    1、 Yoast WordPress SEO

    将此代码添加到header.php的底部

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

    将此代码添加到style.css的底部

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

    2、Breadcrumb NavXT

    将此代码添加到header.php的底部

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

    将此代码添加到style.css的底部

    .breadcrumbs{ float: left; width: 75%; margin-bottom: 1em; position:relative; z-index:1; }
    @media screen and (max-width: 980px){
     .breadcrumbs{ width: 100%; }
    }
正在查看 1 个帖子:1-1 (共 1 个帖子)
  • 哎呀,回复话题必需登录。

未找到对应子版块?请直接在 [疑难杂症] 版块中发帖提问。

收藏纪念品


有奖活动

参与论坛社区问答,有机会获赠文派瓦普(Wapuu.com)手办模型。

产品博客


RSS 错误: http://blog.weixiaoduo.com/feed is invalid XML, likely due to invalid characters. XML error: Invalid document end at line 2, column 1

话题信息

商业系统