WordPressテーマをカスタマイズするなら子テーマを作っておく

WordPressの子テーマとは

WordPressの子テーマとは、既存のテーマ（親テーマ）の機能やデザインを継承しつつ、独自のカスタマイズを加えるためのテーマのことです。

簡単に言うと、親テーマを「土台」として、その上に「子テーマ」で変更を加えていくイメージです。

なぜ子テーマを使うのか？

子テーマを使用する主な理由は以下の通りです。

1. 親テーマのアップデートへの対応: 親テーマがアップデートされると、テーマファイルが上書きされます。もし親テーマのファイルを直接編集していた場合、アップデートによってそれらの変更は失われてしまいます。子テーマを使っていれば、親テーマのアップデートが行われても、子テーマでの変更はそのまま保持されます。これは子テーマを使う最も重要な理由の一つです。
2. 安全なカスタマイズ: 子テーマでカスタマイズを行うため、もし誤ったコードを記述してしまっても、親テーマ自体には影響を与えません。問題が発生した場合でも、子テーマを無効化するだけで元の状態に戻すことができます。
3. 効率的な開発: 親テーマの機能をそのまま利用できるため、ゼロからテーマを作成するよりも効率的に開発を進めることができます。必要な部分だけを上書きしたり、機能を追加したりすることが可能です。
4. コードの管理が容易: 親テーマと子テーマでカスタマイズ内容が明確に分離されるため、コードの管理がしやすくなります。

子テーマの基本的な仕組み

子テーマは、通常、以下の2つのファイルで構成されます。

• style.css: これは子テーマのスタイルシートで、子テーマの情報をWordPressに伝える役割も持ちます。最低限、このファイルがあれば子テーマとして認識されます。親テーマのスタイルを読み込むための記述もここで行います。
• functions.php: このファイルは、親テーマの機能を上書きしたり、新しい機能を追加したりするために使用されます。例えば、独自のJavaScriptファイルやCSSファイルを追加したり、ショートコードを定義したりすることができます。

子テーマの作成方法

子テーマの作成は比較的簡単です。

1. 新しいディレクトリの作成: wp-content/themes ディレクトリ内に、子テーマ用の新しいディレクトリを作成します。例えば、親テーマが twentyseventeen なら、子テーマは twentyseventeen-child のように分かりやすい名前にします。
2. 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' );
?>Code language: HTML, XML (xml)

1. 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の子テーマをより安全かつ効果的に活用することができます。

メリットとデメリット

メリット

1. 親テーマの更新に対する安全性

親テーマがアップデートされた際、子テーマで加えたカスタマイズが失われるのを防げます。これは子テーマの最大の利点です。親テーマのファイルを直接編集していると、更新時に上書きされて変更が消えてしまいますが、子テーマはその影響を受けません。

2. 開発の効率化

ゼロからテーマを作るのではなく、既存の親テーマの機能やデザインを土台として利用できるため、開発時間を大幅に短縮できます。必要な部分だけを上書き（オーバーライド）すればよいため、コード量も少なく済みます。

3. ロールバックの容易さ

カスタマイズで問題が発生した場合、子テーマを無効化したり、特定のファイルを削除したりすることで、すぐに親テーマの状態に戻せます。これにより、トラブルシューティングが容易になります。

4. テーマの機能分割

カスタマイズされたコードが子テーマ内に分離されるため、テーマの管理やメンテナンスがしやすくなります。

デメリット

1. 動作の理解が必要

親テーマと子テーマがどのように連携し、どのファイルがどのように上書きされるか（特にPHPファイル）を理解する必要があります。CSSやJavaScriptだけでなく、PHP関数やテンプレートファイルの動作について知識がないと、意図しない挙動につながる可能性があります。

2. 親テーマの依存性

子テーマは親テーマが存在しないと動作しません。親テーマに重大なバグがあったり、開発が停止してしまったりした場合、子テーマもその影響を受けます。

3. カスタムの限界

親テーマの構造や仕組みによっては、カスタマイズできる範囲に限界があることがあります。特に親テーマがフック（アクションやフィルター）を十分に提供していない場合、子テーマ側から親テーマの機能に手を入れるのが難しくなります。

4. やや煩雑なセットアップ

子テーマを使用するための初期設定（style.cssやfunctions.phpの作成と記述）が、テーマファイルを直接編集するよりも一手間多くかかります。

	メリット	デメリット
主な点	親テーマの更新でカスタマイズが消えない	親テーマの動作や構造の理解が必要
開発	効率的に開発・カスタマイズできる	親テーマに依存する
保守	トラブル時のロールバックが容易	初期セットアップがやや煩雑