WooCommerce:用 FontAwesome 图标替换面包屑中的主页

WooCommerce: Replace Home in the Breadcrumbs with a FontAwesome icon

我正在尝试想办法在我的 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;
}

过滤器只允许您更改文本而无需添加 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'] = ' ';

行的单引号内使用 space

接下来,您需要将以下内容添加到您的主题中 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/

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

/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.

上的指南