「作って学ぶ WordPress ブロックテーマ」を読んだ

投稿時刻2023年10月18日 15:34

「作って学ぶ WordPress ブロックテーマ」を 2,023 年 10 月 17 日に読んだ。

目次

メモ

ダウンロードデータ p7

本書で作成する WordPress の完成テーマ、使用する画像素材、インポート用のコンテンツデータ、
Figmaのデザインデータなどは、ダウンロードデータに収録してあります。
詳しい収録内容や使い方については、ダウンロードデータ内の readme を参照してください。

サポートサイト
https://book.mynavi.jp/supportsite/detail/9784839981877.html

GitHub
https://github.com/ebisucom/wp-blocktheme/

ハイブリッドテーマPDF
本書は WordPress によるブロックテーマ作成の解説をメインとしています。
そのため、クラシックテーマにブロックテーマの要素を取り込む「ハイブリッドテーマ」の作成についてはPDFにまとめ、ダウンロードデータに同梱しています。
ブロックテーマをベースにハイブリッドテーマを作成していきますので、必要に応じて利用してください。

1.3 テーマの分類 p20

現在の WordPress で扱うことのできるテーマを確認しておきます。

ブロックテーマ
「ブロックテーマ」はサイトエディターのために用意された新しいテーマのフォーマットで、 Gutenberg のブロックを使ってテンプレートを構成します。

HTML ファイルで構成されているように見えますが、その中身は Gutenberg のコンテンツデータと同様に、ブロックの構成をオブジェクトツリーとして保存したものです。
そのため、テンプレートの作成にはサイトエディターを使い、ノーコードを目指した環境でテーマを作成できます。
サイトエディターには、ヘッダーやフッターといったテンプレートパーツを編集するエディターや、
theme.json を管理するスタイルサイドバーも用意されています。
これからのWordPressでは、このブロックテーマの利用を前提として開発が進むことになります。

クラシックテーマ
「クラシックテーマ」はこれまでの WordPressで使われてきた、 PHP を使ったテンプレートで構成されたテーマです。

従来の機能はこれまで通り維持されています。
ただし、 Gutenberg が自己完結できるようになったことで、クラシックテーマにおける Gutenberg の扱い方は変化を始めています。
さらに、その変化も大きなものとなってきており、テーマの維持にはそれなりの覚悟が必要です。

ハイブリッドテーマ
クラシックテーマの中で、テーマの theme.json など、ブロックテーマの機能を活用しているテーマを「ハイブリッドテーマ」と呼びます。

長年培われたクラシックテーマの制作手法の中に、必要に応じてブロックテーマの便利な機能を取り込めるというメリットがあります。
ただし、ブロックテーマが主体となった今後の WordPress でハイブリッドテーマを作成するためには、ブロックテーマの理解と、
クラシックテーマから利用できる機能の理解も必要となります。
ブロックテーマをシンプルに利用するよりも多くのスキルが必要になりますので、よく検討する必要があります。

ブロックのスタイル p26

ブロックにはベースとなる固有のスタイルが用意されています。
たとえば、カラムブロックの各カラムが横並びのレイアウトになるのも、固有のスタイルが用意されているおかげです。
そのため、ブロックを並べるだけでページを構成することができます。
このスタイルは wp-block-library-* または wp-block-ブロック名-* というIDで出力されます。

スタイルの出力形式 p37

スタイルの出力形式は、ページ内で使用したブロックのスタイルのみを出力する should_load_separate_core_block_assets と、
インラインスタイルの最大容量を指定する styles_inline_size_limit の設定によって変わります。

ブロックテーマの場合、標準で should_load_separate_core_block_assets が有効化され、
styles_inline_size_limit を 20000 byte にした状態になっています。
これらの設定を変えてもページの表示には影響しないように処理されます。

// ページ内で使用したブロックのスタイルのみを出力するように指定
add_filter( 'should_load_separate_core_block_assets', '__return_true' );

// インラインスタイルの最大容量を 20000byte に指定
add_filter( 'styles_inline_size_limit', function () {
	return 20000;
});

一方、ハイブリッドを含むクラシックテーマでは should_load_separate_core_block_assets が標準では無効化されています。
これを有効化した場合、 1 ~ 4 がページの末尾 (</body> の直前) に出力されます。
これは、クラシックテーマではページをレンダリングしてからでないと、ページ内で使用したブロックの情報を取得できないためです。
その結果、出力順は 5 、 1 、 2 、 3 、 4 となるため、注意が必要です。

1.6 theme.json の基本 p44

theme.json はテーマのスタイルとブロックに関する設定を管理するためのファイルです。
現在の WordPress では、非常に重要な存在です。

グローバルスタイルを構成する theme.json

ここまででも解説したとおり、 theme.json には 1 、 3 、 4 の 3 つと、 block.json での指定 2 があります。
これらの theme.json を統合した結果から、グローバルスタイルが生成されます。

ここで付け加えるとすれば、 WordPress (コア) の基本設定はすでに theme.json で管理されているということです。
そのため、 Gutenberg が有効になっていれば、 theme.json を持たないクラシックテーマを使用していても theme.json のメカニズムは機能しており、グローバルスタイルが出力されます。

1 コアの theme.json

WordPress (コア) が持つ theme.json です。
以下のような設定やスタイルが含まれています。
詳細な内容に関しては右記で確認できます。

・ブロックサポートで有効化された、エディターの UI コントロールの有効化・無効化
・フォントサイズ、色、スペースのデフォルトのプリセット
・レイアウト関連の共通したスタイル
・ボタンのデフォルトのスタイル
・ブロックのデフォルトの間隔

2 ブロックの block.json (__experimentalStyle)

block.json はブロックを構成するファイルの1つです。
この中にブロックのスタイルを記述する方式が実験的に実装され、 WordPress 6.1 ではプルクォートブロックやナビゲーションブロックで使用されています。
ブロックが持つ固有のスタイルを theme.json のメカニズムの中に移し、ユーザーによるカスタマイズを容易にすることを目的としており、
block.json 以外のファイルを用意する方式なども提案されています。

3 テーマの theme.json

テーマで用意する theme.json です。
以下のような設定やスタイルを記述します。

・ブロックサポートで有効化された、エディターの UI コントロールの有効化・無効化
・フォントサイズ、フォントファミリー、色、スペースのプリセット
・サイトやコンテンツのベースとなるスタイル (レイアウト、タイポグラフィ、見出し、リンク、ボタン、各種ブロックなどのスタイル)
・テンプレートパーツ、カスタムテンプレートの設定

4 ユーザーのtheme.json

サイトエディターのスタイルサイドバーでのカスタマイズ結果です。
カスタマイズは UI で行いますが、その結果はデータベースに theme.json の形式で保存され、ユーザーの theme.json として扱われます。
サイトやコンテンツのベースとなるスタイル (レイアウト、タイポグラフィ、見出し、リンク、ボタン、各種ブロックなどのスタイル) をカスタマイズします。

theme.json の作成と編集 p47

このうち、作成と編集の対象となるのは3のテーマの theme.json です。
しかし、 theme.json を直接、作成・編集することはおすすめしません。
サイトエディターを使って、表示を確認しながら作成・編集するべきです。
ただし、現状では theme.json のすべてを UI からコントロールできるわけではないため、項目によっては theme.json を直接編集する必要があります。
テーマの theme.json を作成する流れは、 Chapter 2 からステップバイステップで解説していきます。

また、 theme.json で管理できるスタイルと設定に関しては、
どんどん更新されていますので、下記の「living reference」を参照してください。

Version 2 (living reference)
https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/

エディターの UI コントロールの有効化・無効化 p54

エディターの UI コントロールの有効化・無効化を設定できます。
たとえば、フォントのカスタムサイズの指定とドロップキャップの UI を無効化する場合は次のようにします。

コアの theme.json によってデフォルトで無効化されている UI は、
appearanceTools を true にすることでまとめて有効化できます。

2.1 WordPress の下準備 p70

ここからは WordPress でブロックテーマを作成しながらサイトを構築していきます。
下準備として、インストールした WordPress に以下の設定を行います。

デバッグモードをオンにする

theme.json の設定はキャッシュされるため、編集結果がフロントにすぐに反映されません。
歩くに映させるためには、 WordPress のインストールフォルダ内にある wp-config.php でデバッグモードを true にします。
define('WP_DEBUG', true);

Create Block Theme をインストール & 有効化する

WordPress.org がリリースしている、ブロックテーマ作成を手助けしてくれるプラグインです。
Gutenberg の一部として検討されていたテーマ作成関連の各種機能はこのプラグインに分離して開発が進められています。
雛形となるブロックテーマを作成したり、サイトエディターでの編集結果をテーマに反映させたりすることができます。
[プラグイン > 新規追加] で「Create Block Theme」を検索し、インストールして有効化します。

WP Multibyte Patch をインストール & 有効化する

日本語環境では入れておきたい、 WordPress のマルチバイト文字の取り扱いに関する不具合の累積的修正と強化を行うプラグインです。
[プラグイン > 新規追加] で「WP Multibyte Patch」を検索し、インストールして有効化します。

サイト名とサイトの説明を指定する
[設定 > 一般] の「サイトのタイトル」でサイト名を、「キャッチフレーズ」でサイトについての説明を指定します。
ここでは「Travel Times」、「旅に思いを馳せる」と指定します。

1 ページに表示する記事の数を指定する

記事一覧には最大6件の記事をリストアップしたいので、 [設定 > 表示設定] の「1ページに表示する最大投稿数」を「6件」に指定します。

フロントのツールバーを消す

WordPress にログインしているときに、フロントに表示されるツールバーを消します。
[ユーザー > プロフィール] で「ツールバー」の「サイトを見るときにツールバーを表示する」をオフにします。

2.7 functions.php を用意して外部CSSを読み込む p90

このタイミングでテーマフォルダ内に functions.php を追加し、外部の CSS を読み込む設定をしてきます。
ここでは次の2つを読み込みます。

コアブロックの追加分のCSS
コアブロックに適用する追加のスタイルが必要な場合は add_theme_support( 'wp-block-styles') を指定します。
これでエディターとフロントの両方に追加のスタイルが読み込まれます。
追加分を持つブロックと適用されるスタイルは以下の通りです。
Twenty Twenty Three ではこれを使用していませんが、今回作成するテーマでは適用して作成していきます。
そのあたりは作成するテーマによって判断してください。

テーマのCSS
現状として、 theme.json だけですべてのスタイルをまかなうのは難しいため、テーマの外部スタイルシートを読み込みます。
ここでは標準で用意する style.css をそのまま使用する形で設定します。
エディターには add_editor_style() で、フロントには wp_enqueue_style() で読み込みます。

<?php

function mytheme_support() {
	// コアブロックの追加分のCSSを読み込む
	add_theme_support( 'wp-block-styles' );
	
	// テーマのCSS (style.css) をエディターに読み込む
	add_editor_style( 'style.css' );
}

add_action( 'after_setup_theme', 'mytheme_support' );

function mytheme_enqueue() {
	// テーマのCSS (style.css) をフロントに読み込む
	wp_enqueue_style(
		'my theme-style',
		get_stylesheet_uri(),
		array(),
		filemtime( get_theme_file_path('style.css') )
	);
}

add_action( 'wp_enqueue_scripts', 'my theme_enqueue' );

2.10 サイトエディターでのカスタマイズ結果をテーマに反映する p104

本格的にはじめていく前に注意点を確認しておきます。
ここからサイトエディターでカスタマイズを進めていっても、カスタマイズ結果はテーマそのものに反映されません。
データベースに保存され、持ち出すことができないため、テーマに反映させる方法を確認しておきます。

テーマ側のファイルを確認する
テーマフォルダ内のインデックステンプレートのファイル (index.html) を確認すると、 P.87 でテーマ を作成したときのまま変わっていません。

カスタマイズの結果が存在していることを確認する
サイトエディターのテンプレートの一覧では、
元のテンプレートファイルがテーマフォルダにあることを示す追加者 (Added by) のアイコンに通知ドットが表示され、カスタマイズした結果が存在していることがわかります。

カスタマイズ結果はどこにあるのか
それでは、カスタマイズ結果はどこにあるのでしょうか。
データベースを見ると、投稿記事や固定ページのコンテンツを保存する場所にコンテンツの1つとして保存されています。

さらに、テーマの情報がカテゴリーやタグと同じ場所に、コンテンツを分類する情報の1つとして保存されています。
テーマの情報とカスタマイズしたテンプレートのデータは紐付けされており、テーマを切り替えることで参照され、紐づいた設定が読み込まれます。

このように、カスタマイズ結果がテーマと紐付けて保存されているので、このデータをテーマの方に反映させます。

カスタマイズ結果をテーマに反映する
ここでは Create Block Theme プラグインを使って、カスタマイズ結果を編集結果としてテーマ側のファイルに反映させます。
[外観 > Create Block Theme] で 「Override My Theme」を選択し、「Create Theme」ボタンをクリックします。

テーマフォルダ内のインデックステンプレートのファイル (index.html) を開くと、カスタマイズ結果が反映されたことが確認できます。

このプラグインを使用した場合、反映と同時にデータベース上のデータもクリアされます。
これにより、「カスタマイズしていない」状態になり、テンプレートファイル側の設定が使われるようになります。

Create Block Theme プラグインを使わずに反映する場合 p107

Create Block Theme プラグインを使わずにカスタマイズ結果をテーマに反映する場合、サイトエディターのエクスポート機能を使います。
サイトエディターの画面右上のオプションメニューから「エクスポート」を選択します。

カスタマイズ結果を反映させたテーマの構成ファイル一式がダウンロードされるので、使用中のテーマのファイルと手動で置き換えます。

なお、データベース上のデータをクリアするためにはサイトエディターで「カスタマイズをクリア」を選択します。

p114

・デフォルトテーマの Twenty Twenty Three と同じように、全部で 5 段階のフォントサイズをプリセットにします。
プリセットのスラッグも、デフォルトテーマが使っている small 、 medium 、 large 、 x-large 、 xx-large を使用します。
これで、エディターのUIでは右の形で選択できるようになります。

・small 以外の各サイズは Fluid タイポグラフィ (流体タイポグラフィ/可変フォントサイズ) にして、画面幅に合わせて変化させます。
変化させるサイズの範囲は最大サイズ max と最小サイズ min で指定します。

指定したプリセットは、グローバルスタイルとして次のように出力されます。
min と max で指定した サイズを元に clamp() の設定が自動算出され、「--wp--preset--font-size--スラッグ」という形の CSS 変数で指定されます。
clamp() の設定は画面幅 768ピクセルで最小サイズ min 、 画面幅 1600 ピクセルで最大サイズ max になるように算出されています。
サイズごとの指定で fluid を false にした small だけは、自動算出の処理が行われず、値が「13px」になっていることがわかります。

※ clamp() の算出には下記のジェネレーターと同じ方式が使用されています。
Fluid-responsive font-size calculator
https://websemantics.uk/tools/responsive-font-calculator/

※現時点では算出に使用される画面幅はWordPress内部で固定されたものです。
将来的には変更できるようにすることが検討されています。

※Figmaのデザインは画面幅1440pxで作成しているため、 WordPressによるclamp()の処理とは、ずれています。
ただし、現時点ではそこを設定できず、ずれも僅かなため、そのまま処理しています。
(同様に、 Twenty Twenty Three のデザインは画面幅1200pxで作成されたものです)

Webフォントのプリセットを作成する p122

続けて、 Web フォントのプリセットを作成します。
Web フォントには Google フォントを使用しますが、リモートで配信されているフォントをダウンロードして利用する方法と、直接利用する方法があります。

ここではダウンロードして利用する方法でプリセットを作成します。
GDPR (P128) 対策のために WordPress が推奨している方法です。
Create Block Theme プラグインを使うことで、簡単に設定することができます。

1
Create Block Theme プラグインによって追加された [外観 > Manage theme fonts] を開きます。
ここにはテーマで管理しているフォントが表示されます。
この段階では「System Font」が表示されています。
ここにWebフォントを追加するため、「Add Google Font」をクリックします。

2
Select Font のプルダウンから使いたいフォ ントを選びます。
ここでは 「Josefin Sans」 を選択します。

3
太さと斜体のバリエーションが表示されます。
ここでは太さ「300」と「700」にチェックを付けて「Add google fonts to your theme」をクリックします。

4
元の画面に戻ると、選択したフォントがテーマに追加されています。

テーマフォルダには assets/fonts フォルダが作成され、ダウンロードしたフォントファイルが追加されています。
ここでは太さ「300」と「700」のファイルが追加されたことが確認できます。

さらに、 theme.json にはダウンロードしたフォントをプリセットにする指定が追加されています。

Webフォントのフォーマット p127

Create Block Theme プラグインは、現時点では Google フォントから TTF 形式のフォントファイルをダウンロードして使います。
Web フォントとして一般的な WOFF2 形式のデータはダウンロードできる形で提供されていないため、
必要な場合は各フォントのライセンスに違反しない形で変換し、置き換えます。
なお、デフォルトテーマでもフォントに応じて TTF 形式が使用されています。

Web フォントと GDPR p128

GDPR (General Data Protection Regulation: EU 一般データ保護規則) は、
EU 域内の個人情報の保護を目的とした規則です。
Google フォントにホストされた Web フォントを使用した場合、この規則に抵触するリスクがあるとされたことから、
WordPress では Web フォントをローカルでホストすることを推奨しています。

p135

※clamp()の値は下記のようなジェネレーターを使用して取得できます。
ここでは一番上のジェネレーターを使用しています。
https://clamp.font-size.app/
https://royalfig.github.io/fluid-typography-calculator
https://modern-fluid-typography.vercel.app/
https://min-max-calculator.9elements.com/
https://websemantics.uk/tools/responsive-font-calculator/

p160

グローバルスタイルには次のように <body> にパディングを挿入するスタイルが出力されます。
そのため、このパディングは「ルートパディング」と呼ばれます。

body {
	padding-top: var(--wp--preset--spacing--40);
	padding-right: var(--wp--preset--spacing--50);
	padding-bottom: 0px;
	padding-left: var(--wp--preset--spacing--50);
}

全幅のブロックを画面の横幅いっぱいに表示する p161

ルートパディングを入れた状態で全幅のブロックを画面の横幅いっぱいに表示する機能は、現時点ではスタイルサイドバーで有効化できません。
theme.json に useRootPaddingAwareAlignments を追加して有効化します。

これで、全幅ブロックの左右にルートパディングと同じサイズのネガティブマージンが挿入され、画面の横幅いっぱいに表示されます。
詳しい仕組みについては次ページを参照してください。

ブロック名の確認 p193

register_block_style() などで必要になるブロック名は、エディターのキャンバスに配置したブロックの data-type 属性を確認します。
たとえば、見出しブロックを Chrome のデベロッパーツールで選択すると、 data-type 属性が「core/heading」になっていることがわかります。

スペーサーブロックで間隔を調整する p220

ブロックの間隔は「スペーサー」ブロックでも調整できます。
ブロックの構成として余白を入れた場所が明確になりますが、 P.155 のフクロウセレクタによる上マージンが入ることも考慮しなければなりません。

区切りブロックで区切り線を入れる p233

区切り線は「区切り」ブロックで入れる方法もあります。
ただし、話題の転換など、意味的な区切りを示す <hr> で出力されるため、使用する場所には注意が必要です。