子テーマとは
子テーマとは、WordPressテーマの一種で、親テーマの機能やデザインを引き継ぎつつ、それに追加や変更を加えたカスタマイズテーマです。WordPressのテーマ制作において非常に便利な機能であり、親テーマを直接変更するのではなく、子テーマを作成し必要な変更を加えることで、テーマのアップデートにも対応できます。
子テーマを作る理由
- カスタマイズしたテーマをアップデートする場合に、カスタマイズが失われるのを防ぐためです。親テーマに直接変更を加えると、テーマのアップデート時にそれらの変更が上書きされてしまいますが、子テーマに変更を加えることで、親テーマのアップデートに影響を受けずにカスタマイズを維持できます。
- デザインをカスタマイズする場合に、親テーマのファイルを変更せずに、追加や変更を加えることができます。例えば、親テーマが提供するスタイルシートを変更したい場合、子テーマのスタイルシートに新しいルールを追加することができます。
- プログラムの修正や機能の追加を行う場合に、親テーマのファイルを変更するよりも、子テーマでの変更が推奨されます。これにより、親テーマのアップデートが容易になり、変更を行ったファイルが上書きされることを避けることができます。
総じて、子テーマを使用することで、WordPressテーマをより柔軟にカスタマイズできるようになります。また、テーマのアップデートを行う場合にも、変更が失われることを防ぐことができます。
子テーマのディレクトリを作成する
子テーマは、FTPソフトでのアップロードか、ZIPファイルでWordPressの管理画面からアップロードをします。
アップロードするためにもディレクトリを作成し、子テーマのファイルを格納する必要がありますので、まずはディレクトリ(フォルダ)を作成していきましょう。
子テーマの必須ファイル
先程作成したフォルの中に最低限必要な2つのファイルを用意していきます。
functions.php
WordPressのテーマにおいて、機能を追加・変更するために使用される重要なファイルです。このファイルは、親テーマのfunctions.phpを引き継ぐ形で、子テーマにカスタマイズした機能を追加するために利用されます。
style.css
ウェブサイトの外観を制御するためのスタイルシートファイルです。このファイルは、親テーマのスタイルシートを引き継ぎつつ、子テーマでカスタマイズしたスタイルを追加するために利用されます。
子テーマを作成する際には、少なくともこれら2つのファイルが必要となります。ただし、それ以外にも、カスタマイズしたいテンプレートファイル(header.phpやsingle.phpなど)がある場合には、それらを子テーマ内に作成する必要があります。 |
functions.phpを用意する
子テーマのfunctions.phpに必要な記述の一例として、親テーマのスタイルシートを上書きするために子テーマのスタイルシートを読み込むコードは以下のようになります。
1 2 3 4 5 6 7 8 9 |
<?php function theme_enqueue_styles() { //親テーマのCSSを読み込み wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); //親テーマのCSSを上書き wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); ?> |
このコードは、子テーマのstyle.cssが親テーマのstyle.cssを上書きするために、parent-styleの依存関係を指定してchild-styleを読み込みます。
冒頭の追記コード以外に、親テーマのfunctions.phpに変更箇所は任意で上書きや追加記述します。 |
※親テーマのfunctions.phpファイルにある関数を変更したい場合、同じ関数名を使用して子テーマのfunctions.phpファイルに新しい関数を定義することで、親テーマの関数をオーバーライドすることができます。 親テーマのfunctions.phpファイルの全文を子テーマのfunctions.phpファイルにコピーすると、重複した関数やコードが生じる可能性があるため、避けるべきです。代わりに、必要なカスタムコードのみを子テーマのfunctions.phpファイルに追加することで、親テーマの機能を拡張することができます。 |
※上書きする内容が無い場合は上記のコードのみのfunctions.phpの用意で問題ありません。 |
設定ができたら、先程作成した子テーマのディレクトリ(フォルダ)に、「functions.php」の名前で保存してください。
style.cssを用意する
子テーマのstyle.cssにも、親テーマのstyle.cssのように必要情報を冒頭に記載します。
1 2 3 4 5 6 7 8 9 |
/* Theme Name:テーマの名前 Theme URI:テーマに関連するWebサイトのURL Description:テーマの説明 Template:親テーマのディレクトリ名 Author:テーマ作成者の名前 Author URI:テーマ作成者のWebサイトのURL Version:テーマのバージョン */ |
Theme Name | 「親テーマの名前 child」が一般的です。 |
Theme URI | ご自身のURLなど不要な場合は行ごと削除可 |
Description | 簡潔かつ明確にテーマの説明を記載します。 |
Template | 親テーマのディレクトリの名称を記載します。(親テーマのディレクトリ名が「twentytwenty」の場合は「twentytwenty」と記載します。) |
Author | 作成者名を記載します。 |
Author URI | 作成者のURLを記載します。 |
Version | 任意でバージョンを記載します。 |
冒頭の追記コード以外に、親テーマのstyle.cssの内容から、変更したい部分は任意で上書きや追加記述しstyle.css内に納めます。 ※子テーマのstyle.cssファイルには必要なカスタムスタイルのみを追加し、親テーマのstyle.cssファイルの全文をコピーする必要はありません。 |
※上書きする内容が無い場合は上記コードを編集したものだけの記載で問題ありません。 |
設定ができたら、先程作成した子テーマのディレクトリ(フォルダ)に、「style.css」の名前で保存してください。
ファイルをアップロードする(WordPressからのアップロード)
functions.phpとstyle.cssをはじめとする、子テーマの構成ファイルを圧縮しzipファイルにします。この際ファイル名は「親テーマのテーマ名-child.zip」などとわかるようにしましょう。
ファイルをアップロードする(FTPアクセスの場合)
FTPアクセスの場合はzipファイル化する必要はありません。※慣れている方はこちらが推奨。
先程作成した「functions.php」「style.css」を格納したフォルダ、この記事ではフォルダ名を「親テーマ名-child」としましたが、このフォルダを「wp-content>themes」のフォルダへ格納し、ワードプレス管理画面の「外観>テーマ」から子テーマを有効化することにより設定が可能です。
FTPアクセスになれている方は、追加ファイルのアップロードなどを、いちいちzipでアップロードする必要もありませんので、FTPでのアップロードが推奨になります。 |
FTPアクセスをワードプレス管理画面から
プラグイン「File Manager(WP File Manager)」を使用することで子テーマのアップロードにFTPソフトを使用せずにWordPress管理画面からもアップロード可能です。
上記のFTPアクセスの場合のフォルダと同様に「wp-content>themes」にアップロードをします。
プラグイン「File Manager(WP File Manager)」については以下の記事にて取り上げています。
[clink url=”https://recross.co.jp/file-manager/”]
まとめ
親テーマ自体のテーマ構成ファイルを変更し、デザインなどをオリジナルにカスタマイズしていくことも出来ますが、親テーマ自体のアップロードが入った際に、子テーマとして作っておかないと、テーマのアップロード時に対象の内容が記載されているファイルが上書きされてしまい、カスタマイズが消えてしまうことがありますので、カスタマイズを加える可能性がゼロではない場合は、事前に子テーマを作成し作業していきましょう。
私の場合は、reCAPTCHAの表記をフッターによく入れることがあり、同時にスタイルシートも変更することから、「style.css」ファイルへの記載の追記と、「footer.php」ファイルを子テーマに入れて作業することが良くあります。
一部のディレクトリが動作上必須になるファイルがあります。その場合は、参照元のURLを変更するか、ディレクトリ自体をアップロードして対応しましょう。 (例→url(“fonts/1234.svg”)の場合url(“../親テーマのディレクトリ/fonts/1234.svg”)) |
その他にも、投稿のファイル自体やパンくずリストなど、テーマを構成するファイルを1ヶ所でも更新する場合は、子テーマをどんどん使っていきましょう。