WordPressでのカスタマイズにおいて、テーマの functions.php ファイルを直接編集する代わりにプラグインを使用する方法が一般的ですが、私自身、以前使っていたプラグインの名前を忘れてしまいました。その経験から、プラグインなしで同様のカスタマイズを実現する方法を探求することにしました。プラグインを多用するとサイトの管理が煩雑になることがあります。そこで、この記事では、子テーマを使ったスマートなカスタマイズ手法を紹介します。これにより、プラグインに依存せず、スッキリとしたサイト管理を実現できます。
つまり、「テーマのfunctions.phpをへたに編集して壊したくないので安全策を調べてみよう」です。
WordPressのデフォルトテーマ「Twenty Twenty-One」を例にします。
子テーマを使えば、親テーマの functions.php を直接編集せずに、カスタムコードを追加できます。これにより、将来的なアップデートでテーマのカスタマイズが失われる心配もありません。
1. 子テーマフォルダの作成と命名規則
子テーマを作成する最初のステップは、新しい子テーマフォルダを作成することです。サイトの wp-content/themes ディレクトリ内に新しいフォルダを作ります。子テーマのフォルダ名には特定の規則を遵守することが重要です。
- 明瞭かつ簡潔： フォルダ名は、親テーマと関連があることが明らかになるように命名します。例えば、例に出した親テーマ「Twenty Twenty-One」であれば、「twentytwentyone-child」とすることが一般的です。
- スペースを避ける： フォルダ名にスペースは使用せず、代わりにハイフン（-）やアンダースコア（_）を利用します。
- 小文字の使用： 全て小文字でフォルダ名を作成することが推奨されます。これは、ファイルシステムの互換性を高めるためです。
- 特殊文字の避ける： 特殊文字やアクセント文字は避け、英数字のみを使用することが望ましいです。
これらの命名規則に従って子テーマのフォルダを作成することで、WordPressが正しく子テーマを認識し、問題なく機能するようになります。
2. スタイルシートの作成
次に、作成した「twentytwentyone-child」フォルダ内に style.css ファイルを作成します。ファイルの最初には、以下のようなコメントヘッダーを含めます：
/*
Theme Name: Twenty Twenty-One Child
Template: twentytwentyone
*/このヘッダーはWordPressに子テーマとして認識させるために必要です。
3. 関数ファイルの作成
子テーマに functions.php ファイルを追加します。このファイルでは、以下のように親テーマのスタイルシートを継承するコードを記述します：
<?php
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
});これにより、親テーマのスタイルを継承しつつ、追加のスタイルや機能を定義できます。
4. 子テーマの有効化
WordPressの管理画面から「外観」→「テーマ」に進み、「Twenty Twenty-One Child」テーマを有効化します。テーマを有効化する際に、ライブプレビューを確認してください。もしライブプレビューが期待通りに表示されない場合、特にスタイルやレイアウトが崩れているようであれば、functions.php の記述に誤りがある可能性があります。このファイルで記述したコードが正しくないと、テーマの機能に影響を及ぼすため、コードを再確認し、必要に応じて修正してください。
5. キャッシュの影響について
子テーマを有効化した後、スタイルが期待通りに適用されていない場合、しばしばブラウザやサイトのキャッシュが原因であることがあります。キャッシュは古いデータを保持し、更新されたスタイルが正しく表示されないことがあります。私の経験では、新しいCSSスタイルを適用したにも関わらず、ページに変更が反映されないことがありました。この問題は、ブラウザのキャッシュをクリアしページを再読み込みすることで解決しました。
このような状況に遭遇した場合は、次の手順を試してみてください。
- ブラウザのキャッシュをクリアする。
- ページを強制的に再読み込みする（多くのブラウザでは、Ctrl + F5キーで強制リロードができます）。
- 必要に応じて、WordPressのキャッシュ（使用している場合）もクリアする。
キャッシュの問題を理解し、適切に対処することは、WordPressサイトを管理する上で非常に重要です。このシンプルなステップで、多くの表示上の問題が解決することがあります。
6. カスタマイズの開始
これで子テーマが有効になりました。functions.php に追加のPHPコードを記述することで、サイトに新しい機能を追加したり、style.css でスタイルをカスタマイズしたりできます。
7. 追加CSSの継承について
WordPressの「外観」→「カスタマイズ」セクションから追加されたCSSは、子テーマには自動的に継承されません。これは、追加CSSがデータベースに保存され、特定のテーマに関連付けられているためです。子テーマを有効化すると、これらのカスタマイズは親テーマから子テーマに引き継がれないので、カスタマイズを保持したい場合は、手動で子テーマの style.css にこれらのスタイルをコピーする必要があります。この点を念頭に置いて、子テーマへの移行を行ってください。
結論
子テーマを使うことで、カスタマイズが将来のテーマアップデートで失われることなく、独自のスタイルや機能を安心して追加できます。これで、あなたのWordPressサイトは他とは一線を画するものになるでしょう！わたしはそこまで変わらないけど！
