プラグインWooCommerceのwoocommerce_layered_nav_term_htmlフィルタの使用方法・解説

概要

woocommerce_layered_nav_term_htmlフィルタは、WooCommerceのレイヤードナビゲーションにおける特定のタームのHTML出力をカスタマイズする際に使用されます。このフィルタを使用することで、タームの表示を変更したり、特定の条件に基づいてスタイルを調整したりすることができます。以下は、このフィルタがよく使用される機能の例です。

タームのラベルを変える
タームのリンクに追加のクラスを付与する
タームのカスタムアイコンを追加する
タームの表示条件を変更する
タームのカラーリングを変更する
タームにカスタムデータ属性を追加する

構文

add_filter('woocommerce_layered_nav_term_html', 'your_function_name', 10, 3);

パラメータ

$term_html (string): フィルタリングされたタームのHTML。
$term (object): タームオブジェクト。
$term_count (int): タームの数。

戻り値

変更されたタームのHTML。

使用可能なバージョン

WooCommerce: 2.0以上
WordPress: 4.0以上

この関数のアクションでの使用可能性

アクション	使用例
mu_plugin_loaded
registered_post_type
plugins_loaded
wp_roles_init
setup_theme
after_setup_theme
set_current_user
init
register_sidebar
wp_loaded
send_headers
parse_query
pre_get_posts
wp
template_redirect
get_header
wp_head

サンプルコード1: タームのラベルを変更

add_filter('woocommerce_layered_nav_term_html', 'custom_layered_nav_term_label', 10, 3);

function custom_layered_nav_term_label($term_html, $term, $term_count) {
    $new_label = sprintf('%s (%s)', $term->name, $term_count);
    return str_replace($term->name, $new_label, $term_html);
}

このコードは、レイヤードナビゲーションのターム名を、タームのカウントを含む形式に変更しています。

サンプルコード2: タームにカスタムスタイルを追加

add_filter('woocommerce_layered_nav_term_html', 'custom_layered_nav_styles', 10, 3);

function custom_layered_nav_styles($term_html, $term, $term_count) {
    return str_replace('class="', 'class="custom-style ', $term_html);
}

このコードは、タームのリンクにcustom-styleというクラスを追加し、スタイルを変更できるようにしています。

サンプルコード3: タームにアイコンを追加

add_filter('woocommerce_layered_nav_term_html', 'add_icon_to_term', 10, 3);

function add_icon_to_term($term_html, $term, $term_count) {
    $icon_html = '<span class="custom-icon"></span>';
    return $icon_html . $term_html;
}

このコードは、タームの前にカスタムアイコンを追加します。

サンプルコード4: タームにカスタム属性を追加

add_filter('woocommerce_layered_nav_term_html', 'add_custom_data_attribute', 10, 3);

function add_custom_data_attribute($term_html, $term, $term_count) {
    return str_replace('<a ', '<a data-term-id="' . $term->term_id . '" ', $term_html);
}

このコードは、タームリンクにカスタムデータ属性を追加して、JavaScriptなどで使用できるようにします。

サンプルコード5: タームの表示を条件付きで変更

add_filter('woocommerce_layered_nav_term_html', 'conditional_layered_nav_display', 10, 3);

function conditional_layered_nav_display($term_html, $term, $term_count) {
    if ($term->name == '特定のターム名') {
        return '<strong>' . $term_html . '</strong>'; // 特定のタームを強調表示
    }
    return $term_html;
}

このコードは、特定のターム名に対してHTMLを強調表示する例です。

概要

構文