【重要】WordPressテンプレートのカスタマイズ前に・・・子テーマをつくってのカスタマイズ方法 -CSS篇-

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 とか、各種テンプレートファイルなどを子テーマを用いる事で上書きできます( functions.php を子テーマで利用する際はかなり注意が必要)。しかし、長くなるのでまた詳しくは別途まとめたいと思います(なんかこんな感じで「続く」ってのばかりたまって行く気がする・・・)。

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

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

【注意】子テーマ作成でトラブルが起きたら…子テーマをつくってのカスタマイズ方法 -functoins.php篇-
以前、子テーマの作成方法についてお伝えしましたが今回はその続きです(ずいぶん間が空いてしまいましたが・・・)。 ちなみに、この記事を理解するには、まず WordPress の子テーマについて理解して置く必要があります。子テーマについてはこちらの記事にまとめていますので、「子テーマって何!?」という場合は、まずこちらからチェックしてく...
スポンサーリンク
スポンサーリンク

コメント

  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. 匿名 より:

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

コメントをどうぞ

メールアドレスが公開されることはありません。