WordPressテーマをカスタマイズするなら子テーマを作っておく
WordPressの子テーマとは
WordPressの子テーマとは、既存のテーマ(親テーマ)の機能やデザインを継承しつつ、独自のカスタマイズを加えるためのテーマのことです。
簡単に言うと、親テーマを「土台」として、その上に「子テーマ」で変更を加えていくイメージです。
なぜ子テーマを使うのか?
子テーマを使用する主な理由は以下の通りです。
- 親テーマのアップデートへの対応: 親テーマがアップデートされると、テーマファイルが上書きされます。もし親テーマのファイルを直接編集していた場合、アップデートによってそれらの変更は失われてしまいます。子テーマを使っていれば、親テーマのアップデートが行われても、子テーマでの変更はそのまま保持されます。これは子テーマを使う最も重要な理由の一つです。
- 安全なカスタマイズ: 子テーマでカスタマイズを行うため、もし誤ったコードを記述してしまっても、親テーマ自体には影響を与えません。問題が発生した場合でも、子テーマを無効化するだけで元の状態に戻すことができます。
- 効率的な開発: 親テーマの機能をそのまま利用できるため、ゼロからテーマを作成するよりも効率的に開発を進めることができます。必要な部分だけを上書きしたり、機能を追加したりすることが可能です。
- コードの管理が容易: 親テーマと子テーマでカスタマイズ内容が明確に分離されるため、コードの管理がしやすくなります。
子テーマの基本的な仕組み
子テーマは、通常、以下の2つのファイルで構成されます。
style.css
: これは子テーマのスタイルシートで、子テーマの情報をWordPressに伝える役割も持ちます。最低限、このファイルがあれば子テーマとして認識されます。親テーマのスタイルを読み込むための記述もここで行います。functions.php
: このファイルは、親テーマの機能を上書きしたり、新しい機能を追加したりするために使用されます。例えば、独自のJavaScriptファイルやCSSファイルを追加したり、ショートコードを定義したりすることができます。
子テーマの作成方法
子テーマの作成は比較的簡単です。
- 新しいディレクトリの作成:
wp-content/themes
ディレクトリ内に、子テーマ用の新しいディレクトリを作成します。例えば、親テーマがtwentyseventeen
なら、子テーマはtwentyseventeen-child
のように分かりやすい名前にします。 style.css
の作成: 作成した子テーマのディレクトリ内にstyle.css
ファイルを作成し、以下の情報を記述します。
/*
Theme Name: My Child Theme
Theme URI: http://example.com/my-child-theme/
Description: My custom child theme
Author: Your Name
Author URI: http://example.com/
Template: twentyseventeen <– ここに親テーマのディレクトリ名を記述
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-child-theme
*/
<?php
function my_child_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' );
?>
- WordPressの管理画面で有効化: WordPressの管理画面の「外観」→「テーマ」に、作成した子テーマが表示されますので、それを有効化します。
子テーマでのカスタマイズ例
- CSSの追加・上書き: 子テーマの
style.css
に記述したCSSは、親テーマのCSSよりも優先して適用されます。これにより、親テーマのデザインを簡単に変更できます。 - テンプレートファイルの変更: 親テーマにあるテンプレートファイル(例:
header.php
,footer.php
,single.php
など)を子テーマの同じパスにコピーし、そのファイルを編集することで、親テーマの機能を上書きできます。例えば、single.php
を子テーマにコピーして編集すれば、個別の投稿ページの表示をカスタマイズできます。 - 機能の追加: 子テーマの
functions.php
にコードを追加することで、カスタム投稿タイプ、ウィジェット、ショートコードなどの新しい機能を追加できます。
まとめ
子テーマは、WordPressでウェブサイトを構築・管理する上で非常に重要な概念です。これを使うことで、親テーマのアップデートを気にせず安全にカスタマイズを行い、将来的なメンテナンスを容易にすることができます。WordPressでウェブサイトを運用する際には、子テーマの利用を強くおすすめします。
WordPressの子テーマの注意点
WordPressの子テーマを使用する際の注意点は以下の通りです。
1. 親テーマの更新に対する影響
- 子テーマは親テーマのテンプレートファイルや機能を利用するため、親テーマが更新されると子テーマに予期せぬ影響を与える可能性があります。
- 特に、親テーマでフック(アクションフック、フィルターフック)が追加、削除、変更された場合、子テーマでそのフックを利用している箇所が動作しなくなることがあります。
- 親テーマのテンプレートファイルが大幅に変更された場合、子テーマでそのファイルを上書きしていると、新しい親テーマの機能が反映されなかったり、デザインが崩れたりする可能性があります。
- 対策:
- 親テーマの更新前には必ずバックアップを取る。
- 更新後、子テーマが正しく動作するか十分にテストする。
- 親テーマの変更ログや開発者のアナウンスを確認し、影響範囲を把握する。
2. テンプレートファイルの上書き
- 子テーマで親テーマのテンプレートファイルを上書きする場合、親テーマのファイル名と完全に一致させる必要があります。ファイル名が異なると、子テーマのファイルが読み込まれません。
- 上書きするファイルは、必要最小限に留めるのがベストです。親テーマのファイルを丸ごとコピーして修正するのではなく、変更したい部分だけを修正するように心がけましょう。
- 対策:
- 親テーマのファイル構造を理解する。
- 上書きするファイルは慎重に選び、必要最低限に留める。
- 変更箇所をコメントなどで明記しておくと、後で管理しやすい。
3. functions.phpの扱い
- 子テーマの
functions.php
は、親テーマのfunctions.php
の後に読み込まれます。 - 親テーマで定義されている関数と同じ名前の関数を子テーマの
functions.php
で定義すると、PHPのエラー(致命的なエラー)が発生します。 - 親テーマの関数をオーバーライドしたい場合は、
function_exists()
で関数の存在チェックをするか、remove_action()
やremove_filter()
を使って親テーマのフックを解除してから、子テーマで独自のフックを追加するなどの方法があります。 - 対策:
- 親テーマの
functions.php
の内容を把握する。 - 子テーマで追加する関数名は、親テーマの関数名と重複しないように注意する。
- 親テーマの関数を修正したい場合は、直接変更するのではなく、フックを利用するなどの方法を検討する。
- 親テーマの
4. スタイルの読み込み順序
- 通常、子テーマの
style.css
は、親テーマのスタイルシートの後に読み込まれます。これにより、子テーマで親テーマのスタイルを上書きすることができます。 - ただし、
@import
ルールを使って親テーマのスタイルを読み込む方法は、WordPress 5.X以降では非推奨とされています。functions.php
でwp_enqueue_style()
を使って親テーマと子テーマのスタイルシートを適切にキューイングするのが推奨されています。 - 対策:
@import
ではなく、functions.php
でwp_enqueue_style()
を使用してスタイルを読み込む。wp_enqueue_style()
の依存関係(dependencies
引数)を適切に設定し、読み込み順序を制御する。
5. スクリプトの扱い
- JavaScriptなどのスクリプトも、スタイルシートと同様に
wp_enqueue_script()
を使って適切にキューイングする必要があります。 - 親テーマで利用しているスクリプトのバージョンや依存関係を把握し、子テーマで追加するスクリプトとの競合を避けるように注意しましょう。
- 対策:
wp_enqueue_script()
を利用してスクリプトを読み込む。- 親テーマで使用しているスクリプトの情報を確認し、重複や競合を避ける。
6. 更新時の手間
- 子テーマを作成すると、親テーマの更新時に子テーマのコードを見直す手間が増える可能性があります。特に、親テーマが大幅にアップデートされた場合、その影響範囲を確認し、子テーマの修正が必要になることがあります。
- 対策:
- 子テーマのコードはシンプルに保ち、必要最小限の変更に留める。
- 変更箇所を分かりやすくコメントするなど、メンテナンス性を考慮したコードを書く。
7. テーマ作者のサポート範囲
- 親テーマの作者は、通常、親テーマ自体のサポートは行いますが、子テーマによるカスタマイズ部分のサポートは範囲外となることが多いです。子テーマで発生した問題は、基本的に自分で解決する必要があります。
これらの注意点を踏まえることで、WordPressの子テーマをより安全かつ効果的に活用することができます。