WordPress標準のブロックテーマ（FSEテーマ）である ブロックテーマのTwenty Twenty-Five を親テーマとして、サイトごとに異なる仕様の子テーマを構築する手順を解説します。
- サイトA向け子テーマ: トップページ（インデックス）の記事一覧で、記事ごとのタグを目立たせる独自デザイン（アイコン付き・バッジ風）を表示
- サイトB向け子テーマ: トップページ（インデックス）の記事一覧で、所属する複数カテゴリを階層やピル型タグとしてリッチに一覧表示
ブロックテーマにおける子テーマ作成と、ブロックテンプレート/パターンのオーバーライド手法をステップバイステップで進めます。
ディレクトリ構成
サーバー（wp-content/themes/）内に親テーマと2つの子テーマを配置します。
wp-content/themes/
├── twentytwentyfive/ # 親テーマ（標準）
│
├── twentytwentyfive-child-site-a/ # サイトA用子テーマ
│ ├── style.css
│ ├── functions.php
│ └── templates/
│ └── home.html (または index.html)
│
└── twentytwentyfive-child-site-b/ # サイトB用子テーマ
├── style.css
├── functions.php
└── templates/
└── home.html (または index.html)Step 1. サイトA用子テーマの作成（タグ表示の強化）
サイトAでは、トップページのクエリーループ内に「タグ表示ブロック」を組み込み、CSSでバッジスタイルに装飾します。
1. style.css の作成
wp-content/themes/twentytwentyfive-child-site-a/style.css を作成します。
/*
Theme Name: Twenty Twenty-Five Child (Site A)
Theme URI: https://example.com/site-a
Description: Twenty Twenty-Five child theme with custom tag UI for Site A.
Author: Your Name
Template: twentytwentyfive
Version: 1.0.0
*/
/* サイトA専用: タグのバッジ装飾 */
.site-a-custom-tags .wp-block-post-terms__separator {
display: none; /* デフォルトのカンマ区切りを非表示 */
}
.site-a-custom-tags a {
display: inline-block;
background-color: #0f172a;
color: #ffffff !important;
font-size: 0.75rem;
padding: 2px 8px;
border-radius: 4px;
margin-right: 6px;
margin-bottom: 4px;
text-decoration: none;
transition: background-color 0.2s ease;
}
.site-a-custom-tags a:hover {
background-color: #38bdf8;
color: #0f172a !important;
}
.site-a-custom-tags::before {
content: "🏷️ ";
font-size: 0.8rem;
margin-right: 2px;
}2. functions.php の作成
スタイルシートを適切にキューへ登録します。
<?php
// twentytwentyfive-child-site-a/functions.php
if (!defined('ABSPATH')) {
exit;
}
add_action('wp_enqueue_scripts', function() {
// 子テーマのCSSを読み込み
wp_enqueue_style(
'twentytwentyfive-child-site-a-style',
get_stylesheet_uri(),
['twentytwentyfive-style'],
wp_get_theme()->get('Version')
);
});3. テンプレートの上書き (templates/home.html)
親テーマ twentytwentyfive/templates/home.html を twentytwentyfive-child-site-a/templates/home.html にコピーし、記事タイトルやメタ情報の下に タグブロック（core/post-terms） を追加します。
<!-- クライアント側のループ内に追加するブロック記述例 -->
<!-- wp:post-template -->
<!-- wp:post-featured-image /-->
<!-- wp:post-title {"isLink":true} /-->
<!-- wp:post-date /-->
<!-- サイトA用: タグ表示ブロック -->
<!-- wp:post-terms {"term":"post_tag","className":"site-a-custom-tags"} /-->
<!-- wp:post-excerpt /-->
<!-- /wp:post-template -->Step 2. サイトB用子テーマの作成（複数カテゴリ表示の強化）
サイトBでは、1つの記事に複数のカテゴリが割り振られている場合でも見やすく整理された「ピル型（カプセル型）カテゴリUI」を実装します。
1. style.css の作成
wp-content/themes/twentytwentyfive-child-site-b/style.css を作成します。
/*
Theme Name: Twenty Twenty-Five Child (Site B)
Theme URI: https://example.com/site-b
Description: Twenty Twenty-Five child theme with multi-category UI for Site B.
Author: Your Name
Template: twentytwentyfive
Version: 1.0.0
*/
/* サイトB専用: 複数カテゴリのピル型デザイン */
.site-b-multi-categories {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 8px 0;
}
.site-b-multi-categories .wp-block-post-terms__separator {
display: none;
}
.site-b-multi-categories a {
display: inline-flex;
align-items: center;
background-color: #f1f5f9;
color: #475569 !important;
border: 1px solid #cbd5e1;
font-size: 0.75rem;
font-weight: 600;
padding: 3px 10px;
border-radius: 9999px; /* 完全な丸み */
text-decoration: none;
transition: all 0.2s ease;
}
.site-b-multi-categories a:hover {
background-color: #e2e8f0;
border-color: #94a3b8;
color: #0f172a !important;
}2. functions.php の作成
<?php
// twentytwentyfive-child-site-b/functions.php
if (!defined('ABSPATH')) {
exit;
}
add_action('wp_enqueue_scripts', function() {
wp_enqueue_style(
'twentytwentyfive-child-site-b-style',
get_stylesheet_uri(),
['twentytwentyfive-style'],
wp_get_theme()->get('Version')
);
});3. テンプレートの上書き (templates/home.html)
親テーマからコピーした twentytwentyfive-child-site-b/templates/home.html 内に、カテゴリブロック（core/post-terms） を配置します。
<!-- wp:post-template -->
<!-- wp:post-featured-image /-->
<!-- サイトB用: 複数カテゴリ表示ブロック -->
<!-- wp:post-terms {"term":"category","className":"site-b-multi-categories"} /-->
<!-- wp:post-title {"isLink":true} /-->
<!-- wp:post-date /-->
<!-- wp:post-excerpt /-->
<!-- /wp:post-template -->Step 3. 各サイトでの有効化と動作確認
- サイトAの管理画面
- 「外観」 > 「テーマ」を開きます。
Twenty Twenty-Five Child (Site A)を有効化します。- トップページを開き、記事一覧の各カードにバッジ風のタグ一覧が表示されていることを確認します。
- サイトBの管理画面
- 「外観」 > 「テーマ」を開きます。
Twenty Twenty-Five Child (Site B)を有効化します。- トップページを開き、複数のカテゴリがピル型のボタンスタイルで並んでいることを確認します。
ブロックテーマ子テーマ運用のポイント
- 親テーマ更新への耐久性親テーマ（Twenty Twenty-Five）本体のアップデートが配信されても、子テーマ側の
templates/やstyle.cssの差分は上書きされず安全に維持されます。 - サイトエディターとの関係管理画面の「外観 > エディター」からトップページを編集して保存すると、データベース（
wp_posts）側のカスタムテンプレートが優先されます。コード（HTMLファイル）ベースで統一管理したい場合は、子テーマ内のファイルを直接バージョン管理（Git管理）します。
コメント