子テーマを作ってテーマのカスタマイズ　準備編

ワードプレスはテーマでデザイン（見た目）を設定してます。
基本となるテーマを設定した後、より好みに近づけるためにカスタマイズを行いますが、設定しているテーマの関連ファイルを直接触ってしまうと、そのテーマをバージョンアップした時に、カスタマイズした部分も上書きされてしまい、また１からカスタマイズ部分を修正していく必要がでてきます。

また、カスタマイズした部分を細かくメモってる人もなかなかいないでしょうし、バージョンアップの度に、同じ修正を繰り返すのも大変ですよね。そうした時のために、便利な方法があります。それが、【子テーマ】を作る方法です。

慣れないうちは、なんのこっちゃ？ですが、慣れてくると、最初に設定していくだけなので、難しく考えることなくできてきます。使うテーマが決まったなら、【子テーマ】を同時に作っていても良いかもしれません。

【子テーマ】を作るには、ちょっとしたポイントがあります。このサイトで使っているテーマを例に順を追って説明していきます。

子テーマ作成の流れ

1. 使っているテーマ一式をダウンロードする！
2. 親と同じテーマ名に【-child】をつけた、子テーマのフォルダを作る！
3. 子テーマ用style.cssを作る！
4. 子テーマをサーバーにアップする！
5. 子テーマを有効化する！

①使っているテーマ一式をダウンロードする！

手元にテーマファイル一式を持っているのなら、ダウンロードする必要はありませんが、管理画面の「テーマのインストール」からテーマを設定したのなら、サーバーにアップされているテーマファイル一式をダウンロードして下さい。

全部のファイルをダウンロードする必要は、実のところ無いのですが、バックアップのつもりでファイル一式を持っていてもＯＫだと思うので、ダウンロードしておきましょう。

②親と同じテーマ名に【-child】をつけた、子テーマのフォルダを作る！

このサイトは、「website」というテーマを使っていますので、以前は「website」という名前のテーマを使っていましたので、「website」というテーマを使っているという仮定で話を続けます。その名前を使って、『website-child』という子テーマ用フォルダを作ります。

実際は、子テーマの名前は何でも良いのですが、わかりやすくするために、親テーマの名前を継いでます。

今の段階では、このフォルダ内には、何もありません。
これで、準備完了！ここから、子テーマを作っていきますが、先にルールを知っておきましょう。

style.cssは、先に親テーマ内のstyle.cssを適用して、後から子テーマ内のstyle.cssが適用になるので、同じタグであっても、子テーマで指定されたものが有効になります。

function.phpは、子テーマ⇒親テーマとなるので、親テーマにある指定を子テーマに書いていても、親テーマで上書きされるので、指定されません。この辺はやり方があると思いますが、ちょっと難しくなるので、ここでは触れません。

③子テーマ用style.cssを作る！

ここから子テーマの作成に入ります。まず、style.cssから。親テーマとの関連を示すために、子テーマのstyle.cssに書いておくべきタグがあります。

最初の部分
/*
Theme Name: website-child
Template: website
Author: Panacee
*/
で、子テーマの名前や作成者を記載しています。

大事なのは、↓のタグです。
@import url("../website/style.css");

親テーマのstyle.cssを引きついでいることを記しています。
この1行が大事！絶対、忘れてはダメです。
あと、文字コードを【utf-8】にして下さい。

④子テーマをサーバーにアップする！

③で作ったstyle.cssを入れた【website-child】フォルダを、themesの中（親テーマ【website】と同じ階層）にアップします。まだ、何もカスタマイズ分のタグを書き入れてないですが、この状態のまま、とりあえず、子テーマとしてアップです。

⑤子テーマを有効化する！

管理画面に入って、外観 ⇒ テーマ を開くと、アップした子テーマがあります。
これを、【有効化】します。

表の画面を確認します。
あれ？設定していたのが元に戻っています。

でも、大丈夫！私が使っているテーマは、テーマオプションを持っているので、子テーマにすることで、設定が戻ってしまったようなので、再度設定しなおします。こうしたことからも、子テーマは、使うテーマを決めたら、早めに設定しておくことが大事かも。

これで準備完了！
さぁ、カスタマイズしてきましょう！

関連情報

2015/4/18追加
簡単に子テーマが作れるらしいプラグインを見つけました。試してないので、利用は自己責任で。⇒Child Themify