Woocommerce 面包屑分隔符 - 如何使用图像而不是符号答案

【问题标题】：Wocommerce breadcrumb separator - How to use image instead of symboleWoocommerce 面包屑分隔符 - 如何使用图像而不是符号
【发布时间】：2021-04-21 04:58:03
【问题描述】：

这是我现在用来替换默认符号的 sn-p

add_filter( 'woocommerce_breadcrumb_defaults', 'wcc_change_breadcrumb_delimiter', 20 );
function wcc_change_breadcrumb_delimiter( $defaults )
    
{
    $defaults['delimiter'] = ' &gt; ';
    return $defaults;
}

&gt 是 > 的实体，因此目标是使用类似 echo ' 的图像文件替换它？不知何故：D

提前非常感谢

【问题讨论】：

标签： php wordpress woocommerce breadcrumbs

【解决方案1】：

您可以使用image标签检查以下代码。

add_filter( 'woocommerce_breadcrumb_defaults', 'wcc_change_breadcrumb_delimiter', 20 );
function wcc_change_breadcrumb_delimiter( $defaults ){
    $defaults['delimiter'] = '<img src="https://cdn.iconscout.com/icon/free/png-16/right-arrow-1438234-1216195.png">';
    return $defaults;
}

【讨论】：

【解决方案2】：

这段代码放在你的活动主题functions.php文件中

作为分隔符设置跨度标签并为该跨度标签设置背景图像。

add_filter( 'woocommerce_breadcrumb_defaults', 'wcc_change_breadcrumb_delimiter' );
function wcc_change_breadcrumb_delimiter( $defaults ) {
    $defaults['delimiter'] = ' <span></span> ';
    return $defaults;
}

并给css喜欢

nav.woocommerce-breadcrumb span {
    width: 10px;
    height: 10px;
    background-image: url(arrow.png); //give your image path
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
}

【讨论】：