WordPressの子テーマとは?利用するメリットと作り方
WordPressのテーマを自分で調整したのに、テーマを更新したら元に戻ってしまった。
そんな経験はありませんか。
この記事では、調整を守るための「子テーマ」とは何か、使うメリットと作り方を解説します。
1.子テーマは、調整を別にしておく仕組み
子テーマとは、元のテーマ(親テーマ)のデザインや機能を受け継ぎながら、自分で加えた調整だけを、別に保存しておくためのテーマです。
| テーマ | 役割 |
|---|---|
| 親テーマ | ホームページのデザインと機能の本体。作った人が更新する |
| 子テーマ | 自分で加えたCSSやプログラムの調整だけを入れておく |
子テーマを有効にすると、親テーマのデザインに、子テーマの調整を重ねて表示します。
2.子テーマを使うメリット
親テーマのファイルを直接書き換えて調整していると、テーマを更新したときに、ファイルが新しいものに置き換わり、調整が消えてしまいます。
子テーマに調整を入れておけば、親テーマを更新しても、子テーマは置き換わりません。弱点の修正などの更新を安心して受けながら、自分の調整を守ることができます。
テーマに手を加えるなら、親テーマは直接書き換えず、子テーマで調整するのが基本です。
※管理画面の「追加CSS」など、テーマの外に保存される場所での調整は、テーマを更新しても消えません。少しのCSSの調整なら、そちらで足りることもあります。
3.子テーマの作り方
必要なもの
子テーマは、フォルダと、2つのファイルで作れます。フォルダは、wp-content の中の themes に作ります(例:親テーマが example なら example-child)。
1. style.css
子テーマの名前と、どのテーマを親にするかを書きます。「Template」には、親テーマのフォルダの名前を書きます。
/*
Theme Name: Example Child
Template: example
*/
2. functions.php
親テーマのデザイン(CSS)を読み込む指定を書きます。親テーマによっては不要な場合もあるため、親テーマの案内を確かめましょう。
<?php
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
} );
3. 有効化する
- 01バックアップを取る
子テーマに切り替える前に、バックアップを取ります。
- 02フォルダを置く
作ったフォルダを、サーバーの wp-content/themes に置きます。
- 03有効化する
「外観」→「テーマ」で子テーマを有効化し、表示を確かめます。
- 04調整を移す
親テーマに直接書いていた調整があれば、子テーマに移します。
※テーマを切り替えると、メニューやウィジェットの設定を確認し直す必要がある場合があります。人気のテーマには、作った人が子テーマを用意していることもあります。
4.よくある質問
子テーマは、必ず使わないといけませんか?
テーマのファイルに手を加えないなら、必要ありません。CSSを少し足すだけなら、「追加CSS」で足りることもあります。
子テーマにしたら、親テーマは削除してよいですか?
削除してはいけません。子テーマは親テーマを受け継いで動くため、親テーマがないと表示されなくなります。
ブロックテーマでも、子テーマは作れますか?
作れます。ブロックテーマの場合は、theme.json というファイルで、色や文字などの設定を調整することもあります。
親テーマを更新したら、子テーマの表示がおかしくなりました。
親テーマの作りが変わり、子テーマの調整が合わなくなったことが考えられます。子テーマのCSSや、上書きしているファイルを見直しましょう。
5.まとめ
子テーマは、親テーマのデザインと機能を受け継ぎながら、自分の調整だけを別に保存しておく仕組みです。
- 親テーマを直接書き換えると、更新で調整が消える
- 子テーマに調整を入れておけば、親テーマを更新しても守られる
- style.css と functions.php の2つのファイルで作れる
- 少しのCSSなら「追加CSS」で足りることもある
まずは、今のテーマのファイルに、直接書き換えた調整がないか確かめてみましょう。更新のあとの崩れについては、更新後にレイアウトが崩れたときの確認方法で解説しています。
子テーマへの切り替えや、テーマの調整で困っている場合は、浅草Web屋にご相談ください。