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

概要

woocommerce_before_main_contentアクションは、WooCommerceプラグインにおいて、メインコンテンツが出力される前に特定の機能をフックするために使用されます。このアクションは、オンラインショップのページ、カート、チェックアウト、商品一覧などのコンテンツの開始地点にフックを追加するためによく利用されます。

このアクションでよく使われる機能には以下のようなものがあります：

ページタイトルの変更
サイドバーウィジェットの表示
ページ説明文の追加
バナーやプロモーションメッセージの表示
ナビゲーションメニューのカスタマイズ
カスタムHTMLの追加

構文

do_action('woocommerce_before_main_content');

パラメータ

なし

戻り値

なし

対応するプラグインおよびワードプレスのバージョン

WooCommerceのバージョン: 5.0.0 以降
WordPressのバージョン: 5.0.0 以降

サンプルコード

サンプルコード1: ページタイトルの変更

このサンプルコードは、woocommerce_before_main_contentアクションを使用して、ページタイトルをカスタムタイトルに変更します。

add_action('woocommerce_before_main_content', 'custom_page_title');

function custom_page_title() {
    echo '<h1>特別セール中！</h1>';
}

引用元のページ: https://wordpress.org/support/article/wordpress-hooks/

サンプルコード2: 割引バナーの追加

このサンプルコードは、ページの上部に割引を知らせるバナーを追加します。

add_action('woocommerce_before_main_content', 'add_discount_banner');

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

引用元のページ: https://woocommerce.com/document/introduction-to-hooks/

サンプルコード3: ナビゲーションメニューのカスタマイズ

このサンプルコードは、woocommerce_before_main_contentアクションを利用して、カスタムナビゲーションメニューを追加します。

add_action('woocommerce_before_main_content', 'custom_navigation_menu');

function custom_navigation_menu() {
    wp_nav_menu(array('theme_location' => 'custom-menu'));
}

引用元のページ: https://developer.wordpress.org/themes/functionality/navigation-menus/

サンプルコード4: 各種ウィジェットの表示

このサンプルコードでは、特定のウィジェットエリアを表示するために、woocommerce_before_main_contentアクションを使用します。

add_action('woocommerce_before_main_content', 'show_sidebar_widgets');

function show_sidebar_widgets() {
    if (is_active_sidebar('sidebar-1')) {
        dynamic_sidebar('sidebar-1');
    }
}

引用元のページ: https://developer.wordpress.org/themes/functionality/sidebars/

サンプルコード5: カスタムHTMLの追加

このサンプルコードでは、オンラインショップのページにカスタムHTMLコンテンツを追加します。

add_action('woocommerce_before_main_content', 'add_custom_html');

function add_custom_html() {
    echo '<div class="custom-html">新商品の情報はこちら！</div>';
}

引用元のページ: https://developer.wordpress.org/themes/basics/including-css-javascript/

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

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

概要

構文