お問い合わせ
お問い合わせ
ホーム > ブログ > WordPress > 📝 子テーマの作り方｜WordPress初心者向け完全ガイド

📝 子テーマの作り方｜WordPress初心者向け完全ガイド

WordPress

WordPressでテーマをカスタマイズしたいけど、「直接編集していいの？」と不安に思ったことはありませんか？
そんなときに活躍するのが「子テーマ」です。

この記事では、子テーマの仕組みと作り方を初心者向けにわかりやすく解説します。
自作テーマを親テーマにする場合の注意点も紹介しています。

✅ この記事でわかること

  • 子テーマとは何か、なぜ使うのか
  • 子テーマの作り方（実践的な手順）
  • 自作テーマを使う場合の注意点
  • よくあるエラーと対処法

1. 子テーマとは？

WordPressでは「テーマ」がサイト全体のデザインや機能を担っています。
ただし、テーマを直接編集してしまうと、アップデート時にカスタマイズが消えてしまうというリスクがあります。

👀 子テーマの仕組みを図で見る

この図のように、子テーマは親テーマのデザインや機能を引き継ぎながら、自分だけのカスタマイズができる仕組みです。

🔍 メリットまとめ

  • 親テーマがアップデートされても、カスタマイズ内容が消えない
  • 安全に機能追加や見た目の調整ができる
  • テーマ制作の学習にも役立つ

2. 子テーマの作り方【基本手順】

ステップ1：子テーマ用のフォルダを作成

例：

wp-content/themes/mytheme-child

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

子テーマのフォルダ内に style.css を作り、以下のコードを記述します：

/*
 Theme Name:   My Theme Child
 Template:     mytheme
*/
  • Template: は親テーマの「フォルダ名」を正確に書く必要があります。
  • 大文字・小文字の間違いに注意！

ステップ3：functions.phpでCSSを読み込む

<?php
function my_theme_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-style', get_stylesheet_uri(), array('parent-style'));
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

ステップ4：WordPressで子テーマを有効化

WordPress管理画面の「外観 → テーマ」に移動し、作成した子テーマを有効化すれば完了です。

3. 🔧 自作テーマで子テーマを作るときの注意点

自分で作ったテーマ（オリジナルテーマ）にも、子テーマを作ることができます。ただし以下の点に注意しましょう。

✅ Template 名の指定ミスに注意！

子テーマの style.css の Template: は、親テーマのフォルダ名と一致させる必要があります。

例：

/*
 Theme Name:   My Original Theme Child
 Template:     my-original-theme
*/

✅ 親テーマにテーマヘッダーを忘れずに

自作親テーマの style.css に、以下のようなヘッダー情報がなければ、WordPressにテーマとして認識されません。

/*
 Theme Name: My Original Theme
 Author: Your Name
 Version: 1.0
*/

✅ 親テーマのCSSを読み込む処理が必要

functions.php で、親テーマのCSSを読み込むようにします：

<?php
function my_child_theme_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-style', get_stylesheet_uri(), array('parent-style'));
}
add_action('wp_enqueue_scripts', 'my_child_theme_enqueue_styles');

✅ 子テーマが壊れて表示されない場合

  • style.css の Template 行が間違っていないか確認
  • functions.php にエラーがないか確認
  • 親テーマの style.css にテーマ情報が書かれているかチェック

4. よくあるエラーとその対処法

エラー内容原因と対処法
テーマが「壊れています」と表示されるstyle.css に Theme Name や Template 行がない／誤記
CSSが反映されないfunctions.php で親テーマのCSSが読み込まれていない
子テーマが外観画面に出ないTemplate の名前が間違っている、親テーマが存在しない

5. 子テーマでできる簡単なカスタマイズ例

body {
    background-color: #f9f9f9;
    font-family: "Helvetica Neue", sans-serif;
}

6. まとめ

子テーマを使えば、WordPressのテーマカスタマイズが安全かつ柔軟になります。特に、自作テーマと組み合わせることで、失敗を恐れずに試行錯誤できる環境が整います。

7. 参考リンク

8. こちらの記事もおすすめ

WordPress初心者でも安心！functions.phpの使い方と注意点をわかりやすく解説