WordPressのテーマを直接編集してカスタマイズすると、テーマを更新した瞬間に変更内容がすべて消えます。これを防ぐ唯一の正攻法が「子テーマ」です。この記事では、子テーマ用フォルダの作成から style.css のヘッダー記述、functions.php での親テーマCSS読み込みまでを、そのまま使えるコード付きで解説します。さらに、実際の制作現場でよく遭遇する「有効化したらデザインが崩れた」「CSSが効かない」「画面が真っ白になった」といったトラブルの原因と対処法もまとめました。
この記事の結論（先に要点だけ）
- 子テーマは フォルダ1つ + style.css 1ファイル があれば動く（最短5分）
style.cssのヘッダーで必須なのは Theme Name と Template の2つだけ- Template には親テーマの「フォルダ名」を正確に（大文字小文字も区別）書く
- CSSの読み込みは
@importではなく functions.php の wp_enqueue_style を使う - 有効化後の表示崩れの大半は「親テーマCSSの読み込み漏れ」か「キャッシュ」が原因
WordPressの子テーマとは？親テーマとの関係
子テーマとは、既存のテーマ（親テーマ）の機能とデザインをそのまま引き継いだうえで、差分だけを上書きできるテーマのことです。WordPressは表示の際に「子テーマに該当ファイルがあればそれを使い、なければ親テーマのファイルを使う」という判定を行います。
| 項目 | 親テーマを直接編集 | 子テーマを使う |
|---|---|---|
| テーマ更新時 | カスタマイズが全消滅 | カスタマイズは残る |
| セキュリティ更新 | 更新が怖くて放置しがち | 安心して即時更新できる |
| 元に戻す | バックアップ頼み | 親テーマに切り替えるだけ |
| 変更箇所の管理 | どこを触ったか不明になる | 子テーマ内＝変更箇所 |
実際にあった失敗例
公開中のコーポレートサイトで、親テーマの header.php と style.css を直接書き換えて電話番号やCTAボタンを追加していたケース。ある日、脆弱性対応のためテーマを自動更新した結果、ヘッダーのCTAとブランドカラーの指定がすべて初期状態に戻りました。しかも「戻す」機能はなく、バックアップもテーマファイルまで含んでいなかったため、数時間かけて作り直すことに。子テーマを使っていれば発生しなかった事故です。詳しくはこの分析で解説されています。
子テーマを作る前に準備するもの
- 親テーマ本体（子テーマだけでは動作しません。親テーマは必ずインストールしたまま残します）
- FTP/SFTPソフト または サーバーのファイルマネージャー（エックスサーバー、ConoHa、さくらなどの管理画面から操作可能）
- テキストエディタ（VS Codeなど。文字コードは UTF-8（BOMなし）、改行コードはLF推奨）
- サイトのバックアップ（作業前に取得しておくと安全です）
注意：Windowsのメモ帳で保存するとBOMが付き、画面上部に謎の余白や「Warning: Cannot modify header information」が出ることがあります。必ずBOMなしで保存してください。
子テーマの作り方【手順4ステップ】
ここでは親テーマを WordPress 標準テーマの twentytwentyfive と仮定して説明します。お使いのテーマ名に読み替えてください。
STEP1：子テーマ用フォルダを作成する
- FTPまたはファイルマネージャーで
/wp-content/themes/を開く - 新規フォルダを作成する
- フォルダ名は 「親テーマのフォルダ名-child」 にする（例：
twentytwentyfive-child）
フォルダ名のルールは次の通りです。
- 半角英数字とハイフンのみ（全角文字・日本語・スペースはNG）
- すべて小文字にしておくと事故が少ない
- 「-child」は必須ではないが、管理しやすいので推奨
STEP2：style.css を作成してヘッダーを記述する
作成したフォルダの中に style.css を新規作成し、ファイルの先頭に以下のコメント（テーマヘッダー）を記述します。
/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://ozasahayashi.com/
Description: Twenty Twenty-Five の子テーマです。
Author: Ozasa Hayashi
Author URI: https://ozasahayashi.com/
Template: twentytwentyfive
Version: 1.0.0
Text Domain: twentytwentyfive-child
*/
/* ここから下に独自のCSSを書いていきます */
.site-title {
letter-spacing: 0.04em;
}
各項目の意味は次の通りです。
| 項目 | 必須 | 内容 |
|---|---|---|
| Theme Name | 必須 | 管理画面のテーマ一覧に表示される名前。他テーマと重複しない名称にする |
| Template | 必須 | 親テーマのフォルダ名。テーマ名ではなくフォルダ名、かつ大文字小文字を区別 |
| Version | 推奨 | CSSのキャッシュ制御に使える。更新したら番号も上げる |
| Description / Author | 任意 | 管理用のメモ。複数人で運用するなら書いておくと親切 |
| Text Domain | 任意 | 翻訳ファイルを使う場合に指定 |
ここが最大のつまずきポイント：Template に「Twenty Twenty-Five」のような表示名を書いてしまうと、「親テーマが見つかりません」というエラーが出て有効化できません。必ず /wp-content/themes/ 内のフォルダ名をそのまま書き写してください。
STEP3：functions.php で親テーマのCSSを読み込む
同じフォルダ内に functions.php を作成します。子テーマの functions.php は親テーマを上書きせず、追加で読み込まれるのがポイントです（style.css は上書き扱い、functions.php は追加扱い）。さらに詳しい内容はphpもコピペでOK! wordpress子テーマの作り方にあります。
パターンA：一般的なテーマ（推奨）
最近のテーマは自前でCSSを wp_enqueue_style 経由で読み込むため、子テーマ側は自分のCSSを「親より後ろ」で読み込むだけで十分です。
<?php
/**
* 子テーマ functions.php
*/
add_action( 'wp_enqueue_scripts', 'ozasa_child_enqueue_styles', 20 );
function ozasa_child_enqueue_styles() {
wp_enqueue_style(
'ozasa-child-style',
get_stylesheet_uri(),
array(),
wp_get_theme()->get( 'Version' )
);
}
パターンB：親テーマのstyle.cssが直接読み込まれている場合
親テーマの style.css 自体にデザインが書かれているタイプ（Twenty系や旧来のテーマ）は、親のCSSを明示的に読み込み、その後に子テーマのCSSを依存関係付きで読み込みます。
<?php
add_action( 'wp_enqueue_scripts', 'ozasa_child_enqueue_parent_styles' );
function ozasa_child_enqueue_parent_styles() {
$parent_handle = 'ozasa-parent-style';
wp_enqueue_style(
$parent_handle,
get_template_directory_uri() . '/style.css',
array(),
wp_get_theme( get_template() )->get( 'Version' )
);
wp_enqueue_style(
'ozasa-child-style',
get_stylesheet_uri(),
array( $parent_handle ),
wp_get_theme()->get( 'Version' )
);
}
functions.php を書くときの鉄則
- 1行目は
<?php。その前に空行・スペース・BOMを入れない - ファイル末尾の
?>は書かない（余計な出力を防ぐため） - 関数名は
ozasa_child_のように独自の接頭辞を付ける（親テーマと重複すると致命的エラー） - 親テーマのコードを丸ごとコピーしない。必要な差分だけを書く
STEP4：子テーマを有効化する
- 管理画面の 外観 > テーマ を開く
- 作成した子テーマ（例：Twenty Twenty-Five Child）が一覧に表示されていることを確認
- 有効化 をクリック
- サイトを表示して、親テーマと同じ見た目になっているかチェック
FTPが使えない場合は、子テーマのフォルダをZIP圧縮し、外観 > テーマ > 新しいテーマを追加 > テーマのアップロード からインストールする方法もあります。同様の分析がhippo-lab.comにもあります。
screenshot.png（任意）
管理画面のサムネイルを設定したい場合は、1200×900px の screenshot.png を子テーマフォルダ直下に置きます。なくても動作に問題はありません。
完成後のファイル構成
wp-content/
└ themes/
├ twentytwentyfive/ ← 親テーマ（削除しない）
└ twentytwentyfive-child/ ← 子テーマ
├ style.css ← 必須
├ functions.php ← 推奨
├ screenshot.png ← 任意
└ single.php ← 上書きしたいテンプレートのみ
子テーマでできるカスタマイズと優先順位
| ファイル | 挙動 | 使い方 |
|---|---|---|
| style.css | 親を置き換え（後から読み込む） | 色・余白・フォントなどの上書き |
| functions.php | 追加読み込み（親より先に実行） | フック追加、機能追加、不要機能の停止 |
| single.php / page.php など | 同名ファイルがあれば完全に上書き | 親からコピーして編集 |
| template-parts/ 内のファイル | 同じ階層構造なら上書き | ディレクトリ構造を親と揃える |
| templates/ ・ parts/（ブロックテーマ） | HTMLテンプレートを上書き | フルサイト編集テーマで使用 |
ポイント：テンプレートを上書きする際は、親テーマの該当ファイルをそのままコピーしてから編集します。ゼロから書くと必要な関数が抜けて表示が壊れます。
ブロックテーマ（フルサイト編集）の場合の注意
Twenty Twenty-Four以降のブロックテーマでは、デザインの多くが theme.json とサイトエディターで管理されています。この場合は次の点に注意してください。
- 子テーマ側に
theme.jsonを置くと、親の theme.json とマージされる（丸ごと置き換えではない） - 色やタイポグラフィの変更程度なら、子テーマを作らずサイトエディターのスタイル機能で完結することも多い
- PHPでのフック追加やテンプレート改変を伴うなら、やはり子テーマが必要
子テーマ有効化後によくある表示崩れと対処法
| 症状 | 主な原因 | 対処法 |
|---|---|---|
| デザインが全部消えて文字だけになる | 親テーマCSSが読み込まれていない | functions.php のパターンBを適用する |
| テーマ一覧に子テーマが出てこない | style.css のヘッダー記述ミス、場所違い | themes直下か、Theme Name と Template を再確認 |
| 「親テーマが見つかりません」 | Template の値が親フォルダ名と不一致 | 大文字小文字・ハイフンまで正確に合わせる |
| 画面が真っ白になる | functions.php の構文エラー・関数名重複 | FTPで functions.php をリネームして復旧し修正 |
| CSSを書いても反映されない | キャッシュ、読み込み順、詳細度不足 | キャッシュ削除 → Version更新 → セレクタを具体化 |
| メニューやウィジェットが消えた | テーマごとに設定が保存されるため | 外観 > メニュー／ウィジェットで再設定 |
| カスタマイザーの設定が初期化 | theme_mods が別テーマ扱い | 設定をメモしてから移行するか、エクスポート系プラグインを利用 |
| スマホだけ崩れる | メディアクエリの記述順が親より前 | 子テーマCSSは必ず親より後に読み込む |
CSSが効かないときのチェック順序
- ブラウザのスーパーリロード（Ctrl+Shift+R / Cmd+Shift+R）
- キャッシュ系プラグインとサーバーキャッシュを削除（Xサーバーのサーバーキャッシュ、CDNなど）
- style.css の Version を上げる（1.0.0 → 1.0.1）。上のコード例なら自動でURLのクエリが変わります
- 検証ツール（F12）で 子テーマのstyle.cssが読み込まれているかを確認
- 読み込まれているのに負けている場合はセレクタの詳細度を上げる（親要素を追加するなど）
!important は最終手段です。多用すると後から修正できなくなるので、まずは詳細度と読み込み順で解決してください。
真っ白になったときの復旧手順
- FTPで
/wp-content/themes/○○-child/functions.phpをfunctions.php.bakにリネーム - サイトが復旧したらエラー箇所を特定（
wp-config.phpでWP_DEBUGを一時的に true にすると原因行が表示されます） - 修正後、ファイル名を戻す
プラグインで子テーマを自動生成する方法
コードを書きたくない場合は、子テーマ生成プラグインを使う手もあります。
| 方法 | 向いている人 | 注意点 |
|---|---|---|
| 手動で作成（本記事の方法） | 構造を理解して運用したい人 | FTP操作が必要 |
| 子テーマ生成プラグイン | FTPが使えない・急いでいる人 | 生成後はプラグインを停止・削除してよいか確認する |
| 公式配布の子テーマ | Lightning、Cocoon、SWELLなど利用者 | 配布元の最新版を使う。自作より確実 |
国産テーマを使っている方へ：Lightning、Cocoon、SWELL、SANGOなどは公式が子テーマを配布しています。自作するより配布版をダウンロードして入れるほうが速く、相性問題も起きません。「テーマ名 子テーマ 公式」で配布ページを確認してください。
子テーマが「不要」なケース
すべてのカスタマイズに子テーマが必要なわけではありません。次の場合は子テーマなしでも安全です。
- 数行のCSS調整だけ → 外観 > カスタマイズ > 追加CSS でOK（テーマ更新で消えません）
- ブロックテーマで色やフォントを変えるだけ → サイトエディターのスタイル
- ヘッダー/フッターへのタグ挿入だけ → コード挿入系プラグイン
一方、PHPの改変、テンプレートの構造変更、大量のCSS、フックによる機能追加を行うなら、迷わず子テーマを作ってください。
作業後のチェックリスト
- フォルダ名は半角英数字か
- style.css の Template は親フォルダ名と完全一致しているか
- functions.php の1行目前に空行やBOMがないか
- 関数名に独自接頭辞を付けたか
- トップ・固定ページ・投稿ページ・アーカイブ・404の表示を確認したか
- スマホ表示とお問い合わせフォームの送信を確認したか
- 親テーマを削除していないか
- 子テーマフォルダをバックアップしたか
よくある質問（FAQ）
Q1. 子テーマは必ず必要ですか？
テーマファイル（PHP）を編集するなら必要です。CSSの微調整だけなら「追加CSS」で代用できます。判断基準は「テーマ更新で消えたら困るコードを書くかどうか」です。
Q2. 親テーマは削除してもいいですか？
いいえ。親テーマを削除すると子テーマも動作しません。更新通知が来た親テーマは、そのまま更新して構いません。
Q3. functions.php は親テーマの内容をコピーすべきですか？
不要です。子テーマの functions.php は親を置き換えず追加で読み込まれるため、必要な差分だけを書きます。丸ごとコピーすると関数名が重複して致命的エラーになります。
Q4. style.css の @import で親CSSを読み込んではいけないのですか？
推奨されません。@import は読み込みが直列になり表示速度が落ちるため、wp_enqueue_style を使う方法が現在の標準です。
Q5. 子テーマに切り替えたらウィジェットやメニューが消えました
WordPressはテーマごとに設定を保存するため、これは正常な挙動です。外観 > メニュー と 外観 > ウィジェット から再設定してください。切り替え前にスクリーンショットを残しておくとスムーズです。
Q6. 子テーマをさらに子テーマ化（孫テーマ）できますか？
WordPressの標準仕様では孫テーマはサポートされていません。階層は親と子の2段階までです。
Q7. 既存サイトで子テーマに切り替えるとSEOに影響しますか？
HTML構造と表示内容が変わらなければ影響はありません。ただし、テンプレート改変で見出し構造や内部リンクが変わる場合は影響します。切り替え後は表示速度、構造化データ、パンくずリストの確認をおすすめします。
まとめ
子テーマ作成は、フォルダを作る → style.css にヘッダーを書く → functions.php でCSSを読み込む → 有効化するという4ステップだけです。難しいのは作ること自体ではなく、Template の指定ミスや親CSSの読み込み漏れといった小さな落とし穴を避けること。本記事のコードとチェックリストをそのまま使えば、安全にカスタマイズできる土台が整います。
「自社サイトをカスタマイズしたいが、触って壊すのが怖い」「既存サイトを子テーマ構成に移行したい」といったご相談は、ozasahayashi.com までお気軽にお問い合わせください。
0 Comments