2026年5月25日

WordPressで子テーマ（Child Theme）を正しく作成する方法

テーマ・デザイン

はじめに

「テーマをカスタマイズしたらアップデートで上書きされた」——このトラブルを防ぐために子テーマは必須です。子テーマは親テーマのファイルを継承しつつ、変更したいファイルだけをオーバーライドできます。

症状・原因

テーマを直接編集してカスタマイズを加えた後、テーマをアップデートすると変更がすべて消えてしまいます。親テーマのバグ修正や機能改善を受け取りながら独自カスタマイズを保持するには、子テーマを使う必要があります。

解決手順

ステップ1：子テーマのディレクトリとstyle.cssを作成する

wp-content/themes/
├── twentytwentyfour/        # 親テーマ（編集しない）
└── twentytwentyfour-child/  # 子テーマ（ここを編集）
    ├── style.css            # 必須
    ├── functions.php        # 必須（スタイル読み込み）
    └── screenshot.png       # 任意（テーマサムネイル）

/* style.css: 子テーマの識別情報（必須） */
/*
Theme Name: Twenty Twenty-Four Child
Theme URI: https://example.com
Description: Twenty Twenty-Four の子テーマ
Author: Your Name
Template: twentytwentyfour
Version: 1.0.0
Text Domain: twentytwentyfour-child
*/

/* ここからカスタムCSSを記述 */
body {
    font-family: 'Noto Sans JP', sans-serif;
}

重要： Template: には親テーマのディレクトリ名を正確に記述します（スラッシュなし、大文字小文字を完全一致させる）。

ステップ2：functions.phpで親テーマのスタイルを読み込む

<?php
// functions.php: 親テーマのCSSを読み込む（必須）

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' ],
        wp_get_theme()->get( 'Version' )
    );
} );

注意： 古いチュートリアルには@importを使う方法が掲載されていますが、パフォーマンス上の理由からwp_enqueue_style()を使う方法が推奨されています。

ステップ3：テンプレートファイルをオーバーライドする

# 親テーマのheader.phpをカスタマイズしたい場合：
# 親テーマのheader.phpをそのままコピー
cp wp-content/themes/twentytwentyfour/header.php \
   wp-content/themes/twentytwentyfour-child/header.php

# 子テーマのheader.phpを編集
# WordPressは子テーマのファイルを優先して読み込む

<?php
// テンプレート読み込みの優先順位（WordPressの仕様）
// 1. 子テーマのテンプレートファイル（最優先）
// 2. 親テーマのテンプレートファイル
// 3. WordPressのデフォルト

// 子テーマで使えるディレクトリ関数
get_template_directory();      // 親テーマのPATH
get_stylesheet_directory();    // 子テーマのPATH（現在のテーマ）

get_template_directory_uri();  // 親テーマのURL
get_stylesheet_directory_uri(); // 子テーマのURL（現在のテーマ）

ステップ4：functions.phpで親テーマの機能を拡張する

<?php
// 子テーマのfunctions.phpは親テーマより先に読み込まれる
// 親のfunctions.phpの内容は自動的に引き継がれる

// 親テーマの関数をオーバーライド（プラガブル関数の場合のみ）
if ( ! function_exists( 'mytheme_posted_on' ) ) {
    function mytheme_posted_on() {
        // 独自の投稿日表示
        echo get_the_date( 'Y年m月d日' );
    }
}

// フックで親の動作を変更する
add_filter( 'excerpt_length', function( $length ) {
    return 80; // 抜粋の文字数を変更
} );

// 子テーマ専用のCSSを追加する
add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_style(
        'child-custom',
        get_stylesheet_directory_uri() . '/css/custom.css',
        [ 'child-style' ],
        '1.0.0'
    );
}, 20 ); // 親の wp_enqueue_scripts より後に実行

ステップ5：子テーマを有効化して動作確認する

# WP-CLIで子テーマを有効化
wp theme activate twentytwentyfour-child

# 子テーマの状態を確認
wp theme list

# 子テーマのディレクトリを確認
wp theme get twentytwentyfour-child --field=stylesheet_dir

// テンプレート内での確認コード（デバッグ時のみ）
// どのテンプレートファイルが読み込まれているか確認
add_action( 'wp_head', function() {
    if ( current_user_can( 'administrator' ) ) {
        global $template;
        echo '<!-- Template: ' . $template . ' -->';
    }
} );

注意事項

style.cssのTemplate:行は親テーマのフォルダ名と完全一致している必要があります。大文字・小文字・スペースも含めて正確に記述してください。一致しない場合、子テーマが正しく動作しません。
子テーマのfunctions.phpは親テーマのfunctions.phpより先に実行されます。親テーマの関数を使う場合はafter_setup_themeフックなど、テーマ読み込み後のフックを使ってください。
ブロックテーマ（FSE対応テーマ）の子テーマは構成が異なります。style.cssは同じですが、functions.phpでのスタイル読み込みは不要で、theme.jsonで親のスタイルをオーバーライドできます。

まとめ

子テーマ作成は「ディレクトリ作成→style.cssにTemplate:を記述→functions.phpで親CSSを読み込み→必要なテンプレートをコピーして編集→有効化」の流れで完了します。テーマの更新があっても子テーマのカスタマイズは保持されます。関連記事：WordPressのテーマ開発入門、WordPressのテンプレート階層を理解する方法。

Post Views: 29