あなたのブログのデザインを決める「テーマ」が決定すると、次はそのテーマを使えるようにする必要があります。
通常であれば、このテーマをインストールしてデザインのカスタマイズをしていくことになりますが、カスタマイズをしていくうえで知っておく必要がある「子テーマ」について説明して、子テーマの作り方までを解説していきます。
このページの要点
ワードプレスのテーマの仕組み
ワードプレスにおけるテーマとは、デザインのテンプレートのことです。
そのテーマには、ページの生成に必要なプログラムファイルやCSSファイルがひとつのフォルダに集められて入っています。
テーマ構成ファイルの例
- header.php
- footer.php
- single.php
- functions.php
- style.css
など、ワードプレスの仕様で決まっているファイルの他、テーマ独自のファイルが収納されています。
ユーザーはこれらのファイルを編集して、ブログをカスタマイズしていくのが基本です。
親テーマを直接編集するのは危険
テーマはプラグインなどと同じく、不具合や機能追加などで更新プログラムが提供される可能性があるからです。
例えば、あなたがテーマ内の「style.css」を編集することで、ブログの色やデザインを変更することができますよね。
詳しい人ならPHPファイルをカスタマイズすることだってあります。
テーマのアップデートの適用は通常、テーマ全体を上書きすることで行われます。
そうすると、あなたが一生懸命カスタマイズした内容が消えてしまい、今までの努力がパーになってしまうことになります。
他にも、テーマファイルは多くのPHPプログラムが書かれているので、あなたが重要なファイルを編集したことでプログラム上のエラーが出ると、最悪の場合画面が真っ白に…なんてこともあり得ます。
あなたにプログラム知識があって、自分で問題を修正できたとしても、テーマファイルを直接編集するのにはリスクがあるのです。
子テーマとは？使うメリットは？
ワードプレスでは、テーマを直接カスタマイズするリスクを無くすために「子テーマ」という仕組みが用意されています。
子テーマとは、元のテーマを「親テーマ」として、親子関係の子供にあたるもののことをいいます。
通常、ワードプレスではテーマファイル内のデータによってページを生成していますが、子テーマが存在している場合は、「親テーマの内容を読み込んだあと、子テーマ内のファイルの内容を読み込んでからページを生成します。」
これによって、親テーマと子テーマでブログの同じ箇所を変更していたとしたら、後から読み込まれる子テーマの内容が優先して表示されます。
例えば、親テーマのCSSで「文字を赤色にする」と書かれていても、子テーマ内のCSSで「文字を青色にする」と書かれていれば、実際にブラウザに表示されるのは青文字となるイメージです。
子テーマのメリットは安全にカスタマイズできること
上図では、「A.php」と「B.css」というファイルを編集したいとき、子テーマ内にこのファイルをコピーして編集することで、「A'.PHP」と「B'.CSS」というようなイメージで使われます。
子テーマがなければページ生成に「A.php」と「B.css」が使用されますが、子テーマを利用している場合、「A.php」と「B.css」を読み込んだあと、「A'.php」と「B'.css」を後から読み込んでページを生成します。
これによって、あなたはテーマファイルを直接編集することがないので、親テーマがアップデートされて上書きされても、子テーマ内の「A'.php」と「B'.css」は残るので、あなたがカスタマイズした内容も守られるわけです。
子テーマを使うメリット
子テーマの入手方法
子テーマの入手には2通りの方法があります。
テーマ構成ファイルの例
- テーマ制作元から提供されている子テーマをダウンロードする おすすめ
- 子テーマを自作する
テーマ制作元から提供されている子テーマをダウンロードする方法
最近のテーマでは、親テーマの配布と合わせて基本的な子テーマを提供してくれているところがほとんどです。
例えば、無料テーマのCOCOONを例にとってみると、親テーマのダウンロードページと同じページ内に子テーマのダウンロードもできるようになっています。
ファイル名は次のようになっていて、それぞれをダウンロードすることで使うことができます。
- 親テーマ：cocoon-master-x.x.x.x.zip
- 子テーマ：cocoon-child-master-x.x.x.zip
（※ x.x.xはバージョンの数字が入ります）
子テーマを解凍して中身を見てみると、CSSファイルやfunctions.phpなどが入っています。
この中に無い部分をカスタマイズしたい場合には、親テーマの該当ファイルを子テーマのフォルダにコピーしてカスタマイズすることで利用できます。
子テーマを自作する方法
開発元が提供している子テーマを利用する方が安心して利用できますが、子テーマが提供されていない場合、子テーマを自作することもできます。
子テーマを作成するときのフォルダ名は、子供とわかるように「（親テーマ）-child」などとするのが一般的です。
子テーマを動作させるには、最低でも「style.css」と「functions.php」の２つのファイルが必要です。
style.cssには最低でも次の項目の記載が必要で、親子関係について教えてあげないと動作しません。
style.cssの中身
@charset "utf-8";
/*
Theme Name: 子テーマの名前（フォルダ名）
Template: 親テーマの名前（フォルダ名）
*/さらに、functions.phpでは、子テーマのcssなどを読み込むように次のようなコードが必要です。
style.cssの中身
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')
);
}ここで記載したコードはあくまでも最低限のコードです。
最近のテーマは多機能なものが多く複雑ですから、公式サイトで子テーマが用意されているのであれば素直に公式サイトから提供される子テーマを使用することをおすすめします。
子テーマのインストール方法
親テーマと子テーマは親子関係にあることはお伝えしたとおりです。
子テーマをインストールするには、先に親テーマがインストールされていないと認識されないので注意が必要です。
子テーマ自体のインストール方法は、通常の親テーマのインストール方法と全く同じです。
テーマのインストール方法がわからない人は、テーマインストール手順を参考にしてみてください。