WordPressの子テーマの作り方｜Lightning・SWELL別に、つまずかない手順で解説

あなたのサイト、こんなことになっていませんか？

まめすけ

がんばってCSSを書き足したのに、テーマを更新したら全部消えちゃったよ！

私はフリーランスでWordPressサイトの制作と保守を請け負っています。「更新したらカスタマイズが消えた」というお悩みはよくある相談の一つです。

原因はほぼ一つで、親テーマを直接編集していたことです。

この記事では、それを防ぐための「子テーマ」を、実際に使えるところまで作ります。コピペで完結する内容にしていますので、順番どおりに進めてください。

そもそも子テーマとは何ですか？

カスタマイズ内容を、テーマ更新から守るための仕組みです。

WordPressのテーマは、作者によって定期的に更新されます。不具合の修正やセキュリティ対応が含まれるため、更新は止めるべきではありません。

ただし更新すると、テーマのファイルは新しいものにまるごと置き換わります。そこに自分で書き足したCSSやPHPがあれば、当然そのまま消えます。

そこで使うのが子テーマです。

WordPressは「子テーマに記述があればそちらを優先し、無ければ親テーマを見る」という動きをします。親テーマには一切触らずに、上書きだけできるわけです。

子テーマは必ず必要ですか？

カスタマイズをするなら必要です。しないなら不要です。

判断はシンプルです。

子テーマが必要なケース

• CSSを追加してデザインを調整したい
• functions.php に機能を追加したい
• JavaScriptを読み込ませたい
• テンプレートファイル（header.php など）を書き換えたい

子テーマが不要なケース

• テーマの設定画面だけで完結している
• 少量のCSSを「追加CSS」欄に書いているだけ

ちなみに管理画面の「外観 → カスタマイズ → 追加CSS」は、テーマを更新しても消えません。CSSを数行足すだけなら、子テーマを作らずここで済ませても構いません。

ただし、記述が増えてくると管理しづらくなります。数十行を超えるなら子テーマに移すほうが健全です。

まめすけ

表示スペースが狭いので長いコードになると見にくいんだよね

使っているテーマによって手順は違いますか？

違います。まずお使いのテーマを確認してください。

公式の子テーマが配布されているテーマは、ダウンロードして入れるだけです。自作は不要ですし、するべきでもありません。

配布されているのに自作するのは避けてください。 公式版はそのテーマの構造に合わせて作られており、動作も保証されています。自作すると、テーマ側の想定と噛み合わず不具合の原因になります。

以下、SWELL・Lightningの場合と、自作が必要な場合に分けて解説します。

SWELLの子テーマはどうやって入れますか？

公式サイトからダウンロードして、アップロードするだけです。

ダウンロードするのは「子テーマ」の行にある swell_child.zip です。

1. SWELLERS’（会員サイト）にログイン
2. マイページの「SWELL製品ダウンロード」から子テーマをダウンロード
3. WordPress管理画面 → 外観 → テーマ → 新規追加 → テーマのアップロード
4. ダウンロードしたZIPファイルを選択してインストール
5. 有効化

これで完了です。ファイルを作る必要はありません。

なおSWELLは、子テーマが無くてもJavaScriptを追加できます。管理画面の「カスタマイザー」から直接記述できるためです。

とはいえ functions.php を編集する予定があるなら、子テーマは入れておいてください。

Lightningの子テーマはどうやって入れますか？

公式が配布しているサンプルデータを使います。

Lightningは開発元のVektor Inc.が、公式の学習サイト「ベクトル トレーニング」で子テーマのサンプルデータを配布しています。自作せず、こちらを使うのが確実です。

子テーマのDLはこちらから

カスタマイズの準備 1 : Lightningの子テーマの準備 | ベクトレ このレッスンについてWordPressの子テーマについて、また、Lightning用の子テーマのサンプルデータを利用する方法について解説しています。子テーマとは？適用中の親テーマ…

手順は以下のとおりです。

/*
Theme Name: Lightning Child Sample
Template: lightning
*/

Lightning Pro（G2）をお使いの場合

Pro版には専用の子テーマが別途用意されています。ただしLightning Proは旧バージョンにあたるため、新規で作成する場合は無料版Lightningの子テーマを使うことが推奨されています。

子テーマを自作するにはどうすればいいですか？

フォルダを1つと、ファイルを2つ作るだけです。

作るのはこの構造です。

/wp-content/themes/
    ├── 親テーマのフォルダ/
    └── 親テーマ名-child/     ← 新規作成
        ├── style.css         ← 新規作成
        └── functions.php     ← 新規作成

必要なものは、フォルダ1つ・ファイル2つ。これだけです。

/*
Theme Name: Lightning Child
Template: lightning
Version: 1.0.0
*/

<?php
/**
 * 子テーマの読み込み設定
 */
function ksuke_child_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' ),
		filemtime( get_stylesheet_directory() . '/style.css' )
	);
}
add_action( 'wp_enqueue_scripts', 'ksuke_child_enqueue_styles' );

有効化したらデザインが崩れました

親テーマのCSSが読み込めていない可能性が高いです。

原因は、ほぼ次の3つに絞られます。

真っ白になった場合も慌てないでください。 FTPで子テーマの functions.php を一旦削除すれば、管理画面には戻れます。

なお、テーマによっては上記の functions.php が不要な場合もあります。最近のテーマは親テーマ側でCSSの読み込みを管理していることがあるためです。崩れる場合は、wp_enqueue_style 部分を外して試してみてください。

まめすけ

FTPで戻せるって知ってるだけで、心の余裕が全然違うね

子テーマを作ったあと、何をすればいいですか？

カスタマイズは、すべて子テーマ側に書きます。

これが本来の目的です。

• CSSを追加したい → 子テーマの style.css の末尾に書く
• 機能を追加したい → 子テーマの functions.php の末尾に書く
• テンプレートを変えたい → 親テーマから該当ファイルを子テーマにコピーしてから編集する
  ※ただし、この方法は最終手段です。テンプレートを複製すると、そのファイルだけ親テーマの更新についていけなくなります。フックで実現できるなら、functions.php 側で対応するほうが安全です。

3つ目は、できるだけ避けたい方法です。

テンプレートファイルを複製すると、そのファイルだけ親テーマの更新から取り残されます。
テーマ側で不具合修正や機能追加があっても、複製したファイルには反映されません。

Lightningのようにフック（表示位置を指定してコードを差し込む仕組み）が用意されているテーマなら、まず functions.php で実現できないかを検討してください。どうしても構造そのものを変えたい場合の、最後の選択肢だと考えるのが安全です。

親テーマのファイルは、最後まで一度も編集しません。これが子テーマを使う唯一にして最大の理由です。

作業前に必ずやっておくこと

バックアップの取得です。

子テーマの作成自体はリスクの低い作業ですが、functions.php の記述ミスでサイトが表示されなくなることはあります。

• ファイル一式とデータベースのバックアップを取る
• FTPの接続情報を手元に用意しておく
• 可能なら、いきなり本番ではなくテスト環境で試す

特にFTPで入れる状態を確保しておくことが保険になります。管理画面に入れなくなっても、FTPさえあれば必ず戻せます。

あわせて読みたい

【初心者向け】WordPressバックアップはこれ一択！UpdraftPlusの設定・復元方法を完全解説 新たにプラグインを入れるときやコードを編集した時にバックアップを簡単に取れたら安心なんだけどなぁ。 同じように考えている人はたくさんいると思いますよ。 今回は…

実際に子テーマで何ができるのか

子テーマを使うと、テーマの標準機能では届かないところまで手が入れられます。
実例として、ページビルダー環境でクエリループを動かした記録がこちらです。

あわせて読みたい

クエリループをショートコードで呼び出す方法｜ページビルダー環境でカスタムフィールドまで表示する あなたのサイト、こんなことになっていませんか？ クエリループが便利そうなのに、うちのページビルダーだと置く場所がない…… 私はフリーランスでWordPressサイトの制作…

まとめ

子テーマは、一度作ってしまえばそれ以降ずっと使えます。最初の30分の作業が、この先何年分ものカスタマイズを守ってくれると考えると、費用対効果はかなり良い部類です。

「テーマを更新するのが怖い」と感じているなら、その不安の正体はたいてい子テーマの不在です。ここを整えてしまえば、更新は怖くなくなります。