WordPressのテーマをアップデートした時にカスタマイズした内容が元に戻って大変な思いをしたことはありませんか？
サイト運営に慣れてくると他の人たちと違いを出すためにテンプレートファイルやCSSをカスタマイズする機会が出てくると思いますが、そのままテーマファイルを修正するとテーマのアップデートで修正内容が消えてしまうので危険です。
WordPressの子テーマの機能を使えば修正内容が消える心配は一切無いので、カスタマイズをする場合は子テーマを利用しましょう。
WordPressの子テーマとは？
WordPressの子テーマとは、親テーマの機能とスタイルを引き継ぎながら安全にWordPressのカスタマイズが行えるテーマのことです。
例えば、デザインを調整するときにCSSファイルの「style.css」を編集することがありますが、次のような定義があったとします。
|
1 2 3 4 |
p { font-size: 18px; color: black; } |
<p>タグの文字サイズが18px、文字色が黒という定義ですが、親テーマだけで文字色を赤に変えたい場合は次のように修正することが多いと思います。
|
1 2 3 4 |
p { font-size: 18px; color: red; } |
あるいは
|
1 2 3 4 5 6 7 8 |
p { font-size: 18px; color: black; } /* CSSファイルの最後あたり */ p { color: red; } |
前者は直接該当部分を変更し、後者はスタイルの上書き機能を利用してオリジナルの部分を残しつつ修正を加えています。
これらの方法でも文字色は赤に変わるのですが、使用中のテーマがバージョンアップするとファイルが上書きされるので修正内容が消えてしまいます。
これを回避するには子テーマを利用しましょう。
|
1 2 3 |
p { color: red; } |
子テーマを使えば親テーマのファイルは触らずに、子テーマに変更したい内容を書くだけで反映されます。
何故なら、親テーマのファイルを読み込んだ後で子テーマのファイルを読み込むようになっているからです。
そのため、親テーマで定義されている内容を変更したり、新しい定義を追加したい時は子テーマを利用することを推奨します。
CSSファイルを例に挙げましたが、テンプレートファイルも同様です。
親テーマのテンプレートファイルにGoogleアドセンスのコードを貼り付けているような場合はテーマのアップデートで消えてしまうので注意してください。
WordPressの子テーマの作り方
子テーマの作り方について解説していきます。
手順通りに進めればそんなに難しくないと思います。
子テーマに用意するファイル
| style.css | 必須 |
|---|---|
| functions.php | 必須 |
| 各テンプレートファイル | 任意 |
子テーマを作るために必須なのは「style.css」と「functions.php」です。
各テンプレートファイルは、例えばヘッダー部分をカスタマイズしたい時はヘッダーのテンプレートにあたる「header.php」を用意します。
子テーマの作成
それでは早速子テーマを作成していきましょう。
子テーマのフォルダ
フォルダ名は何でも構いませんがWordPressの公式で推奨されている「（親テーマのフォルダ名）-child」の形にします。
今回はWordPressのテーマ「Twenty Seventeen」の子テーマを作成してみようと思います。
親テーマのフォルダ名はFTPソフトなどで「themes」フォルダの中を見ると確認出来ます。
「Twenty Seventeen」のフォルダ名は、「twentyseventeen」となっています。
そのため、子テーマのフォルダ名を「twentyseventeen-child」としました。
この中に子テーマのファイルを入れていきます。
style.css
「style.css」はWordPressの子テーマ作成に必須のファイルです。
何故必須なのかと言うと、このファイルに親テーマがどれなのかを記述するからです。
「style.css」というファイルを作成したら、ファイルを開いて以下のようにコードを入力してください。
|
1 2 3 4 5 |
@charset "UTF-8"; /* Template: twentyseventeen Theme Name: Twenty Seventeen 子テーマ */ |
1行目は文字コードの指定で、これを書いておくことで日本語の文字化けを防いでくれます。
コメント部分（/* から */ の間）には次の項目を入力します。
| Template | 親テーマのフォルダ名（必須） |
|---|---|
| Theme Name | 子テーマの名前（必須） |
| Theme URI | 子テーマのURI |
| Description | 子テーマの説明 |
| Author | 子テーマの作者 |
| Author URI | 子テーマの作者URI |
| Version | 子テーマのバージョン |
| License | 子テーマのライセンス |
| License URI | 子テーマのライセンスURI |
入力が必須なのは「Template」と「Theme Name」の2つだけです。
functions.php
「style.css」はこのままでは子テーマの「style.css」しか読み込まれず、「親テーマのCSSが適用されない！」ということが起こってしまいます。
親テーマのファイルを読み込んだ後で子テーマのファイルを読み込むためにはwp_enqueue_script()を使います。
「functions.php」というファイルを作成したら、ファイルを開いて次のコードを入力してください。
|
1 2 3 4 5 |
<?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } |
これで親テーマ、子テーマの順番で「style.css」が読み込まれるようになります。
上級者向けの内容
「functions.php」はちょっと特殊で、子テーマの後に親テーマが読み込まれる仕組みになっています。
そのため、親テーマの処理を変更したい場合は子テーマの「functions.php」に以下の2つの処理が必要になります。
- 親テーマの変更したい関数を削除（remove）する
- 変更内容を反映させた関数を追加（add）する
親テーマの処理を変更するケースはあまり無いと思いますが、必要に迫られた場合はこちらのサイトを参考にしてみてください。
各テンプレートファイル
各テンプレートファイルは必要に応じて用意します。
テンプレートファイルは親テーマの後に子テーマが読み込まれるので、子テーマにファイルが用意されているとそちらが優先されます。
例えば、子テーマにカスタマイズした「header.php」を入れておくと親テーマの「header.php」ではなく、子テーマの「header.php」が読み込まれるようになります。
子テーマのテンプレートファイルは親テーマをコピーしてから内容を修正したものでOKです。
WordPressの子テーマをインストールする手順
ここまでの手順で必要なファイルが用意できました。
子テーマフォルダをZIP形式で圧縮しましょう。
私は圧縮ソフト「7-Zip」を使っていますがZIPファイルが作成できれば何でも構いません。
圧縮されたWordPressの子テーマが作成できました。
作成したテーマを反映させるため、WordPressの管理画面に入って「外観 → 新規追加」とクリックします。
「テーマを追加」画面が表示されるので「テーマのアップロード → ファイルを選択 → 今すぐインストール」とクリックして、作成したWordPressの子テーマをインストールしてください。
子テーマ作成にミスが無ければテーマのインストールが完了するので「有効化」をクリックします。
「テーマ」画面を開くと、作成したWordPressの子テーマが有効になっていることを確認できました。
いつでもここから他のテーマに変更可能です。
サイトのトップページにもアクセスして動作に問題が無いか確認しておきましょう。
WordPressの子テーマが反映されない原因
子テーマをインストールしたのに何故か反映されないような場合に考えられる原因をまとめてみました。
子テーマを有効化していない
子テーマのインストールが済んだだけでは有効化されません。
テーマのインストール直後の画面で「有効化」リンクをクリックするか、「外観 → テーマ」の「テーマ」画面から「有効化」ボタンをクリックして有効にしてください。
子テーマのファイル名が間違っている
子テーマの中にあるファイルの名称は親テーマにあるものと同じでなければなりません。
スペルミスを無くすためにファイル名をコピペしてみましょう。
キャッシュプラグインを使っている
負荷対策の一環としてWordPressの「W3 Total Cache」「WP Fastest Cache」などのキャッシュプラグインを利用している方は、一度キャッシュの削除を試してみましょう。
キャッシュが効いているせいで反映されていない可能性があります。
style.cssの記述が間違っている
「style.css」には親テーマのフォルダ名を記述する部分（Template）がありますが、その名称が間違っている可能性があります。
大文字・小文字も区別されるので再確認してみてください。
親テーマのCSSファイルが読み込まれていない
子テーマを作るために必須なファイルは「style.css」と「functions.php」ですが、親テーマが「style.css」以外にも複数のCSSファイルを読み込んでいる場合は例外的に全てのCSSファイルを用意してください。
例えば、WordPressのテーマ「賢威」などが該当します。
賢威はCSSファイルとして「style.css」は読み込まずフロント画面では「base.css」「rwd.css」を、管理画面では「keni_admin.css」「colpick.css」を読み込んでいます。
そのため、「base.css」「rwd.css」「keni_admin.css」「colpick.css」の4ファイルも別途用意します。
※「style.css」は子テーマに必須のファイルなので読み込んでいなくても用意する必要があります。
|
1 2 3 4 5 |
@charset "UTF-8"; /* Template: keni70_wp_cool_red_201707011719 Theme Name: 賢威7.0 クール版 子テーマ */ |
|
1 |
@charset "UTF-8"; |
「Template」のフォルダ名は賢威をダウンロードする時期によって変わってくるので適宜変更してください。
足りないCSSが分からない時はブラウザでF12キーを押すとデベロッパーツールが開くので「Console」タブをクリックすれば確認できます（以下はChromeを使った場合の例）。
そして、「functions.php」の中も変更します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'child-style', get_template_directory_uri() . '/style.css'); wp_enqueue_style( 'parent-base-style', get_template_directory_uri() . '/base.css' ); wp_enqueue_style( 'parent-rwd-style', get_template_directory_uri() . '/rwd.css' ); } add_action( 'admin_menu', 'theme_admin_styles' ); function theme_admin_styles() { wp_enqueue_style( 'parent-keni_admin-style', get_template_directory_uri() . '/keni_admin.css' ); wp_enqueue_style( 'parent-colpick-style', get_template_directory_uri() . '/colpick.css' ); } |
「keni_admin.css」と「colpick.css」は管理画面だけで必要なので「admin_menu」にフックしています。
これらのファイルを用意すると賢威でCSSが効かない問題は解消します。
まとめ
WordPressの子テーマを作成すれば親テーマの内容を継承しながら変更を加えたい部分だけ子テーマに記述することができます。
そのため、修正したファイルは子テーマを見れば一目瞭然なのでどのファイルに手を加えたのか分からなくなることがありません。
また、親テーマのファイルを直接編集しているとテーマがアップデートしたときに上書きされるので修正内容が全て消えてしまいますが、子テーマを利用していればそのような心配は無用です。
WordPressのカスタマイズをするなら子テーマの作成を推奨します。
コメント
[…] https://takalog.jp/archives/680#WordPress-2 […]
[…] http://mayoina.xsrv.jp/?p=167 https://affiliate150.com/child-theme-set-up https://takalog.jp/archives/680#WordPress-2 https://teratail.com/questions/111879 https://teratail.com/questions/84520 […]