3

我正在使用Wordpress CMS，我使用Yoast Breadcrumbs（http://wordpress.org/extend/plugins/breadcrumbs/或http://yoast.com/wordpress/breadcrumbs/）向网站添加面包屑，但在我的情况我需要用图像替换分隔符，如下图所示：

在此处输入图像描述

上图是我喜欢实现的面包屑输出。Yoast Breadcrumbs的默认输出是这样You are here: Home » Uncategorized » Hello world!的，插件有和管理选项来编辑分隔符，但它阻止了 HTML 标记。

4

4 回答 4

8

有一种更清洁的方法可以做到这一点。

阅读http://hookr.io/filters/wpseo_breadcrumb_separator/，这里他们提到了一个钩子。如果你使用这个钩子，你可以很容易地用默认的 HTML 覆盖分隔符。

例如：

function filter_wpseo_breadcrumb_separator($this_options_breadcrumbs_sep) {
    return '<i class="fa fas fa-chevron-right"></i>';
};

// add the filter
add_filter('wpseo_breadcrumb_separator', 'filter_wpseo_breadcrumb_separator', 10, 1);
于 2018-08-17T10:16:21.053 回答
3

Yoast 面包屑现在被WordPress SEO Plugin取代了，根据：http: //yoast.com/wordpress/breadcrumbs/您可以在 Wordpress SEO 管理下自定义面包屑分隔符Internal Links

于 2012-12-01T00:29:18.720 回答
3

我意识到这是一篇旧帖子，但我今天在搜索同样的问题时发现了这个。从 Yoast SEO 版本 3.2.3 开始，您可以在插件的高级设置中将 HTML 放在“面包屑之间的分隔符：”字段中。我已经使用了这段代码，例如我使用 Font Awesome 但您可以轻松地对样式表中的图像执行相同的操作：

<span class="divider"></span>

还有我的 CSS：

p#breadcrumbs span.divider:before {
    content: '\f105';
    font-family: 'FontAwesome';
    padding-left: 10px;
    padding-right: 6px;
}

我希望这会有所帮助=）

于 2016-04-24T10:43:59.923 回答
0

在分隔符的设置中，您可以添加<span class="sprite breadcrumb-seperator">»</span> 这样您就有了一个可见的分隔符。但是您可以在其上设置基于精灵的图像。

于 2012-11-30T10:58:52.077 回答