WordPressでサイトを制作する際、テーマテンプレートを利用することがほとんどだと思います。試しに『wordpress テーマ』で検索すると有償・無償のテーマが山ほど出てきます。
ただし、これらのテンプレートはいわゆるベースで、サイト制作する中でデザインや機能をカスタマイズしたくなることが多いと思います。
そんな時に利用するのが子テーマです。今回はWordPress子テーマの必要性と作り方をご紹介します。
そもそも子テーマって何？
子テーマは、親テーマと呼ばれる別のテーマの機能とスタイルを継承したテーマです。既存のテーマを変更する方法として、子テーマが推奨されています。
http://wpdocs.osdn.jp/子テーマ
Codexを引用しました。親テーマとは、テンプレートのテーマなど元々利用しているテーマのことです。
親テーマの機能とデザインをそのまま利用しつつ、自由にカスタマイズできるようにするのが子テーマの役割です。
『既存のテーマを変更する方法として、子テーマが推奨されています。』とありますが、まともな運用を考えているのならば、子テーマの利用は必須だと思います。
なぜ子テーマが必要なのか
・テーマを直接変更した場合、そのテーマがアップデートされると変更が失われるかもしれません。子テーマを使用すればテーマの変更は確実に保持されます。
・子テーマを使用することで開発時間を短縮できます。
・子テーマの使用することでWordPressのテーマの開発を良い形で学べます。
http://wpdocs.osdn.jp/子テーマ
またしてもCodexを引用しました。この中で一番重要なのは最初の項目 です。
『テーマを直接変更した場合、そのテーマがアップデートされると変更が失われるかもしれません。子テーマを使用すればテーマの変更は確実に保持されます。』
ちょっとわかりづらいので、以下を例に図解します。
子テーマを利用しない場合
利用しているテーマのデザイン修正や機能の拡張のために、style.cssやfunctions.phpをカスタマイズしたとします。
その後、利用しているテーマの新バージョンが公開されたので、バージョンを更新します。
すると、style.cssやfunctions.phpなどのファイルは新バージョンのファイルで上書きされますので、旧バージョンのファイルにせっかく加えたカスタマイズ部分は消えてしまいます。
カスタマイズ部分はバージョンアップによって消えてしまったので、新バージョンのstyle.cssやfunctions.phpを再度カスタマイズする必要があります。
テーマバージョンアップの度に同じカスタマイズ作業を繰り返すのは時間の無駄です。それどころか、バグの温床にもなりかねません。
子テーマを利用する場合
次に子テーマを利用した場合をご紹介します。
子テーマは親テーマの機能やデザインを引き継いでいるテーマです。デザイン修正や機能の拡張のためのカスタマイズは子テーマで行い、親テーマのファイルには触りません。
親テーマの新バージョンが公開され、バージョンアップして親テーマのファイルが更新されても親テーマのファイルは触っていないので問題ありません。子テーマで行ったカスタマイズは維持されており、消えてしまうことはありません。
これで、親テーマのバージョンアップの度に同じカスタマイズ作業を繰り返す必要は無くなります。
では、わざわざ子テーマなど作らずに、テーマの新バージョンが公開されても、バージョンを更新しなければ良いのではと思われるかも知れませんが、これはお勧めできません。
なぜならば、テーマの更新はセキュリティに関する更新も含まれているためです。
テーマにはプログラムも含まれているため、セキュリティホールが存在する可能性があります。悪意のあるユーザから、テーマのセキュリティホールを突いた攻撃を受けるかもしれません。
このようにセキュリティに関する更新を反映するためにも、テーマの新バージョンが公開された場合はバージョンを更新することをお勧めします。
子テーマ作成に必要なフォルダとファイル
次は具体的に子テーマを作成します。子テーマ作成には最低以下の3つのものが必要です。
- 子テーマ用フォルダ
- style.css
- functions.php
最低限これだけあれば、子テーマは作成できます。
「子テーマ用フォルダ」は子テーマのstyle.cssやfunctions.phpを格納しておくテーマフォルダです。style.cssはテーマ作成に必須のファイルです。また、functions.phpは親テーマを正しく継承するために利用します。
子テーマ用フォルダ
まずは子テーマ用のフォルダを作成します。今回は例としてTwenty Seventeenの子テーマを作成します。
wp-content/themesフォルダの下に「twentyseventeen-child」として新規フォルダを作成します。子テーマのフォルダ名には、フォルダ名の末尾に「-child」を付けることが推奨されています。子テーマで利用するファイルはこのフォルダに格納していきます。
style.css
次は、「twentyseventeen-child」フォルダの中にstyle.cssファイルを作成します。style.cssファイルには最低限以下を記載してください。
/* Theme Name: Twenty Seventeen Child Description: Twenty Seventeen Child Theme Template: twentyseventeen Author: gatta Version: 1.0.0 */
赤文字の箇所は、ご自身の情報で置き換えてくださいそれぞれの項目は以下の意味があります。
- Theme Name
- テーマの名称を記載します
- Description
- テーマの説明を記載します
- Template
- 親テーマのフォルダ名を指定してください
- Author
- テーマの作者を記載します
- Version
- テーマのバージョンを記載します
この中で、「Theme Name」と「Template」は子テーマとして作成する際、必須です。その他の項目はなくても大丈夫ですが、できる限り記載してください。
そして重要なことですが、@import: を使用して親テーマのスタイルシートをインポートする記載はしないでください。以前はこの方法で親テーマのスタイルシートを利用していましたが、親テーマのバージョンアップの際にキャッシュ（一時データ）が参照され、スタイルが崩れてしまう恐れがあります。
現在は、子テーマのfunctions.php内に親テーマ・子テーマのスタイルシート依存関係を設定してあげる方法が推奨されています。
functions.php
最後に「twentyseventeen-child」フォルダにfunctions.phpを作成し、親テーマ・子テーマのスタイルシート依存関係を設定します。
以下のコードをfunctions.phpに記載してください。
<?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の依存関係を設定しています。内容がわからない場合も上記コードをコピペするだけでも問題ありません。以下、実行される内容の解説です。
<?php
PHPの開始タグです。このタグ以降のコードをPHPとして実行します。
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
フロント画面を表示する際のCSSやJavascriptの実行順を設定します。ここではtheme_enqueue_styles関数を設定しています。theme_enqueue_styles関数で実行される処理は以下の2つです。
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
wp_enqueue_style関数でCSSの実行順を登録します。
get_template_directory_uri()は親テーマのURIを取得しますので、この処理は’parent-style’というハンドル名で、親テーマのstyle.css読み込みを設定しています。
wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
get_stylesheet_directory_uri()は子テーマのURIを取得します。また、第3引数にarray(‘parent-style’)を指定していますので、子テーマのstyle.css読み込みを親テーマのstyle.css読み込みの後に実行するよう設定しています。
これで、親テーマ・子テーマのスタイルシート依存関係の設定は完了です。
子テーマを有効化する
それでは作成した「子テーマ用フォルダ」「style.css」「functions.php」をWordPressを実行している環境にアップロードします。アップロードする場所はwp-content/themesフォルダの下です。
設定内容に問題がなければ、管理画面の「外観」>「テーマ」に今回追加したTwenty Seventeen Childテーマが追加されています。
このテーマを有効化して、サイトを表示してみるとTwenty Seventeenテーマと同じデザインの画面が開きます。子テーマの方はまだ何もカスタマイズしていないので、正しい表示です。
これで、親テーマのデザインや機能を引き継いだ子テーマの作成が完了しました。スタイルシートや機能のカスタマイズは子テーマのファイルで行うことで、親テーマのバージョンアップによりカスタマイズ内容が消えてしまうということは無くなります。
今回ご紹介したのは最低限の子テーマ作成方法です。さらに詳しい情報はCodexのページを参照ください。
