XeoryBase カスタマイズ！初心者でも簡単にできる子テーマの作り方
バズ部が無料提供しているWordpressのテーマ「XeoryBase」のデザインがシンプルでゴテゴテしていないという理由で使っているけど、やっぱり好みによって装飾や機能などのカスタマイズは必要になってくる。
いくつかのカスタマイズを対応してしまったもんだから見て見ぬ振りをしてきたけど、今更ながらWordPressの子テーマという存在に立ち向かうことにした。
いろいろイジっちゃったしもういいかな、なんて思っちゃったけど、子テーマに関しては早くやっておいたほうがいい。というか最初にやるべきだった。
自分の好みでテーマをカスタマイズしたい人や子テーマが分からない人は、対応しないにしても存在は知っておいてもいいと思う。
ということで、現在使っているテーマ「XeoryBase」を子テーマにした。
子テーマにするのは簡単だった
最初に知ってもらいたいことは、子テーマを作るのがとんでもなく簡単だったということ。
初めて「子テーマ」という存在を知ったとき、ザックリとキーワードだけで内容を流し読みしたせいで、概念を勘違いしてめんどくさそうなイメージを持ってしまい、子テーマの対応をスルーしてしまった。
結果的に重い腰を上げて対応してみたら「なんだこれだけか」と、簡単に対応できた喜びと同時に早く対応しておけばよかったという後悔の念を抱いた。
子テーマってなんだ？
WordPressでいう子テーマというのは、ベースとなるテーマのカスタマイズした内容だけ管理するテーマのこと。
なんかいまいち簡潔に説明できないのがとんでもなく悔しい。
本来、テーマにはサイトやブログとして機能させるために必要となるファイルがいくつも存在していて、それらのファイルが揃っていることでひとつのテーマとして利用できる仕組みになっている。
そんなテーマに対して子テーマは、ベースとなるテーマからカスタマイズが必要となるファイルだけを用意して、あとはベースとなるテーマのファイルを参照することでテーマとして利用できるようになっている。ちなみに、子テーマが参照するベースとなるテーマのことを親テーマと称する。
子テーマのメリット
子テーマを利用することによるメリットを挙げるとすれば3つある。
- テーマのバージョンアップでカスタマイズした内容を失わない
- カスタマイズしたファイルが把握しやすい
- ファイルのバックアップになる
テーマのバージョンアップでカスタマイズした内容を失わない
テーマをカスタマイズする場合には、テーマに含まれているファイルを編集することになる。そんな環境で、利用しているテーマをバージョンアップすると、カスタマイズしたファイルが上書きされてしまい、カスタマイズのために自分で編集した内容を失ってしまうことになる。バックアップとか差分管理しておけばいいんだけどめんどくさい。
しかし、子テーマを利用することによって、カスタマイズした内容は親テーマとは別途管理することになるため、親テーマをバージョンアップしてもカスタマイズした内容を失うことがなくなる。
カスタマイズしたファイルが把握しやすい
テーマをカスタマイズした場合、たくさんあるファイルのどれが編集を加えたものなのか把握するのが容易ではなくなる。
しかし、子テーマを利用している場合、親テーマを参照しているとは言ってもあくまでもひとつのテーマとして独立しているため、子テーマに含まれているファイルがカスタマイズしたファイルということなので、テーマに対してカスタマイズしたファイルが把握しやすくなる。ほとんどのファイルに手を加えていたらこれはそれほどメリットではないかも。
ファイルのバックアップになる
テーマをカスタマイズするためにファイルを編集していて、間違った内容で編集してしまい、重要な内容を消してしまったなんてことも有り得る。
そんなときに、子テーマを利用している環境であれば、親テーマには元のファイルが残っているため、子テーマから間違って編集したファイルを消してしまえば、親テーマにある元のファイルが読み込まれるため、簡単に元の状態に戻すことができる環境になる。
子テーマの作り方
子テーマを作るためには、1つのフォルダと2つのファイルを作成するだけ。ファイルの内容もコピペするだけだから簡単に用意できる。
作成するもの
- フォルダ：xeory_base_child
- ファイル：style.css
- ファイル：functions.php
フォルダ「xeory_base_child」を作成する
まずは、自分のパソコン上で子テーマに必要なファイルを格納するフォルダを作る。フォルダの名前はなんでも構わないけど、分かりやすいように親テーマのフォルダ名に「_child」を加えた名称にすることが好ましい。
今回は「XeoryBase」の子テーマを作るからフォルダ名は「xeory_base_child」とする。
ここで作成したフォルダに、後述する内容で作成するファイルを入れていく。
ファイル「style.css」を作成する
下記の内容でファイル「style.css」を作成して、フォルダ「xeory_base_child」に保存する。
/*
Theme Name:xeory_base_child
Template:xeory_base
*/
この内容は、親テーマと子テーマを認識させるために、それぞれのフォルダ名を指定しているため間違わないように記述する。
- Theme Name： 子テーマのフォルダ名
- Template： 親テーマのフォルダ名
ファイル「functions.php」を作成する
下記の内容でファイル「functions.php」を作成して、フォルダ「xeory_base_child」に保存する。
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}
?>
この内容は、親テーマにある「style.css」を読み込んでから、子テーマにある「style.css」を読み込むという記述をしている。
子テーマを使えるようにする
子テーマに必要な準備が整ったら、あとはWordPressにアップロードしてテーマを有効化するだけ。WordPressにアップロードするには下記のうちやりやすい方法で対応すると良い。
- WordPress管理画面でテーマをアップロードする（初心者向け）
- FTPソフトでテーマをアップロードする
WordPressはCMSなんだから管理画面から対応できる前者の方法が、初心者向けで簡単だと思う。FTPソフトを使ってファイルを操作することが日常茶飯事だよという人は、後者の方が簡単かもしれない。
WordPress管理画面でテーマをアップロードする場合（初心者向け）
- 作成したフォルダ「xeory_base_child」を圧縮する
- WordPress管理画面から圧縮したファイルをテーマの新規追加でアップロードする
- テーマ「xeory_base_child」を有効化する
※圧縮したテーマファイルをアップロードする方法は省略。
FTPソフトでテーマをアップロードする場合
- FTPソフトでWordPressのテーマフォルダに作成したフォルダ「xeory_base_child」をアップロードする
- WordPress管理画面からテーマ「xeory_base_child」を有効化する
※FTPソフトでテーマをアップする方法は省略。
子テーマでカスタマイズする方法
編集方法
WordPressのテーマエディタを確認すると、アップロードしたファイルが表示されているのが確認できるから、管理画面にてそれぞれのファイルを編集する。
スタイルシートで装飾指定のカスタマイズであれば、ファイル「style.css」に追記することで反映される。
同様に、ファイル「function.php」も管理画面に表示されているから、ソースコードを追記することでカスタマイズできる。
最初にアップロードしたファイル以外のカスタマイズが必要な場合
最初にアップロードしたファイル「style.css」と「function.php」ではなく、例えば「index.php」や「archive.php」など、別のファイルをカスタマイズする必要がある場合には、FTPソフトを使う必要がある。
親テーマのフォルダから該当するファイルを子テーマのフォルダにコピーすることで、子テーマの管理下でファイルを編集することができるようになる。
親テーマから子テーマにファイルをコピーした場合、子テーマにあるファイルが優先して読み込まれるから、同じファイルが親テーマに存在していても問題ない。というか、この仕組みが子テーマにするメリットになるわけだ。
注意事項
子テーマを使用することで、親テーマのアップロードによってカスタマイズした内容が失うことがなくなったわけだけど、最初にアップロードした2つのファイル以外をカスタマイズした場合には、該当するファイルが更新された箇所を確認して反映しなくちゃいけない。
なんでそんなことが必要かというと、あくまでも最初に子テーマに設けた「style.css」と「function.php」に関しては、カスタマイズに必要な内容のみが記述されることになるのに対して、他のファイルの場合は内容をごそっと複写して一部を修正するため、どうしてもカスタマイズだけの内容ではなくなってしまう。
そのため、カスタマイズした内容によっては、親テーマのアップロードによる差分の反映が、結局めんどくさいんじゃないのかっていう問題がある。
差分を考慮するなら子テーマなんて必要ないという意見もあるようだけど、現時点では前述した子テーマのメリットを踏まえて対応するに至ったわけで、子テーマが必須ではないわけで、自分のやりやすい手段で管理してもらえばいいわけで。
