テーマをカスタマイズして子テーマをつくる方法

WordPressを利用して、サイトやブログを運営している方の中で、無料テーマをそのまま利用している方も多いかと思いますが、文字サイズやテキストカラーなど、ちょっとした見た目を少し調整したいなぁと思うと、多少なりともCSSやテンプレートファイルを自分でカスタマイズする必要があります。

そういった際は、親テーマを元に「子テーマ」というものを、各自で好きなように作っていけば良いのですが、“どうやって子テーマを作れば良いのかよくわからない！”と言うことで、今回は「子テーマ」をつくるにあたり、何をどうすれば良いの？という、はじめのところを見ていきたいと思います。

それではまず、デザインのベースとしたい自分の好きな無料テーマ、既存のテーマでも良いのでひとつ「親テーマ」となるものを選んでみましょう。

 

 

例として、こちらではわかりやすいように「TwentyFifteen」のテーマで見ていくことにします。

 

そもそも、「子テーマ」をあえて作らなくても、「テーマの編集」から編集したい「親テーマ」のファイルを書き換えていけば、そのままカスタマイズすることは可能ですが、実際のところは、このような管理画面内でファイルをいじるのは極力避けたほう良いでしょう。

 

記述ミスに気づかずに「ファイルの更新」をして管理画面にアクセス出来ない…、ページが表示されなくなってしまった…、どこを修正したか忘れてしまった…。などの可能性がありますので、FTPツールなどを利用して、元のファイルをローカル内にダウンロードし、修正を加えたら、必ずバックアップを取りながらアップロード更新していくのが無難です。

また、利用しているテーマ自体が、後々バージョンアップをする際などに、テーマ本体をそのままアップデートしてしまうと、独自でカスタマイズしたCSSファイルなどが上書きされてしまいます。そのためにカスタマイズ前のCSS（元の状態）に戻ってしまいフリダシに戻るという悲しい事態に陥らないように。というのが理由にもなります。

そこで、独自でカスタマイズしたファイルや箇所はそのまま引き継がせ、テーマ本体の方はアップデートさせるために、「子テーマ」というものを、別で作成し有効化・利用するという方法を取ることをオススメします。

それでは実際に「子テーマ」というものは、どういったものなのか？どのように用意すれば良いのか？に入っていきましょう。

 

親テーマってそもそも何のこと？

「親テーマ」とは、自分がデフォルトでデザインベースとして利用しようとしている、元のテーマのことを指します。今回の例で言えばは「TwentyFifteen」のことを指します。

 

では、子テーマとは？

親テーマを元に、各ファイルをカスタマイズして構造を変更したり、CSSを修正してデザインを変更したりする際に、基本的には「style.css」「function.php」等、または各ページ用のテンプレートPHP（single.phpやcontent.php）などを修正するための新たに作成するコピーテーマのようなものになります。今回の例で言うと「TwentyFifteen」から子テーマを作るので名前を「twentyfifteen_child」としておきます。

 

子テーマ用のフォルダを作成

子テーマ用のファイルを格納するためのフォルダ「twentyfifteen_child」を用意します。その中に、style.cssを新たに作成すると、子テーマのスタイルで指定した内容が親テーマに反映されるようになります。こうすることで親テーマをアップデートしても「twentyfifteen_child」の中にある「style.css」に変化はないので、そのまま同じスタイルが適用されるようになります。

 

 

子テーマを設定

まずは、子テーマ用のフォルダ「twentyfifteen_child」を「themes」フォルダの直下に配置します。つまり「twentyfifteen」と同じ階層に「twentyfifteen_child」フォルダを作成します。

 

 

子テーマにカスタマイズ用のスタイルシートを作成する

新たに作成した「twentyfifteen_child」の中に「style.css」を作成します。そしてその文頭に以下を記述します。

【Theme Name】は任意の名前を記述します。今回は「twentyfifteen_child」としています。そして【Template】は、必ず親テーマのフォルダ名「twentyfifteen」にします。これは「【Template】に指定したものが親テーマである」という宣言になるので、必ず記載する必要があります。

▼他にも作者など記載する項目があります。

このようにCSSの先頭に記述することで、WordPress本体に「子テーマ」を認識させることができるようになります。※大文字・小文字の記述間違いをしないように注意してください。

この記述の後ろに新たに指定したいスタイルを記述していきますが、その前に親テーマに元々あるCSSを読み込んでおきましょう。

下のように@importを指定して読み込めばいいでしょう。

この一行を記述しておけば、先に親テーマのCSSを読み込むことができます。そしてこれ以下に子テーマとしてのスタイルを追記していくことで、親テーマのスタイル内容を上書きしていくことになるので、一からCSSを定義していく必要はなく、変更したい箇所のみカスタマイズすればよくなります。

 

子テーマに各テンプレートを作成する

次に各テンプレートファイル（header.phpやfooter.php、single.phpなど）の設定についてですが、これらはカスタマイズしたいファイルのみ新規で作成し、子テーマ内のディレクトリに配置します。

例えば、「single.php」をカスタマイズしたい場合、親テーマの「single.php」の記述を全てコピーした新規の「single.php」を作成し、「子テーマ」のディレクトリ内に配置します。そしてCSS同様にカスタマイズしたい部分だけを、修正・変更・追記していきます。

 

子テーマにfunction.phpを作成する

そして「function.php」に関してですが、こちらだけ他のファイルとは違う性質があります。それは、親テーマの「function.php」を上書きするのではなく「子テーマのfunction.phpを読み込んだ後に、親テーマのfunction.phpを読み込む」という仕組みになっています。ちょっとややこしいですね。

よって、子テーマの「function.php」には、カスタマイズしたい箇所だけを記述するようにしましょう。しかしながら少し面倒なところは、同じ項目に対する記載が親テーマと子テーマで重複してしまった場合エラーになってしまうようです。よって、既存の親テーマで定義している処理を変更する場合には以下の２つの処理が必要になってきます。

 

1. 親テーマの変更したい箇所（関数）を削除する処理…remove
2. 上記に対して、変更内容を反映させた関数を新たに追加する処理…add

 

また、親テーマがアップデートされた場合には書き換えた箇所が消滅してしまいます。こういったことから、親テーマのfunctions.phpを変更した場合は、変更内容をメモしておくことをオススメします。

 

※注意すること

「functions.php」は、関数ファイルとしてテーマの機能を読み込むためのものになります。ここで気を付けなければいけないことは、サイト自体のファイルだけでなく、管理画面の機能追加等も含まれているので、コードの記述ミスなどをしてしまうと、ダッシュボード自体が表示されなくなってしまう可能性があります。万が一ダッシュボードが表示されないというトラブルに見舞われた場合は、このfunctions.phpへの記述ミスが考えられますので見直してみてください。

 

ダッシュボードでテーマから有効化してみる

ダッシュボードを確認してみるとテーマの中に「TwentyFifteen_Child」が追加されていると思います。そのまま「有効化」をしてみましょう。

先程の「@import」で親テーマのスタイルを読み込んでいない場合は、下のような図のように表示が崩れているかと思います。PHPファイルは親テーマを引き継いでいるのでページ自体は表示されますが、スタイルシートは空っぽの状態になります。

 

子テーマ用サムネイル画像を用意する

880×660pxのサムネイル画像を用意し「screenshot.png」という名前で、子テーマのディレクトリ内に配置すれば、管理画面の「外観」→「テーマ」一覧に表示されるようになります。

ここまでの一連の流れで、ひとまず「子テーマ」を作成することができました。

ここから各種テンプレートを自分で書き換えていくことで、子テーマとしての独自テーマがかたち作られていきます。

この後の細かな作業はまた別記事で書いていこうと思います。