今回はWordPressテーマの子テーマを作成してWordPressサイトをカスタマイズするメリットについてお伝えします。こちらはWordPressカスタマイズの基本といえば基本ですが、応用と言えば応用です。
WordPressサイトはWordPress本体とWordPressテーマで大枠が構成されています。
このうちWordPressサイトの外観を決定しているWordPressテーマを編集することで、WordPressカスタマイズが可能になりますが、この際にWordPressテーマの子テーマを作成してカスタマイズすることにより、テーマファイルの更新の際に「カスタマイズが無効になる」ということを防ぐメリットがあります。
なお、もちろん親テーマファイルをそのまま編集してもカスタマイズができます。
WordPressテーマの「子テーマ」
WordPressを構成しているWordPressテーマによって、WordPressサイトのデザインや大まかな仕様が決まりますが、WordPressテーマをカスタマイズする時、テーマファイルをそのまま編集すると大きくカスタマイズすることができる反面、もし無料テーマなどを使っていて「テーマの更新」があった場合、更新してしまうと、それまでに加えたカスタマイズ部分が上書きされて無効なります（運良く該当部分にアップデートが無ければそのまま継続されることもあります）。
そんなときはWordPressテーマの「子テーマ」を作成して、テーマファイルのfunctionやCSSのみオリジナルなものにしてしまうという方法があります。
functions.phpはテーマのための関数と呼ばれ、テーマにアクションフックやフィルターフックをかけて、機能を追加したり制御したりするために使用するファイルです。CSSはおなじみのホームページ制作で用いる装飾部分の指定でWordPressサイトの外観を決定しています。
いわば元となる親テーマの一部分を子テーマの利用によって上書きのような形で書き換えてしまうという方法です。
WordPressテーマの親子関係
テーマの親子関係を示した場合は次のようになります。
- 親テーマ＝WordPressサイトの外観を決定するのWordpressテーマ
- 子テーマ＝親テーマをベースとして機能を引き継ぎながら、親テーマの一部ファイルを上書きする形で編集（カスタマイズ）するためのテーマ
子テーマは、既に利用しているWordpressテーマのカスタマイズ用のテーマといって良いでしょう。
ファイル構成として子テーマは次のような構成になっています。
子テーマの構成
- 子テーマディレクトリ（新規生成）
- functions.php
- style.css
なお、ローカルで生成する場合は文字コードを合わせておいたほうがいいでしょう。
基本的にはUTF-8です。エディタでの保存時に文字コードをチェックしましょう。
子テーマ利用のメリット
子テーマを利用することの最大のメリットは、通常WordPressテーマを操作してカスタマイズした後に、テーマの更新を行うと、カスタマイズ内容が上書きされて無効になってしまうことを防ぐことができる点です。
子テーマ利用のデメリット
一方WordPressで子テーマを利用することにはデメリットもあります。
大きなデメリットはまず、子テーマ作成に手間がかかること。
そして、こちらのほうが肝心ですが、子テーマ利用によって、プラグインやテーマカスタマイズ内容が反映されない場合やうまく機能しない場合があるというケースです。
プラグインやカスタマイズ内容がうまく反映されない
子テーマを利用した場合、プラグインやカスタマイズ内容がうまく反映されない場合があります。
これはプラグインファイルがアクションフックなどをかける際に、対象ファイルにズレが生じるためです。
うまくカスタマイズすれば、それも回避することができますが、相当高度なカスタマイズになりますので、子テーマ利用によってプラグインが機能しなかったりする場合には、親テーマを操作するほうが無難かもしれません。
子テーマ作成の手順
WordPressテーマの子テーマを作成する手順は次のとおりです。
既存のテーマを直接カスタマイズしてしまうと、テーマのアップデートの際にカスタマイズファイルがすべて上書きされてしまうため、子テーマ作成後は子テーマのファイルを操作します。
まずは元となるWordPressの親テーマを選ぶ
WordPressサイトには複数のテーマをインストールすることができます。子テーマを利用する場合は、まず元となる親テーマを選ぶことが必要です。
子テーマの元となる親テーマを選んで決めた後は、それをベースとして子テーマを作成します。
ディレクトリ新規生成
WordPressサイトをインストールしているサーバーの中で、親テーマが格納されているディレクトリを見つけてそのディレクトリの下に子テーマ用のディレクトリを新規生成します。
WordPressインストールディレクトリ/wp-content/themes/テーマ名/子テーマ
一般的には、親テーマのテーマ名の後ろに「-child」を加えて生成します。
style.css の作成
WordPressテーマの子テーマディレクトリにstyle.css
基本的には親テーマのstyle.cssをそのまま貼り付けて、
Theme Name: 子テーマ名
Theme URI: 子テーマディレクトリの絶対URL
Template: 親テーマ（テンプレート）名
といった感じで修正部分を記述します。テンプレートだけは親テーマのままにしておきましょう。
この子テーマのスタイル（CSS）を編集することで、Webデザインの細かな調整をすることができます。
WordPressテーマの子テーマディレクトリにfunctions.php
style.cssと同じように親テーマのfunctions.phpを貼り付けて、修正部分を記述します。
その上で次のようなコードを埋め込んで子テーマを有効化します。
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );}
こうして子テーマを作成すると、親テーマの更新に影響されることなくstyle.css、functions.phpの中でWordPressカスタマイズを行うことができます。
ただし、基本的にはstyle.cssによってWebデザイン面を調整できたり、functions.phpでアクションフックやフィルターフックを使うカスタマイズまでに限定されます。
大幅なWordPressカスタマイズには全てのテーマファイルを操作する必要があることがほとんどです。
WordPressテーマの更新をしない予定ならば、functions.phpでフィルターなどを使うよりも親テーマを直接操作したほうが簡単なケースもよくあります。
WordPressの子テーマを利用したカスタマイズで限界を感じた場合は、弊社までご相談ください。
親テーマのCSSなどを上書きする仕組み
このWordPressにおける子テーマの本質的な特徴として、基本的には親テーマを残しながらも一部ファイルを上書きする仕組みが用いられている点が挙げられます。
例えばCSSは読み込む順番によって、後に読み込まれたものが上書き優先されます。このルールは単一のCSSの記述においても同じです。
そして、複数のCSSがあった場合は、ブラウザ上で後で読み込まれるものが先に読み込まれたものを上書きする形で優先されます。
こうしたことから、子テーマ利用の場合、親テーマ子テーマのCSSが両方読み込まれ、先に親テーマのCSSが反映されて、重複している箇所についてはパッチとして、子テーマのCSSが優先されます。
イメージとしては次のとおりです
- WordPressサイト表示の際に先に親テーマのCSSを読み込む
- その後、子テーマのCSSの読み込んで、親テーマと重複している部分は子テーマのCSSを適用する
WordPressカスタマイズ・修正
ホームページ制作 京都のWeb制作会社ファンフェアファンファーレでは、WordPressで制作されたウェブサイト・ホームページのカスタマイズサービスとして、WordPress（ワードプレス）のテーマ（テンプレート）やプラグインのカスタマイズサービスを提供しております。
WordPressカスタマイズの他、WordPressに関する様々な機能の実装や調整、編集はもちろん、各種エラーの修正・復旧に対応しております。
WordPressでのホームページ制作（WordPressサイト制作）
ホームページ制作 京都 ファンフェアファンファーレでは、ホームページ制作にあたり、WordPressでのホームページ制作（WordPressサイト制作）を推進させていただいております。
企業のWebマーケティングを加速するWordPressでのホームページ制作（WordPressサイト制作）ならお任せください！新規WordPressサイト制作はもちろん、htmlサイトからのホームページリニューアル、WordPressサイトのリニューアルにも対応しています。
WordPress（ワードプレス）でのホームページ制作・ウェブサイト制作
