WordPressは子テーマを使ってカスタマイズすると便利

WordPressのテーマをカスタマイズする時、テーマのPHPを直接編集している人は意外と多いのではないでしょうか。
しかし、テーマのPHPを直接いじってしまうとアップデート時にカスタマイズしたPHPがすべてリセットされてしまいます。

そんな時でも子テーマを使えば、カスタマイズした箇所はそのままにアップデータする事ができます。
しかも、設定は簡単です。
今回は子テーマの作り方について説明してきますので早速見ていきましょう！

子テーマを使うメリット

まずは子テーマを使うメリットについて把握しておきましょう。

WordPressのテーマをカスタマイズする時に直接テーマに変更を加えしてしまうと、テーマのバージョンをアップデートした際に変更箇所が上書きされてしまい、せっかくのカスタマイズがリセットされてしまいます。
しかし、子テーマを使えば、テーマをアップデートしてもカスタマイズ箇所はそのまま残ります。

子テーマを使わずにテーマをカスタマイズするとバージョンアップなどでテーマをアップデートするとカスタマイズ箇所が全て上書きされてしまいます。
その為、子テーマを利用しないカスタマイズは基本的にテーマをバージョンアップする事ができずずっと古いままで運営しなければなりません。

子テーマを使ってカスタマイズした場合は、変更箇所は子テーマに保存されている為、親テーマをアップデートしても何ら問題ありません。

そんな便利な子テーマはどうやって作るのでしょうか？
作り方はいたって簡単です。

子テーマを作る前にまずは親テーマを決めましょう。
親テーマはどんなテーマを選択しても構いません。
今回は「Twenty Seventeen」を親テーマとして子テーマを作ると仮定しましょう。

親テーマが決まったら子テーマの準備に取り掛かりましょう。
WordPressが子テーマとして最低限認識するために必要なものは「style.css」です。

子テーマのファイルを保存しておく為のディレクトリを作ります。
名前は任意で良いですが、よくあるのが「◯◯◯_child」などといった名前です。
例えば「Twenty Seventeen」の子テーマであれば「twentyfifteen_child」といった具合です。

フォルダができたら早速「style.css」を入れておきましょう。

style.cssという名前のcssファイルを作ったと思います。
style.cssには子テーマの名前と親テーマの名前を記載するだけで最低限動作します。

/*
Theme Name:子テーマの名前（任意）
Template:親テーマの名前（親テーマのフォルダ名）
*/
 
@import url("../親テーマのフォルダ名/style.css");

@importを使って親テーマのcssを読み込む必要があります。
（@importがなければcssが何も適用されていな状態ですので、表示が崩れます。）

左が先ほど作ったtwentyfifteen_childです。

参考までに「twentyfifteen_child」のCSSの中身を記載しておきます。
↓親テーマとしてTwenty Seventeenが入っていれば下記のcssをコピペするだけで子テーマとして動作します。

/*
Theme Name:twentyseventeen_child
Template:twentyseventeen
*/
 
@import url("../twentyseventeen/style.css");

親テーマのフォルダ名が間違いって居たりするとこんなエラーが出るので注意してください。

子テーマの設定が終わったら、カスタマイズしたいファイルを親テーマからコピーして子テーマに移して編集するだけです。

例えば「投稿ページのカスタマイズをしたい！」と思ったら
親テーマにあるsingle.phpを子テーマのフォルダ内にコピーしてください。

コピー後は今まで通りPHPを編集するだけだから特に難しいことはありません。

編集が終わったら、
「外観 > テーマ」から子テーマを有効化するだけでカスタマイズが反映されます。

子テーマを使えばWordPressのテーマカスタマイズが捗ります。

例えばエラーが発生したとしても、カスタマイズした子テーマのファイルを削除して、親テーマから元のファイルを持ってくるだけで元に戻す事ができます。

失敗してもすぐにもとに戻せるから積極的にカスタマイズに挑戦できます。

子テーマを使って運用コストを減らしつつ、どんどん自分好みのテーマにカスタマイズしていきましょう。