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

【问题标题】：WooCommerce: Replace Home in the Breadcrumbs with a FontAwesome iconWooCommerce：用 FontAwesome 图标替换面包屑中的 Home
【发布时间】：2019-06-16 01:44:46
【问题描述】：

我正在尝试在 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;
}

【问题讨论】：

标签： wordpress woocommerce font-awesome breadcrumbs

【解决方案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/

【讨论】：

【解决方案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.的指南

【讨论】：

这种工作，虽然它在 if 语句的末尾缺少一个 }。好消息是我获得了主页图标，但坏消息是我不再在面包屑路径中看到我的产品名称。基本上，它只是首页/产品类别/而不是首页/产品类别/产品名称
编辑：我添加了缺少的结束“}”。
啊，我明白了。这可能意味着您粘贴的原始 if 语句具有产品的面包屑。我的没有。您应该能够从父主题中取回原始 if 语句并将其重写以使用主页图标。也就是说，为当前页面添加面包屑有点多余，因为还有页面标题。您是否也尝试过使用过滤器功能和 CSS 的其他解决方案？我推荐这个解决方案。
通过将 else 添加回主 if 语句来修复丢失的面包屑。很明显，错过那个错误对我来说很愚蠢。我仍然推荐其他解决方案。在functions.php中使用过滤器更容易追踪任何可能继承代码的人。
奈杰尔，好多了。现在看起来很棒。感谢您的修改。