WordPress子テーマの作り方

WordPressには「テーマ」をインストールしてサイトを制作します。テーマの一部を変更したくなった場合、WordPressの様々な機能やプラグインを使ってカスタマイズします。
ですが、テーマそのものに手を加える必要が出てくることがあります。この場合は必ず「子テーマ」を作成しましょう。

子テーマとは

子テーマってそもそも何だ?と思うかもしれません。
子テーマとはカスタマイズ専用のWordPressテーマのことです。

既存のWordPressテーマがあり、そのWordPressテーマの機能とデザインを使いつつ、一部を変更した場合に使うのが「子テーマ」です。
この場合の既存のWordPressテーマを「親テーマ」と呼びます。

  • 親テーマ…WordPress公式テーマや自分でインストールしたテーマなど、既存のWordPressテーマ
  • 子テーマ…親テーマの機能やデザインを継承するカスタマイズ専用のテーマ

子テーマがあれば、親テーマを編集せずにデザインを変更したり、ソースコードに手を加えるといったことが可能になります。

親テーマと子テーマの関係

もし、子テーマを使わずに親テーマを編集した場合、テーマのバージョンアップで変更した内容はすべて消えてしまいます。
テーマのカスタマイズにどれだけ時間をかけていようと、また一からやり直しになります。
親テーマを直接編集するのではなく、必ず子テーマを編集しましょう。

子テーマの作り方

ここからは子テーマを作る手順を説明します。

最低限必要なのは以下の3つです。

  • 子テーマのフォルダ
  • style.css
  • functions.php

数分で終わる作業で、この3つさえあれば子テーマを使用することができます。
テーマによっては、子テーマを公式サイトで配布していることも多いので、テーマの公式サイトもチェックしてください。

ここではWordPress公式テーマの「lightning」を元に子テーマの作り方を説明します。

1.子テーマのフォルダを作る

子テーマ用のフォルダを作ります。
名前は何でもいいのですが、親テーマとの関係が分かりやすいものにしましょう。

例:
親テーマ:lightning
子テーマ:lightning child

2.必要なファイルを作成する

フォルダ内にstyle.cssとfunctions.phpを作成します。

下記のコードをコピペして、style.cssとfunctions.phpと名前をつけてください。

style.cssの解説

「Theme Name」と「Template」が最低限あれば大丈夫です。

  • Theme Name:子テーマの名前を書く
  • Template:親テーマのフォルダ名を書く

他テーマを親テーマとする場合は、「Template」を使用したい親テーマの名前に変更します。

もし、子テーマが適用されない場合は親テーマのつづりが間違っていることが多いです。
「twentyseventeen」が正しいのに、「twentySeventeen」など「S」が大文字になっているなど、一部が違うだけで子テーマとして適用されません。
親テーマのフォルダ名を確認してください。

functions.phpの解説

functions.phpに親テーマのCSSを呼び出す内容を記述します。

これで親テーマから子テーマへデザインが引き継がれます。

また、子テーマの作り方を解説している古い記事では、style.cssで@importを使って子テーマを使用する方法が書かれている場合があります。
しかし、現在はfunctions.phpを編集することが推奨されていますので、子テーマにはfunctions.phpを使って親テーマのCSSを呼び出してください。

以前は @import: を使用して親テーマのスタイルシートをインポートしていましたが、これはもはや良い方法ではありませんので注意してください。親テーマのスタイルシートをキューに入れる正しい方法は、子テーマの functions.php で wp_enqueue_script()を使用する方法です。したがって子テーマには functions.php を作成する必要があります。

WordPress Codex 日本語版より

子テーマのテンプレートをダウンロード

ここまでの内容をまとめたファイルをダウンロードできるようにしました。
以下よりダウンロードしてください。

ダウンロードできたらファイルを展開し、フォルダ名とstyle.cssの「Template」名を変更してください。
どちらも半角英数字で入力します。
親テーマの名前を間違えないようにしましょう。

3.アップロードする

FTPソフトなどで「/wp-content/themes/」フォルダに子テーマのフォルダごとアップロードしましょう。

管理画面の「外観」→「テーマ」から子テーマを有効化して完了です。
これでCSSの編集やテンプレートにカスタマイズを加えた後に親テーマをバージョンアップしても問題なくなりました。

※なお、子テーマが「テーマ」の一覧画面に網かけのようなイメージで表示されるのは「screenshot.png(またはscreenshot.jpg)」が子テーマの中に存在していないためです。

子テーマのサムネイル表示

例えばトップページのスクリーンショットを撮って、Photoshopなどでサイズを調整して「screenshot.png」と名前をつけてください。
子テーマのフォルダの中に入れると、テーマの一覧に画像が表示されます。
詳しくはテーマにサムネイル画像を設定する記事を参考にしてください。

まとめ

今回は子テーマの概要と作り方について解説しました。

子テーマを使えば、親テーマのバージョンアップの影響を受けずにカスタマイズができるようになります。

親テーマを直接カスタマイズしている人は、大幅なバージョンアップがあってもテーマを更新するわけにはいきません。しかし、便利な機能が追加されたり、バグが修正されたりといったときにバージョンアップができないのは問題です。

子テーマを使えば気にせずカスタマイズできるので、最初の手間はかかりますが、子テーマの利用をおすすめします。慣れれば数分で終わるでしょう。