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';
}
一个不太优雅的解决方案是编辑面包屑模板文件。您需要使用子主题并在以下位置拥有现有的面包屑模板文件:
/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]);
}
上的指南