如何在woocommerce breadcrumb中添加自定义HTML?

时间:2017-09-29 18:32:21

标签: php wordpress woocommerce breadcrumbs

我正在研究WooCommerce breadcrumb。我只想添加跨度到家里的面包屑。当我试图这样做时,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">';

1 个答案:

答案 0 :(得分:1)

好吧......我建议加油。是否可以使用css3选择器:first-child? (如在教程https://www.w3schools.com/cssref/sel_firstchild.asp中)设置第一个li链接的背景

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

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