🧩 子テーマの使い方

子テーマとは何か・なぜ必要か

子テーマ（Child Theme）とは、既存のテーマ（親テーマ）の機能とデザインを引き継ぎながら、独自のカスタマイズを追加できるテーマです。

子テーマが必要な理由

子テーマを使うと：

• 親テーマを更新しても子テーマのカスタマイズは保持される
• 親テーマのバグ修正・セキュリティ更新を安全に受け取れる
• 問題が起きたときに子テーマを無効化するだけで元に戻せる
• 親テーマのソースコードを理解しながら段階的にカスタマイズできる

子テーマの作成手順

子テーマはわずか2つのファイルを作成するだけで完成します。

例：親テーマが「twentytwentyfive」の場合
→ /wp-content/themes/twentytwentyfive-child/

/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://example.com/
Description: Twenty Twenty-Fiveの子テーマ
Author: あなたの名前
Template: twentytwentyfive
Version: 1.0.0
*/

/* ここから下に追加のCSSを記述する */

<?php
// 親テーマのスタイルシートを読み込む
function child_theme_enqueue_styles() {
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css'
    );
}
add_action('wp_enqueue_scripts', 'child_theme_enqueue_styles');

カスタマイズを子テーマに移行する

現在のテーマに直接加えたカスタマイズを子テーマに移行する方法です。

CSSの移行

親テーマの style.css に直接追加したCSSは、子テーマの style.css にコピーします。カスタマイザーの「追加CSS」に入力していたCSSも、子テーマの style.css にコピーするか、引き続きカスタマイザーを使ってもOKです。

/* 子テーマのstyle.css */
/*
Theme Name: My Child Theme
Template: 親テーマのフォルダ名
*/

/* 移行したCSSをここに記述 */
.site-header {
    background-color: #2c3e50;
}
.entry-title {
    font-size: 1.8rem;
}

PHPコードの移行

親テーマの functions.php に追加したPHPコードは、子テーマの functions.php にコピーします。

<?php
// 子テーマのfunctions.php

// 親テーマのスタイル読み込み（必須）
function child_theme_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'child_theme_enqueue_styles');

// 移行したカスタムコードをここに追加
function my_custom_function() {
    // ...
}
add_action('wp_head', 'my_custom_function');

functions.phpの主な使い方

子テーマのfunctions.phpでよく使われる記述例を紹介します。

カスタムCSSを追加する

// 追加のCSSファイルを読み込む
function child_enqueue_custom_style() {
    wp_enqueue_style(
        'child-custom-style',
        get_stylesheet_directory_uri() . '/custom.css',
        array(),
        '1.0.0'
    );
}
add_action('wp_enqueue_scripts', 'child_enqueue_custom_style');

カスタムJavaScriptを追加する

// カスタムJSを読み込む（フッターに追加）
function child_enqueue_custom_script() {
    wp_enqueue_script(
        'child-custom-script',
        get_stylesheet_directory_uri() . '/custom.js',
        array('jquery'),
        '1.0.0',
        true  // trueでフッターに出力
    );
}
add_action('wp_enqueue_scripts', 'child_enqueue_custom_script');

Google Fontsを追加する

// Google Fontsを読み込む
function child_enqueue_google_fonts() {
    wp_enqueue_style(
        'google-fonts',
        'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap',
        array(),
        null
    );
}
add_action('wp_enqueue_scripts', 'child_enqueue_google_fonts');

よくある失敗と対処法

失敗1：子テーマを有効化したらデザインが崩れた

原因：親テーマのスタイルシートが読み込まれていない。
対処：functions.phpの wp_enqueue_style の記述を確認してください。特に get_template_directory_uri()（親テーマのパス）と get_stylesheet_directory_uri()（子テーマのパス）を混同しないよう注意。

失敗2：Templateの指定が間違っている

原因：style.cssの Template: に親テーマのフォルダ名ではなくテーマ名を記述している。
対処：FTPで /wp-content/themes/ フォルダを確認し、親テーマの正確なフォルダ名を確認して修正してください。

失敗3：子テーマの更新が管理画面に表示されない

原因：style.cssに Version: が記載されていない。
対処：style.cssのヘッダーに Version: 1.0.0 を追加してください。子テーマ自体は自動更新されないため、自分でバージョンを管理します。

失敗4：functions.phpの構文エラーでサイトが真っ白になった

原因：PHPの記述ミス（閉じ括弧の不足・全角スペースの混入など）。
対処：FTPでfunctions.phpを修正してください。修正が難しい場合はファイルを削除（または別名に変更）してサイトを復旧させてから、再度正しいコードを記述してください。

よくある質問

Q1. すべてのテーマで子テーマを作れますか？

A. 技術的にはほぼすべてのテーマで子テーマを作成できます。ただし、一部のページビルダー系テーマ（Elementorなど）は子テーマの仕組みが異なる場合があります。テーマのドキュメントを確認してください。

Q2. 子テーマを作ると親テーマより動作が遅くなりますか？

A. ほとんどの場合、体感できるほどの速度差はありません。子テーマのstyle.cssが追加で読み込まれますが、影響はごくわずかです。

Q3. 子テーマを削除したら親テーマも消えますか？

A. いいえ、子テーマと親テーマは独立したフォルダです。子テーマを削除しても親テーマには影響しません。ただし、子テーマを削除する前に必ず親テーマまたは別のテーマを有効化してください。

Q4. 子テーマのCSSで親テーマのスタイルを上書きできますか？

A. はい、できます。子テーマのstyle.cssに記述したCSSは親テーマのCSSより後に読み込まれるため、同じセレクターを使えば上書きできます。どうしても効かない場合は !important を使うか、より詳細なCSSセレクターを使ってください。

関連ページ

• テーマ変更完全ガイドトップ
• STEP 2：テーマ変更の手順
• 新テーマのカスタマイズ入門
• よくある問題と対処法
• テーマ変更後に画面が真っ白になった場合