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

概要

woocommerce_before_subcategoryは、WooCommerceのカスタムカテゴリー一覧を表示する際に、各サブカテゴリーの前にフックされるアクションです。このフックを使用することで、サブカテゴリーが表示される直前に独自のHTMLマークアップやコンテンツを追加することができます。具体的には、以下のような機能を実装する際によく使われます。

サブカテゴリーごとのカスタムスタイリングの追加
特定の情報やバナーの挿入
サブカテゴリーの説明文の表示
レイアウトのカスタマイズ
アフィリエイトリンクやプロモーションの挿入
特設定のバッジやアイコンの表示

構文

do_action( 'woocommerce_before_subcategory', $category );

パラメータ

$category: サブカテゴリーの情報を持つオブジェクト。カテゴリーのIDや名前、リンクなどのプロパティが含まれています。

戻り値

このアクションは戻り値を持ちません。

使用可能なバージョン

WooCommerce バージョン: 2.0.0以降で利用可能
WordPress バージョン: 4.0以降で利用可能

サンプルコード

以下に、woocommerce_before_subcategoryアクションを利用した5つのサンプルコードを示します。

サンプルコード1: カテゴリー名の前にカスタムメッセージを追加

add_action( 'woocommerce_before_subcategory', 'custom_before_subcategory_message', 10, 1 );
function custom_before_subcategory_message( $category ) {
    echo '<p>こちらはカテゴリ: ' . esc_html( $category->name ) . ' のセクションです。</p>';
}

このサンプルコードは、各サブカテゴリーの前にそのサブカテゴリー名を含んだカスタムメッセージを表示します。

サンプルコード2: カテゴリーの画像を表示

add_action( 'woocommerce_before_subcategory', 'display_category_image', 10, 1 );
function display_category_image( $category ) {
    if ( ! empty( $category->thumbnail_id ) ) {
        $image_url = wp_get_attachment_url( $category->thumbnail_id );
        echo '<img src="' . esc_url( $image_url ) . '" alt="' . esc_attr( $category->name ) . '">';
    }
}

このサンプルコードは、サブカテゴリーの画像が設定されている場合、その画像を表示します。

サンプルコード3: 特定の条件に基づくバッジの追加

add_action( 'woocommerce_before_subcategory', 'add_custom_badge', 10, 1 );
function add_custom_badge( $category ) {
    if ( $category->slug === 'special-category' ) {
        echo '<span class="custom-badge">おすすめ</span>';
    }
}

このサンプルコードは、特定のスラッグを持つサブカテゴリーに「おすすめ」のバッジを表示します。

サンプルコード4: カスタムCSSクラスの追加

add_action( 'woocommerce_before_subcategory', 'add_custom_css_class', 10, 1 );
function add_custom_css_class( $category ) {
    echo '<div class="custom-class-category">' . esc_html( $category->name ) . '</div>';
}

このサンプルコードは、各サブカテゴリーの名前をカスタムCSSクラスでラップして表示します。

サンプルコード5: プロモーションリンクの挿入

add_action( 'woocommerce_before_subcategory', 'insert_promotion_link', 10, 1 );
function insert_promotion_link( $category ) {
    echo '<a href="https://example.com/promotion" class="promo-link">今すぐプロモーションをチェック！</a>';
}

このサンプルコードは、各サブカテゴリーの前にプロモーションリンクを表示します。

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

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

概要

構文