お問い合わせ
お問い合わせ
ホーム > WordPress > WordPressの子テーマの作り方と基本構造【初心者向け】

WordPressの子テーマの作り方と基本構造【初心者向け】

WordPress
WordPressの子テーマの作り方と基本構造を図解で紹介しているイメージ（親テーマと子テーマの関係をフォルダ構造で示したデザイン）
WordPressの子テーマの作り方と基本構造を初心者向けにわかりやすく整理したアイキャッチ画像。親テーマと子テーマの関係を図解で表現。

1. 子テーマとは？

WordPressの**子テーマ（Child Theme）**とは、既存のテーマ（＝親テーマ）のデザインや機能を引き継ぎつつ、自由にカスタマイズできる仕組みのことです。
親テーマのアップデートで上書きされないため、安全に編集できるのが最大の特徴です。

2. 子テーマを作るメリット

メリット説明
親テーマのアップデートに影響されない親テーマを更新しても子テーマの変更は保持される
カスタマイズの安全性が高いfunctions.php や CSS を自由に編集できる
元に戻すのが簡単子テーマを無効化すればすぐ元の状態に戻せる

👉 関連リンク：

3. 子テーマの基本構造

子テーマには、最低限以下の2つのファイルが必要です。

/wp-content/themes/
　└─ 親テーマ/
　└─ 子テーマ/
　　　├─ style.css
　　　└─ functions.php

それぞれの役割

  • style.css：テーマ名や親テーマとの関係を記述
  • functions.php：親テーマのCSSを読み込んだり、機能を追加

4. 子テーマの作り方（ステップ解説）

ステップ①：子テーマ用フォルダを作る

WordPressのテーマディレクトリ（/wp-content/themes/）内に、新しいフォルダを作成します。

例）

/wp-content/themes/twentytwentyfive-child/

ステップ②：style.cssを作成

以下をコピペして保存します。

/*
Theme Name: Twenty Twenty-Five Child
Template: twentytwentyfive
Description: Twenty Twenty-Five の子テーマ
Version: 1.0
*/
  • Theme Name：管理画面に表示されるテーマ名
  • Template：親テーマのフォルダ名（これが重要！）

5. style.cssとfunctions.phpの設定方法

親テーマのCSSを読み込むために、子テーマの functions.php に以下を追加します。

<?php
function my_child_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')
    );
}
add_action('wp_enqueue_scripts', 'my_child_enqueue_styles');

✅ この記述により、
親テーマ → 子テーマ の順にCSSが反映されます。

👉 関連リンク：

6. 親テーマのテンプレートを上書きする方法

子テーマに同名のテンプレートファイルを置くと、自動的にそちらが優先されて使用されます。

例：
親テーマに header.php がある場合、
子テーマに同じ名前の header.php を置くと、子テーマ版が反映されます。

/wp-content/themes/twentytwentyfive-child/header.php

💡テンプレート階層の理解は、子テーマを使いこなす鍵です。
👉 WordPress条件分岐タグの基本まとめ【初心者向け】

7. 子テーマを有効化する際の注意点

  1. 管理画面の「外観」→「テーマ」から子テーマを有効化
  2. 親テーマが有効な状態であることを確認
  3. 親テーマを削除しない（子テーマが動かなくなります）

8. よくあるトラブルと解決法

トラブル原因と対処
CSSが反映されないfunctions.phpで親CSSを読み込んでいない
エラーでサイトが真っ白PHP構文ミス。functions.phpの記述を見直す
画像パスが崩れるget_stylesheet_directory_uri() を使用しているか確認

9. まとめ

子テーマは、WordPressカスタマイズの第一歩。
構造を理解しておけば、サイトデザインや機能の変更を安全・確実に行えるようになります。

✅ 関連記事でさらに理解を深めよう