子テーマ

子テーマとは

子テーマは、親テーマのすべての機能とスタイルを引き継ぎながら、必要な部分だけをカスタマイズできるテーマです。親テーマを直接編集せずにカスタマイズできるため、テーマ更新時にカスタマイズ内容が消える心配がありません。

親テーマと子テーマの関係

子テーマが必要な理由

子テーマのメリット

• 安全なカスタマイズ：親テーマ更新時もカスタマイズが保持される
• 簡単な修正：問題が起きても子テーマを無効化すれば元に戻る
• 開発効率：親テーマの機能を活用しながら独自機能を追加できる
• バックアップ容易：子テーマフォルダだけをバックアップすればよい
• 学習に最適：既存テーマをベースに学べる

子テーマの作成方法

子テーマの作成は、実は非常にシンプルです。最低限、2つのファイルがあれば動作します。

方法1：手動で作成（推奨）

必要なファイル

1. style.css - スタイルシートファイル（必須）
2. functions.php - 機能追加ファイル（必須）

ステップバイステップ作成手順

1. 子テーマフォルダを作成
   FTPまたはサーバーのファイルマネージャーで、/wp-content/themes/に新しいフォルダを作成します。
   フォルダ名例：twentytwentyfour-child（親テーマ名 + -child）
2. style.cssを作成
   子テーマフォルダ内にstyle.cssファイルを作成し、以下のコードを記述します。
3. functions.phpを作成
   子テーマフォルダ内にfunctions.phpファイルを作成し、親テーマのスタイルシートを読み込むコードを記述します。
4. 子テーマを有効化
   「外観」→「テーマ」から子テーマを見つけて「有効化」をクリックします。

style.cssの記述例

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

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

functions.phpの記述例

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

// 親テーマと子テーマのスタイルシートを読み込む
function my_theme_enqueue_styles() {
    // 親テーマのスタイルシート
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    
    // 子テーマのスタイルシート
    wp_enqueue_style('child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style'), // 親スタイルの後に読み込む
        wp_get_theme()->get('Version')
    );
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
?>

方法2：プラグインで作成（初心者向け）

コードを書くのが不安な方は、プラグインで簡単に作成できます。

Child Theme Configuratorプラグイン

1. プラグインをインストール
   「プラグイン」→「新規追加」で「Child Theme Configurator」を検索してインストール・有効化します。
2. 設定画面を開く
   「ツール」→「Child Themes」を選択します。
3. 親テーマを選択
   「親テーマを選択」ドロップダウンから親テーマを選びます。
4. 分析実行
   「分析」ボタンをクリックして親テーマをチェックします。
5. 子テーマを作成
   必要な情報を入力し、「子テーマを作成」ボタンをクリックします。
6. 有効化
   作成後、自動的に子テーマが有効化されます。

子テーマでカスタマイズする方法

1. CSSのカスタマイズ

最も一般的なカスタマイズです。子テーマのstyle.cssにCSSを追加します。

例：ヘッダーの背景色を変更

/* style.css */

/* ヘッダーの背景色を青に変更 */
.site-header {
    background-color: #1976D2;
}

/* 見出しのフォントサイズを大きく */
h1 {
    font-size: 2.5rem;
}

/* リンクの色を変更 */
a {
    color: #FF6B35;
}

a:hover {
    color: #FF8555;
}

2. テンプレートファイルのカスタマイズ

親テーマのテンプレートファイルを上書きできます。

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

1. 親テーマからコピー
   親テーマフォルダから編集したいファイル（例：header.php）をコピーします。
2. 子テーマに配置
   コピーしたファイルを子テーマフォルダに貼り付けます。
3. 編集
   子テーマのファイルを編集します。親テーマのファイルは触りません。
4. 自動的に優先
   WordPressは自動的に子テーマのファイルを優先して使用します。

3. functions.phpへの機能追加

子テーマのfunctions.phpに独自の機能を追加できます。

例：カスタム機能の追加

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

// カスタムロゴサポート
function mytheme_custom_logo_setup() {
    add_theme_support('custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ));
}
add_action('after_setup_theme', 'mytheme_custom_logo_setup');

// カスタムウィジェットエリア
function mytheme_widgets_init() {
    register_sidebar(array(
        'name'          => 'カスタムサイドバー',
        'id'            => 'custom-sidebar',
        'before_widget' => '<div class="widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h3>',
        'after_title'   => '</h3>',
    ));
}
add_action('widgets_init', 'mytheme_widgets_init');

// 抜粋の文字数を変更
function mytheme_excerpt_length($length) {
    return 100;
}
add_filter('excerpt_length', 'mytheme_excerpt_length');
?>

4. 画像ファイルの追加

子テーマ専用の画像を配置できます。

推奨フォルダ構造

twentytwentyfour-child/
├── style.css
├── functions.php
├── screenshot.png（子テーマのスクリーンショット）
└── images/
    ├── logo.png
    ├── header-bg.jpg
    └── icon.svg

CSSで画像を参照

/* style.css */
.site-header {
    background-image: url('images/header-bg.jpg');
}

.custom-logo {
    background-image: url('images/logo.png');
}

子テーマのファイル構成例

シンプルな子テーマ

twentytwentyfour-child/
├── style.css       （必須）
└── functions.php   （必須）

本格的な子テーマ

twentytwentyfour-child/
├── style.css
├── functions.php
├── screenshot.png
├── header.php
├── footer.php
├── single.php
├── page.php
├── template-parts/
│   ├── content.php
│   └── content-single.php
├── images/
│   ├── logo.png
│   └── bg.jpg
├── js/
│   └── custom.js
└── css/
    └── additional.css

各ファイルの役割

子テーマ使用時の注意点

1. 親テーマの選択

2. パフォーマンスへの影響

子テーマ自体はパフォーマンスにほとんど影響しません。ただし、以下の点に注意：

• 不要なCSSは削除する
• 画像は最適化してアップロード
• JavaScriptは最小限に
• functions.phpに重い処理を書かない

3. テーマ更新時の確認

1. バックアップ取得
   親テーマ更新前に、サイト全体のバックアップを取ります。
2. ステージング環境でテスト
   可能であれば、本番環境以外でテストします。
3. 更新実行
   親テーマを更新します。
4. 表示確認
   サイトが正常に表示されるか確認します。
5. 機能テスト
   カスタマイズした部分が正常に動作するか確認します。

4. functions.phpの記述順序

5. デバッグモード

開発中は、WordPressのデバッグモードを有効にすると便利です。

// wp-config.php
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

よくある質問（FAQ）

まとめ

子テーマは、WordPressテーマを安全にカスタマイズするための必須の仕組みです。親テーマの更新を気にせずカスタマイズでき、問題が起きても簡単に元に戻せます。

初めての方は、プラグインを使って子テーマを作成することをおすすめします。慣れてきたら、手動で作成することで、より深くWordPressテーマの仕組みを理解できます。

関連用語