CreaTools LogoCreaTools
Tech Notes
Tips

WordPress子テーマの作り方と使いどころ

2026-01-13

この記事が解決する状況

あなたの状況読むべきセクション
テーマ更新でCSSが消えた経験があるよくある失敗 / 子テーマとは
子テーマを作るべきか迷っている子テーマが必要なケース / 不要なケース
最小構成で子テーマを作りたい作成手順
子テーマで事故った経験があるやってはいけない子テーマ改修
ブロックテーマを使っているブロックテーマの場合

「追加CSS」で済むのに子テーマを作ろうとしている人は「子テーマが不要なケース」を先に読む。

よくある失敗

「テーマを更新したら、追加したCSSが全部消えた」

親テーマを直接編集していた。更新で上書きされるのは仕様。子テーマを使えば防げる。

子テーマとは

親テーマを継承し、変更部分だけを上書きする仕組み。

親テーマ: 元のテーマファイル一式（更新される）
子テーマ: 変更・追加したいファイルだけ（更新されない）

親テーマが更新されても、子テーマの内容は維持される。

子テーマが必要なケース

ケース理由
テーマのPHPファイルを編集したい更新で消えるのを防ぐ
大量のCSS追加がある（50行以上）管理しやすい
functions.phpにコードを追加したい更新で消えるのを防ぐ
テンプレートファイルを上書きしたいheader.php等のカスタマイズ

子テーマが不要なケース

ケース代替手段
少量のCSS追加カスタマイザー → 追加CSS
色やフォントの変更カスタマイザーの設定
ウィジェットの配置管理画面で設定
プラグインで実現できるプラグインを使う

追加CSSが20行以内なら、子テーマを作るほどではない。

判断フローチャート

PHPファイルを編集したい？
    ↓ Yes → 子テーマ必要
    ↓ No
CSSは50行以上？
    ↓ Yes → 子テーマ推奨（管理しやすい）
    ↓ No
→ 「追加CSS」または「Code Snippets」で十分

最小構成の子テーマ

必要なのは2ファイルだけ。

themes/
├── flavor flavor flavor flavor flavor flavor flavor flavor twenty-flavor flavor flavor flavor twenty-flavor four/      ← 親テーマ
└── flavor flavor flavor flavor flavor flavor flavor flavor twenty-flavor flavor flavor flavor twenty-flavor four-child/  ← 子テーマ
    ├── style.css
    └── functions.php

作成手順

1. フォルダを作成

/wp-content/themes/ に 親テーマ名-child フォルダを作成。

例: 親が twentytwentyfour なら twentytwentyfour-child

2. style.css を作成

/*
Theme Name: Twenty Twenty-Four Child
Template: twentytwentyfour
*/

/* ここにカスタムCSSを追加 */
項目説明
Theme Name管理画面に表示される名前
Template親テーマのフォルダ名（大文字小文字を正確に）

3. functions.php を作成

<?php
add_action('wp_enqueue_scripts', function() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-style', get_stylesheet_uri(), ['parent-style']);
});

親テーマのCSSを読み込んでから、子テーマのCSSを読み込む。

4. 子テーマを有効化

管理画面 → 外観 → テーマ → 子テーマを有効化

やってはいけない子テーマ改修

実案件で起きた事故パターン。

パターン1: 全ファイルコピー

❌ 親テーマの全ファイルを子テーマにコピー

問題: 親テーマ更新時のセキュリティパッチ、バグ修正、新機能が一切反映されない。

対処: 必要最小限のファイルだけ上書き。

パターン2: header.phpの安易な上書き

❌ ヘッダーのロゴだけ変えたくてheader.php全体をコピー

問題: 親テーマがheader.phpを大幅に変更したとき、子テーマ側が古いまま残る。OGPタグやschemaマークアップが古くなる。

対処: フックで対応できないか先に検討。wp_headやwp_body_openで追加できるものは追加で対応。

パターン3: 親テーマの関数を上書きしたつもり

// ❌ 子テーマのfunctions.phpで同名関数を定義
function parent_theme_setup() {
    // 上書きしたつもり
}

問題: functions.phpは子が先に読まれるが、同名関数は「上書き」ではなく「エラー」になる。

対処: remove_action + add_action で差し替え、または親が function_exists でラップしているか確認。

パターン4: テーマ更新通知を無視し続ける

❌ 「子テーマがあるから大丈夫」と更新しない

問題: 親テーマのセキュリティパッチが適用されない。上書きしていないファイルは親を参照するため、脆弱性がそのまま。

対処: 親テーマは定期的に更新。更新後に子テーマの動作確認を行う。

テンプレートファイルの上書き

親テーマのファイルを子テーマにコピーすると、そちらが優先される。

親: themes/twentytwentyfour/header.php  ← 使われない
子: themes/twentytwentyfour-child/header.php  ← こちらが使われる

手順

  1. 親テーマから該当ファイルをコピー
  2. 子テーマに配置
  3. 子テーマ側を編集

注意: 親テーマ更新時に追加された機能が反映されなくなる。必要最小限のファイルだけ上書き。

functions.php の違い

ファイル挙動
親のfunctions.php子テーマ有効時も読み込まれる
子のfunctions.php親より先に読み込まれる

上書きではなく追加。親の関数を消すことはできない（remove_action等で無効化は可能）。

よくある間違い

間違い結果
Templateの値が間違っているテーマが壊れる、画面真っ白
style.cssのヘッダーがない子テーマとして認識されない
親CSSを読み込んでいないスタイルが崩れる
子テーマに全ファイルをコピー更新の恩恵を受けられない

Templateの確認方法

親テーマのフォルダ名を正確に確認:

/wp-content/themes/twentytwentyfour/  ← このフォルダ名

twentytwentyfour が Template の値になる。

ブロックテーマの場合

WordPress 5.9以降のブロックテーマ（FSE）では、追加で theme.json を使う。

twentytwentyfour-child/
├── style.css
├── functions.php
└── theme.json     ← スタイル設定を上書き

theme.json の例

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        {
          "slug": "primary",
          "color": "#1e40af",
          "name": "Primary"
        }
      ]
    }
  }
}

親の theme.json とマージされる。

子テーマを作らない選択

以下の場合は子テーマ不要:

  • カスタマイザーで済む変更: 追加CSS、色、ロゴ
  • プラグインで実現できる: Code Snippets等でfunctions.php相当のコード追加
  • テーマを更新しない前提: 自作テーマ、更新終了テーマ

Code Snippetsプラグインを使えば、functions.phpを直接編集せずにコードを追加できる。テーマに依存しないため、テーマ変更時も維持される。

まとめ

  • 子テーマはテーマ更新によるカスタマイズ消失を防ぐ
  • 必要なのは style.css と functions.php の2ファイル
  • Templateの値は親テーマのフォルダ名を正確に
  • 少量のCSS追加なら「追加CSS」で十分
  • テンプレート上書きは最小限に（親の更新が反映されなくなる）
  • 全ファイルコピーは絶対にやらない

関連記事