こんにちは。
川口でWordPress専門でホームページを制作しいるテダスクのSeitoです！
今回はWordPressのテーマの仕組みの一つの子テーマの作り方について説明したいと思います。
この子テーマというのは、本来は必要ないのですが、こう言った場合に子テーマが必要になってきます。
- テーマに機能を追加するとき
- テンプレートをカスタマイズしたいとき
- Googleタグマネージャーなどコードを組み込みたいとき
- エディタ用のCSSを組み込みたいとき
などです。
上記をまとめるとテーマをカスタマイズするときということになります。
では何故、カスタマイズする場合子テーマが必要かという話ですが、WordPressのテーマというのはWordPressの更新だったり、テーマの機能追加やバグ修正のためにテーマ自体の更新が出てきます。
その時に、もし親テーマでカスタマイズを入れていた場合、テーマ更新の際に一旦全てファイルを消して新しいテーマを反映するという動きをするため、今まで行ったカスタマイズが全て消えてしまいます。
そのため、子テーマという仕組みがあり、親テーマが更新したとしても子テーマで用意したファイルは特に変更されませんので、親テーマだけ最新で子テーマで用意したファイルはそのままという事になり、再度カスタマイズの手間が省けるわけです。
私が実際お客様の子テーマを作る時のほとんどが、トップページだけオリジナルにしたいという場合とGoogleタグマネージャーを導入したいという大きく２つです。
ですので、同様にテンプレートにどうしても手を加えなければいけない場合は子テーマを作って、インストールするようにしましょう。
子テーマの仕組み
まず、子テーマの仕組みについて簡単に説明します。
子テーマというのは、親テーマのテンプレートに対して、優先的に子テーマで用意したテンプレートを読ませるという動きをします。
例えば、子テーマにWordPressの基本的テンプレートのheader.phpというファイルを入れたとして、子テーマを有効化した場合子テーマのheader.phpが優先的に読まれます。
そして、子テーマに存在しないテンプレートは親テーマから読み込むという仕組みです。
なので、カスタマイズで必要なファイルだけ子テーマに入れておくというのが一般的な使い方です。
ただし、CSSだけはちょっと仕組みが違います。
phpファイルについては、子テーマが優先的に読まれて親テーマの同名のphpファイルは読まれませんが、cssファイルの場合は、追加になります。
親テーマのcssを読んだ上で、次に子テーマのcssが読み込まれるので、もし同じクラス名やIDがあれば、後に読み込まれる子テーマのCSSのスタイルが優先される仕組みです。
親テーマのcssが読み込まれないというわけではないので、注意してください。
子テーマに最低限必要なファイル
さて、早速子テーマについて説明していきます。
子テーマに必要なファイルは
- functions.php
- style.css
の二つです。
この二つのファイルを半角英数字で名前を付けたフォルダに入れて準備します。
各ファイルの記述内容
ファイルを用意したところで、それぞれのファイルにはフォーマットに沿ってコードを記述します。
functions.php
<?php
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')
);
}
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');functions.phpの中身は、決まり文句のようなものでこのまま使って大丈夫です。
もし、この他に例えば別のCSSを読み込みたいとか、Googleフォントを読み込みたいとなった場合は、wp_enque_styleというメソッドを新しく作って、規則に沿ってURLを適宜入れれば子テーマで反映されます。
style.css
@charset "UTF-8"; /*! Theme Name:Twenty Twenty-One Child Template:twentytwentyone（親テーマのフォルダ名を書く） */
「Theme Name:」には好きなテーマ名を記述します。
ここでは、Twenty Twenty-Oneを親テーマにする想定で、Twenty Twenty-One Childという名前を付けました。
「Template:」は親テーマとしてインストールされているフォルダ名（ディレクトリ名）を入力して、この親テーマの子テーマである事をここで明記します。（かっこの中の親テーマのフォルダ名を書く）は消して下さいね！
この親テーマのディレクトリ名につていは、サーバーで確認しないと分からないのですが、もしこのテーマファイルを公式サイトなどからダウンロード出来る場合は、zipファイルを解凍したときに出てくるフォルダの名前がそれになるので、サーバにアクセスしなくても調べられますね。
例えばTwenty Twenty-Oneの場合は
Googleで検索するとテーマの詳細ページが表示されます。
ページを開いたら、「ダウンロード」をクリックしてテーマのZipファイルをダウンロードします。
その後zipファイルを解凍すると、フォルダが表示されます。
「twentytwentyone」となっていますよね。これがテーマのフォル名なので、先程の「Template:」にはこのtwentytwentyoneを記述することになります。
style.cssの中身については、何も書かなくて良いですし、もし子テーマ用にStyleを作る場合は追記すればCSSが追加される形で反映されます。
もしカスタマイズしたいテンプレートがある場合
もしカスタマイズしたいテンプレートがある場合は、一緒にフォルダにいれます。
今回は、例としてタグマネージャーを導入するという想定で実際に作業してみます。
子テーマ用のフォルダを作って、先程の最低限必要なファイルを入れます。
ファイルの中身は先程の記述例の通りです。
タグマネージャーを仕込むために親テーマのファイルの中のheader.phpをコピーします。
子テーマ用のフォルダにコピーしたheader.phpを貼り付けます。
コピーしたheader.phpにタグマネージャー用のコードを貼り付けます。
タグマネージャーの導入については別途記事にしますので詳細はここでは省略します。
準備が揃ったらzipファイルにします。
この画像だと分かりにくいですが、下段の二つが、子テーマ用のフォルダで右側が子テーマ用のzipファイルです。
子テーマのインストール
子テーマのインストールはテーマインストールと同じ流れで、zipファイルをアップロードしてインストールします。
「外観」→「テーマ」→「新規追加」をクリックします。
「テーマアップロード」をクリックします。
「ファイル選択」をクリックして、先程作成したzipファイルを読み込ませて、「今すぐインストール」をクリックします。
すると、親テーマが存在しているかを確認して、親テーマがインストール済みである事が確認出来たら子テーマが無事インストールされますので、有効化しましょう。
もし、ここで親テーマが存在しないなどエラーが出た場合は、style.cssでTemplate:の名前がちゃんと親テーマのフォルダ名になっているか確認してみましょう。
有効化すると、インストールした子テーマが無事設定されています。
気付いたかと思いますが、画像が表示されません。
この画像は実は「screenshot.png」という名前にした画像ファイルを入れると好きな画像が表示されますので、もし設定したい人はサイズを調べて設定してみてください。
子テーマの内容が反映されているか確認
さて、インストールは無事完了しましたが、子テーマで追記したheader.phpの部分がちゃんと反映されているか確認してみましょう。
先程子テーマのTwenty twenty oneをインストールしましたが、見た目は特に親テーマのままですよね。
それでは、Googleタグマネージャーが反映されているか、ソースの表示で裏側を見てみましょう。
そうすると、<head>タグ直下に追記したタグマネージャーのタグが挿入されているのが確認出来ますね。
つまり、子テーマのheader.phpが優先的に読み込まれているというのがこれで分かります。
以上が、子テーマの作り方からインストールまでになります。
子テーマの中身を更新したいときはもう一度インストールすれば上書き更新出来る
今回は子テーマを作って、header.phpにタグマネージャーをインストールするという作業をしてきましたが、もしこの後にfront-page.phpを追加したい、とかindex.phpをカスタマイズしたいとなったときはどうすれば良いでしょうか。
その時は、先程作った子テーマ用のフォルダに新しくファイルを追加して、それをzipファイルにして、もう一度同じ子テーマを新規インストールすれば、実はそのまま上書き処理をしてくれます。
この仕様はいつからの機能かは定かでは無いのですが、今の5.6の段階ではできました。
過去のバージョンのWordPressでは、上書きでのインストールは出来なかった（一度テーマファイルを削除しなければいけなかった）ので、古いバージョンをお使いの方は、最新にすれば子テーマの更新もだいぶ楽になります。
TCDの子テーマについて
WordPressのテーマで有名TCDでは、子テーマがハイフされていません。
もし今回の様にタグマネージャーをインストールしたり、カスタマイズをお願いされた場合は子テーマを作る必要がでてきます。
ただ、TCDの子テーマを作る時には一つ注意があります。
それは、style.cssにバージョン情報を記述して、更新したら最新のテーマのバージョンの数値に変更する必要があるということです。
style.css
@charset "UTF-8"; /*! Theme Name: Twenty Twenty-One Child Template:twentytwentyone Version:3.2.6 */
上記のコード例は架空のバージョン設定ですので、例と捉えてください。
現在のバージョンが例えば3.2.6だとします。
TCDのテーマから更新の通知が出て、3.2.７に親テーマを更新したとします。
しかし、この後どうなるかというと、親テーマを更新したにもかかわらず更新の通知が消えないのです。
実質的には更新が完了しているので問題ないのですが、お客様からみても保守をしている私からも通知が気になるので、消したいですよね。
この通知を消す方法は、子テーマのstyle.cssに記述しているバージョンを親テーマのバージョンに合わせて書き換えて更新すれば、通知が消えます。
まとめ
以上で、子テーマの作り方について流れを説明してきました。
どうしても簡単なカスタマイズの場合、子テーマ作るの面倒だなって思うことってあると思いますが、最低限の雛形があれば、いつでもすぐ作れますし、今回がそうですが一々FTPで接続する必要もありませんので、最小限の手間で子テーマを作って貰えたらなと思います。
もし子テーマについて、疑問点やご指摘があればお問い合わせ、ご連絡ください。
また子テーマなどWordPressのレクチャーやご相談も承っていますので、お気軽にお問い合わせください。
以上、「テンプレートを編集する場合は必須！WordPressの子テーマの作り方」でした！
コメント