WordPressのテーマを直接編集すると、テーマアップデート時に変更内容が消えてしまいます。そこで使用するのが「子テーマ」です。
子テーマを使うことで、
- CSSの追加
- functions.php のカスタマイズ
- テンプレート編集
- 固定ページごとのレイアウト変更
などを、WordPressのテーマに影響を与えず安全に管理できます。
本記事では、Twenty Twenty-Fiveを例に、
- 子テーマとは何か
- なぜ必要なのか
- 作成方法
- CSSが反映されないときの対処法
まで初心者向けに解説します。
１．子テーマを作成する前に：サイトエディターとの使い分け
最近のWordPress（ブロックエディタ）では、管理画面の「サイトエディター」から色やフォントを簡単に変更できるようになりました。
- 管理画面（サイトエディター）でOKな場合：
できること→メインカラーの変更、フォントの変更、簡単なレイアウト調整 - 子テーマが必要な場合：
できること→独自のPHPプログラムを追加、複雑なCSSをまとめて管理、本格的なカスタマイズ
私自身、細かな部分を変えたいのに変更ボタンや機能がない！ともどかしく感じたことが何度かあります。その場合は子テーマを作成することで、変更できる部分が大幅に増えます。
両者の違いをわかりやすくするため、比較表を作成しました。
| カスタマイズ内容 | サイトエディター | 子テーマ |
|---|---|---|
| 色・フォントの変更 | ◎（簡単） | △（手間が掛かる） |
| レイアウト調整 | 〇（直観的） | ◎（自由自在） |
| PHPでの追加機能 | ×（不可） | ◎（可能） |
| おすすめ対象 | 初心者・手軽さ重視 | 中級者・本格運用 |
「自分だけのこだわりを追求したい！」という方は、以下の手順で子テーマを作成しましょう。
２．なぜ「子テーマ」が必要なのか？2つの大きなメリット
テーマの更新時にカスタマイズが消えない【最重要！】
WordPressのテーマ（親テーマ）は、セキュリティ対策や機能追加のために頻繁にアップデートされます。 もし親テーマのファイルを直接書き換えていた場合、更新ボタンを押した瞬間に、あなたが苦労して書いたCSSやコードはすべて上書きされ、消えてしまいます。
子テーマを作っておけば、親テーマが新しくなっても、あなたのカスタマイズは別の場所に保存されているため、安全に守られます。
失敗しても「元の状態」にすぐ戻せる
カスタマイズ中に「画面が真っ白になった！」という失敗は、初心者にはよくあることです。 親テーマを直接いじっていると修復が大変ですが、子テーマなら、最悪の場合「子テーマを無効化」するだけで、サイトを元の正常な状態に一瞬で戻すことができます。
３．子テーマ作成の4ステップ
現在使用しているテーマを確認します。
WordPressの管理画面、サイドバーの「外観」から「テーマ」を選択します。
初期設定のままであれば、Twenty Twenty-○○ がダウンロードされています。
①フォルダ作成
確認が終わったら、FTPソフトへ移動します。今回はWinSCPを使用しています。
WordPressをインストールしたフォルダ内の/wp-content/themes/に移動します。
その中に現在使用中のテーマフォルダ（例：twentytwentyfive）が存在します。
現在のテーマであるtwentytwentyfive のフォルダがあることを確認して、
新しいフォルダ（ディレクトリ）を作成します。
子テーマとなるので、「テーマ-child」と名付けるのが一般的です。
今回は「twentytwentyfive-child」としました。
②style.cssの作成
子テーマのフォルダ「twentytwentyfive-child」が作成できたら、そのフォルダの中にstyle.cssというファイルを作成します。
※WordPressのシステム自体が、「テーマの中に style.css があるか」を名前で判断して読み込む仕組みになっているため、必ずファイル名を「style.css」と付けて下さい。
style.cssファイルのテーマヘッダー情報に以下を記述してください。
/*
Theme Name: 管理画面に表示される名前（任意）
Template: 親テーマの「フォルダ名」を正しく記述
*/
今回の場合は
/*
Theme Name: twentytwentyfive-child
Template: twentytwentyfive
*/となります。
書けたら保存します。
③functions.phpの作成
子テーマのフォルダ「twentytwentyfive-child」の中にfunctions.phpというファイルを作成します。
これにより、親テーマのスタイルを正しく読み込ませます。
※WordPressのシステム自体が、「functions.php があるか」を名前で判断して読み込む仕組みになっているため、必ずファイル名を「functions.php」と付けて下さい。
functions.phpファイルの中に以下を記述してください。
<?php
function 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')
);
}
add_action('wp_enqueue_scripts', 'child_enqueue_styles');※ブロックテーマでは、親テーマのCSSを自動で読み込む仕組みがあるため、本来この記述がなくてもデザインが崩れない場合があります。
しかし、子テーマ側に書いたCSSを確実に、優先的に反映させるためには、この functions.php の設定を行っておくのが最も確実で、トラブルの少ない方法です。
書けたら保存します。
子テーマの中に２つファイルができました。
これで準備は完了です。
④管理画面で子テーマの有効化
WordPressの管理画面に戻り、サイドバーから「外観」＞「テーマ」をクリックします。
先ほど作成した子テーマの「twentytwentyfive-child」が作成されています。
※作成されていない場合はブラウザで Ctrl + F5（Macは Cmd + Shift + R）を押して、キャッシュを無視して再読み込みします。
カーソルを子テーマに合わせると「有効化」ボタンが出てくるため有効化します。
【補足】子テーマを有効化しただけでは、サイトデザイン自体は変わりません
子テーマは「カスタマイズ用の土台」を作る仕組みのため、実際のデザイン変更は style.css や functions.php に追記して行います。
４．CSSが反映されているか確認する方法
子テーマのファイルが動作するか確認します。
動作確認用に、新規固定ページを1つ作成します。
サイドバー（右側）の「ブロック」の中に「高度な設定」があります。
CSSを付けたい文字や画像を選択した状態で追加CSSクラスを入力します。（ピリオドなし）
今回は文字を赤くしたいので「text-red」にしました。
設定ができたら「公開」ボタンより公開しましょう。
そのまま「固定ページを表示」から、表示がどのようになっているか確認します。
確認が終わったら、FTPソフトへ移動します。
先ほど作成した style.css（/wp-content/themes/twentytwentyfive-child/style.css）にCSSを記述します。
.text-red {
color: red;
}
保存します。
WordPressの画面に戻り、ブラウザで Ctrl + F5（Macは Cmd + Shift + R）を押して、キャッシュを無視して再読み込みします。
CSSが反映されていれば成功です。
今回は練習として文字色を変えましたが、実際には「行間を詰めたい」「ボタンの影を消したい」といった微調整も、同じ手順で反映させることができます。
５．上手くいかない時のチェックリスト
子テーマを作成した場所が合っているか
現在のテーマと同じ階層でないとWordpressが読み取ってくれません。現在のテーマ名を確認して、
正しい場所に子テーマを配置しましょう。
CSSとPHPのファイル名が間違っていないか
必ず、「style.css」「functions.php」というファイル名で作成します。スペルミスがないか再確認をしてください。
CSSとPHPの記述ミスがないか
親テーマのフォルダ名が正しく入力されているか確認します。
大文字・小文字が違っているだけでも反映しないため、注意してください。
また、style.cssのコメント構造が崩れていないか（先頭が /* で始まり */ で閉じているか）も確認しましょう。
キャッシュが残っていないか
ブラウザのキャッシュが残っているとデータが更新されないことがあります。Ctrl + F5（Macは Cmd + Shift + R）を押して、キャッシュを無視して再読み込みし、正しく反映されるか確認してください。
６．まとめ
子テーマは、親テーマのアップデートを気にせず安全にカスタマイズするための基本的な仕組みです。
必要なのは次の3つだけです。
- 親テーマと同じ階層に子テーマフォルダを作成
- style.css にテーマ情報を記述
- functions.php でスタイルを読み込む
WordPressで継続的にサイトを運用する場合、子テーマを作成することは重要なポイントになります。
最初は難しく感じるかもしれませんが、一度作ってしまえばあとはファイルを編集するだけです。
また、子テーマの中に新しいPHPファイル（カスタムテンプレート）を作成すれば、固定ページごとに異なるレイアウトを適用することも可能です。
カスタムテンプレートの詳しい作成方法については、こちらの記事で解説しています。