【初心者部】WordPressテーマのフルサイト編集 ( 1 ) theme.json とテンプレート (チュートリアル)

wordpress-develop

Last updated at 2025-09-19Posted at 2025-09-07

概要

以下のチュートリアル＞ [ 第1章イントロダクション ]
をおこなった記録。

次の記事:

環境

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

Create Block Theme のインストールと有効化

wordpress-develop (npm リポジトリ: これを使用してwordpressコンテナを起動済み前提) に組み込まれている WP-CLI によりインストール

.bash

npm run env:cli -- plugin search create-block

> WordPress@6.9.0 env:cli
> node ./tools/local-env/scripts/docker.js exec --user wp_php cli wp plugin search create-block

Success: Showing 10 of 4647 plugins.
+-----------------------------------+------------------------------------+--------+
| name                              | slug                               | rating |
+-----------------------------------+------------------------------------+--------+
| Spectra Gutenberg Blocks – Websit | ultimate-addons-for-gutenberg      | 94     |
| e Builder for the Block Editor    |                                    |        |
| Create Block Theme                | create-block-theme                 | 88     |

npm run env:cli -- plugin install create-block-theme --activate

> WordPress@6.9.0 env:cli
> node ./tools/local-env/scripts/docker.js exec --user wp_php cli wp plugin install create-block-theme --activate

Installing Create Block Theme (2.7.0)
Downloading installation package from https://downloads.wordpress.org/plugin/create-block-theme.2.7.0.zip...
Unpacking the package...
Installing the plugin...
Plugin installed successfully.
Activating 'create-block-theme'...
Plugin 'create-block-theme' activated.
Success: Installed 1 of 1 plugins.

1. ブロックテーマの作成

チュートリアルの該当ページ

テーマフォルダの作成

wp-content/themes/lesson-one を作成します。

Create Block Theme を使用し、空のテーマを作成。

Appearance > Create Block Theme
Create New Blank Theme

Theme name : lesson-one
Theme description : This is tutorial theme

[Create and Activate Blank Theme] をクリック。

style.css

テーマのルートフォルダに style.cssファイルを作成

wp-content/themes/lesson-one/style.css

/*
Theme Name: Lesson one
Author: The name of the individual or organization who developed the theme.
Description: This is tutorial theme
Version: 1.0
Requires at least: 6.5
Tested up to: 6.9-alpha
Requires PHP: 8.2
License: The license of the theme.
License URI: The URL of the theme license.
Text Domain: The string used for textdomain for translation. The theme slug.
*/

note:

Requires at least: The oldest main WordPress version the theme will work with, written in X.X format. Themes are only required to support the three last versions.
→ 下記 Tested up to (6.9 alpha ) の直近の 6.8 から 3つ下の 6.5。
Tested up to: The last main WordPress version the theme has been tested up to
→ Dashboard > [updates]
- WordPress Updates の画面の Current version の値にした。

ブロックテンプレートを新規追加

templates/index.html

.bash

# テンプレートファイルの確認
vscode ➜ /workspaces/wordpress-develop/src (trunk) $ ls -l wp-content/themes/lesson-one/templates/index.html
-rw-r--r-- 1 vscode vscode 1449 Sep  4 04:09 wp-content/themes/lesson-one/templates/index.html

2. グローバルスタイルと theme.json

チュートリアルの該当ページ

グローバルスタイルとは

CSSを読み込むシステムであると同時に、ユーザーが個々のブロックやページを編集することなくサイトのスタイルを変更できるように設計されたインターフェースです。

theme.json とは

theme.jsonは、ブロック設定、サイト全体のスタイル、ブロックスタイルの新しいテーマ構成です。

theme.jsonファイルを作成

フォントファミリーとサイズに応じて、読みやすい長さに幅を調整。( "settings" に設定する )

wp-content/themes/lesson-one/theme.json

{
    "version": 3,
	"settings": {
		"layout": {
			"contentSize": "840px",
			"wideSize": "1100px"
		}
	}
}

例)

コンテンツの幅を840px
ワイド幅を1100px
に設定。

(wordpress-develop のデフォルトは、620px, 1000 px)

[参考]theme.json の "settings" に設定できる内容 :

"settings" セクションで変更できる機能の一部を以下に示します。

カラーパレットとグラデーションを含む色

フォントファミリーとフォントサイズを含むタイポグラフィ

コンテンツの幅などのレイアウト

間隔、例えばマージンとパディングのプリセット値

境界線

theme.json を使用して WordPress テーマにフォントファミリーを追加する

チュートリアルの該当ページ

使用するフォント:
Google Fonts の Kaisei Decol を例とします。

Google Fonts のサイトから、ダウンロードリンクで ZIP ファイルをローカルにダウンロード

展開。

[任意] サブセット化する

Regular 体だけでも 4.3 MB ほどあるので、JIS第1水準漢字や常用漢字、ひらがな、カタカナのみを利用するように軽量化が必要。

サブセットフォントメーカー ( Windows / Mac デスクトップアプリ ) などのツールを使用し、サブセット化。

【サブセットフォントメーカーのやりかた】
※ [WOFFコンバータ] を使用して、.ttf → .woff2 に変換する場合。

インストールした .exe を実行＞ .ttf ファイルを選択。

フォントとして使う文字をコピペ。(フォントに格納する文字)

コピペ元:

作成後フォントファイルの拡張子は　.ttf のまま (サイズを小さくするだけ)
ファイル名とか、サブセット名 (書体名) を指定して[作成開始]。

サブセットファイルができました。( 4MB → 1.5MB に縮小。)

参考:

ttf ファイルを woff2 ファイルに変換する

WOFF コンバータ ( Windows / Mac デスクトップアプリ ) などのツールを使用し、変換するか、Webfonts helper ( GitHub リポジトリ ) などのツールを使用し、ファイルフォーマットを直接指定してダウンロード。

【Webfonts helper のやり方】

Google Fonts の API Key を取得。
curl で Webfonts helper の API で .woff2 のフォントファイルを含む ZIP をダウンロード。

GET api/fonts/[id]
- [id]は、フォントのID。GET /api/fonts で返ってきた "id" を指定する。
- 例 (GET /api/fonts) :

[{
  "id": "open-sans",
  "family": "Open Sans",
  "variants": ["300", "300italic", "regular", "italic", "600", "600italic", "700", "700italic", "800", "800italic"],
  "subsets": ["devanagari", "greek", "latin", "cyrillic-ext", "cyrillic", "greek-ext", "vietnamese", "latin-ext"],
  "category": "sans-serif",
  "version": "v10",
  "lastModified": "2014-10-17",
  "popularity": 1,
  "defSubset": "latin",
  "defVariant": "regular"
} [...]
]

例 (GET api/fonts/[id]) :
curl -o fontfiles.zip "https://gwfh.mranftl.com/api/fonts/lato?download=zip&subsets=latin,latin-ext&variants=regular,700&formats=woff"
- query strings meaning:
  download=zip
  .eot, .woff, .woff2, .svg, .ttf font file formats download (zipped).
  
  subsets=latin,latin-ext
  Alphabets you would like ( e.g. In "Kaisei Decol" option : cyrillic,japanese,latin,latin-ext are available. )
  
  variants=regular
  Font weight (フォントの太さ)
  values: regular,500,700
  
  formats=woff
  Font file formats (フォントファイルのフォーマット)
  values: eot,woff,woff2,svg,ttf

.bash

# フォント一覧を取得し、ローカルにテキストファイルで保存。
curl "https://gwfh.mranftl.com/api/fonts" > /mnt/c/Users/username/Downloads/webfonts-helper-api-fonts.txt

# .woff2 のダウンロード先のパスに移動。
cd /mnt/c/Users/username/Downloads

# 指定したフォント ( Kaisei Decol ) の.woff2 ファイル　をダウンロード。
curl -o Kaisei_Decol_webfonts_h.zip "https://gwfh.mranftl.com/api/fonts/kaisei-decol?download=zip&subsets=japanese,latin,latin-ext&variants=regular,700&formats=woff2"

ZIP を解凍。

api/fonts/[id] の [id] は、以下のように特定。

例: Kaisei Decol の場合

.txt ファイルでフォントの一覧をダウンロードした先の "C:\Users\usename\Downloads" にエクスプローラでアクセス。( WSL の "/mnt/c/Users/username/Downloads/" にマウントされているWindows側のパス )

→webfonts-helper-api-fonts.txt (curl でWebFonts Helper からダウンロードしたフォントの一覧) をテキストエディタで開く。
→ Kaisei Decol (フォント名) で検索:

"id":"kaisei-decol","family":"Kaisei Decol" となっているので、idは kaisei-decol .

curl 例 (Kaisei Decol の場合):

curl -o fontfiles.zip "https://gwfh.mranftl.com/api/fonts/kaisei-decol?download=zip&subsets=japanese,latin,latin-ext&variants=regular,700&formats=woff2"

参考:

Webfonts helper

API Key の取得

assets/fonts/ にwoff2 ファイルをおく

wp-content/themes/lesson-one/assets/fonts/
woff2 形式に変換したフォントファイルを格納。WSL で、cp するだけ。( ローカルなので )

.bash

# テーマディレクトリに移動。
cd ~/wordpress-develop/src/wp-content/themes/lesson-one
# フォントの格納パスを作成。
mkdir -p assets/fonts

# テーマフォルダのassets/fonts に格納。
cp /mnt/c/Users/username/Downloads/Kaisei_Decol_webfonts_h/kaisei-decol-v10-japanese_latin_latin-ext-regular.woff2 assets/fonts/KaiseiDecol-Regular.woff2

theme.json を編集

フォントの設定 (fontFamily、name、slug、fontFace )

settings".typography.fontFamilies に設定を追加。
fontFace の src はさっきの woff2 形式フォントファイルのパス。
fontFamily の "\"Kaisei Decol\", serif" という正式名称の値は、Google Fontsのページで "Get embeded codes" みたいなリンクにあるCSSからコピペした。

wp-content/themes/lesson-one/theme.json

"settings": {
		"typography": {
			"fontFamilies": [
				{
					"fontFamily": "\"Kaisei Decol\", serif",
					"name": "Kaisei Decol",
					"slug": "kaisei-decol",
					"fontFace": [
						{
							"fontFamily": "Kaisei Decol",
							"fontWeight": "400 700",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/KaiseiDecol-Regular.woff2" ]
						}
					]
				}
			]
		}
	}

theme.json の編集が済んだら、サイトエディターで確認してみます。

Edit your site「アイコンをクリックしてブロックをデザインしましょう。そしてタイポグラフィやレイアウト、色を選択しましょう」とポップアップも言っています。

右上の半月型のアイコン (Styles) を押します。

[タイポグラフィ(Typography)] のリンクを押します。

デフォルトの [System font] はみえますが、追加した [Kaisei Decol] はありません。これは、ブロックごとの設定なので、theme.jsonが反映されているわけではないようです。

WordPress管理画面の "Appearance" (外観) > "Editor" (エディター)
[ Typography (タイポグラフィ) ] とすすみます。

今度は " FONTS (フォント) " のところに theme.jsonに追加したフォント ( Kaisei Decol ) が反映されています。

"Global style & theme.json " のチュートリアルには、「スタイルの優先順位」に以下のことが書いてありました。

ユーザーが選択したスタイルは、theme.json で作成されたスタイルよりも優先されます。
1.ユーザーがブロックエディターで追加する個々のブロックのスタイル。
2.キューに追加するスタイルシート
3.theme.json ファイルおよびサイトエディターのスタイルインターフェイスを介して追加されたスタイル。
4.WordPress (またはプラグインがアクティブな場合は Gutenberg) のデフォルトのブロックスタイル。

先にみていたのは、上の説明の1.の個々のブロックのスタイルだと思います。ここは変更していないので、タイポグラフィにはシステムフォントしかなかったようです。

Kaisei Decol というフォントは、3.のtheme.json に設定しました。これは、WordPress管理画面の "Appearance" (外観) > "Editor" (エディター) > [Typography (タイポグラフィ) ] > FONTS (フォント) に反映されていました。

3. テンプレートとテンプレートパーツ

チュートリアルの該当ページ

テンプレート

テンプレートはベースファイルです。

index.html、個別の投稿、ページ、アーカイブ、検索結果用のテンプレートなどがあります。

テンプレートパーツ

テンプレートパーツを使用してテーマを整理・構造化し、コードの重複を避けます。

たとえば、ヘッダーやフッターを作成し、それらをテンプレートファイルと組み合わせます。

テンプレートパーツは、HTMLファイル、カスタム投稿タイプ（wp_template_part）、そしてブロックで構成されています。

header.html と footer.html

テーマのルートディレクトリ ( テーマフォルダ ) の、以下のディレクトリに格納する。

ヘッダーとフッターのテンプレートパーツ :

parts/header.html
parts/footer.html

ヘッダーを編集してみる

まずテンプレートパーツとして header.html を登録。(していない場合)

wp-content/themes/lesson-one/theme.json

"templateParts": [
		{
			"area": "header",
			"name": "header",
+		    "title": "Header"
		},

サイトのタイトルを中央寄せします。tagline も。(タイトルの下の副題みたいなやつ)

wp-content/themes/lesson-one/parts/header.html

- <!-- wp:site-title /-->
+ <!-- wp:site-title {"textAlign":"center"} /-->
- <!-- wp:site-tagline /-->
+ <!-- wp:site-tagline {"textAlign":"center"} /-->

反映。

Appearance ＞ Editor >
[Template] ＞テンプレートから "Index" を選択＞右上の工具のマーク (Create block theme)
Save changes to theme をクリックする｡

確認。

Appearance ＞ Editor >
[patterns] > Header

タイトル ( 太字の "WordPres..." のところ ) や タグライン ( "Write site tag line" のところ) のブロックを選択すると、[Align Text] のアイコンでドロップダウンリストが出てくる。"Align text center" となっていることが分かる。

ブログセクションの追加

以下の例のように、main グループブロック と クエリーループブロック をテンプレート (index.html) に追加する。

例:

wp-content/themes/lesson-one/templates/index.html

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
	<!-- wp:query {"layout":{"inherit":true}} -->
	<div class="wp-block-query">
	</div>
	<!-- /wp:query -->
</main>
<!-- /wp:group -->

main グループブロック

例:

wp-content/themes/lesson-one/templates/index.html

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">

index.html にmain グループブロックを追加する。

add a group block with the tagName attribute with the value main
グループブロックを追加し、tagName 属性を main という値にします。

index.htmlの <main> タグは、ブログ投稿リストのラッパーを追加する。
layout type は、WordPress 6.1 で追加された。以下の値が設定可能。

　　- constrained : グループの内側のブロックが水平方向に中央揃えになる。
　　- default : グループの内側のブロックが左揃えになり、幅がコンテナいっぱいになる。
　　- flex: Used with the row and stack group block variations.

クエリループブロック

例:

wp-content/themes/lesson-one/templates/index.html

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
	<!-- wp:query {"layout":{"inherit":true}} -->
	<div class="wp-block-query">

index.html のクエリループブロックは、すべてのカテゴリーから投稿を取得して表示する。
- クエリループブロックは、追加設定を行わない場合、現在のテンプレート ( この場合は、index.html ) から継承される。

クエリループブロック:

index.html

  <!-- wp:query -->
  <div class="wp-block-query">

一方、アーカイブテンプレートは、選択したカテゴリー (やタグ、投稿タイプ ) から取得した項目を表示する。

投稿テンプレート

index.html では、クエリーループブロックの内側に下のような wp:post-template ( 投稿テンプレート パーツ ) を持つ。これは、投稿タイトルや投稿内容のブロックを内包するコンテナ。

投稿テンプレート:

index.html

	<!-- wp:query {"layout":{"inherit":true}} -->
	<div class="wp-block-query">
      <!-- wp:post-template -->

投稿テンプレートの項目:

投稿タイトル ( wp:post-title ) :
- タイトルは必ずリンク ( "isLink":true ) にする。こうしないと、各投稿にアクセスできなくなる。
アイキャッチ画像 ( wp:post-featured-image ) :
- アイキャッチ画像にも各投稿へのリンクを張る場合、"isLink":true にする。
投稿内容 ( wp:post-content )
投稿者 ( wp:post-author ) :
- 投稿者のアバターを表示しない場合、"showAvatar":false にする。
投稿日付 ( wp:post-date ) :
- 投稿日付にも各投稿へのリンクを張る場合、"isLink":true にする。
抜粋 ( wp:post-excerpt )

など

クエリーループブロックの内側に以下のコードを追加。デフォルトの項目に、抜粋 ( wp:post-excerpt ) という項目を追加した。

index.html

		<!-- wp:post-template -->
		<!-- wp:group -->
		<div class="wp-block-group">
			<!-- wp:post-title {"isLink":true} /-->
            <!-- wp:post-featured-image {"isLink":true} /-->
            <!-- wp:post-content /-->
            <!-- wp:group {"layout":{"type":"flex"}, "style":{"typography":{"fontSize":"14px"}}} -->
			<div class="wp-block-group" style="font-size:14px">
				<!-- wp:post-author {"showAvatar":false} /-->
                <!-- wp:post-date {"isLink":true} /-->
                <!-- wp:post-terms {"term":"category"} /-->
				<!-- wp:post-terms {"term": "post_tag"} /-->
+               <!-- wp:post-excerpt /-->
            </div>
			<!-- /wp:group -->
        </div>
		<!-- /wp:group -->
		<!-- /wp:post-template -->

反映。

Appearance ＞ Editor >
[Template] ＞テンプレートから "Index" を選択＞右上の工具のマーク (Create block theme)
Save changes to theme をクリックする｡

確認。

Appearance ＞ Editor >
[Template] ＞テンプレートから "Index" を選択

投稿者、投稿日付、カテゴリー、タグの下に、
"Welcome to WordPress. This is your first post. Edit or delete it, ......" , "Add "read more" link text"
と表示されたブロックができています。

おそらく、「投稿記事の冒頭部分」 (＝つまり抜粋 ) と、「もっと読む」みたいな、記事へのリンクのブロックを追加する感じだと思います。

ただ、アイキャッチ画像の下の wp:post-content にも同じ内容 ( "Welcome to WordPress. This is your first post. Edit or delete it, ......" ) が出てしまっているので、wp:post-excerpt を使用する場合は不要だと思います。

ページネーション

各投稿にはページネーションを表示させたくないため、投稿テンプレートブロックの外に以下のコードを追加 ( デフォルトで追加されていた ) 。

wp-content/themes/lesson-one/templates/index.html

		<!-- wp:query-pagination -->
				<!-- wp:query-pagination-previous /-->

				<!-- wp:query-pagination-numbers /-->

				<!-- wp:query-pagination-next /-->
		<!-- /wp:query-pagination -->

各ブロックの説明:

wp:query-pagination-previous : 前のページネーションに移動するリンク。
wp:query-pagination-numbers : 現在のページ番号。
wp:query-pagination-next : 次のページネーションに移動するリンク。

最終的に作成したブログセクション

最後に、テンプレート ( index.html ) に追加したブロックは、以下のコードのようになりました。

wp-content/themes/lesson-one/templates/index.html

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
	<!-- wp:query {"layout":{"inherit":true}} -->
	<div class="wp-block-query">
		<!-- wp:post-template -->
		<!-- wp:group -->
		<div class="wp-block-group">
			<!-- wp:post-title {"isLink":true} /-->
			<!-- wp:post-featured-image {"isLink":true} /-->
			<!-- wp:group {"layout":{"type":"flex"}, "style":{"typography":{"fontSize":"14px"}}} -->
			<div class="wp-block-group" style="font-size:14px">
				<!-- wp:post-author {"showAvatar":false,"showBio":false} /-->
				<!-- wp:post-date {"isLink":true} /-->
				<!-- wp:post-terms {"term":"category"} /-->
				<!-- wp:post-terms {"term": "post_tag"} /-->
				<!-- wp:post-excerpt /-->
			</div>
			<!-- /wp:group -->
			<!-- wp:spacer {"height":40} -->
			<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
			<!-- /wp:spacer -->
		</div>
		<!-- /wp:group -->
		<!-- /wp:post-template -->
		<!-- wp:group {"layout":{"inherit":true}} -->
			<div class="wp-block-group">
			<!-- wp:query-pagination -->
				<!-- wp:query-pagination-previous /-->

				<!-- wp:query-pagination-numbers /-->

				<!-- wp:query-pagination-next /-->
			<!-- /wp:query-pagination -->
			</div>
			<!-- /wp:group -->
		</div>
	<!-- /wp:query -->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

スクリーンショット ( サイトエディター ):

【ヘッダー : サイトタイトル、タグライン/ クエリーループブロック : 投稿タイトル、アイキャッチ画像、投稿者、投稿日付、カテゴリー、タグ、投稿の抜粋】

【ページネーション/ フッター】

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up