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

概要

woocommerce_get_star_rating_html フィルタは、WooCommerceで商品レビューの星評価（スター評価）をHTMLで出力する際に用いられるフックです。このフィルタを使用することで、デフォルトの星評価表示をカスタマイズしたり、独自のHTML構造に変更することが可能です。

このフィルタは主に以下の機能を実装する際に使用されます：

星評価のスタイルを変更する
カスタムアイコンを使用した星評価表示
星評価の色やサイズを変える
星評価のテキストを追加する
ユーザーのレビューに基づいた条件付きの星評価表示
レスポンシブデザインへの対応

構文

add_filter( 'woocommerce_get_star_rating_html', 'your_custom_function', 10, 2 );

パラメータ

$rating_html (string) – 現在の星評価のHTML
$rating (float) – ユーザーが与えた評価

戻り値

(string) – カスタマイズされた星評価のHTML

使用可能なWordPressとWooCommerceのバージョン

WordPress: 4.0以降
WooCommerce: 2.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_get_star_rating_html', 'custom_star_rating', 10, 2 );

function custom_star_rating( $rating_html, $rating ) {
    return str_replace('★', '⭐', $rating_html);
}

このサンプルコードでは、デフォルトの星マーク（★）をカスタムの星マーク（⭐）に変更します。この変更により、視覚的な見た目が変わります。

サンプル2: 星評価のサイズ変更

add_filter( 'woocommerce_get_star_rating_html', 'custom_star_rating_size', 10, 2 );

function custom_star_rating_size( $rating_html, $rating ) {
    return '<span style="font-size: 24px;">' . $rating_html . '</span>';
}

このサンプルでは、星評価のサイズを24pxに変更します。これにより、星評価が目立つようになります。

サンプル3: 星評価にテキストを追加

add_filter( 'woocommerce_get_star_rating_html', 'add_text_to_star_rating', 10, 2 );

function add_text_to_star_rating( $rating_html, $rating ) {
    return $rating_html . ' (' . esc_html( $rating ) . ' votes)';
}

このサンプルコードでは、星評価の横に投票数を示すテキストを追加します。これにより、より具体的な情報が提供されます。

サンプル4: カスタムクラスを追加

add_filter( 'woocommerce_get_star_rating_html', 'add_custom_class_to_star_rating', 10, 2 );

function add_custom_class_to_star_rating( $rating_html, $rating ) {
    return str_replace('star-rating', 'star-rating custom-class', $rating_html);
}

このサンプルでは、星評価にカスタムクラスを追加します。このクラスを使って、CSSでのスタイリングを簡単に行えるようになります。

サンプル5: 星評価を消す条件を追加

add_filter( 'woocommerce_get_star_rating_html', 'conditionally_remove_star_rating', 10, 2 );

function conditionally_remove_star_rating( $rating_html, $rating ) {
    if ( $rating < 3 ) {
        return ''; // 星評価が3未満の場合は非表示にする
    }
    return $rating_html;
}

このサンプルコードでは、評価が3未満の場合に星評価を非表示にします。これにより、一定の基準を満たす商品だけが星評価を表示することになります。

概要

構文