WordPressの子テーマを作る方法

WordPressの子テーマを作る方法（Twenty Twenty-Fourを例）

今回は、WordPressの子テーマを作成する方法をまとめます。
なお、今回は「Twenty Twenty-Four」を例にしていますが、基本的な流れは多くのWordPressテーマで共通です。
※子テーマを設定する意味やメリット・デメリットの説明は省略しています。

1．子テーマ用フォルダを作成する

まず最初に、子テーマ用のフォルダを作成します。

場所（例）

apps/wordpress/htdocs/xxxxx/wp-content/themes/

※環境によって異なります。

フォルダ名

twentytwentyfour-child

フォルダ名は分かれば何でもOKですが、後で探しやすいように「テーマ名-child」にしておくのがおすすめです。

---

2．functions.php と style.css を作成する

作成した子テーマフォルダの中に、以下2つのファイルを作成します。

• functions.php
• style.css

2-1．style.css の設定

/*
Theme Name: Twenty Twenty-Four Child
Theme URI:
Description: WordPressテーマ「Twenty Twenty-Four」の自作子テーマです。
Template: twentytwentyfour
Author: Takashi Yamada
Author URI: http://tcd-theme.com/
Version: 0.0.8
*/

各項目の説明

• Theme Name
  子テーマのテーマ名を入力します。
  「親テーマ名 + Child」など、後から見ても分かりやすい名前がおすすめです。
• Theme URI
  子テーマのURLを記載します。空欄でもOKです。
• Description
  子テーマの説明を書きます。
  「親テーマ○○の子テーマです」と書いておくと分かりやすいです。
• Template
  親テーマのフォルダ名を入力します。
  ※テーマ名ではなく「フォルダ名」です。
• Author
  テーマ作成者名を記載します。
• Author URI
  テーマ作成者のURLを記載します。
• Version
  子テーマのバージョン情報です。

---

2-2．functions.php の設定

<?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' )
  );

}
?>

各記述の説明

• add_action
  以下の処理を実行するための記述です。
• wp_enqueue_style（親テーマ）
  親テーマの style.css を読み込みます。
• wp_enqueue_style（子テーマ）
  子テーマの style.css を読み込みます。

---

3．ZIP形式でアップロードする

作成した子テーマフォルダをZIP形式に圧縮します。

WordPress管理画面より、以下へ進みます。

外観 → テーマ → テーマの追加 → テーマのアップロード

以下のメッセージが表示されます。

ZIP 形式のテーマファイルをお持ちの場合、こちらからアップロードしてインストールまたは更新できます。

「ファイルを選択」からZIPファイルを選び、インストールを実行します。

---

4．確認

テーマを有効化し、以下のような表示があればOKです。

この子テーマは親テーマ「○○」のテンプレートを引き継ぎます

この表示が出ていれば、親テーマの読み込みに成功しています。

補足・注意点

今回の内容では、「Twenty Twenty-Four」を例に子テーマを作成しています。
ただし、子テーマの基本構造自体は、多くのWordPressテーマで共通です。

一方で、最近のテーマやブロックテーマでは、従来テーマと少し異なる点もあります。

---

style.css への追記が必須ではないケースがある

従来のWordPressテーマでは、子テーマの style.css にCSSを追記してカスタマイズするケースが一般的でした。

しかし最近のブロックテーマでは、

• theme.json
• グローバルスタイル
• エディタ側のスタイル設定

などを利用するケースも多く、必ずしも style.css へ追記するとは限りません。

特に Twenty Twenty-Four はブロックテーマのため、従来テーマとは構造が異なる部分があります。

---

functions.php の記述が異なる場合がある

今回の functions.php は一般的な記述例です。

ただしテーマによっては、

• 独自のCSS読み込み処理
• 独自フック
• build済みCSS
• theme.json 中心の構成

などを採用している場合があります。

そのため、親テーマ側の実装によっては、記述を調整する必要があります。

---

Template の指定に注意

style.css 内の以下の記述：

Template: twentytwentyfour

これは「テーマ名」ではなく、「親テーマのフォルダ名」です。

ここが間違っていると、子テーマとして認識されません。

---

最近のブロックテーマは構造が違う

従来テーマでは、

header.php
footer.php
sidebar.php

などを編集するケースが一般的でした。

しかしブロックテーマでは、

templates
parts
theme.json

などを中心に構成されています。

そのため、「子テーマの作り方」はほぼ同じでも、「どこを編集するか」は従来テーマと異なる場合があります。

---

@import は現在あまり推奨されていない

古い子テーマ解説記事では、

@import url("../親テーマ/style.css");

のような書き方が紹介されている場合があります。

ただし現在は、functions.php で wp_enqueue_style() を利用する方法が推奨されています。