yoast面包屑图像分隔符

Question

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

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

Answer 1

根据WordPress SEO Plugin http://yoast.com/wordpress/breadcrumbs/，你可以在Internal Links

下的Wordpress SEO管理员中自定义面包屑分隔符

Answer 2

我意识到这是一个老帖子，但是我今天在搜索同样的问题时发现了这一点。从Yoast SEO Version 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;
}

我希望这会有所帮助=）

Answer 3

有一种更清洁的方法来完成此操作。

阅读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);

Answer 4

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