子テーマの作成方法

Welcart Mode テーマを親テーマとして、子テーマを作成して Welcart Mode をカスタマイズしましょう。

なぜ子テーマを使うのか？

• Welcart Mode テーマは今後も修正版がリリースされます。テーマを直接変更してしまった場合、アップグレードを行うとせっかくのカスタマイズが失われてしまいます。子テーマを作成してカスタマイズを行えば、Welcart Mode テーマを最新版に入れ替えてアップグレードすることができます。
• 子テーマを使用することで開発時間を短縮できます。
• 子テーマの作成は難しくありません。子テーマを使用することでWordPressのテーマの開発を良い形で学ぶことができます。

Welcart Mode の子テーマの作り方

ここでご説明する子テーマの作り方は、Welcart Mode を親テーマとした場合の作成方法です。

準備するもの

まずは、Welcart Mode テーマをダウンロードしてインストールしておいてください。

※また、基本の子テーマが購入ページよりダウンロード出来る様になりました。

ファイル構成

子テーマのファイル構成は以下のようになります。

• mode_child

• welcart_mode-child

子テーマのディレクトリ名です。自由に命名できますが、どのテーマの子テーマであるかが分かるようなディレクトリ名が良いかと思います。
このディレクトリの設置場所は、****/wp-content/themes/ （親テーマと同じ階層）となります。

• style.css

style.css は必須となります。冒頭に下記のコメントを入れて作成します。

/*
Theme Name: Welcart Mode Child
Description: Welcart Mode Child Theme
Author: Collne Inc
Template: welcart_mode
Version: 1.0
*/

ここで重要なのは、Template です。
Template には、親テーマのディレクトリ名を記載します。親は Welcart Mode ですので、ディレクトリ名は welcart_Mode となります。

• functions.php
  親テーマのstyle.cssを読み込む設定を行います。その他ユーザー関数などもこのファイルに記述することになります。
  このファイルは、親テーマの functions.php よりも先に読み込まれます。

function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

• usces_cart.css
  このファイルは、商品詳細ページ・メンバーページ・カートページ・商品複合検索結果一覧ページのスタイルシートです。このファイルは必須で、次のいずれかの方法でスタイルを読み込まなくてはいけません。
  
  【方法1】
  親テーマ（Welcart Mode）の usces_cart.css を子テーマにコピーする。
  
  【方法2】
  functions.php に以下の赤いコードを追加し、親テーマの usces_cart.css を読み込む。

function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'parent-cart', get_template_directory_uri() . '/usces_cart.css', array('parent-style', 'usces_default_css') );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

第3引数の array(‘parent-style’, ‘usces_default_css’) を指定しているのは、usces_cart.css よりも style.css を先に読み込ませるためです。usces_default_css と言うのは Welcart が出力しているもので、こちらも usces_cart.css の前に読み込まれます。スタイルシートの読み込み純は次の通りとなります。

【Welcart Mode のみの場合】

1. style.css
2. usces_default.css
3. usces_cart.css(テーマ内のスタイル)

【Welcart Mode 子テーマの場合】

1. style.css（親テーマ）
2. usces_default.css
3. usces_cart.css(親テーマ)
4. style.css（子テーマ）
5. usces_cart.css（子テーマ）

【方法1】、【方法2】どちらの方法でも構いませんが、親テーマの usces_cart.css を読み込み、変更したいところだけを子テーマの usces_cart.css に記述する【方法2】が、WordPress の style.css の扱いとほぼ同じ仕様となりますので扱いやすいかと思います。

• wc_templates
  編集したいテンプレートのみを子テーマにコピーするのがベストです。これにより親テーマの恩恵を最大限に継承することができます。

• 各種画像
  • assets/images/crystal ディレクトリ内の「default.png」は、商品画像未登録の商品画像として使用されます。内容（デザイン）を変更することが可能です。
  • images ディレクトリ内の上記にある画像は主に、Welcart専用ウィジェットで使用されます。内容（デザイン）を変更することが可能です。
  • 「screenshot.png」ファイルはWordPress管理画面のテーマでカバー画像として使用されます。内容（デザイン）を変更することが可能です。

以上の作業が完了したら
管理画面 ＞ 外観 ＞ テーマから作成した子テーマを有効化してください。

その他のファイル

• その他のテンプレート
  トップページの front-page.php や、カテゴリーページ category.php など編集したいテンプレートは、子テーマにコピーしてカスタマイズを行います。

• 拡張プラグインのスタイルシート
  親テーマ（Welcart Mode）には、各拡張プラグイン（WCEX）のスタイルシートが同梱されています。購入した拡張プラグインを使用する際は、親テーマ内にある各拡張プラグイン専用のスタイルシートを子テーマにコピーしてください。