【重要】WordPressテーマをカスタマイズするなら子テーマを作れ!

ちょっと前の話題になりますが、WordPress が 3.4 にバージョンアップしてまして、デフォルトで入っているテーマ、Twenty Eleven もバージョンアップしたようです。
で、Twenty Eleven を 1.4 へとバージョンアップしようと思ったのですが、なんか怪しい・・・。そう、今まで Twenty Eleven を直接いじっていたものだから、バージョンアップすると上書きされてカスタマイズした内容が全て消えてしまうのです。
じゃあバックアップ取ってから、アップグレードした後にスタイルシートだけもう一度上書きすればいいか〜とも思えるのですが、実はもっとスマートな方法があるようです。WordPress のテーマをカスタマイズする際は本来こうしておくのが定石、基本だという方法があるのです。
それが、

子テーマを作る

という方法。
これ、基本。常識だそうですね。。。今まで Twenty Eleven を直接いじってましたよ。バージョンアップなんてそんなにないだろうと高をくくっていましたからね。
ですが、今回みたいなアップグレードがある時にいちいち上書きされていたら修正が大変なので、効率的にも『子テーマ』を作った方がいいようです。なので、 Twenty Eleven のバージョンアップの前に、今らさらですが、子テーマへの引っ越し作業をしてみました。

子テーマの基本

まずは子テーマについて簡単にまとめておきます。
子があるのだから親があるわけですが、まず親テーマとはあなたがカスタマイズしたいテーマのことです。ここでは Twenty Eleven としておきましょう。
でもカスタマイズしたいといっても、テーマの 1 から 10 まで全て書き換えたいなんて思うことは少ないはずです。基本的には style.css と、functions.php と、あとページ用のテンプレートファイルが少々、、、といったところではないでしょうか?
そこで、自分が書き換えたいファイルだけを寄せ集めたテーマフォルダを新たにつくって、そこで親テーマの変更したいファイルだけを上書きしてしまおう、というのが子テーマです。
例えば、Twenty Eleven(フォルダ名 twentyeleven )の子テーマ、Child(フォルダ名 child )というのを作ります。そしてその子テーマフォルダの中に style.css というスタイルシートを作成すると、子テーマのスタイルで指定した内容が親テーマに反映されるというわけです。
カスタマイズした内容は、全て子テーマである Child の中にあるので、親テーマである Twenty Eleven をアップグレードして上書きしたとしても、カスタマイズした内容はびくともしないのです。子テーマを構成するファイルもカスタマイズに必要な分だけなので、すっきりして扱いやすくなります。
WordPressの親テーマと子テーマの関係
これらの変更は、スタイルシートだけではなく子テーマ内にあるファイルが優先的に反映され、functions.php や、header.php など、親テーマを一切いじらずに好きなようにカスタマイズすることができます。

子テーマの設定方法(とりあえずは CSS だけ)

では実際に子テーマを作る方法ですが、これがあっけないくらいに簡単でした(といっても、ちょっとだけつまづいてしまいましたけど……)。
まずは、子テーマ用のフォルダ(ディレクトリ)を用意しましょう。フォルダ名はなんでも構いませんが、ここでは【 child 】にしておきましょう。そしてこのフォルダは【 themes 】の直下に置きます。つまり親テーマである【 twentyeleven 】というフォルダと同じ階層ということです。
子テーマのフォルダを作成

子テーマ内にスタイルシートを作成する

そしてこの【 child 】の中に【 style.css 】を 1 つ作成しましょう。そして以下のようにスタイルシートに記述します。

とりあえず必須項目は上記の 2 点のみです。Theme Name は任意で付けてください。そして Template という部分は、必ず親テーマのフォルダ名(ディレクトリ名)にするようにしてください。Twenty Eleven を親テーマとする場合は【 twentyeleven 】です。
子テーマを認識させるための必須項目は  2 点ですが、他にも Author とか Description とか、色々書いても OK です。
子テーマのスタイルシートを作成

子テーマが表示されない場合、もしかすると・・・

これらの設定が済んだら、1 度 WordPress の管理画面(ダッシュボード)を見てみてください。外観のテーマ管理画面の中に、今作成した Child というテーマが表示されているはずです。
子テーマの確認
実は、素人すぎてここでちょっとつまづいてしまったポイントがありました。子テーマをアップしてもなかなか認識してくれなかったのですが、その原因はスペースの使い方でした。
子テーマの CSS にテーマの名前( Theme Name )とフォルダの指定( Template )をしたと思いますが、ここの Theme Name: と Child の間、Template: と twentyeleven の間が全角スペースになっていると、子テーマとして認識してくれませんでした(「親テーマが見つかりません」みたいなメッセージが……)。
全角のスペースを取っていた事が原因のようです。
他にも、Template: で指定すべきフォルダ名に大文字が混ざっていたりするのも、認識できない原因になります(正確には、大文字どうこうより、フォルダ名通りであること。つまり Twenty Eleven ではなく、twentyeleven というサーバー上のフォルダ名を指定すること!)。

子テーマを反映させる

さて、無事テーマ管理画面で子テーマとして作成したテーマが表示されていたら、子テーマを【 有効化 】してみましょう。無事子テーマが利用中になったはずです。
そしてブログを見てみると・・・
子テーマ反映後のブログ
なんと、レイアウトがめちゃくちゃです。
それもそのはず、PHP などのテンプレートファイルは親テーマのものをそのまま使っていますが、スタイルシート( style.css )に関しては、先ほど子テーマの中にファイルを用意しましたのでこちらが適用されています。
子テーマのスタイルシートには、まだ何も書き込んでいませんので、デザイン的な部分は簡素になってしまったわけです。

親テーマの CSS をとりあえず読み込む

スタイルシートは子テーマフォルダ内のものが適用されているわけですが、最初からスタイルを指定していくのは面倒です。ある程度は親テーマと同じスタイルを適用しておきたいはずです。
いちいち全部をコピペしてもいいのですが、以下のように書いておくと、親テーマのスタイルシートをインポートしてくれます。

ただ、ぼくの場合はもう既に親テーマのスタイルシートを結構いじっていましたので、全部コピペしました。
基本的には、上記のような @ から始まる記述を 1 行入れて親テーマをインポートし、カスタマイズしたい箇所の id や class を確認して指定しなおすと、子テーマのスタイルが適用されるようになります。
例えば、Twenty Eleven の場合、タイトルの文字に関して指定している id は【 #site-title a 】になりますので、子テーマのスタイルシートで【 #site-title a 】の文字色を赤に指定すると、タイトルの文字色が赤になるというわけです。

これで子テーマのスタイルシートが適用されるようにしておけば、親テーマの Twenty Eleven をバージョンアップしても大丈夫です。
他にも functions.php とか、各種テンプレートファイルの header.php や footer.php などを子テーマを用いる事で上書きできます。

ただし、子テーマフォルダ内に functions.php を作成する場合は注意が必要です。以下の記事を確認してください。

【注意】functoins.phpをWordPressの子テーマに追加する場合

あと、子テーマフォルダの中にイメージフォルダ( images など)も追加し、その中に画像をアップロードするようにしておくと、CSS で画像を指定する際にイメージフォルダ内の画像を相対パスで指定できるので、便利がいいと思います。

  • このエントリーをはてなブックマークに追加

コメント

  1. よす より:

    素晴らしい記事です。ほかのサイトには子テーマのテンプレートを適応することまで書いていませんでしたので、適用方法がわかりませんでした。非常に参考になりました。きめ細かく、すごく読む人の視点でかかれていてわかり易かったです。ありがとうございます。

    • ThePresentNote より:

      > よすさん
      コメント嬉しいです!
      でもなんだか恥ずかしいですね^^;
      ありがとうございます。

  2. kenichi より:

    大変参考になりました!ありがとうございます!!

  3. […] ワードプレスでブログやHPを作成する際には、テーマを編集して制作することになると思うのですが、制作を始める前に注意しておきたいことがあります。ワードプレスのテーマは公式テーマ含めバージョンアップされることがあります。バージョンアップされると編集したCSSファイルなどが全て消えてしまうので、再度バックアップを取ったものを上書きしなければいけません。そんな問題を子テーマの作成方法についてはこれ以上ないくらいに丁寧に解説されているサイトがありますので、こちらをご参照ください。 […]

  4. 匿名 より:

    わかりやす〜い!

  5. R より:

    こんにちは!
    子テーマの扱いについては、こちらのサイトが一番わかりやすかったです!!
    ところでご質問なのですが、私はimportをしても
    レイアウトがめちゃくちゃのままでした…。
    そしてなんと、親テーマ・ほかのテーマもレイアウトが適用されなくなってしまいました…。
    もし何かお分かりになることがあれば教えてください><
    (ちなみに他サイトで感化され、functions.phpも作成してしまったのですが
     表示の異変に気づき、削除しました。レイアウトがめちゃくちゃになったのが
     functions.php作成の前なのか後なのかはわかりません…。)

    • PresentNote より:

      Rさん
      お問い合わせありがとうございます。
      同様の状況になった経験がないので原因が分からないですが、
      キャッシュが残っているなどはないでしょうか?
      原因特定のために、一旦子テーマフォルダを全て削除してみたらどうなるでしょうか?
      またはプラグインを全て停止してみてどう変わるかを確認してみてください。

  6. マルコ より:

    こんにちは!
    大変解りやすい記事ありがとうございます♪
    現在、子テーマにてカスタマイズ中なのですが反映されるものと反映されないものが出てきてしまっていて、原因がわかりません。
    例えば、index.php single.phpは子テーマからカスタマイズ出来るのですが、desgin.cssとmobile.cssなどが親テーマでカスタマイズしないと反映されません。
    原因として考えられるものがあれば教えて頂けないでしょうか?
    エックスサーバー wordpress 賢威6.2 filezilla を使用しております。
    お手数ですがどうぞよろしくお願い致します。

    • PresentNote より:

      マルコさん
      ありがとうございます!
      親テーマと子テーマの階層は一致していますか?
      例えば親テーマが
      親テーマフォルダ
       ∟ css(フォルダ)
         ∟ desgin.css
      のようになっていませんか。
      この場合、子テーマにも同じように css という同一名称のフォルダを用意する必要があります。

  7. ky より:

    業者に作成依頼、バージョンアップをしてテーマが消えてしまったので対策をしていました。
    逆引きマニュアルをダウンロードさせて頂き、
    はじめて「子テーマ」について知りました。
    とてもわかりやすく説明頂きありがとうございました。

  8. 匿名 より:

    非常にわかりやすかったです。
    ブックマークさせていただきました。

  9. 匿名 より:

    パーミッションについて書かれていてとても助かりました。
    これをちゃんとしてないとスタイルシートが上手く適用されないので、
    注意が必要ですね。

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です