WordPressの子テーマの作り方

スポンサーリンク

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

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

もくじ

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

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

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

テーマの更新

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

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

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

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

2. 子テーマの準備

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

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

  • wordpressフォルダ
    • wp-content
      • languages
      • plugins
      • themes ←これを開く
      • upgrade
      • uploads
      • index.php

ここに、子テーマのフォルダをつくります。名前は自由ですが、それが子テーマであると自分でわかるように、親テーマが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 NameTemplateは、以下のように記述します。

Theme Name 子テーマ名(任意)
Template 親テーマのフォルダ名

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

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

子テーマ内のstyle.css

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

この時点では子テーマフォルダ内には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の理解には、以下の参考書がお勧めです(残念ながら、私が好きなエビスコム本では、子テーマについては解説がありません・・・)。

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

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

5 Responses to “WordPressの子テーマの作り方”

  1. けいこ より:

    質問です。
    こちらのテーマblancをダウンロードさせていただき、
    子テーマを作るまではしました。
    まだデザイン的なカスタマイズは一切していません。

    が、子テーマを有効化すると
    商品ページやカート、メンバーページが、何故かデフォルトのWPのデザインになってしまうのです…
    これはなぜなんでしょうか?
    私が何か変なことをしてしまったんでしょうか…

    • まめ子(管理人) より:

      このところ非常に多忙な為返信が遅れ申し訳ございません。テーマに関するご質問は、申し訳ないのですが対応致しておりません(テーマそのものに関係ない質問メールなども多く、当初は返信も行っておりましたが、きりがない上に疲弊してしまいました・・・)。是非ご自身でスキルアップを目指しながらカスタマイズにチャレンジして頂ければ有難く存じます。

  2. けいこ より:

    私の質問がお気に触られたようですね。
    申し訳ありません。

    他記事で書かれている通り、
    こちらのテーマではなく、
    フォローもしてくださる有料テーマを購入して使用することにします。

  3. 竹内 より:

    参考にさせて頂きました。ありがとうございます。一点、表記ミスを確認しましたので、ここに記させて頂きます。まめ子様が記されたStyle.css例:

    @import url(‘../twentyforteen/style.css’); /*親テーマのスタイルシートを読み込み*/

    私も、これをコピペしてwpダッシュボードからインストールして活用しようとしたのですが、何度やっても『ファイルが壊れています。。。』の表示が出て困りにコマっておりました。そこで、自分で試行錯誤して書籍の参考書を眺めながら、初めから打ち込んでみましたところ。。。

    なんと、@import url(‘../twentyforteen/style.css’); 
    のtwentyfourteen/の記載間違いに気づきました!
    『for』か『four』の違いですね。。。(笑)

    いづれにしましても、まめ子様がきっかけでここまでたどり着けました。ご多忙でしょうが、ぜひこれからもwpに関する(特にtwentyfourteenであれば私は嬉しいですが。。。笑)知見をこのページよりご教示頂けましたら非常に幸いに存じます。

    • まめ子(管理人) より:

      あらまあ、本当ですね!ご迷惑をお掛けしてすみません~今すぐ直しますッ!ご指摘有難うございました。
      このところなかなかブログを更新出来ておりませんが、日々勉強しながらまた気付きがありましたらシェアさせて頂きたいと存じます。

Copyright© 2017 Welcart カスタマイズ ブログ All Rights Reserved.