如何在 woocommerce 面包屑中添加自定义 HTML？ [复制]

Question

我正在研究 WooCommerce 面包屑。我只想在家庭面包屑中添加跨度。当我尝试这样做时，woocommerce 将其删除

add_filter( 'woocommerce_breadcrumb_defaults', 'change_breadcrumb' );
function change_breadcrumb( $defaults ) {
    $defaults['wrap_before'] = '<ol class="breadcrumb breadcrumb1 animated wow slideInLeft" data-wow-delay=".5s">';
    $defaults['wrap_after'] = '</ol>';
    $defaults['before'] = '<li>';
    $defaults['after'] = '</li>';
    $defaults['delimiter'] = '';

    //add span tag
    $defaults['home'] = '<span class="glyphicon glyphicon-home" aria-hidden="true"></span>Home';

    return $defaults;

}

我得到了什么：

<ol class="breadcrumb breadcrumb1 animated wow slideInLeft" data-wow-delay=".5s">
    <li><a href="index.html">Home</a></li>
    <li>Groceries</li>
</ol>

我需要什么：

<ol class="breadcrumb breadcrumb1 animated wow slideInLeft" data-wow-delay=".5s">
    <li><a href="index.html"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>Home</a></li>
    <li class="active">Groceries</li>
</ol>

image

如何将活动类添加到非家庭面包屑会很有趣。

我认为答案是覆盖 breadcrumb.php

if(sizeof( $breadcrumb ) !== $key + 1){
    echo $before;
} else {
    echo $active;
}

if($key == 0){
    echo '<a href="' . esc_url( $crumb[1] ) . '">' . $home . '</a>';
}
else if ( ! empty( $crumb[1] ) && sizeof( $breadcrumb ) !== $key + 1 ) {
    echo '<a href="' . esc_url( $crumb[1] ) . '">' . esc_html( $crumb[0] ) . '</a>';
} else {
    echo esc_html( $crumb[0] );
}

我意识到我可以添加自己的默认值

$defaults['active'] = '<li class="active">';

Answer 1

好吧..我建议对此有所改变。是否可以使用 css3 选择器：first-child？ （如教程https://www.w3schools.com/cssref/sel_firstchild.asp）为第一个li的链接设置背景

ul.breadcrumb1:first-child a{
   Background:moo!
}

使用适当的填充，您将获得相同的效果