概要

以下のチュートリアル＞ [ 第4章 Child themes ]
をおこなった記録。

前の記事:

環境

wordpress-develop ( Docker コンテナの WordPress 環境 ) を使用。

.bash

docker ps -a
CONTAINER ID   IMAGE                                                                          COMMAND                  CREATED        STATUS                    PORTS                                     NAMES
d844c2f7de74   vsc-src-ee47b25aac09ed2997b68384d2745e464f536bafa1aac67d1b823b83b7420469-uid   "/bin/sh -c 'echo Co…"   23 hours ago   Up 9 minutes                                                        brave_chaum
b4c47afb9392   nginx:alpine                                                                   "/docker-entrypoint.…"   4 days ago     Up 3 hours                0.0.0.0:8889->80/tcp                      wordpress-develop-wordpress-develop-1
673565aa0f6f   wordpressdevelop/cli:latest                                                    "/entrypoint.sh slee…"   4 days ago     Up 3 hours                9000/tcp                                  wordpress-develop-cli-1
401fdd352ccf   mysql:8.4                                                                      "docker-entrypoint.s…"   4 days ago     Up 3 hours (healthy)      33060/tcp, 0.0.0.0:64663->3306/tcp        wordpress-develop-mysql-1
4afec5543cb5   wordpressdevelop/php:latest                                                    "/entrypoint.sh /bin…"   4 days ago     Up 3 hours                9000/tcp                                  wordpress-develop-php-1

# PHP 8.2
docker exec -it wordpress-develop-php-1 php -v
PHP 8.2.29 (cli) (built: Aug  4 2025 20:53:17) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.2.29, Copyright (c) Zend Technologies
    with Zend OPcache v8.2.29, Copyright (c), by Zend Technologies

前提

各セクションにつき、1 では Brahma テーマ ( ブロックテーマ ) と、2 では Twenty Twenty Five テーマ ( 最小要件が 6.7 ) をつかいます。( クラシックテーマ ) 。

そもそも子テーマを利用する意味

今のざっくりとした理解

親テーマ : インストールして有効化できるやつ。誰かほかのテーマ開発者が作ったもの
子テーマ : 親テーマに加えて、自分で調整するてきなやつ？

今回のモチベーション

フォントファミリーや小さな変更は Style Variations で事足りる気がします。むしろ子テーマは必要ない。

素朴な疑問として、それでも子テーマを利用する意味はなんでしょうか。

テーマの更新時にtheme.json 等の変更を保存する

Themes that include global style variations can offer many designs in one theme.
グローバルな スタイルバリエーション を含むテーマは 一つのテーマで 様々なデザインを提供します。

When you edit your site in the Site Editor, WordPress saves your changes to the database, so you don’t need to worry about theme updates removing your changes.

サイトエディタで編集した場合、WordPressはデータベースに変更を保存します。ですのでテーマの変更によって変更が失われることを心配する必要はありません。

If you change theme.json, HTML, CSS, PHP, or JavaScript files directly, you still need to create a child theme because these files are not protected when you install a theme update.

theme.json, HTML, CSS, PHP JavaScript ファイルを直接変更する場合、子テーマは依然として必要です。テーマのアップデートの際にこれらのファイルは保護されない からです。

上記引用の最後の段落にあるように、theme.json や HTML（テンプレートやパターン）、CSS、PHP（パターン）などを変更する場合は、テーマ更新（親テーマのアップデート）で変更が消えないよう子テーマが必要です。

Create Block Theme のかわりに公式テーマを使用

上の概要にあるチュートリアルサイトに沿って、第 1章から theme.json、テンプレート、パターン（HTML, PHP）、CSS を変更しています。

Create Block Theme で作成した練習環境のブロックテーマを使用しているので、公式テーマのような アップデートがいまいち素人的にはイメージできません。

そこで今回は、親テーマに公式テーマをインストールし、子テーマ作成のチュートリアルを行い、テーマ更新時に theme.json 等への変更を保存できるようにする、という方針で行こうと思います。

0. 親テーマ

以下のサイトを参考に、WP Theme Detector を使用して、気になったサイトのURL から自動的にテーマを検出します。

Google で "daily life blog"、 "book review blog" とか自分の好きなワードで検索して、探してきた 'bemorewithless.com' というサイトのテーマを WP Theme Detector で検索。

上のスクショの場合だと、genesis という親テーマが使用されていることが分かります。

子テーマは Be More with Less ですが、多分これはサイト名と同じなのでカスタムの子テーマです。↓ 下のスクショのように子テーマの提供元サイトも出ています。今回は自分で子テーマを作成するので、問題ないはずです。

また、親テーマの Genesis Version 3.5.0 の詳細も出ています。

そもそも WordPressを使っているサイトなのかどうか の判断は、Chromeブラウザでサイトを右クリック>[ソースを表示]で 'wp-' をテキスト検索 ( Ctrl + f ) してみます。

'wp-content' とかの WordPress 固有の文字列がひっかかれば、WordPressです。

テーマをインストール

Dashboard
Appearance > Themes > Add Theme
Install, Activate

なんか Brahma という違う名前になっていますが。Genesis って名前は古いのかな。

View Details をクリックしてみたら、"Version: 1.0.9
Mastering the Web’s Genesis – Innovate, Design, Dominate!!. Brahma is a free WordPress Full Site Editing (FSE) theme ..." と書いてありました。Genesis っても書いてあるのでまぁ良いんじゃないでしょうか。

1. 子テーマの作成

子テーマを作成します。

1-1 【任意】CSSスタイルシートを作成

※クラシックテーマの場合のみ。

おそらく、概要にリンクを張ってあるチュートリアルは クラシックテーマ に子テーマを追加する方法をやるようです。

公式より:

ブロックテーマではスタイル処理が一般的に theme.json で行われるため、多くの場合不要です。ただし、クラシックテーマを作成する場合は必要になることがよくあります

https://developer.wordpress.org/themes/advanced-topics/child-themes/#loading-style-css

子テーマ名を "FSE child" にする場合は、fse-child フォルダに以下の style.css を作成します。

wp-content/themes/fse-child/style.css

/*
Theme Name: FSE child
Template: <slug-of-your-parent-theme>
*/

Template の値について

The Template parameter value is the slug of the parent theme:

パラメータの Templateは親テーマのスラッグです。

うーん、意味わからないな。~~ほんとこのチュートリアルサイトは3章から書き方雑だな。文字数決まってて細かいこと書けねぇのかな。~~

はい、困った時の公式サイト。ていうかチュートリアルでさらっと流されずにいちいち公式も参照するべきですね。

この Template フィールド には一つ注意点があります。親テーマのフォルダ名と、wp-content/themes フォルダを基準とした相対パスで100%一致している必要があります。この場合、Twenty Twenty-Fourテーマフォルダは wp-content/themes/twentytwentyfour にあることが分かっています。したがって、Template の値は twentytwentyfourである必要があります

というわけで、brahma です。slug は。

wp-content/themes/fse-child/style.css

/*
Theme Name: FSE child
+ Template: brahma
*/

1-2 【任意】子テーマの style.css 読み込み

※クラシックテーマの場合のみ。

すべての親テーマが子テーマのstyle.cssファイルを自動的に読み込むように構築されているわけではないのでファイルを読み込みます

子テーマのルートフォルダに functions.php ファイルを追加する必要があります。
( 中略 ) functions.php にスタイルシートをキューに追加する新しい関数を作成

functions.php に以下のコードを追加します:

wp-content/themes/fse-child/functions.php

<?php
add_action( 'wp_enqueue_scripts', 'fse_child_enqueue_styles' );

// Enqueue the theme as a child theme
function fse_child_enqueue_styles() {
  wp_enqueue_style(
    'fse-child-style',
    get_stylesheet_uri()    // The parent theme loads only the active theme’s stylesheet, and then it will load the child theme’s stylesheet. 
  );
}

ちなみに functions.php を使用する理由は: ( 公式より )

テンプレートやパターンとは異なり、子テーマの functions.php ファイルは親テーマの functions.php ファイルを上書きしません。実際には、子テーマと親テーマの両方が読み込まれ、子テーマは親テーマの直前に読み込まれます。

つまり親テーマと子テーマを両方読み込むために functions.php を使用します。

1-3 子テーマ theme.json

結果からいうと、チュートリアルサイトが 子テーマの theme.json に追加するほどの内容になっていないので、このセクションで作成したものは何もありません。

子テーマのフォルダに theme.json を作成し、そこで設定すれば親テーマの設定を上書きできるということでしょう。

【任意】上下パディング

チュートリアルのサイトでは、親テーマに Twenty twenty を使用していて、上下パディングを削除するように theme.json をいじっています。が、Brahma テーマはもともと削除されているので、やりません。

カラーパレット

同じチュートリアルの 1, 2 章をやったときに同じようなことをした気がするので、飛ばします。

Drop cap

段落の先頭の文字が大きくなる「 ドロップキャップ 」ですが、これも Brahma テーマでは、サイトエディターの UI からオン・オフできる ので、飛ばします。

2. クラシックテーマにフルサイト編集機能を追加

この投稿では Brahma というテーマを使用しています。まず、このテーマがクラシックテーマなのか、ブロックテーマなのか、素人には分かりません。

Brahmaの配布サイト の Features には " Block editor patterns, Block editor styles, ..., Block themes" と書いています。が、参考情報に過ぎず、これだけでは判断できません。

2-1 クラシックテーマのサポートをしない場合

チュートリアルサイトの説明にヒントめいたことが書いてあります:

Increasing the minimum required WordPress version

If the theme no longer supports classic content, you should update the minimum required WordPress version to indicate what the theme supports.

Updating the minimum required WordPress version means that users who can’t or won’t update WordPress will not receive updates.

要求される WordPress 最小バージョンをあげる

テーマがクラシックコンテンツをもうサポートしない場合、( テーマのインストールの ) 要件として最小の WordPress バージョン ( の箇所 ) を更新 し、何が ( クラシック or ブロックテーマ ) サポートされるのか示さないといけません。

( つまり ) WordPress の最小バージョンの要件を更新することは、WordPress を更新するべきではないユーザーが、アップデートを受け取らないようにすることを意図しています。

インストールしたテーマ ( Brahma ) を見てみると、"WordPress version 6.0" になっています。(2025/9/25 現在)

そして、同じチュートリアルサイトの 1章か 2章で触れていたグローバルスタイルの style.css の Requires at least: 6.0 が、上のスクショのテーマ配布サイトでいうところの "WordPress version 6.0"　に一致しています。

wp-content/themes/brahma/style.css

/*
Theme Name: Brahma
Theme URI: https://shanesh.com.np/brahma/
Author: Shanesh
Author URI: https://shanesh.com.np/
Description: Mastering the Web’s Genesis – Innovate, Design, Dominate!!. Brahma is a free WordPress Full Site Editing (FSE) theme that helps users create beautiful, unique, and desirable websites. With its cutting-edge design, minimal and clean layout, Brahma is perfect for all kinds of businesses. It empowers you to innovate, design, and dominate the web effortlessly while ensuring a professional look for your brand.
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 5.7
Version: 1.0.9
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brahma
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, wide-blocks, block-styles, portfolio, education, news
*/

以上のことから、Brahma テーマを クラシックテーマとして使用するには、WordPress インストールが バージョン 5.9 以下 である必要があると考えられます。( 筆者の環境は WordPress 6.9 )

あくまで推測ですが。

2-2 クラシックテーマをサポートする場合

今回は...

同じチュートリアルサイトの Preparations にしたがって、筆者は wordpress-develop ( WordPressのコンテナ環境 ) で WordPressのローカル環境を構築しました。

その結果、WordPress 6.9 ( alpha ) バージョンをインストールしました。Brahma でクラシックテーマを試すには上で書いたように、WordPress インストールの バージョン 5.9 以下 が必要です。

なので、考えられる方法は 2 つあります :

WordPress のバージョンを 5.9 以下でインストール し直す
最小要件が WordPress 6.9 で、かつクラシックテーマにも互換性がある WordPress テーマをインストールする

クラシックテーマおよび WordPress インストールの相性がありそうなので慎重に

上の方法のうち 2つ目は、そんな WordPress テーマは少なそうです。たしか 6.3でブロックテーマが入ってきたので。6.9 でクラシックテーマをいまだにサポートしている テーマを見つけるのは、困難なのではないでしょうか。

仮にあったとしても、バグとかがあったりして、実用に向かないテーマおよび WordPress インストール の組み合わせということになりかねず、なんとなく徒労感が出てきます。

なので、1 つ目の方法をとります。つまり、概要のチュートリアルの 4 章 ( "Adding full site editing features to classic themes" = 「クラシックテーマにフルサイト編集機能を追加する」 の部分) を行うには、最初から環境構築が必要。

クラシックテーマに含まれる制約

以下、概要にリンクを張ったチュートリアルサイトより:

テーマをGutenbergと互換性を持たせたい場合は、WordPressの最小バージョンを6.0以上に設定してください。GutenbergはWordPressの最小バージョンを定期的に引き上げることに注意してください。1年前は、WordPressの最小バージョンは5.7でした。

テンプレートを編集する には、最低限必要な WordPress バージョンを 5.8 以上 に設定します。

また、 Coblocksのような人気の ブロックプラグインをサポートするには、少なくとも WordPress 5.5 が必要です。

Internet Explorer 11のサポート終了
WordPressはバージョン 5.8でInternet Explorer 11のサポートを終了 しました。あなたもそうすべきです。

まとめると:

制約の要素	WordPress のバージョン	互換性など
テーマ側の仕様の標準化	最小要件が 6.0 以上	Gutenberg との互換性があるが、( Brahma などの ) 最小要件を満たすテーマではクラシックテーマは使用できない ? クラシックテーマもサポートする場合は、最小要件未満のインストールが必要かも。
WordPress の内部互換性	インストールが 6.0	Gutenberg との互換性がある
WordPress の内部互換性	インストールが 5.9	テンプレートを編集できるが、Gutenberg との互換性は保証されない。
ブラウザ互換性	インストールが 5.8 以下	サポートされないブラウザ ( I E 11 ) がある。
プラグイン互換性	インストールが 5.4 以下	ブロックプラグインが使用できない可能性が高い。

方針 ( チュートリアル 4章 = 本投稿 )

考えられる方針は (A) or (B) 。どちらもテーマを変更しないといけないので、(B) なら最初からテーマを変更した状態で始められ、シンプル。( 現在、Brahma を使用。)

よって、(B) の方針とする。

(A) チュートリアルの内容に応じて WordPress をアップデートし、テーマ自体を変更する

WordPress 5.9 インストールで クラシックテーマ ( 最小要件が 6.0 のBrahma テーマの場合 ) のテンプレート 関連のチュートリアルを行う。
Gutenberg 関連は、最小要件が 6.1 以上のテーマに変更 した後でチュートリアルを行う。( WordPress 6.0 インストール上で )

(B) 最小要件が WordPress 6.1 以上のテーマを使用する

最小要件が WordPress 6.1 以上 のテーマで、クラシックテーマに対応する
Brahma のクラシックテーマは 5.9 以下が必要となり、Gutenberg と完全な互換性がないため、WordPress 6.0 インストール以上を使用する必要がある。
- 例) GeneratePress というテーマは最小要件が 6.5 なので、WordPress 6.0 〜 6.4 インストールで、クラシックテーマのテンプレートと、Gutenberg ともに互換性がある 。

以上のことから、
Twenty Twenty-Three 以降 ( 最小要件 6.1 以上 ) のテーマを使用します。デフォルトテーマを使用するのは、テーマをこれ以上インストールしたくないからです。( wordpress-develop にはデフォルトテーマが 10年分くらい入っているので)

2025/9/26 現時点で最新の Twenty Twenty-Five テーマ ( 最小要件が 6.7 ) が最適です。このテーマでクラシックテーマによる開発に必要な WordPress は 6.6 インストールになります。

wordpress-develop で WordPress インストールのバージョンを指定する方法が分からない

しかしながら、概要に張ったチュートリアルが WordPress 環境構築に使っているwordpress-develop (GitHub) では、WordPress バージョンを指定する方法が書いてありません 。

2025/8月時点で、wordpress-develop によるインストールは WordPress 6.9-alpha です。なので、今回チュートリアルで使用する 6.6 インストールは wordpress-develop で使用できません 。

チュートリアルが wordpress-developによる環境構築を前提としている以上、チュートリアルの範疇を超えますので、この投稿はここで終了します 。

代替

筆者は以前、こちらの投稿で WSL2 に WordPress 環境をローカル構築しました。

上記の別投稿は WordPress 6.8 を使用しています。なので Twenty Twenty-Five のクラシックテーマを利用するには、6.6 をインストールしなければいけません。

後追いで、概要のチュートリアルの続き ( 本投稿の4章の内容の続き ) を行おうと思います。その内容をこちらにリンクを張るつもりです。WSLの Ubuntu-22.04 , 20.04 あたりのディストリビューションになると思います。PHP は8.0 以上。あるいは、WSLの代わりに wp-env とか他の方法を使うかもしれません。