WordPress子テーマ徹底解説|本当に必要?判断基準から作り方・運用のコツまで
「子テーマって、結局つくったほうがいいの?」「追加CSSだけじゃダメなのかな……」
WordPressで少し踏み込んだカスタマイズをしようとしたとき、多くの人がまずここで立ち止まります。
「親テーマを直接いじってるけど、更新したら消えるって本当?」
「途中から子テーマを作ったら、今のデザインが壊れないか不安……」
「プラグインで子テーマ作れるみたいだけど、手作業との違いがよく分からない」
「ブロックテーマ時代って聞くけど、今でも子テーマは必要なの?」
「functions.phpとか触ると、画面が真っ白になりそうで怖い」
こんなモヤモヤを抱えたまま、
「まあ今は大丈夫そうだし、そのうち勉強しよう」と後回しにしている人は少なくありません。
ただ、子テーマを使うかどうかの判断を誤ると、後からの修正コストやトラブルのリスクが一気に跳ね上がるのも事実です。
この記事では、単に「子テーマの作り方」を説明するだけでなく、
- そもそも 子テーマが本当に必要なケース・不要なケースの見分け方
- 手作業とプラグイン、それぞれの 具体的な作成手順と注意点
- 実際の運用でよくある つまずきポイントと、壊さないためのコツ
までを、ひとつの流れとして丁寧にまとめていきます。
「今のうちにちゃんと仕組みを理解して、将来困らないサイト運営をしたい」
そんな人が、自信を持って子テーマを使うかどうか判断できるようになることが、このガイドのゴールです。
子テーマの基本を理解しよう
WordPressテーマ全体の役割とは
まず「テーマ」が何をしているのかをおさえておきましょう。
WordPressのテーマは、ざっくり言うと「見た目」と「表示ルール」をまとめたセットです。
- 記事一覧をどう並べるか
- 見出しや文字のサイズ・色をどうするか
- サイドバーやフッターに何を表示するか
- モバイル表示をどう最適化するか
こういったことを、テーマの中にある以下のようなファイル群が決めています。
templateファイル(single.php,page.php,archive.phpなど)style.css(デザイン全般)functions.php(便利機能やカスタマイズ用のコード)- 画像・JavaScriptファイル など
言い換えると、テーマは「同じWordPressでも、どんなサイトに見えるか」を決める服のようなものです。
同じ記事内容でも、テーマを変えると「ビジネスサイト風」「ブログ風」「LP風」と、印象がガラッと変わります。
親テーマと子テーマの違いと関係性
次に、「親テーマ」「子テーマ」という言葉の整理です。
- 親テーマ
- テーマとしての本体
- デザインも機能もひととおり揃った完成品
- 子テーマ
- 親テーマをベースにした「カスタマイズ専用のテーマ」
- 必要な部分だけを上書き・追加するための小さなテーマ
シンプルにまとめると、次のような関係になります。
| 項目 | 親テーマ | 子テーマ |
|---|---|---|
| 役割 | サイトの土台・一式の完成品 | 親テーマを安全にカスタマイズするための器 |
| 中身 | テンプレート・CSS・機能が一通り | 変更・追加したい部分だけ |
| 更新の主体 | テーマ作者(公式・開発者) | サイト運営者本人 |
| アップデートの影響 | ファイルが新しい状態に置き換わる | 子テーマの変更は基本的にそのまま残る |
ポイントは、「子テーマだけでは動かない」 ということです。
子テーマは、あくまで親テーマにぶら下がる存在であり、親テーマがインストール・有効化されている前提で動きます。
子テーマが動く仕組み(「差分」を読み込む仕組み)
子テーマの仕組みは、一言でいうと「親テーマに対する差分だけを読み込む仕組み」です。
イメージしやすいように、次のように考えてみてください。
- 親テーマ:完成済みの定食メニュー 🍱
- 子テーマ:その定食にちょっと手を加えるためのトッピングや差し替え
具体的には、WordPressは次のような動きをします。
- まず親テーマの機能・テンプレートを読み込む
- 子テーマ側に同名のファイルがあれば、そちらを優先して使う
- 子テーマに存在しない部分は、親テーマのまま使用する
たとえば:
- 子テーマに
single.phpがある → 記事ページは子テーマ版が使われる - 子テーマに
single.phpがない → 親テーマのsingle.phpがそのまま使われる
この「必要なところだけ差し替える」という仕組みのおかげで、
- 親テーマのアップデートでセキュリティや機能は最新のまま
- 自分で加えたカスタマイズは子テーマ側に残る
という、いいとこ取りができます。
テンプレートファイルの優先順位と読み込みの流れ
最後に、もう少し踏み込んで「どのファイルが優先されるのか」という流れも整理しておきましょう。
WordPressは、ページを表示するときに決まった優先順位でテンプレートを探していく仕組みになっています(テンプレート階層)。
子テーマが関わる部分だけ、簡略化してみると次のようになります。
- 子テーマ内をチェック
- 例:投稿ページの場合
child-theme/single-{投稿タイプ}.phpがあるか?- なければ
child-theme/single.phpはあるか?
- 例:投稿ページの場合
- 該当ファイルが見つからなければ、親テーマをチェック
parent-theme/single-{投稿タイプ}.php- なければ
parent-theme/single.php
- それでも見つからない場合は、さらに汎用的なテンプレートへフォールバック
この「子テーマ → 親テーマの順番で探す」というルールがあるため、
- 子テーマに同名ファイルを置けば、その部分だけを差し替えられる
- 子テーマに何も置かなければ、親テーマのまま表示される
という挙動になります。
ここまでをまとめると、
- テーマは「見た目」と「表示ルール」を司る重要なパーツ
- 親テーマ=本体、子テーマ=安全に手を加えるためのカスタマイズ用テーマ
- 子テーマは「差分」だけを持ち、足りない部分は親テーマから補う
- テンプレートは 子テーマ → 親テーマ の順で探される
という4点を押さえておけば、子テーマの後続の話(作り方・活用法)もスムーズに理解しやすくなります。
子テーマは本当に必要? 使うべきかの判断基準
「子テーマを作らないとダメ」と書いてある記事もあれば、「初心者には不要」と言い切る記事もあります。
実際には、サイトの目的とカスタマイズの内容によって答えが変わります。
ここでは、どういうケースで子テーマを使うべきか・使わなくてもよいかを、具体的に切り分けていきます。
子テーマの導入をおすすめできるケース
次のどれかに当てはまるなら、子テーマを作っておく価値はかなり高いです。
- テーマファイル(PHP)を直接編集する予定がある
- 例:
single.phpに広告コードを挿入する - 例:
functions.phpに独自の関数やフック処理を追加する
- 例:
- デザインを「テーマの想定以上」に作り変えたい
- 配色やフォントだけでなく、レイアウトそのものを変えたい
- 固定ページやアーカイブのテンプレートを自作したい
- アップデートが頻繁なテーマを使っている
- 有料テーマや人気テーマは更新が多く、親テーマを直接いじると上書きされるリスクが高い
- 「更新でカスタマイズが消えるのが怖い」人は、早めに子テーマを導入した方が安心です
- 複数人で運営していて、誰かがテーマを編集する可能性がある
- チーム運営の場合、子テーマ側だけを触るルールにしておくと、親テーマの破壊を防ぎやすいです
ざっくり言えば、「見た目や機能をガッツリいじるなら子テーマ一択」と考えておいて大きな間違いはありません。
子テーマを使わなくてもよいケース(追加CSSで足りる例など)
一方で、無理に子テーマを使わなくてもよいケースもあります。
代表的なのは次のようなパターンです。
- ちょっとしたデザイン調整だけしたい場合
- 例:文字サイズを少し大きくしたい
- 例:リンクの色を変えたい
- 例:見出しに少し余白を足したい
「外観」→「カスタマイズ」→「追加CSS」
で十分対応できます。 - 子テーマ不要を公式に推奨しているテーマを使っている場合
- 最近のブロックテーマや、一部の有料テーマは
「グローバルスタイル」「テーマオプション」「専用カスタマイザー」などで完結するよう設計されています。 - 開発者が「子テーマを基本想定していない」と明言している場合もあり、その場合は無理に子テーマを使うと逆に複雑になることもあります。
- 最近のブロックテーマや、一部の有料テーマは
- PHPファイルには一切触れないつもりのとき
- CSSは「追加CSS」や専用プラグインで完結させる方がシンプルなことが多いです。
目安として、「CSSだけで済む・将来もPHP編集はしない」と言い切れるなら、子テーマは必須ではないと考えてOKです。
長期運営・大規模カスタマイズで子テーマが活きる場面
ブログやメディアサイトを長く育てていくつもりなら、子テーマのメリットは時間が経つほど大きくなります。
- 数年単位での記事蓄積+テーマアップデート
- 1〜2年運営していると、テーマ側の更新も何度も入ります。
- 親テーマを直接いじっていると、
「どこをどう変えたのか自分でも覚えていない」
という状態になりがちです。 - 子テーマにカスタマイズをまとめておけば、どのファイルをどう変えたかが一目で追いやすいです。
- 広告・CTA・ウィジェットなどをテンプレートに組み込むとき
- 「記事のタイトル下にだけ広告を挿入」「本文の最後に必ずCTAを入れる」など、
テンプレートレベルでの細かい調整は、子テーマ前提で設計しておく方が安全です。
- 「記事のタイトル下にだけ広告を挿入」「本文の最後に必ずCTAを入れる」など、
- 将来的に開発者や外注に依頼する可能性があるとき
- 子テーマ構成にしておくと、外部の制作者もカスタマイズの意図を読み取りやすく、
「どこを触ればいいか」が明確になります。
- 子テーマ構成にしておくと、外部の制作者もカスタマイズの意図を読み取りやすく、
まとめると、「長く運営するつもり」「テーマを自分色に作り込んでいきたい」なら、早い段階で子テーマを用意しておくべきです。
今使っているテーマが「子テーマかどうか」を見分ける方法
すでにWordPressを使っている場合、今有効になっているテーマが親なのか子なのかを確認しておきましょう。
簡単なチェック方法は次のとおりです。
- 管理画面から確認する方法
- 「外観」→「テーマ」を開く
- 有効なテーマをクリックすると、説明文に
「子テーマ」「親テーマ:〇〇」 といった表示が出ていることがあります。 テーマ名-childのように「child」「-child」という文字が付いている場合も多いです。
- ファイル構成で確認する方法
- サーバーやFTPで
/wp-content/themes/を開く - それぞれのテーマフォルダの中にある
style.cssの冒頭を確認する - 下記のように
Template: 親テーマのディレクトリ名と書かれていれば、それは子テーマです。
- サーバーやFTPで
/*
Theme Name: My Custom Child
Template: twentytwentyfour
*/
- 親テーマとセットで存在しているかを見る
mythemeとmytheme-childのようにペアで並んでいれば、-childの側が子テーマであることがほとんどです。
一度確認しておくと、「自分はもう子テーマを使っているのか」「まだ親テーマに直書きしているのか」がハッキリします。
子テーマがあらかじめ用意されているテーマを選ぶという考え方
テーマ選びの段階で、「子テーマがちゃんと用意されているか」をチェックするのも賢いやり方です。
- 子テーマ配布があるテーマのメリット
- 推奨構成が明確で、初心者でも導入しやすい
- 親テーマの作者が「子テーマ前提」で開発しているため、
アップデート時のトラブルが少ない傾向があります。 - ドキュメントやサポートも「子テーマ込み」で説明されていることが多いです。
- 事前に確認したいポイント
- 公式サイトに「子テーマダウンロード」や「子テーマの使い方ガイド」があるか
- 「子テーマを使ったカスタマイズ例」などの解説記事が用意されているか
- よくある質問で「子テーマ」がきちんと扱われているか
特に、有料テーマやビジネス用サイトで本気で運営したい場合は、
「デザインが好みか?」
だけでなく
「子テーマ周りのサポートが整っているか?」
もテーマ選びの基準に入れておくと、あとで楽になります。
この章のポイントを一言でまとめると、
「PHPやテンプレートを触るなら子テーマ必須。CSSの微調整だけなら追加CSSでもOK。長期運営するなら、早めに子テーマ前提の構成にしておくと安心。」
というイメージで考えると、判断がしやすくなります。
子テーマを使うメリット・注意点
子テーマは「ちょっと面倒だけど、そのぶん安心感が増す仕組み」です。
ここでは、良いところと気をつけたい点をセットで押さえておきましょう。
子テーマを利用する主なメリット
テーマ更新後もカスタマイズ内容を維持できる
親テーマを直接いじると、アップデートのたびに編集内容が上書きされるのが大きな問題です。
子テーマを使うと、
- デザイン調整 → 子テーマの
style.css - 機能追加 → 子テーマの
functions.php - テンプレート変更 → 子テーマ側にコピーした
single.phpなど
というように、自分の変更はすべて子テーマ側にまとめて書きます。
その結果:
- 親テーマを最新版に更新しても
→ 親テーマのファイルだけが入れ替わり、子テーマの変更はそのまま残る - セキュリティ修正や機能追加の恩恵を受けつつ、
→ 自分のカスタマイズを維持できる ✅
「更新したいけど、カスタマイズが消えそうで怖い」という状態から解放されるのが、子テーマ最大のメリットです。
本番サイトを壊さず安全に編集を試せる
親テーマに直接コードを書くと、1行のミスで画面が真っ白になることもあります。
子テーマでは、
- 変更するのは「子テーマ側のファイル」だけ
- おかしくなったら「子テーマを一時的に無効化」する、あるいは問題のファイルだけ削除すれば元に戻せる
という構成にできるので、本番サイトに対するリスクをかなり下げられます。
例えば:
functions.phpにコードを追加 → エラーが出た- 子テーマの
functions.phpを修正 or 一旦リネーム - 親テーマは無傷なので、最低限の表示はすぐ復旧できる
- 子テーマの
「失敗したら子テーマごと作り直せばいい」という逃げ道があると、学習しながらのカスタマイズもやりやすくなります。
親テーマの一部ファイルだけを上書き・微調整できる
子テーマは、必要なファイルだけコピーして上書きできるのが特徴です。
たとえば、
- 投稿ページのレイアウトだけ変えたい →
single.phpだけ子テーマにコピーして編集 - カテゴリーページの見せ方だけ変えたい →
category.phpを子テーマ側で調整
のように、「ここだけ違う表示にしたい」というニーズにぴったりです。
ポイントは:
- 触るファイルを絞れるので、管理しやすい
- 親テーマ側がアップデートされても、自分が上書きした部分だけを意識して見直せばよい
結果として、「テーマ丸ごとカスタマイズ」よりも、事故を減らしながら目的の表示に近づけやすくなります。
バージョン管理やテスト用の環境を作りやすい
少し踏み込んだ運用になりますが、子テーマはバージョン管理やテストにも相性が良いです。
- 子テーマのフォルダは比較的コンパクトなので、Gitなどのバージョン管理ツールで履歴を追いやすい
- 本番と同じ親テーマを入れたテスト用サイトに子テーマをコピーすれば、
「本番公開前に変更内容をチェックする」運用もやりやすい
たとえば:
- ローカル環境やステージング環境で子テーマを編集
- 問題ないことを確認してから、本番の子テーマに反映
という流れを作っておくと、ミスによるトラブルをさらに減らせます。
小規模ブログでも、
- 「どのファイルをいじったか」
- 「いつどんな変更をしたか」
を子テーマ単位で把握できるので、将来の自分が楽になります。
子テーマ利用時のデメリット・リスク
メリットが多い一方で、子テーマにも注意点があります。
「ここを理解したうえで使う」というスタンスが大事です。
作成・運用にある程度の知識と作業時間が必要
子テーマは、
- フォルダを作る
style.cssにテーマ情報と親テーマの指定を書くfunctions.phpを用意して適切に読み込む
といった最低限の手順が必要です。
手順自体は難しくありませんが、
- 記述を1行間違えるとエラーになる
- 子テーマを有効化しても、思った通りに反映されない
といったことも起こりやすく、完全な初心者には少しハードルが高く感じられることもあります。
特に、
- 親テーマやWordPressの仕様を理解せずに、ネットのコードをコピペするだけ
という使い方をすると、トラブルの原因になりがちです。
親テーマに依存し、大規模アップデートには弱い
子テーマは、あくまで親テーマの機能とデザインを前提にした「差分」です。
そのため、
- 親テーマ側で大きな仕様変更(テンプレート構造の刷新など)がある
- 子テーマにコピーしているテンプレートファイルが、古い設計のまま残る
といったケースでは、
- レイアウト崩れ
- 意図しない表示
- 新機能が効いていない
などの問題が出ることがあります。
対策としては、
- 親テーマの更新内容(リリースノート)を読む
- 自分の子テーマで上書きしているファイルがないか確認する
- 場合によっては、親テーマの新しいファイル構造を参考にして子テーマを調整し直す
といった、定期的なメンテナンスの意識が必要になります。
コード追加による表示速度低下やエラーの可能性
子テーマだからといって、何でもかんでもコードを詰め込んでよいわけではありません。
注意したいのは:
- CSSを重ねすぎて、スタイルが複雑になり表示速度や管理性が落ちる
functions.phpに機能を増やしすぎて、読み込みが重くなる- 不適切なフック・関数呼び出しでエラーを起こす
などです。
特に、ネット上のコードスニペットをそのまま貼り付けると、
- テーマの構造と合っていない
- PHPのバージョンと噛み合っていない
といった理由で、思わぬ不具合につながることもあります。
「本当に必要なコードだけ」「役割を分けて整理する」といった意識を持つと、子テーマ運用がぐっと安定します。
有効化忘れ・記述ミスで変更が反映されないことがある
意外と多いのが、「せっかく子テーマを用意したのに反映されていない」というケースです。
よくある原因は:
- 管理画面で 親テーマのまま有効化されている
style.cssのヘッダー情報に誤りがあり、子テーマとして認識されていないfunctions.phpの記述ミスで途中から処理が止まっている- CSSの優先順位(セレクタの強さや読み込み順)で上書きされている
こうしたトラブルを減らすには、
- 子テーマを有効化した直後に、テーマ名やスクリーンショットを確認する
- 変更が効かないときは「キャッシュ・有効テーマ・ファイル名」を順番にチェックする
- こまめにバックアップを取り、少しずつ変更を重ねる
といった基本のチェック項目を習慣化することが有効です。
子テーマは、正しく使えば「更新に強い・安全なカスタマイズの土台」になりますが、
やみくもに導入すると、メンテナンスが追いつかない「ブラックボックス化したテーマ」にもなり得ます。
メリットとリスクの両方を理解したうえで、
「どこまでカスタマイズするか」「誰がどのように運用するか」を決めておくことが、長く付き合えるサイトづくりのコツです。
子テーマ作成前に押さえておきたい準備とチェック
子テーマは「作りながら覚える」こともできますが、最低限の準備をしておくと、トラブルの9割くらいは回避できます。
ここでは、作業を始める前に確認しておきたいポイントをまとめます。
用意しておきたいツールと作業環境
子テーマづくりに必要なものは多くありませんが、最低限の環境を整えておくだけで作業効率がかなり変わります。
必須レベル
- ブラウザとWordPress管理画面へのログイン情報
- すべての操作の基点になるので、ログインURL・ID・パスワードを整理しておきます。
- テキストエディタ
- メモ帳でも動きますが、できれば以下のようなコード向けエディタがおすすめです。
- 例:VS Code、Atom、Sublime Text など
- インデントや構文の色分けがあるだけで、タイプミスに気づきやすくなり、エラーを減らせます。
- FTPソフト or サーバーのファイルマネージャ
- 子テーマのフォルダをアップロードしたり、ファイルを直接編集するために使います。
- 例:FileZilla、WinSCP、Cyberduck など
- レンタルサーバーの「ファイルマネージャー」機能だけで済ませても構いません。
- 圧縮ツール(ZIP形式対応)
- 子テーマを ZIP にまとめて管理画面からアップロードする場合に使います。
- Windows / macOS 標準の機能で十分です。
できれば用意したいもの
- テスト用(ステージング)環境
- 本番と同じテーマ構成をコピーしたテストサイトがあると、
「まずテストで試す → 問題なければ本番に反映」という安全な流れを作れます。
- 本番と同じテーマ構成をコピーしたテストサイトがあると、
- ブラウザの開発者ツール
- 右クリック →「検証」で開けるツールです。
- どのCSSが効いているか、どのクラスが使われているかを確認するのに便利です。
親テーマの配布元・更新頻度・子テーマ提供状況を確認する
子テーマを作る前に、そもそも親テーマがどんな方針で開発されているかを把握しておくことも大事です。
チェックしたいポイント
- 配布元はどこか
- WordPress公式ディレクトリなのか、
テーマ販売サイトなのか、個人配布なのか。 - 信頼性・サポート体制・ドキュメントの量にも影響します。
- WordPress公式ディレクトリなのか、
- 更新頻度はどのくらいか
- 数ヶ月おきにしっかり更新されているテーマなのか、
何年も放置されているテーマなのか。 - 更新が頻繁なテーマほど、子テーマでカスタマイズを分離しておく価値が高いです。
- 数ヶ月おきにしっかり更新されているテーマなのか、
- 子テーマの利用を前提にしているかどうか
- テーマによっては、公式サイトやマニュアルで
「子テーマを使うことを推奨」「子テーマは不要」などと明記している場合があります。
- テーマによっては、公式サイトやマニュアルで
「更新頻度が高い × 子テーマ推奨」
の組み合わせなら、早めに子テーマ運用に乗せてしまう方が安全です。
公式サイトやテーマ作者が配布している子テーマサンプルの有無
自作する前に、まず「作者が用意してくれているかどうか」を確認しましょう。
子テーマサンプルがある場合のメリット
style.cssやfunctions.phpの基本的な書き方が整っている- 親テーマに合った推奨設定やコードがあらかじめ入っている
- 配布元のドキュメントとセットで解説されていることが多く、
公式の手順に沿ってカスタマイズしやすい
特に有料テーマでは、
- 子テーマの ZIP がダウンロード一覧に含まれている
- マニュアルに「まず子テーマを有効化してから使ってください」と書かれている
といったケースがよくあります。
サンプルがない場合
配布元に子テーマサンプルがないテーマでも、もちろん自作は可能です。
その場合は、
- 親テーマのドキュメントで「子テーマ対応」「テンプレート構造」などの情報を確認
- ネットの一般的な子テーマ手順ではなく、できるだけそのテーマに近い情報源を参考にする
という姿勢を持つと、相性の悪いカスタマイズを避けやすくなります。
追加CSSやカスタムCSS用プラグインで代用できるかの見極め
子テーマを作る前に、「本当に子テーマが必要か?」を一度立ち止まって考えることも重要です。
追加CSSで足りるパターン
- 少しだけ文字サイズを変えたい
- 見出しの色や余白を微調整したい
- リンクカラーをブランドカラーに合わせたい
ここまでの範囲なら、
- 管理画面の
「外観」→「カスタマイズ」→「追加CSS」 - あるいは「Simple Custom CSS」などのカスタムCSSプラグイン
で完結できます。
子テーマが必要になるパターン
- テンプレートファイル(
single.php、page.phpなど)を編集したい functions.phpに独自の処理を追加したい- 親テーマの特定の機能を停止・上書きしたい
こういった場合は、追加CSSだけでは対応できないので子テーマが前提になります。
見極めのコツ
「どこまでやるか」の線引きに迷ったら、参考として次のように考えてみてください。
| やりたいこと | 子テーマ | 追加CSS / プラグイン |
|---|---|---|
| 色やフォントの調整 | 不要 | ◎ |
| 余白や境界線の調整 | 不要 | ◎ |
| テンプレート構造(配置)を変えたい | 必要 | × |
| PHPで機能を追加・削除したい | 必要 | × |
| 広告やCTAをテンプレートに組み込みたい | ほぼ必要 | △ |
「一時的な見た目の調整」なら追加CSS、 「構造そのものをいじる」なら子テーマと覚えておけば、大きく外れません。
親テーマ更新前にバックアップを取っておく重要性
子テーマを使っていても、親テーマの更新が原因で表示が崩れることはあります。
そのため、アップデート前のバックアップ習慣は必須です。
なぜバックアップが必要なのか
- 親テーマのテンプレート構造やCSSが大きく変わると、
子テーマ側の上書きファイルと整合性が取れなくなることがある - プラグインとの組み合わせで不具合が出るケースもあり、
元の状態に戻せないと、復旧に時間がかかる
バックアップのポイント
- データベースのバックアップ
- 記事・固定ページ・設定など、サイトの中身を守るため
- テーマ・プラグイン・アップロードファイルのバックアップ
wp-contentフォルダごと保存しておくと安心
- レンタルサーバー標準の自動バックアップ機能があれば、その設定状況も確認しておく
実務的な流れの例
- サーバー/バックアッププラグインでバックアップを取得
- テスト環境があれば、先にそちらで親テーマを更新して挙動を確認
- 問題がなければ、本番環境の親テーマも更新
- 表示崩れなどがあれば、子テーマ側の上書きファイルを中心に見直す
このような流れを習慣化しておくと、
「アップデート=怖いもの」から「サイトを健全に保つための定期点検」に意識を切り替えやすくなります。
子テーマ作成は「作業そのもの」よりも、
事前の準備とチェックで成否が決まる部分が大きいです。
- ツールと環境を整える
- 親テーマの性格を把握する
- 本当に子テーマが必要か見極める
- 更新前のバックアップを徹底する
この4つを押さえておけば、
あとの「作り方」「カスタマイズ」のステップも、落ち着いて進められるようになります。
手作業で子テーマを作成する具体的な手順
ここからは、「自分で子テーマを1から作る」ための実務的な手順をまとめます。
難しそうに見えますが、やることは基本的に「フォルダを作る → 2つのファイルを書く → アップロード」の流れです。
子テーマ用フォルダ(ディレクトリ)を作成する
まずは、子テーマの“入れ物”を用意します。
- サーバーにログインし、
/wp-content/themes/を開く - 親テーマのフォルダ名を確認する(例:
swell,cocoon,twentytwentyfourなど) - 同じ階層に、子テーマ用の新しいフォルダを作成する
フォルダ名はわかりやすくすると管理しやすいです。
| 親テーマ | 子テーマフォルダ例 |
|---|---|
swell | swell-child |
cocoon | cocoon-child |
tcd001 | tcd001-child |
あとから見てもすぐ「これは子テーマだ」と分かる名前にしておくと便利です。
style.cssを作成し、テーマ情報と親テーマを記述する
次に、子テーマの基本情報を記載した style.css を作成します。
- テキストエディタで新規ファイルを作る
- 以下のようなヘッダー情報を書き込む
- そのファイルを
style.cssという名前で、子テーマフォルダに保存する
/*
Theme Name: SWELL Child(ここは自分のサイト用に自由に書いてOK)
Template: swell
Description: SWELL用のカスタマイズ子テーマ
Author: あなたの名前やサイト名
Version: 1.0.0
*/
/* ここから下にカスタムCSSを書いていく */
重要なのは Template: の行に「親テーマのフォルダ名」を正確に書くことです。
親テーマの「名前」ではなく、「フォルダ名」である点に注意してください。
functions.phpを用意してスタイルやスクリプトを読み込む
次に、スタイルシートを正しく読み込むための functions.php を用意します。
- テキストエディタで新規ファイルを作る
- 以下のようなコードを書き込む
functions.phpという名前で、子テーマフォルダに保存する
<?php
// 親テーマと子テーマのCSSを読み込む処理
function my_child_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')
);
}
add_action('wp_enqueue_scripts', 'my_child_theme_enqueue_styles');
ポイントは以下の2つです。
get_template_directory_uri()→ 親テーマのフォルダを指すget_stylesheet_directory_uri()→ 子テーマのフォルダを指す
この書き方にしておけば、親 → 子の順でCSSが読み込まれ、子テーマのCSSが親テーマを上書きできる状態になります。
昔は @import で親CSSを読み込む方法もありましたが、
現在は非推奨なので、functions.php で読み込む形にしておきましょう。
必要最小限のテンプレートファイルやtheme.jsonを追加する
子テーマの基本構成は、最低でも以下の2つです。
style.cssfunctions.php
ここに、必要に応じてテンプレートファイルや theme.json を足していきます。
テンプレートファイルを上書きしたい場合
- 親テーマの
single.php(投稿ページ)、page.php(固定ページ)など、
変更したいファイルを親テーマ側からコピー - そのファイルを子テーマのフォルダ内に貼り付ける
- コピーしたファイルを、子テーマ側で編集する
WordPressは、
子テーマ内に同名ファイルがある場合 → 子テーマを優先して読み込む
というルールなので、「変えたい部分だけ」を子テーマ側で上書きできます。
theme.json を使う場合(ブロックテーマなど)
ブロックテーマでは、デザインの多くが theme.json に集約されます。
- 親テーマに
theme.jsonがある場合、
必要に応じて子テーマ側にもtheme.jsonを用意し、
色・タイポグラフィ・間隔などの設定を上書きできます。 - とはいえ、最初からいきなり
theme.jsonをフルカスタマイズする必要はありません。
「特定の色やフォント設定だけ上書きする」程度から始めると安全です。
子テーマフォルダをZIP形式に圧縮する
管理画面からアップロードする場合は、子テーマフォルダをZIPに圧縮します。
swell-childなど、子テーマフォルダごと選択- 右クリックメニューから「送る → 圧縮(zip形式)フォルダー」などを選ぶ
swell-child.zipのようなZIPファイルができればOK
このZIPが、WordPress管理画面からインストールできる「テーマパッケージ」になります。
管理画面から子テーマをアップロードしてインストールする
続いて、WordPressの管理画面で子テーマを追加します。
- 管理画面にログイン
- 「外観」→「テーマ」→「新規追加」→「テーマのアップロード」をクリック
- 先ほど作成した
子テーマ名.zipを選択 - 「今すぐインストール」を押す
問題なくアップロードされれば、テーマ一覧に新しい子テーマが表示されます。
子テーマを有効化し、親テーマと切り替わったか確認する
アップロードできたら、子テーマを有効化します。
- 「外観」→「テーマ」で、インストールされた子テーマを探す
- 子テーマのサムネイルにカーソルを合わせ、「有効化」をクリック
- サイトを表示し直して、エラーが出ないか・デザインが崩れていないか確認
チェックしたいポイントは以下の通りです。
- ログイン・ログアウト両方の状態で表示に問題がないか
- 追加したCSSやテンプレートの変更が反映されているか
- 管理画面の「有効なテーマ」に、親ではなく子テーマ名が表示されているか
もし真っ白な画面になったりエラーが出た場合は、
- 子テーマの
functions.phpの記述ミスがないか - ファイル名・フォルダ名・
Template:の値が正しいか
をFTPなどで確認し、必要なら子テーマを一時的に無効化して復旧します。
公式配布の子テーマをそのまま導入する場合のポイント
テーマによっては、作者があらかじめ子テーマを配布している場合があります。
この場合は、手作業で作るよりも公式の子テーマを使う方が安全で確実です。
導入の流れはシンプルです。
- テーマ公式サイトから、子テーマ用のZIPファイルをダウンロード
- 「外観」→「テーマ」→「新規追加」→「テーマのアップロード」でZIPをアップロード
- インストール完了後、子テーマを有効化する
その際のチェックポイントは次の通りです。
- 親テーマ本体が先にインストールされているか
- 親テーマがないと、子テーマはエラーになります。
- 公式マニュアルに「最初にやるべき設定」が書かれていないか
- 例:推奨プラグインの有効化、デモデータのインポートなど
- 公式の例にならって、可能な限り
style.css・functions.phpだけを編集し、親テーマには触れない
公式子テーマは、
「そのテーマの作者が意図した構成」になっていることが多いので、
まずはそれをベースに少しずつカスタマイズしていく方が、長期的に安定します。
ここまでできれば、
「親テーマを壊さずに、子テーマ側で安全にカスタマイズを積み上げていく」
ための土台はほぼ完成です。
プラグインで子テーマを自動生成する方法
前の章では「手作業で子テーマを作る方法」を見ましたが、
「細かいコードは怖い……」「とりあえず子テーマだけサクッと作りたい」という場合は、専用プラグインで自動生成してしまうのも有力な選択肢です。
ここでは、代表的なプラグインと使い方、注意点をまとめます。
子テーマ作成プラグインの代表例と特徴
子テーマ作成プラグインは、大きく分けると次の2タイプがあります。
- 高機能タイプ:細かい設定やスタイルのコピーも行える
- シンプルタイプ:最小限の子テーマだけサクッと作る
代表的なものをざっくり整理すると、こんなイメージです。
| プラグイン名 | 特徴のイメージ | 向いている人 |
|---|---|---|
| Child Theme Configurator | 機能豊富・分析機能あり・細かく調整できる | 子テーマをじっくり作り込みたい人 |
| WP Child Theme Generator | 画面がシンプル・最低限の項目で作成できる | とりあえず子テーマが欲しい人 |
| One-Click Child Theme | ほぼワンクリックで子テーマを自動生成 | コードに一切触りたくない人 |
Child Theme Configuratorの主な機能とできること
Child Theme Configurator は、一番よく名前が挙がる高機能系プラグインです。代表的なポイントは次の通りです。
- 親テーマを解析して、子テーマにコピーすべきファイルやスタイルを提案してくれる
- 親テーマのCSSを読み込みつつ、どのスタイルをどこで上書きするかを画面上で確認しながら編集できる
- 必要に応じてテンプレートファイルを子テーマ側へコピーする機能もあり、FTPを使わずにフォルダ内の操作がしやすい
- 作った子テーマが正しく動いているかをチェックする機能もあり、初心者がつまずきやすいポイントをフォローしてくれる
「ちゃんとした子テーマを作りたいけれど、手でファイルをいじるのは怖い」という人と相性が良いです。
WP Child Theme GeneratorやOne-Click Child Themeの概要
一方、よりシンプルな自動生成ツールとして、
- WP Child Theme Generator
- One-Click Child Theme
などがあります。
これらは、
- テーマ名・子テーマ名を入力
- 親テーマを選択
- 「生成」ボタンをクリック
といった流れで、最低限必要なファイルだけを持った子テーマを自動作成してくれるタイプです。
- 「カスタマイズの中身は自分で書くから、とりあえず器だけ欲しい」
- 「複雑な設定画面より、シンプルに作ってくれる方が安心」
といった場合は、こうしたシンプル系プラグインの方がストレスなく使えることも多いです。
Child Theme Configuratorで新しい子テーマを作る手順
ここでは一例として、Child Theme Configurator を使った場合の流れをざっくり整理しておきます。
- プラグインをインストールして有効化
- 管理画面 →「プラグイン」→「新規追加」から Child Theme Configurator を検索・インストール
- 有効化すると、メニューに設定画面が追加されます。
- 親テーマを選択して解析
- Child Theme Configurator の画面を開く
- 使用中の親テーマをプルダウンから選択
- 「解析」ボタンを押すと、テーマ構造やテンプレートの情報をプラグインがチェックしてくれます。
- 子テーマの情報を入力
- 子テーマ名(Theme Name)やスラッグ(フォルダ名)を設定
- すでに子テーマがある場合は、上書きしないように注意します。
- スタイルやテンプレートの扱いを選ぶ
- 親テーマのCSSをどう読み込むか
- どのテンプレートファイルを子テーマ側にコピーするか
といった設定を、画面上のオプションで選択します。
- 子テーマを生成
- 設定内容を確認して「子テーマを作成」ボタンを押す
- 正常に作成されれば、
/wp-content/themes/に子テーマフォルダが自動で作られます。
- 子テーマを有効化して表示を確認
- 「外観」→「テーマ」から、新しく作られた子テーマを有効化
- サイトを表示して、エラーが出ていないか・デザインがおかしくなっていないかチェックします。
手作業との違いは、フォルダやファイルの作成、CSSの読み込み設定などを画面操作だけで済ませられることです。
クラシックテーマとブロックテーマでの使い分けと注意点
最近は、「ブロックテーマ(フルサイト編集テーマ)」と、それ以前の「クラシックテーマ」で構造が大きく異なります。
子テーマプラグインを使う際も、ここを意識しておくと失敗しにくくなります。
クラシックテーマの場合
- 従来の
header.php・single.php・functions.phpなどで構成されているテーマ - 多くの子テーマ作成プラグインは、このクラシック構造を前提に作られている
- Child Theme Configurator もクラシックテーマ向けの機能が充実しており、
「CSSやテンプレートを一部だけ子テーマで上書きする」という使い方と相性が良いです。
ブロックテーマの場合
- レイアウトの多くが、
block-templateやtheme.jsonで管理される - 一部のプラグインは、ブロックテーマに完全対応していない場合もある
- テーマ公式サイトで「ブロックテーマの子テーマの作り方」が案内されていることが多いので、
まず公式ドキュメントを優先して確認する方が安全です。
特にブロックテーマでは、
- theme.json の上書き方法
- テンプレートパーツの扱い
など、従来のクラシックテーマと考え方が違う部分が多いため、
「クラシックテーマ前提の情報をそのまま当てはめない」ことが大切です。
サーバーの権限設定など、プラグイン利用時の注意ポイント
子テーマ作成プラグインは便利ですが、サーバー側の設定やセキュリティを軽視するとトラブルの元にもなります。
最低限、次の点は意識しておきましょう。
テーマフォルダへの書き込み権限
- プラグインが子テーマフォルダやファイルを作成するには、
/wp-content/themes/ディレクトリに書き込み権限が必要です。 - 権限が厳しすぎると
→「フォルダを作れない」「ファイルを保存できない」といったエラーが出ることがあります。 - 逆に、権限を緩めすぎるとセキュリティリスクも高まるため、
サーバー推奨のパーミッション設定に従うのが基本です。
バックアップを取ってから作業する
- プラグインが自動でファイルを操作する以上、100%ノーリスクとは言えません。
- 子テーマ作成前に、
- データベース
- テーマ・プラグイン・アップロード済みファイル
のバックアップを取っておくと、何かあっても戻しやすくなります。
プラグインは「必要なものだけ」を残す
- 子テーマ作成が終わったあと、プラグインを常時有効にしておく必要がないケースも多いです。
- 不要なプラグインを多く入れたままにすると、
- セキュリティリスク
- パフォーマンス低下
の原因になることもあります。
- 「子テーマ作成後は無効化しておく」「更新が止まったプラグインは使わない」など、メンテナンスの視点も持っておくと安心です。
プラグインを使えば、
フォルダ作成・ファイル作成・CSSの読み込み設定といった“最初の山”をかなり低くできるのが大きなメリットです。
一方で、
- どのテーマに対して使うのか(クラシック/ブロック)
- サーバー権限やバックアップの有無
- プラグイン自体の更新状況や信頼性
といった点を押さえておかないと、思わぬトラブルにもつながりかねません。
「最初の一歩はプラグインで、慣れてきたら手作業も覚える」くらいのスタンスで、
自分に合ったやり方を組み合わせていくのが現実的です。
子テーマで行うカスタマイズの実例集
ここからは、「子テーマで何ができるのか」を具体的なサンプルで見ていきます。
すべて「子テーマを使う意味がある典型パターン」なので、必要に応じて少しずつ真似してみてください。
CSSで見た目を調整する
子テーマの style.css は、見た目の最終調整を行うための“上書き用レイヤー”として使えます。
フォント種類・文字サイズ・行間を変更する
サイト全体の本文フォントや行間を変えたい場合、style.css に次のように書きます。
/* 本文全体のフォントと文字サイズ、行間を調整 */
body {
font-family: "游ゴシック体", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
font-size: 16px;
line-height: 1.8;
}
ポイントは、親テーマのCSSを直接上書きしないこと。
子テーマ側で上から重ねる形にすることで、親テーマ更新の影響を受けにくくなります。
見出しの下にラインを引く・装飾を加える
「H2だけ少し目立たせたい」「記事の区切りをはっきりさせたい」といったときの例です。
/* H2見出しの下にラインを追加 */
.entry-content h2 {
font-size: 1.6rem;
margin: 2.5em 0 1.5em;
padding-bottom: .4em;
border-bottom: 3px solid #007acc;
}
/* H3見出しをラベル風に */
.entry-content h3 {
font-size: 1.3rem;
display: inline-block;
padding: .3em .8em;
background: #f0f7ff;
border-left: 4px solid #007acc;
}
テーマによって .entry-content などのクラス名は違うので、ブラウザの検証ツールで実際に付いているクラスを確認してから当てるのがコツです。
サイト全体ではなく特定の要素だけスタイルを変える
「特定のボックスだけ見た目を変えたい」「一部の要素だけフォントを変えたい」場合は、クラスを使って範囲を絞ります。
/* 注意書きボックスだけデザインを変える */
.notice-box {
margin: 1.5em 0;
padding: 1em 1.2em;
border-left: 4px solid #ff9800;
background: #fff8e1;
font-size: .95rem;
}
/* 特定部分だけ等幅フォントで表示 */
.code-like {
font-family: "Source Code Pro", Menlo, Consolas, monospace;
background: #f5f5f5;
padding: .2em .4em;
}
あらかじめ「どのクラスを使うか」を自分で決めておき、記事内ではそのクラスを付けて呼び出す、という流れにしておくと管理しやすくなります。
functions.phpで機能を追加・変更する
functions.php は、サイト全体の挙動を整える“機能のハブ”です。
子テーマでの使い方をいくつかのパターンに分けて見てみましょう。
簡単なコードスニペットで便利機能を足す
たとえば、「抜粋の文字数を調整する」「自分のサイト用のショートコードを増やす」といった軽い機能追加です。
<?php
// 抜粋の文字数を調整(デフォルトより短くする例)
function my_excerpt_length( $length ) {
return 80; // 80文字程度にする
}
add_filter( 'excerpt_length', 'my_excerpt_length', 999 );
// ショートコード [year] で今年の西暦を出す
function my_shortcode_current_year() {
return date_i18n( 'Y' );
}
add_shortcode( 'year', 'my_shortcode_current_year' );
こうした「小技」は、プラグインを増やさずに機能を足したいときに便利です。
プラガブル関数を上書きして挙動を変える
テーマやプラグインが if ( ! function_exists( 'xxx' ) ) で定義しているものは、
子テーマ側で同名の関数を用意することで上書きできるケースがあります(プラガブル関数)。
// 親テーマ側で if ( ! function_exists( 'my_theme_pagination' ) ) となっている前提
if ( ! function_exists( 'my_theme_pagination' ) ) {
function my_theme_pagination() {
// 自分好みのページネーション出力に変更
the_posts_pagination( array(
'prev_text' => '前へ',
'next_text' => '次へ',
) );
}
}
ただし、
- 親テーマがどの関数をプラガブルにしているか
- どこで呼び出しているか
はテーマごとに違うため、テーマのドキュメントやソースを確認したうえで使う必要があります。
親テーマのフックを解除・別の関数で拡張する
親テーマが add_action / add_filter で機能を追加している場合、
子テーマからそのフックを解除したり、別の処理に差し替えたりできます。
// 親テーマのヘッダーに出している余計な情報を削除して、自前の処理に差し替える例
function my_child_setup_hooks() {
// 親テーマの処理を解除(フック名と優先度は親テーマのコードを確認)
remove_action( 'wp_head', 'my_parent_theme_header_meta', 10 );
// 代わりに子テーマ側の処理を追加
add_action( 'wp_head', 'my_child_theme_header_meta', 10 );
}
add_action( 'after_setup_theme', 'my_child_setup_hooks', 11 );
function my_child_theme_header_meta() {
// 必要なメタ情報だけを出力
echo '<meta name="description" content="○○○○○○">' . "\n";
}
このように、「親テーマのフック構造を理解しつつ少しずつ変える」のが、子テーマの本領発揮ポイントです。
テンプレートファイルをコピーしてレイアウトをアレンジする
- 記事ページだけデザインを変えたい
- カテゴリーページに説明文を追加したい
といった場合は、テンプレートファイルのコピー+編集が基本パターンです。
- 親テーマの
single.php(またはarchive.phpなど)を確認 - そのファイルを子テーマフォルダにコピー
- 子テーマ側の
single.phpを編集してレイアウトを変更
例:本文下に「関連記事」を必ず表示したい場合(擬似コード)
// 子テーマ側 single.php 内の本文出力後に追記
the_content();
// 関連記事セクション(条件やデザインは好みに応じて実装)
get_template_part( 'template-parts/related-posts' );
ポイントは、「必要なテンプレートだけ」「変更内容がハッキリしているものだけ」コピーすること。
やみくもに親テーマのファイルを全部コピーしてしまうと、アップデートのメリットが得にくくなります。
theme.jsonを使ってグローバルスタイルを管理する
ブロックテーマを使っている場合、全体のスタイル設定を theme.json で管理することが増えています。
子テーマ側に theme.json を置くことで、親テーマの設定を部分的に上書きできます。
例:見出しのフォントと色を子テーマ側で変えたい場合(ごく簡略版)
{
"version": 2,
"settings": {
"typography": {
"fontFamilies": [
{
"slug": "my-heading-font",
"name": "My Heading Font",
"fontFamily": "\"Noto Sans JP\", sans-serif"
}
]
}
},
"styles": {
"elements": {
"heading": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--my-heading-font)"
},
"color": {
"text": "#333333"
}
}
}
}
}
theme.json は構造がやや難しめなので、
- まずは「色」「フォント」「スペーシング」など、一部の項目だけを変更する
- 公式ドキュメントやテーマ提供元のサンプルを参考にする
といった進め方をすると挫折しにくくなります。
子テーマ内に画像などの追加ファイルを置いて表示する
子テーマは「画像・JS・フォント」などの追加アセット用フォルダとしても使えます。
例:子テーマ内の画像をCSS背景として使う場合
- 子テーマフォルダ内に
imagesフォルダを作成 images内にbg-section.jpgをアップロードstyle.cssで次のように指定
.section-with-bg {
background-image: url("images/bg-section.jpg");
background-size: cover;
background-position: center;
}
テンプレート内で画像URLを出力したい場合は、PHP側で以下のように書けます。
<img src="<?php echo esc_url( get_stylesheet_directory_uri() . '/images/logo-footer.svg' ); ?>" alt="サイトロゴ">
get_template_directory_uri()→ 親テーマget_stylesheet_directory_uri()→ 子テーマ
と指し示す場所が違うので、子テーマ内のファイルには後者を使う、というのを覚えておくと便利です。
ファビコンなど細かなパーツも子テーマで管理する
ファビコンやOGP画像などの「細かいけれどサイト全体に関わる画像」も、
子テーマ内で一元管理しておくと、後からの差し替えが楽になります。
例:functions.php で独自のファビコンを読み込む場合
// 子テーマ内のfavicon.icoを読み込む例
function my_child_theme_favicon() {
echo '<link rel="icon" href="' . esc_url( get_stylesheet_directory_uri() . '/images/favicon.ico' ) . '" sizes="any">' . "\n";
}
add_action( 'wp_head', 'my_child_theme_favicon' );
もしくは、テーマやWordPress側の「サイトアイコン」機能に任せてしまう方法もありますが、
- 運営しているサイトが複数ある
- テーマを変更する可能性がある
といった場合には、子テーマ側でファビコンやOGP画像のパスを管理しておく方が移行しやすいことも多いです。
子テーマのカスタマイズは、
- CSSで見た目を整える
functions.phpで機能を少しずつ足す- 必要なテンプレートだけコピーして構造を変える
という3本柱を意識しておくと、
「どこに何を書けばいいか」がだんだん整理されてきます。
最初から全部やろうとせず、
「まずはCSS」「次にfunctions.php」「慣れたらテンプレート」
と段階的に広げていくのがおすすめです。
子テーマが反映されない・表示が崩れるときの対処法
子テーマを導入するときに一番多い悩みが、
「設定したはずなのに見た目が変わらない/真っ白になった」というトラブルです。
ここでは、原因ごとにチェックポイントを分けて整理します。
上から順番に確認していけば、たいていの不具合は切り分けできます。
親テーマが見つからない/依存関係エラーの確認
子テーマは「親テーマがあってはじめて動く」仕組みです。
親テーマ周りのトラブルは、次のようなメッセージで現れます。
- 「親テーマが見つかりません(The parent theme is missing)」
- テーマ一覧で子テーマに「壊れています」と表示される
その場合は、次を確認します。
- 親テーマがインストールされているか
- 「外観」→「テーマ」で、対象の親テーマが存在するかチェック
- 誤って削除していないか、別テーマに入れ替えていないか確認
- 子テーマの style.css の
Templateが正しいか
/*
Theme Name: My Child Theme
Template: swell ← 親テーマの“フォルダ名”が入っているか
*/
* `Template:` には「テーマ名」ではなく**フォルダ名**を書きます。
* 親テーマフォルダが `swell` なのに `Swell` や `SWELL` と書いていると認識されません(大文字小文字も厳密)。
- 親テーマのフォルダ名を変えていないか
- FTPやファイルマネージャーで
/wp-content/themes/を開き、親テーマのフォルダ名を再確認 - 子テーマの
Template:と一致しているかを見比べます。
- FTPやファイルマネージャーで
CSSが効かないときにチェックすべきstyle.cssの記述
「子テーマを有効化したのにデザインが変わらない」というときは、CSSが正しく読み込まれていないか、上書きできていない可能性があります。
確認ポイントは次の通りです。
- ヘッダーコメントの直後からCSSを書いているか
/*
Theme Name: My Child Theme
Template: swell
*/
/* ここから下がCSS本体。コメントの中に書かないこと */
body {
line-height: 1.8;
}
- コメントブロック(
/* ... */)の中にCSSを書いてしまうと、全て無効になります。
- 子テーマの CSS が読み込まれるように functions.php を書いているか
<?php
function my_child_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')
);
}
add_action( 'wp_enqueue_scripts', 'my_child_enqueue_styles' );
- 親CSS → 子CSS の順で読み込まれていないと、子テーマの指定が上書きされないことがあります。
- セレクタの“強さ”が足りず、親テーマに負けていないか
- 親側が
.entry-content h2なのに、子側がh2だけだと上書きされないケースがあります。 - 必要に応じて、同じセレクタ(あるいは少し強いセレクタ)で指定し直すと効きやすくなります。
- 親側が
- そもそも編集しているのが「子テーマの style.css 」か
- 親テーマのCSSを編集していないか
- (意外と見落としやすいポイントです)
functions.phpのエラーで画面が真っ白になった場合の対応
PHPの文法ミスがあると、管理画面もフロントも真っ白(ホワイトスクリーン)になることがあります。
落ち着いて、次の順番で対処します。
- 直前に書き足したコードを疑う
- 直前にコピペしたコード部分で
- セミコロン
;の抜け {}や()の閉じ忘れ- 全角文字の混入
をチェックします。
- セミコロン
- 直前にコピペしたコード部分で
- FTPやファイルマネージャーで functions.php を直接修正 or 一時退避
- エディタでミスを修正して上書きする
- どうしても分からない場合は、
functions.phpを一時的にfunctions-bak.phpなどにリネームして無効化する
→ 子テーマの機能は一部失われますが、サイト表示は復活しやすくなります。
- 子テーマを一時的に無効化する
- 管理画面に入れない場合は
- データベースでテーマ名を書き換える
- もしくは一度親テーマフォルダ名を変え、強制的に別テーマに切り替えさせる
などの方法もありますが、初心者はサーバー会社のサポートに相談する方が安全です。
- 管理画面に入れない場合は
- 今後のためのポイント
?>でPHPを閉じる必要はありません(閉じタグの後ろにスペースや改行が入ると不具合の原因になります)。- 一度に大きなコードを貼らず、小さな単位で追加 → 動作確認を繰り返すと事故を減らせます。
子テーマが有効化されているか・サムネイル表示の確認
意外に多いのが、「子テーマを作ったけれど、親テーマのまま有効になっていた」というケースです。
- 現在有効なテーマを確認
- 「外観」→「テーマ」で、
「有効」になっているのが子テーマ名かどうかを確認します。 - 「親テーマの名前」だけが有効になっていると、当然子テーマの変更は反映されません。
- 「外観」→「テーマ」で、
- 子テーマを見分けやすくする(任意)
- 子テーマフォルダに
screenshot.pngを入れておくと、テーマ一覧のサムネイルに表示されます。 - 画像サイズはだいたい 1200×900px 前後のPNGが一般的です(細かい規定に厳密でなくても動作には支障ありません)。
- サムネイルがあると、「どれが子テーマか」を一目で判別でき、うっかり親テーマを有効化してしまうミスを減らせます。
- 子テーマフォルダに
キャッシュ・読み込み順・プラグイン競合の切り分け方
「コードは合っているはずなのに、どうしても変化が見えない」というときは、キャッシュやプラグインの影響を疑います。
1. ブラウザ・サーバー・CDNのキャッシュを疑う
- ブラウザのキャッシュを削除する
- シークレットウィンドウ(プライベートブラウズ)で開いてみる
- キャッシュ系プラグイン(例:WP Super Cache、W3TC など)を導入している場合は、
- プラグインの管理画面から「キャッシュ削除」を実行
- CDN(Cloudflare 等)を使っている場合は、CDN側のキャッシュクリアも必要になることがあります。
2. CSSやJSの「最適化プラグイン」がまとめ書きをしていないか
- Autoptimize や高速化プラグインが、CSSをひとまとめにしていると、子テーマの変更がすぐに反映されないことがあります。
- 一時的にそれらのプラグインをオフにしてみて、
子テーマの変更が反映されるかを確認します。
3. プラグインとの競合を切り分ける
- 不具合発生時点で導入していたプラグインを一度すべて停止してみる
- 子テーマだけ+最低限のプラグインで正常に動くか確認
- そのうえで、プラグインを一つずつ有効化していき、どこでおかしくなるかを探る
この作業は手間ですが、「テーマの問題か、プラグインの問題か」を切り分けるうえで非常に有効です。
親テーマの大幅アップデートで崩れたときの見直しポイント
親テーマのメジャーアップデート(バージョン 1.x → 2.x のような大きな更新)のあとに、
レイアウトが崩れたり、一部のページだけ表示がおかしくなることがあります。
その場合は、次の順番で見直します。
- 親テーマの変更履歴(Changelog)を確認
- レイアウトやテンプレート構造が変わった旨の記載がないか
- 廃止されたテンプレート/関数がないか
- 子テーマで上書きしているテンプレートファイルを洗い出す
- 子テーマフォルダ内の
single.php,page.php,archive.php,header.phpなど、
親テーマと同名のファイルをリストアップ - 崩れているページ種別と対応させて考えます(投稿ページなら
single.phpなど)。
- 子テーマフォルダ内の
- 親テーマの最新版テンプレートと比較する
- 親テーマの新しい
single.phpと、自分の子テーマのsingle.phpを比べる - 新しく追加された処理や、出力の順番が変わっていないかチェック
- 必要であれば、新しい親テンプレートをベースに、カスタマイズを“移植し直す”ことも検討します。
- 親テーマの新しい
- 一度テスト環境で再現してから、本番への反映を検討
- いきなり本番で直そうとせず、
ステージングやローカル環境で同じ親テーマ+子テーマ構成を作り、そこで調整する方が安全です。
- いきなり本番で直そうとせず、
- どうしても難しい場合は、一時的に親テーマのみで運用する選択肢も
- 表示が大きく崩れている場合、
一時的に「親テーマをそのまま有効化 → 子テーマは保留」にして被害を抑え、
時間をかけて子テーマの作り直し・整理をすることもあります。
- 表示が大きく崩れている場合、
トラブル対応のコツは、
- 「ファイルのミス」なのか
- 「設定・有効化の問題」なのか
- 「キャッシュやプラグインの影響」なのか
- 「親テーマアップデートによる構造変化」なのか
を、順番に切り分けていくことです。
一度手順を身につけておくと、今後テーマやサーバーを変えたときにも応用できますし、
「WordPressで何か起きても、慌てずに対処できる」という大きな安心感につながります。
子テーマ運用のコツとよくある失敗例
子テーマは「作ったら終わり」ではなく、どう運用するかで安全性も保守のしやすさも大きく変わります。
ここでは、長くサイトを育てるためのコツと、つまずきやすいポイントをまとめます。
何でも子テーマに書き込まないための設計思考
子テーマは便利ですが、「全部ここに書けばいいや」と思い始めた瞬間から、だんだんカオスになっていきます。
意識しておきたいのは、「役割を分ける」という発想です。
| やりたいこと | 置き場所の目安 |
|---|---|
| 軽い見た目調整(色・余白・フォント) | 子テーマの style.css or 追加CSS |
| サイト共通の便利機能(ショートコード等) | 子テーマ functions.php |
| 一部ページだけの複雑な処理 | 専用プラグイン or 個別テンプレート |
特に避けたいのは次のような状態です。
functions.phpに何十個もスニペットが詰め込まれて、何がどこで使われているか分からない- 本来プラグイン化すべき機能(お問い合わせ・SEO・リダイレクト等)を、全部
functions.phpで賄ってしまう
「そのコードは本当に子テーマに入れるべきか?」
一呼吸おいて考えるだけで、後々の負債をかなり減らせます。
親テーマ更新前にテスト環境で試す習慣をつける
子テーマを使う理由のひとつは、親テーマを安心して更新するためです。
とはいえ、メジャーアップデート時は表示崩れのリスクもゼロではありません。
理想的な流れはこうです。
- テスト環境(ステージング)を用意する
- レンタルサーバーの「ステージング機能」
- ローカル環境(Local, XAMPP 等)
- テスト環境に
- 本番と同じ親テーマ+子テーマ構成
- 主要なプラグイン
をコピー
- 先にテスト環境で親テーマをアップデート
- レイアウト崩れ
- エラー
- 動かなくなった機能
がないか確認
- 問題なければ、本番でも同じ手順でアップデート
この「まずテスト、あと本番」の習慣があるだけで、
致命的なトラブルのほとんどは避けられます。
テスト環境を用意できない場合でも、
- 更新前に必ずバックアップを取る
- 更新後すぐに複数ページ(トップ/投稿/固定ページ/アーカイブ)をざっと確認する
だけは徹底しておきたいところです。
セキュリティと表示速度を定期的にチェックする方法
子テーマはコードを書く場所が増える分、セキュリティと速度の面でも注意が必要です。
セキュリティ面のポイント
- 不明なコードをそのままコピペしない
- 「誰が書いたのか」「いつの情報か」を確認する
- 不要になったコードはコメントアウトではなく削除する
- 使われていない関数が残り続けると、脆弱性の温床になることもあります。
- WordPress本体・親テーマ・プラグインの更新を止めない
- 子テーマを理由にアップデートを避けると、本末転倒です。
表示速度のチェック方法
- 表示が重くなってきたら、
- 画像サイズの最適化
- 不要な外部スクリプトやフォント読み込みの見直し
を優先的に確認する
functions.phpに追加した処理が重くないか見直す- 「ページ表示ごとに外部APIを叩く」などは要注意
- PageSpeed Insights や GTmetrix で、
どのファイルがボトルネックになっているかを把握する
子テーマは「原因の一つになり得る場所」なので、
定期的に 「このコード、本当に必要?」 と棚卸ししておくと健全な状態を保ちやすくなります。
子テーマ付きテーマを選ぶメリットと選定基準
これからテーマを選ぶ場合、最初から子テーマが用意されているものを選ぶのは大きなアドバンテージです。
子テーマ付きテーマのメリット
- 作者が想定する「正しい子テーマ構成」が最初から整っている
style.cssやfunctions.phpの基本が出来上がっているので、自作よりミスが少ない- マニュアル・サポートも「子テーマ前提」で説明されていることが多く、
情報が探しやすい
テーマ選びのチェックリスト
テーマを検討するときは、次の点を見てみてください。
- 公式サイトに「子テーマダウンロード」が用意されているか
- 子テーマの使い方や注意点がドキュメントで説明されているか
- ブログ記事やフォーラムで、「子テーマでのカスタマイズ例」が豊富か
- 「アップデート × 子テーマ運用」についての言及があるか
「なんとなく評判がいい」だけではなく、 「カスタマイズ前提で長く使えるか」という視点を加えると、後から後悔しにくくなります。
カスタマイズに行き詰まったときの相談先・情報収集のコツ
子テーマを触っていると、必ずどこかで「コードが動かない/エラーの意味が分からない」という壁にぶつかります。
一人で抱え込まないために、頼れる窓口をいくつか持っておくと安心です。
相談・情報源の例
- テーマ公式のマニュアル・FAQ
- まずはここを最優先で読むべきです。
- 子テーマ向けのサンプルコードが載っていることも多いです。
- テーマ提供元のサポートフォーラム・問い合わせ窓口
- 有料テーマなら、サポートチケットでかなり具体的な質問ができる場合もあります。
- WordPress公式フォーラム・コミュニティサイト
- 同じテーマを使っている人の投稿や、近い事例を探すことでヒントが得られます。
質問するときのポイント
聞き方を工夫すると、回答をもらいやすくなります。
- 何をしたときに、何が起きたのか
- 変更したファイル名(例:
child-theme/functions.php) - 実際に書いたコードの一部(エラー周辺)
- 表示されているエラーメッセージ
をセットで伝えると、「状況の再現」がしやすくなり、具体的なアドバイスをもらいやすいです。
子テーマ運用は、
- 設計を欲張りすぎない
- アップデートを恐れないための仕組みを用意する
- セキュリティ・速度・保守性を定期的に振り返る
- 困ったときに相談できる窓口を確保しておく
この4つを押さえておくだけで、「壊れないか不安なカスタマイズ」から「育てていけるカスタマイズ」へと一段レベルアップします。
最初から完璧を目指す必要はないので、
少しずつでも「運用の型」を自分なりに整えていくイメージで取り組んでみてください。
子テーマに関するよくある質問Q&A
ここでは、実際に相談されることの多い「子テーマの疑問」をまとめて整理します。
迷ったときに、ざっと見返せる「ミニFAQ」として使ってください。
親テーマなしで子テーマだけ動かすことはできる?
できません。
子テーマはあくまで「親テーマに対する差分」として動く仕組みなので、
- 親テーマがインストールされていない
- 親テーマが削除された
- 親テーマのフォルダ名が変わった
といった状態では、子テーマ単体では機能しません。
style.css の Template: に書かれている「親テーマのフォルダ名」と、
実際の /wp-content/themes/ 内のフォルダ名が一致していることも必須条件です。
途中から子テーマを作っても問題にならない?
基本的には問題ありませんが、やり方には注意が必要です。
途中から子テーマに切り替える場合によくあるパターンは次の2つです。
- 親テーマを直接カスタマイズしていた場合
- 親テーマに書いていた
- CSS
- テンプレート修正
functions.phpの追記
を子テーマ側へ移し替える作業が必要になります。
- 手順を間違えると「前の見た目に戻せない」こともあるので、
必ずバックアップを取ってから行いましょう。
- 親テーマに書いていた
- ほぼカスタマイズしていなかった場合
- この場合は、子テーマを新規作成して有効化するだけでOKです。
- デザインが少し変わったように見えるときは、
追加CSSや高速化プラグインの影響も疑ってみてください。
「親テーマでどこをどれだけ触ってきたか」を整理しながら、
一気に移行しようとせず、少しずつ子テーマに寄せていくのが安全です。
子テーマはどのようにアップデートすればいい?
ここが意外と誤解されやすいポイントです。
- 親テーマ
→ テーマ作者が新しいバージョンを配布し、それを管理画面から更新する - 子テーマ
→ 基本的に「自分が書いたカスタマイズの集合」なので、
自動アップデートという概念はありません
子テーマの「アップデート」とは、
- 自分で
style.cssやfunctions.phpを修正する - 上書きしているテンプレートを、親テーマの最新構造に合わせて調整する
といったメンテナンス作業そのものを指します。
親テーマを更新したあとに、
- 子テーマで上書きしているファイル
- 古い書き方のコード
がないかを見直す、というのが現実的な「子テーマのアップデート」です。
子テーマを入れるとサイトが重くなることはある?
「子テーマを入れただけ」で極端に重くなることは、通常はありません。
ただし、子テーマにどういうコードを書くか次第で影響は出ます。
重くなりやすい例は、例えばこんなパターンです。
functions.phpに- 不要な外部スクリプトの読み込みを増やしすぎた
- 毎回重い処理(外部API呼び出しなど)を実行している
- CSSを追加しすぎて、スタイルシートが肥大化している
- 不要になったコードやスタイルを消さずに溜め込んでいる
つまり、子テーマそのものが原因というより、「中身の書き方」が原因になっていることが多いです。
表示速度が気になるときは、
- どのファイルがどれだけ読み込まれているか
- 不要なCSS・JSはないか
を、PageSpeed Insights などのツールでチェックしながら整理していくとよいです。
無料テーマ・有料テーマどちらでも子テーマは作成可能?
はい、どちらでも作れます。
- WordPress公式ディレクトリの無料テーマ
- 販売サイトや配布元から入手する有料テーマ
いずれも、親テーマとしてインストールされていれば、子テーマを作成して問題ありません。
ただし、有料テーマの場合は特に:
- 公式サイト側で「子テーマのサンプル」が配布されていることが多い
- 「このテーマでは子テーマを使わず、テーマオプションで完結させてください」といった方針の場合もある
といった違いがあるので、まずはテーマ提供元のマニュアルを確認することが大切です。
「追加CSS」と「子テーマのstyle.css」はどう使い分ける?
これはよくある疑問です。ざっくり分けると、次のようなイメージになります。
| 目的・規模 | 向いている場所 |
|---|---|
| ちょっとした色・余白・フォントの調整 | 追加CSS |
| 長期的に使うデザインルールや多数の調整 | 子テーマの style.css |
| テンプレートや機能とセットで管理したい | 子テーマの style.css |
追加CSS向き
- 「1〜2行だけ変えたい」
- 試しに軽く調整してみる段階
- テーマを変えたらリセットされても構わない内容
子テーマのstyle.css向き
- 本格的にサイト全体のデザインを整えたい
- テンプレートの構造変更や機能追加とセットで管理したい
- 他の環境(テスト・別サイト)にも同じデザインを再現したい
長く運営することを考えると、
「まず追加CSSで試す → 固まってきたら子テーマのstyle.cssに整理して移す」
という流れにすると、ごちゃごちゃになりにくくなります。
子テーマ周りの疑問は、一度整理しておくと
その後のテーマ変更やサーバー移転のときにも役立ちます。
迷ったときは、
- どこまでを子テーマに任せるか
- どこからはテーマオプション/追加CSS/プラグインに任せるか
を意識しながら、「役割の分担」を意識して設計していくと、管理しやすいサイトに育っていきます。
まとめ|子テーマを活用して安全にWordPressを育てよう
ここまで見てきたように、子テーマは「上級者だけのツール」ではなく、長くWordPressサイトを育てていきたい人のための保険のような存在です。
最後に、押さえておきたいポイントを整理しておきます。
子テーマの本質は「差分だけを安全に重ねる仕組み」
- 親テーマ=サイトの土台・完成品
- 子テーマ=その土台に安全にカスタマイズを積み上げるための“差分レイヤー”
直接親テーマをいじると、アップデートのたびに変更が消えたり、復旧が難しくなります。
子テーマに変更を集約しておけば、親テーマは安心して更新しつつ、自分のカスタマイズは守れるようになります。
子テーマが向いているケース・向いていないケースを見極める
- 「テンプレートを編集する」「
functions.phpにコードを書く」
→ 子テーマはほぼ必須 - 「ちょっと色や文字サイズを変えたいだけ」
→ まずは追加CSSやテーマオプションで十分かを考える
やみくもに子テーマを増やすより、
「どこからが子テーマの出番か」を自分なりに決めておくと、運用がぶれません。
作り方は「手作業」か「プラグイン」か、自分に合う方で
- ファイル操作に慣れている →
手作業で子テーマフォルダ + style.css + functions.phpを用意する - コードに自信がない →
Child Theme Configurator などの子テーマ作成プラグインで自動生成してから、中身を少しずつ学んでいく
どちらの方法でも、最終的にやることは同じです。
大事なのは、「仕組みを理解しながら使う」意識です。
子テーマでできることは多いが、何でも詰め込まない
子テーマでは、
- CSSでデザインを微調整
functions.phpで小さな便利機能を追加- 必要なテンプレートだけコピーしてレイアウトをアレンジ
- ブロックテーマなら
theme.jsonでグローバルスタイルを管理
…と、できることはたくさんあります。
一方で、何でもかんでも子テーマに書き込むと、いずれ自分でも把握できない状態になりがちです。
- 軽い調整 → 追加CSS
- サイト共通のデザインルール → 子テーマの
style.css - 複雑な機能 → 専用プラグイン化も検討
というように、「役割の線引き」を意識すると、数年後もメンテしやすい構成になります。
トラブル時は「順番に切り分ける」が鉄則
子テーマが反映されない・崩れたときは、原因を一気に当てようとせず、次の順番で見ていくと楽になります。
- 親テーマが見つかっているか(
Template:の指定・親テーマのフォルダ名) style.cssやfunctions.phpの初歩的なミス(コメントの閉じ忘れ・セミコロンの抜けなど)- 子テーマが本当に有効化されているか
- ブラウザ・キャッシュ・高速化プラグインの影響
- 親テーマの大幅アップデートの有無・テンプレート構造の変化
「ファイルの問題か」「設定の問題か」「外部要因か」を切り分ける癖をつけておくと、
原因を特定するスピードがどんどん上がっていきます。
これから子テーマを始める人へのおすすめステップ
迷ったときの、シンプルな一歩目のロードマップです。
- 今のテーマが
- 子テーマ推奨か
- 公式子テーマを配布しているか
をまず確認する
- 必要であれば、公式子テーマ or プラグインで子テーマを作成
- 最初は
- フォントや見出しのデザインなど、軽いCSS調整から始める
- 慣れてきたら
functions.phpにショートコードや小さな機能を追加- 一部テンプレートをコピーして、レイアウトを少し変えてみる
- 親テーマを更新する前に
- バックアップ
- 可能ならテスト環境で事前チェック
この順番でステップアップしていけば、
「壊すのが怖いWordPress」から「自分で育てていけるWordPress」に変わっていきます。
子テーマは、最初こそハードルが高く感じますが、
一度仕組みを理解してしまえば、長期運営にはほぼ必須の基礎スキルです。
いきなり完璧を目指さなくて大丈夫なので、
まずは小さなカスタマイズから一つずつ試しつつ、
「アップデートに強く、安全に育てられるWordPress」を目指していきましょう。
