Welcart カスタマイズ ブログ

WordPressの子テーマの作り方

• ツイート
• B! ブックマーク
• Google+
•  Pocket
• Facebook

Welcart対応テーマがWordPress.orgの公式ディレクトリに公開されてから、「子テーマ」のキーワードでサイト内検索をされている方が増えている模様。

そこで今回はご希望に応えて（？）、WordPressの子テーマの作り方を解説しようと思います。

もくじ

1. なぜ子テーマを使うのか
2. 子テーマの準備
3. 子テーマを適用する
4. Welcart対応テーマを親テーマとして使う場合
5. まとめ

1. なぜ子テーマを使うのか

WordPress.orgからテーマをダウンロードして使う際、自分で背景色や文字の大きさを変えたりしたい場合があります。直接ダウンロードしたテーマを編集してもいいのですが、テーマの更新があった時に、自動で上書きされてしまいます。

テーマの更新画面。「テーマに加えたカスタマイズがすべて失われます」の注意書きが。

そこで、ダウンロードしたテーマを親とする「子テーマ」を準備して、その子テーマ内でカスタマイズしたい内容だけを記述しておくことで、「大部分は親テーマを適用、変更したい部分だけ子テーマを適用」というように読み込むことが出来ます。

そうすると、親テーマの更新があったとしても子テーマはそのままですから、デザインの変更などについてアップデートの影響を受けずに済むことが出来るわけです。

子テーマに関しては、以下のサイトにも目を通しておくことをお勧めします。

2. 子テーマの準備

2-1. 子テーマのフォルダを作成

まずはWordPressのテーマフォルダを開きます。親とするべきテーマのフォルダがある階層です。普通はWordPressフォルダ内の以下の場所にあります。

ここに、子テーマのフォルダをつくります。名前は自由ですが、それが子テーマであると自分でわかるように、親テーマがTwenty Fourteenであれば、「twentyfourteen-child」という風にすればいいでしょう。

wp-content/themes/ ディレクトリフォルダ内

2-2. style.cssを作成

子テーマに必須とされるのは、style.cssのみです。他のファイルは必要に応じて任意となります。

テキストエディタを開いて、以下を記述。style.cssと名前をつけ、子テーマフォルダ内に保存します。（11/7更新：コードにスペルミスがあり修正。）

/*
Theme Name: Twenty Fourteen child
Template: twentyfourteen
*/
@charset "UTF-8";
@import url('../twentyfourteen/style.css'); /*親テーマのスタイルシートを読み込み*/

Theme NameとTemplateは、以下のように記述します。

子テーマ名は任意ですが、親テーマ名は必ず親テーマのフォルダ名（注意：テーマ名ではない）にします。

この子テーマのスタイルシートでは、@importで親テーマのスタイルを読み込みます。それ以降の行で、自分がカスタマイズしたいスタイルを追加して記述すれば、上書きされる形で子テーマのスタイルが適用される仕組みです。

子テーマフォルダ内のファイル

この時点では子テーマフォルダ内にはstyle.cssだけですが、これで準備は完了です。

3. 子テーマを適用する

3-1. 子テーマを適用

ダッシュボードから［外観］＞［テーマ］と進むと、先ほど作った子テーマがあるはずです。

それを選んで「有効化」をクリックすれば、子テーマが適用されます。

もしここで「このテーマは壊れています」な注意書きが出ていたら、親テーマをきちんと認識出来ていません。Template: の親テーマのフォルダ名が適切なものになっているか、確認しましょう。

子テーマ適用後、一回サイトを見てみて下さい。何も作りこんでいない子テーマを適用しても、デザインやテンプレートは親テーマのスタイルを踏襲していますので、何も問題がないことがわかると思います。

3-2. あとは子テーマをカスタマイズ

子テーマが問題なく親テーマを引き継いでいることがわかれば、あとは子テーマにカスタマイズを自由に加えていくだけです。

色やデザイン関係の変更については、基本的には子テーマのstyle.cssに追加する形で書き込んでいけばOK。

例えば、リンクテキストの文字色を赤に変えたい場合は、以下を記述します。

a{
 color: #f00;
}

テンプレートを子テーマに設置

single.phpやarchive.php等などのテンプレートも、子テーマ内に用意したものが優先されます。親テーマにないテンプレートを設置することも可能です。

子テーマ内にテンプレートを設置する場合は、親テーマの更新があった際に変更箇所がないかチェックするようにしましょう。

functions.phpは例外で、親テーマ・子テーマの両方のファイルが読み込まれます。従って、functions.phpにコードを記述するカスタマイズの場合は、子テーマにfunctions.phpを作成し、追加したいコードだけを書き込みます。

4. Welcart対応テーマを親テーマとして使う場合

拙作Welcart用のテーマBlancなどを親テーマとして使う場合、以下のWelcart用ファイルは子テーマに継承されません。

• wc_templatesフォルダとフォルダ内のすべてのファイル：商品ページやカートページのテンプレート集
• usces_cart.css：Welcart専用のスタイルシート

これらは使用中のテーマに設置することで、Welcartプラグインフォルダ内のデフォルトテンプレートに変わって優先して読み込まれるものです。

子テーマをただ作っただけではこれらのフォルダ・ファイルをWelcartは認識してくれないようです。※Welcart開発元の（株）コルネさんには要望済み。

そこで、それらを親テーマからコピーして子テーマに設置するか、子テーマのfunctions.phpにこれらのファイルを読み込ませる命令を書くか？（未検証。実現できるのかは？）する必要があります。

5. まとめ

子テーマはいくつでも作れますので、一旦作り方さえわかれば、着せ替え感覚で「季節によって色を変える」といったようなことも簡単に出来ます。

WordPressのテーマを、たとえデザインだけでもカスタマイズしたいのであれば、最低限の勉強は必要になってきます。子テーマを含んだWordPressの理解には、以下の参考書がお勧めです（残念ながら、私が好きなエビスコム本では、子テーマについては解説がありません・・・）。

• 基礎からのWordPress (BASIC LESSON For Web Engineers)
• 小さな会社のWordPressサイト制作・運営ガイド (Small Business Support)

これらの本には、子テーマについても詳しく解説があります。

そもそも「フォントや色を変えたいけれど、何をどうすればいいのかまるで見当がつかない」人は、HTMLとCSSの勉強から入りましょう。

• テーマ制作

• ツイート
• B! ブックマーク
• Google+
•  Pocket
• Facebook