Woocommerceの子テーマでのbody classの使用方法


  1. functions.phpファイルの編集: まず、Woocommerceの子テーマのfunctions.phpファイルを開きます。このファイルは、テーマのファンクション(機能)を定義するための場所です。

以下のコードをfunctions.phpファイルに追加します:

function mytheme_body_class($classes) {
    if (is_woocommerce()) {
        $classes[] = 'woocommerce-page'; // Woocommerceのページに適用されるクラス
    }
    return $classes;
}
add_filter('body_class', 'mytheme_body_class');

このコードは、body_classフィルターフックを使用して、カスタムのbody classを追加する関数を作成します。関数内のis_woocommerce()条件は、現在のページがWoocommerceのページであるかどうかを確認します。もしWoocommerceのページならば、'woocommerce-page'というクラスがbody要素に追加されます。

  1. CSSスタイルの適用: 上記のコードを追加した後、子テーマのスタイルシート(style.css)を開き、bodyのクラスに基づいて独自のスタイルを適用することができます。

以下は、例としてカートページのbody classに対してスタイルを適用するコードです:

body.woocommerce-page {
    /* ここに独自のスタイルを追加 */
}

この例では、カートページのbody要素に適用されるスタイルを指定しています。必要に応じて、他のWoocommerceページや特定のセクションに対しても同様にスタイルを指定することができます。

以上がWoocommerceの子テーマでbody classを使用する方法とコード例です。これにより、特定のページやセクションに独自のスタイルを適用することができます。