ワードプレスの子テーマの作り方 – 初心者が最後に辿り着いた方法

2025-04-04
| No Comments
Lavi perchik

Last Updated on 04-04-25 by Shinichi

ワードプレスのテーマをカスタマイズする際に、直接親テーマを編集してしまうと、テーマの更新時に変更内容がすべて失われてしまいます。そんな時に便利なのが「子テーマ」です。英語ではChild Themeと言います。作り方を解説するサイトはたくさんありますが、初心者の私はほぼ丸一日つまずきっぱなしでした。本記事では、初心者の私が試行錯誤の末にたどり着いた子テーマの作り方を分かりやすく解説します。子テーマとは何か、なぜ重要かの説明は他の多くのサイトで説明されていますのでここでは割愛します。

ワードプレス子テーマの作り方

1. ワードプレスサイトのバックアップ

何か問題が起きたときのために、まずはサイト全体のバックアップを取ることを強くおすすめします。私が利用しているHostingerでは、24時間に一度マニュアルでのバックアップが可能です。実際、子テーマの設定中にバグが発生し、何度もバックアップを使って復元しました。
Hostingerの解説はこちらの記事を参照してください。
おすすめのアメリカネットサーバー比較｜高コスパのホスティンガー (Hostinger) を選んだ理由
こちらのリンクを使っていただければ、料金が20%オフになります。

今すぐ登録して20%オフを受け取る

2. ネットサーバーのワードプレスファイルにアクセス

子テーマを作成するには、ワードプレスのファイルフォルダにアクセスする方法をお勧めします。Zipファイルに必要なファイルを詰めてワードプレスにアップロードする方法を解説している方もいますが、私には、ワードプレスのファイルにアクセスする方が簡単でした。Hostingerを利用している私の手順です：

  1. Hostingerにログイン
  2. Websitesをクリック
  3. 該当サイトのDashboardを選択
  4. File Managerに移動
  5. public_html > wp-content > themes フォルダを開きます

サーバーごとにファイルの場所は違うでしょうが、public_html以降は同じだと思います。

3. 子テーマ用のフォルダを作成

themes フォルダの中に新しいフォルダを作成します。名前は何でも良いですが、親テーマの名前に「-child」を付けると分かりやすいです。

例：親テーマが corporate-lite の場合、子テーマのフォルダ名を corporate-lite-child にします。

4. 子テーマに必要なファイルを作成

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

4-1. style.css

  1. Windowsの場合、デスクトップで右クリックし、New > Text Document を選択します。
  2. 開いたファイルに以下のコードを記入します。
/*
Theme Name: Corporate Lite Child
Theme URL:
Description: Child theme for Corporate Lite
Template: corporate-lite
Author: Shinichi
Author URL: https://afreshstart1.com/
Version: 1.4.2
*/

ポイント：

  • Template: の部分には、親テーマのフォルダ名を正確に記入してください。
  • 他の項目は自由ですが、Template: が正しくないと子テーマとして機能しません。
  1. 保存時に style.css と名前を付けて保存します。拡張子が正しいことを確認してください。

4-2. functions.php

  1. 同じ手順で新しいテキストドキュメントを作成し、以下のコードを記入します。
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function 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') );
}
?>
  1. functions.php と名前を付けて保存します。

注意：

  • .php の拡張子を付けると、通常のテキストエディタで開けなくなる場合があります。また、functions の「s」を忘れないようにしてください。

5. 子テーマフォルダにファイルを追加

作成した style.css と functions.php を、手順3で作成した子テーマフォルダに移動します。

6. ワードプレスで子テーマを有効化

  1. ワードプレス管理画面にログインします。
  2. 外観 > テーマ に移動します。
  3. 子テーマがリストに表示されていることを確認します。
  4. いきなり「有効化」するのではなく、「ライブプレビュー」を選択しましょう。

ポイント：

  • ライブプレビューで問題がないことを確認してから「有効化」ボタンをクリックしてください。
  • ライブプレビューでエラーが出る場合や上手く表示できない場合は、style.css や functions.php の内容をもう一度確認しましょう。上手くいかない状態で「有効化」するとバグります。

ワードプレス子テーマの作り方まとめ

以上がワードプレスの子テーマ作成手順です。親テーマを直接編集せずに済むため、安心してカスタマイズができます。初心者でも手順をしっかり踏めば簡単に実施できますので、ぜひチャレンジしてみてください。

何か疑問点やトラブルがあればコメントで教えてください！

ワードプレス関連記事
📌ワードプレスでロゴのサイズと位置の変更―追加CSS設定で超簡単
📌ワードプレスで文字色の変更-追加CSSで超簡単
📌ワードプレスで記事タイトルの行間を調整する方法-追加CSSで超簡単-
📌ワードプレス文字サイズと行間を調整する方法-追加CSSで超簡単
📌【HTML初心者向け】アフィリエイトリンク画像を左・中央・右揃えにする方法
📌もしもアフィリエイトどこでもリンクの画像の大きさを調整する方法

Web Creation