子テーマ作成方法

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

引用 子テーマ – WordPress Codex 日本語版

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

準備するもの

まずは、Welcart Mode テーマをダウンロードしてインストールしておいてください。
Welcart Mode テーマの購入はこちらから

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

ファイル構成

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

• 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 よりも先に読み込まれます。

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

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

  add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
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') );
}

  第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）のスタイルシートが同梱されています。購入した拡張プラグインを使用する際は、親テーマ内にある各拡張プラグイン専用のスタイルシートを子テーマにコピーしてください。

  /slide_showcase.css	拡張プラグイン「WCEX Slide Showcase」
  /wcex_olwidget.css	拡張プラグイン「WCEX Order List Widget」
  /wcex_widget_cart.css	拡張プラグイン「WCEX Widget Cart」
  /auto_delivery.css	拡張プラグイン「WCEX Auto Delivery」
  /wcex_sku_select.css	拡張プラグイン「WCEX SKU Select」
  /assets/css/favorite.css	拡張プラグイン「WCEX Favorites」