Question

我试图在WooCommerce的面包屑跟踪中找到一种使用FontAwesome中的主页图标的方法，但它只是显示为空白。基本上，我调整了Woo提供的代码，以将面包屑文本替换为其他文本，但是我想它不喜欢HTML标记。这是我的代码。

add_filter( 'woocommerce_breadcrumb_defaults', 'wcc_change_breadcrumb_home_text' );
function wcc_change_breadcrumb_home_text( $defaults ) {
    $defaults['home'] = '<i class="fas fa-home"></i>';
    return $defaults;
}

Answer 1

过滤器仅允许您更改文本，而无需添加HTML标记，因为起始分隔符包装在esc_html（）中。这是一个解决方案。将过滤器更改为以下内容：

add_filter( 'woocommerce_breadcrumb_defaults', 'wcc_change_breadcrumb_home_text' );
function wcc_change_breadcrumb_home_text( $defaults ) {
    $defaults['before'] = '<span class="nmr-crumb">';
    $defaults['after'] = '</span>';
    $defaults['home'] = ' ';
    return $defaults;
}

在$ defaults ['home'] ='';

行的单引号内使用空格

接下来，您需要在主题style.css中添加以下内容：

.woocommerce-breadcrumb .nmr-crumb:first-child a {
    text-decoration: none;
}
.woocommerce-breadcrumb .nmr-crumb:first-child a::before {
    font-family: FontAwesome;
    content: '\f015';
}

信用：https://wordpress.org/support/topic/swap-home-for-icon/

Answer 2

一种不太优雅的解决方案是编辑面包屑模板文件。您需要使用一个子主题，并在以下位置有一个现有的面包屑模板文件：

/woocommerce/global/breadcrumb.php

其中/是您的子主题文件夹。在Breadcrumb.php内找到以下if语句：

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] );
        }

将上述if语句更改为以下内容：

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

这里是how to edit WooCommerce template files.

的指南

WooCommerce：用FontAwesome图标替换面包屑中的Home

2 个答案: