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

概要

woocommerce_before_shop_loop アクションは、WooCommerceのショップページでの商品ループが始まる前に実行されるフックです。このフックは、ショップページに特定のコンテンツや機能を追加する際に役立ちます。具体的には、次のような機能を実装する際によく使われます。

  1. カスタムフィルターや並び替えオプションの追加
  2. 特別なメッセージやプロモーションバナーの表示
  3. 商品カテゴリーの情報を表示
  4. カスタムスタイルやスクリプトの挿入
  5. 商品リスト前のナビゲーションメニューの表示
  6. ショッピングガイドのリンクや紹介文の追加

構文

add_action('woocommerce_before_shop_loop', 'your_custom_function');

パラメータ

このアクションは、標準的に追加されたパラメータはありません。カスタムフックを作成する場合は、必要に応じて引数を使用できます。

戻り値

このアクションは、何も戻り値を返しません。

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

WooCommerce 2.1以降で使用可能です。

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

WordPress 4.0以降での使用が推奨されます。

サンプルコード

サンプルコード1: カスタムバナーの追加

このコードは、ショップページの上部にカスタムバナーを表示します。

add_action('woocommerce_before_shop_loop', 'add_custom_banner');
function add_custom_banner() {
    echo '<div class="custom-banner">特別キャンペーン中!</div>';
}

サンプルコード2: 並び替えオプションの追加

このコードは、商品リストの上にカスタム並び替えオプションを追加します。

add_action('woocommerce_before_shop_loop', 'add_sorting_options');
function add_sorting_options() {
    echo '<div class="custom-sorting">並び替え: <select><option>新着</option><option>評価</option></select></div>';
}

サンプルコード3: カスタムスタイルの挿入

このコードは、ショップページに特定のスタイルを追加します。

add_action('woocommerce_before_shop_loop', 'add_custom_styles');
function add_custom_styles() {
    echo '<style>.shop-page { background-color: #f9f9f9; }</style>';
}

サンプルコード4: テキストメッセージの表示

このコードは、ショップページの上部に特定のテキストメッセージを追加します。

add_action('woocommerce_before_shop_loop', 'display_intro_text');
function display_intro_text() {
    echo '<h2>おすすめ商品をご覧ください</h2>';
}

サンプルコード5: 商品カテゴリー情報の表示

このコードは、ショップページの上部に現在のカテゴリー情報を表示します。

add_action('woocommerce_before_shop_loop', 'show_current_category');
function show_current_category() {
    if (is_product_category()) {
        echo '<h2>' . single_term_title('', true) . '</h2>';
    }
}

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

アクション 使用例
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

この関数について質問する


上の計算式の答えを入力してください