WooCommerce子テーマ開発チュートリアル：WooCommerceストア外観のカスタマイズ

WooCommerceは、すべてのウェブサイト運営者にEコマース・プラットフォームを構築する自由を与え、ブランドのトーンにマッチしたインターフェースと機能をデザインし、WooCommerceを使用することができます。サブテーマ非常に実用的な方法だ。サブテーマスタイルを自由にカスタマイズでき、テーマが更新されてもすべての変更が保持されます。この記事では、WooCommerceの子テーマの作成から適用まで、ステップバイステップで実際に操作していきます。

サブトピックとは何か？

子テーマはメイン（親）テーマをベースにした拡張機能で、メインテーマのすべての機能を継承し、コード、スタイル、テンプレートファイルを追加または変更することができます。このように、親テーマはあなたが行ったカスタマイズに影響を与えることなく更新されます。

例えるなら、親テーマは出来合いの家のようなもので、子テーマは自分のスタイルに近づけるために模様替えする家のようなものだ。

WooCommerce子テーマの作成手順

ステップ1：サブフォルダーの作成

ワードプレス /wp-content/themes/ ディレクトリに、例えば次のような新しいフォルダを作成する。 マイ・ウーコマース・チャイルド.このフォルダがあなたの子テーマの場所です。

ステップ2：スタイルシートファイルstyle.cssの追加

子テーマフォルダに、新しい スタイル.css 書類

を追加する：

/* テーマ名：My WooCommerce Child
テーマ名: My WooCommerce Child
テンプレート: storefront
バージョン: 1.0
*/

その中には テンプレート は、現在使用している親テーマのフォルダ名と一致する必要があります（例えば、Storefrontテーマを使用している場合は、次のように記述します）。 店先).

ステップ3： functions.phpファイルを追加する

親テーマのスタイルを適切に読み込むためには functions.php ファイルに以下のコードを追加してください：

<?php
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' )；
関数 my_child_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' )；
}

これでサブテーマの基本構造は完成した。

サブテーマの活性化

作成後、ログインするワードプレスバックエンドで「外観 > テーマ」を選択すると、「My WooCommerce Child」というテーマが表示されます。をクリックして子テーマを有効にします。

子テーマが正しく設定されていれば、サイトはまったく変わりませんが、これからは親テーマが更新されて上書きされる心配をすることなく、自由にコードを変更することができます。

実践1：カスタム商品ページのスタイル

WooCommerce商品ページのデフォルトレイアウトは、あなたのブランディングスタイルにマッチしないかもしれません。親テーマの コンテンツ-単一製品.php ファイルを、例えば子テーマの対応する場所にコピーする：

/my-woocommerce-child/woocommerce/single-product/content-single-product.php

では、自由に修正してください。 HTML WooCommerceは親テーマのオリジナルバージョンよりも子テーマのこのファイルを優先的に読み込みます。

練習2：色とフォントスタイルの変更

サブトピックの スタイル.css ファイルにカスタムCSS。色、間隔、フォントなどの視覚効果をすばやく調整できます。

.woocommerce .product .price {.
  color: #e60023；
  color: #e60023; font-size: 18px；
}

このような修正は安全かつ簡単に行うことができ、ショップ全体のインターフェイスをブランドのエスプリに沿ったものにすることができる。

実践3：機能モジュールを追加する

スタイルの微調整に加えて、子テーマの functions.php ファイルに小さな機能を追加する。例えば、各商品タイトルの後に「Hot」タグを表示する：

add_filter( 'the_title', 'add_hot_label_to_product_title', 10, 2 );
function add_hot_label_to_product_title( $title, $id ) {
    if ( get_post_type( $id ) === 'product' ) {
        $title .= ' 🔥热销';
    }
    return $title;
}

このようなコードで、商品タイトルをより魅力的にすることができる。

サブテーマ開発に関する考察

テンプレートを変更する際は、WooCommerceのファイル構造を統一してください。
あまり多くのWooCommerceテンプレートファイルを子テーマにコピーすることはお勧めしません。
各変更の前に覚えておくことバックアップ操作ミスを避けるため
Gitのようなバージョン管理ツールを使ってサブトピックのコンテンツを管理することは、開発を効率化する素晴らしい方法だ。

概要

サブテーマは「WooCommerceのカスタマイズショップ外観最も信頼できる方法です。親テーマを更新する自由を保ちながら、ページ構造を変更したり、スタイルを制御したり、機能を拡張したりする余地を与えてくれる。基本構造をマスターし、CSSと PHPシンプルなデザインニーズでも、WooCommerceショップに個性的でプロフェッショナルな外観を与えることができます。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み