子テーマ作成方法

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

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

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

Welcart Basic の子テーマの作り方

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

準備するもの

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

ファイル構成

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

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

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

/*
Theme Name: Welcart Basic Child
Description: Welcart Basic Child Theme
Author: Collne Inc
Template: welcart_basic
Version: 1.0.0
*/

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

• 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 Basic）の 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 Basic のみの場合】

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

【Welcart Basic 子テーマの場合】

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
  Welcart1.6 までのバージョンを利用している場合は、このフォルダ（wc_templates）内のテンプレートは全て必須となりますので、親テーマ（Welcart Basic）からコピーして子テーマに置いてください。
  Welcart1.7 以降を利用している場合は、編集したいテンプレートのみを子テーマにコピーするのがベストです。これにより親テーマの恩恵を最大限に継承することができます。

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

その他のファイル

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

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

• ウィジェットのタイトル横のアイコンについて
  Welcart をインストールした際に追加される専用ウィジェットには、タイトルアイコンを表示することが可能です。 テーマ内の images フォルダにアイコン画像があればそれを読み込む仕様になっていますので、オリジナルのアイコンに変更することが容易にできます。 子テーマ内に images フォルダが無い場合は、Welcart のデフォルトのアイコンが表示される仕様となっています。
  親テーマと同じアイコンを使用したい場合は、子テーマ内に images フォルダを作成し、親テーマ内にある images フォルダの中から使いたいアイコン画像をコピーしてきてください。