Wie fügt man benutzerdefinierten HTML in Woocommerce Breadcrumb hinzu?

Question

Ich arbeite an WooCommerce Breadcrumb. Ich möchte nur Spanne zu Hause Krume hinzufügen. Wenn ich versuche, es zu tun, WooCommerce Entfernen es

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; 

} 

Was bekomme ich:

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

Was ich brauche:

<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

Und wäre interessant wie man eine aktive Klasse zu Nicht-Home-Krümeln hinzufügt.

Ich denke, die Antwort ist zwingend 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]); 
} 

Und ich erkennen, dass ich meine eigenen Vorgaben hinzufügen

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

Answer 1

gut .. Ich schlage vor, einen Drall, dass auf. Wäre es möglich, den Selektor css3 zu verwenden: first-child? (Wie im Tutorial https://www.w3schools.com/cssref/sel_firstchild.asp) Hintergrund für die erste li Link

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

mit der richtigen Polsterung eingestellt werden Sie den gleichen Effekt