プラグインWooCommerceのwoocommerce_shop_loop_headerアクションの使用方法・解説

概要

woocommerce_shop_loop_header は、WooCommerce のショップループで商品リストを表示する際に呼び出されるアクションフックです。このフックは、商品一覧のヘッダー部分に特定の内容を挿入するために使用されます。これにより、ショップのカスタマイズや特定の機能を追加することが可能になります。

このアクションを用いて実装される機能には以下のようなものがあります：

カスタムフィルターやソートオプションの追加
ユーザーに特別なオファーやメッセージを表示
商品カテゴリやタグを表示
特定のコンテンツやバナーを表示
カスタムスタイルやスクリプトの追加
商品追加のためのイベントトラッキングや分析ツールの連携

このフックは、WooCommerce バージョン 2.1 以降で利用可能で、ワードプレスのバージョンは 4.0 以上を対象としています。

構文

do_action( 'woocommerce_shop_loop_header' );

パラメータ

このアクションにはパラメータはありません。

戻り値

このアクションは何も戻しません。

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

アクション	使用可能性
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_action( 'woocommerce_shop_loop_header', 'add_custom_title' );

function add_custom_title() {
    echo '<h2 class="custom-title">新着商品</h2>';
}

このサンプルコードは、ショップループのヘッダー部分に「新着商品」というカスタムタイトルを追加します。

サンプル2: メッセージを表示する

add_action( 'woocommerce_shop_loop_header', 'display_special_message' );

function display_special_message() {
    echo '<div class="special-message">今週のセールをお見逃しなく！</div>';
}

このサンプルコードでは、特別なメッセージをヘッダーに表示します。

サンプル3: 商品フィルターを追加する

add_action( 'woocommerce_shop_loop_header', 'add_product_filter' );

function add_product_filter() {
    echo '<select class="product-filter"><option>全ての商品</option><option>人気の商品</option></select>';
}

このサンプルは、商品フィルターのセレクトボックスを追加します。

サンプル4: バナーを表示する

add_action( 'woocommerce_shop_loop_header', 'display_banner' );

function display_banner() {
    echo '<div class="banner">今なら全品10%オフ！</div>';
}

このサンプルでは、ヘッダーにオファーバナーを表示します。

サンプル5: JavaScriptの読み込み

add_action( 'woocommerce_shop_loop_header', 'enqueue_custom_script' );

function enqueue_custom_script() {
    wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom.js' );
}

このサンプルコードは、特定のJavaScriptファイルをヘッダーに読み込むためのものです。

概要

構文