WordPressには有料／無料含め、多くの様々なテーマが配布されています。
配布されているテーマは汎用的なものが多く、自分のサイト用に最適化するためにソースコードレベルでカスタマイズしたいというケースがよくあると思います。
単純に配布されているテーマファイルをそのまま編集するのではなく、そのテーマの子テーマを作成し、子テーマ上でカスタマイズをすることをオススメします。
ということで今回はオリジナルテーマを子テーマでカスタマイズするメリットと、子テーマの作成方法をご紹介したいと思います。
WordPressのテーマには親テーマと子テーマがあり、通常のテーマはほとんどが親テーマになります。
そして親テーマのデザインや機能を引き継いで、親テーマを派生させたテーマが子テーマです。
まず第一に、使用しているテーマが自分で作成したものではなく、他人が作成し配布しているテーマであるなら、今後アップデートがあるかもしれません。
テーマのアップデートを行うとテーマ内のファイルはアップデートされた内容に上書きされ、自分で追記・変更したコードなどがすべてリセットされてしまいます。
編集した箇所をメモしておいたり、Gitを使っていたりすると差分を確認して、アップデート後に再度差分を適用することも出来なくはないですが、差分が多くなればメンテナンスが辛くなってしまいます。
子テーマを作成し、子テーマ上でカスタマイズを行うことで、オリジナルテーマのソースコードを変更することなくカスタマイズが出来るのでアップデートもスムーズに対応できるようになります。
ただし、アップデート後のテーマで、カスタマイズした機能が正常に動作するかの確認は必要です。
テーマ内のfunctions.phpにコードを追記したり、テンプレートファイルを追加していくと、そのうちどれがカスタマイズで追加したもので、どれがオリジナルで用意されていたものなのかわからなくなっていきます。
子テーマ上にソースコードやファイルを追加していくことで、オリジナルのコードとカスタマイズのコードを分離できるので、後からでもカスタマイズされた機能を確認しやすくなります。
作りたいサイトが配布されているテーマで作れそうだけれど、そのままでは使えないといった場合、
子テーマを作成して必要な部分だけをカスタマイズするだけで良くなります。
では実際に子テーマを作成してみましょう。
WordPressのテーマディレクトリに子テーマのディレクトリを新しく作成します。
ディレクトリ名は自由に決められますが、どのテーマの子テーマであるのかわかりやすい名前をつけることをオススメします。
例えば「Twenty Twenty One」テーマの子テーマなら、「twentytwentyone_child」という風にします。
style.cssはテーマに必ず必要なファイルになります。
style.cssには下記のコメントを書きます。
|
1 2 3 4 5 6 |
/*! Theme Name: twenty twenty one child Description: Twenty Twenty Oneのカスタマイズ子テーマ Version: 1.0.0 Template: twentytwentyone */ |
Theme NameとVersionとTemplateは必ず記載します。
Theme Nameは子テーマのテーマ名、Descriptionはテーマの概要、Versionはテーマのバージョン、Templateは親テーマのテーマ名を指定します。
次にfunctions.phpファイルを作成します。
functions.phpはテーマの機能カスタマイズに関するコードを書くファイルです。
子テーマは何もしないと親テーマのCSSは読み込まれないので、親テーマのCSSを読み込むようにfunctions.phpに下記のコードを追加します。
|
1 2 3 4 5 6 7 8 |
<?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') ); } ?> |
上記の2ファイルを追加することで、子テーマに必要な最低限のファイルの準備が整いました。
管理画面のテーマ設定で、子テーマを確認できれば有効化します。
これでオリジナルテーマの子テーマを設定できました。
ここから、必要な機能を子テーマ上でカスタマイズしていきます。
上記のように、子テーマを作成してテーマをカスタマイズする方法をご紹介しましたが、子テーマは親テーマも同時に読み込む必要があるので、通常の親テーマよりもWordPressの処理に時間がかかるようになります。
メンテナンス性とパフォーマンスのバランスを考慮して、子テーマを作成するかどうか検討するのが良いです。
また、機能のカスタマイズはテーマの他にプラグインでも作成可能なので、自作プラグインを作成するのも１つの手です。
WordPressは様々な方法でサイトをカスタマイズできるようになっています。
WordPressのバージョン5以降はブロックエディタの登場でさらに多くの選択が増えています。
カスタマイズ方法の引き出しを多く持つことで、最適なWordPressカスタマイズが出来るようにしていきたいですね。
