2026年5月20日

WordPressの子テーマを作成する方法

テーマ・デザイン

はじめに

子テーマ（Child Theme）は親テーマの機能を継承しつつ、独自のカスタマイズを安全に追加できる仕組みです。親テーマを直接編集すると更新で上書きされますが、子テーマなら更新の影響を受けません。

症状・原因

テーマを直接編集したら更新で変更が消えた
子テーマの作り方がわからない
子テーマでCSSやPHPをカスタマイズしたい
WP-CLIで子テーマを素早く作成したい

解決手順

ステップ1：子テーマのディレクトリ構造を理解する

wp-content/themes/
├── twentytwentyfive/          ← 親テーマ（編集しない）
│   ├── style.css
│   ├── functions.php
│   └── ...
└── twentytwentyfive-child/    ← 子テーマ（ここをカスタマイズ）
    ├── style.css              ← 必須
    ├── functions.php          ← 推奨
    └── screenshot.png         ← 任意（管理画面のサムネイル）

ステップ2：style.cssを作成する

# 子テーマのディレクトリを作成
mkdir wp-content/themes/twentytwentyfive-child

/*
Theme Name:   Twenty Twenty-Five Child
Theme URI:    https://example.com/
Description:  Twenty Twenty-Five の子テーマ
Author:       あなたの名前
Author URI:   https://example.com/
Template:     twentytwentyfive
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  twentytwentyfive-child
*/

/* ここにカスタムCSSを追加 */

重要な項目：

Template: に親テーマのディレクトリ名を正確に記入（必須）
Theme Name: は管理画面で表示される名前

ステップ3：functions.phpを作成する

<?php
// wp-content/themes/twentytwentyfive-child/functions.php

// 親テーマのスタイルを読み込む
add_action('wp_enqueue_scripts', function(): void {
    // 親テーマのstyle.cssを読み込む
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css'
    );

    // 子テーマのstyle.cssを読み込む（親の後に読み込む）
    wp_enqueue_style(
        'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        ['parent-style'],
        wp_get_theme()->get('Version')
    );
});

> 注意: Gutenbergテーマ（FSE対応）では親テーマのstyle.cssが自動で読み込まれるため、上記のenqueueは不要な場合があります。

ステップ4：WP-CLIで子テーマを作成する

# WP-CLIで子テーマを一括作成（scaffold コマンド）
wp scaffold child-theme twentytwentyfive-child \
  --parent_theme=twentytwentyfive \
  --theme_name="Twenty Twenty-Five Child" \
  --author="あなたの名前" \
  --author_uri="https://example.com" \
  --activate

# 作成されたファイルを確認
ls -la wp-content/themes/twentytwentyfive-child/

# 子テーマを有効化（既にactivateしていない場合）
wp theme activate twentytwentyfive-child

# 現在のテーマを確認
wp theme list --status=active --format=table

ステップ5：子テーマで親テーマのテンプレートを上書きする

# 親テーマのテンプレートをコピーして子テーマで上書き
cp wp-content/themes/twentytwentyfive/header.php \
   wp-content/themes/twentytwentyfive-child/header.php

# 子テーマのheader.phpを編集
# → WordPressは子テーマのファイルを優先的に使用する

// 子テーマのfunctions.phpで親テーマの関数を上書き
// 親テーマでpluggable関数として定義されている場合

if (!function_exists('parent_theme_custom_function')) {
    function parent_theme_custom_function(): string {
        return '子テーマで上書きした内容';
    }
}

// フックで動作を変更する（より安全な方法）
add_filter('the_content', function(string $content): string {
    // コンテンツを加工
    return $content;
});

ステップ6：子テーマの設定を確認する

# 子テーマの情報を確認
wp theme get twentytwentyfive-child --format=json

# 親テーマとの関係を確認
wp eval "
\$theme = wp_get_theme();
echo 'Current: ' . \$theme->get('Name') . PHP_EOL;
echo 'Parent: ' . \$theme->parent()->get('Name') . PHP_EOL;
echo 'Template: ' . \$theme->get('Template') . PHP_EOL;
"

# テーマのディレクトリパスを確認
wp eval "
echo 'Template dir: ' . get_template_directory() . PHP_EOL;
echo 'Stylesheet dir: ' . get_stylesheet_directory() . PHP_EOL;
"

# 子テーマのstyle.cssを確認
cat wp-content/themes/twentytwentyfive-child/style.css | head -20

注意事項

Template: に指定する親テーマ名はディレクトリ名と完全に一致させてください。大文字・小文字も区別されます
親テーマがFSE（フルサイト編集）対応の場合、テンプレートファイルはPHPではなくHTMLブロックになります
子テーマはstyle.cssのヘッダーがないと管理画面に表示されません

まとめ

子テーマは wp scaffold child-theme で一瞬で作成できます。Template: に親テーマのディレクトリ名を指定したstyle.cssと、親スタイルを読み込むfunctions.phpの2ファイルが最小構成です。カスタマイズはすべて子テーマで行い、親テーマは直接編集しないようにしましょう。

Post Views: 9