WordPressの最新機能フルサイト編集（FSE）に対応した「LIQUID PRESS」

今ではブロックエディタに馴染んでいて、最初にブロックエディタを触ったときの使えない感じは全くありません。

しかし、その時の不自由さは、なかなか忘れられません。

もう、あのような不自由さを感じることはないだろうと思ってました。

ところが、また同じ感じを味わうとは思ってもみませんでした。

それは、フルサイト編集対応のブロックテーマ「LIQUID PRESS」に触れた最初の印象です。

私はWordPressの最新機能「フルサイト編集（FSE）」を全く知らなかったのです。

そんなところに「LIQUID PRESS」からの最新テーマ公開のアナウンスに興味を持ち、即座に購入することにしました。

【PR】「Theme3」では、企業サイトのWordPressベーステーマに、100%GPLテーマ「 Arkhe 」をオススメしています。
「 Arkhe 」は高機能有料プラグイン「 Arkhe Pro Pack 」と連携することによって利便性とカスタマイズ性の両立が可能です。制作・マーケのプロの方に是非！

「Arkhe」の詳細を見る
「Arkhe Pro Pack」（サブスク版）を購入する

「Arkhe Pro Pack」には以下が含まれています。「Arkhe Blocks Pro」と「Arkhe Toolkit」には買い切り版もあります。
・Arkhe Blocks Pro
・Arkhe Toolkit
・Arkhe CSS Editor

1 フルサイト編集（FSE）とは
2 「LIQUID PRESS」の構造
3 ブロックテーマの特長
- 3.1 「LIQUID PRESS」のテンプレート
- 3.2 「LIQUID PRESS」のテンプレートパーツ
4 「theme.json」とは
5 テーマの種類
6 「LIQUID PRESS」をさわってみる
7 まとめ

フルサイト編集（FSE）とは

WordPressのフルサイト編集は比較的新しい機能です。
WordPressのバージョン5.8から正式にサポートされました。

WordPressのブロックエディター（Gutenberg）を使用して、サイト全体の編集を可能にすることが特長です。

フルサイト編集を使用すると、テーマのヘッダーやフッターなどの各部分をブロックとして編集し、リアルタイムでプレビューしながらサイト全体のデザインやレイアウトをカスタマイズすることができます。

テーマはフルサイト編集に対応したものを使用します。

公式テーマの「Twenty Twenty-Two」「Twenty Twenty-Three」「Twenty Twenty-Four」はもちろん、フルサイト編集に対応しています。

この機能を利用すればノーコードであらゆるデザインのサイトが作れるのではないかと思います。

では、「Twenty Twenty-Two」を有効にしてみましょう。

フルサイト編集に対応したブロックテーマは管理画面の「テーマ」に下に「エディター」というメニューが表示されます。

メニューをクリックするとサイトデザインがプレビューされます。

そのプレビューをクリックすることで編集可能になります。

ブロックエディタで編集します。

この様な流れでサイト全体を修正可能です。

では次から「LIQUID PRESS」をみていきましょう。

【PR】「Theme3」では、ブログ用のWordPressテーマに、人気と高機能を誇る「 SWELL 」をオススメしています。

「SWELL」の特徴を見る
「SWELL」の購入はこちら

・ブロックエディター完全対応
・高速化機能を標準搭載
・100%GPL
・企業サイトの制作も可能他、機能多数。

「LIQUID PRESS」の構造

「LIQUID PRESS」のファイル構成は以下のようになっています。

「LIQUID PRESS」では「templates」や「parts」フォルダーの中にhtmlファイルが入っています。

また、見慣れない「theme.json」というファイルがあることに注目してください。

これらは「Twenty Twenty-Two」でも同様です。

「Arkhe」の詳細を見る
「Arkhe Pro Pack」（サブスク版）を購入する

ブロックテーマの特長

ブロックテーマの大きな特長の一つは「templates」や「parts」フォルダーの中にhtmlファイルが格納されていることです。

これらのhtmlファイルは「テーマ」→「エディター」に表示されます。（以後、サイトエディターと呼びます）

「外観」→「エディター」→「テンプレート」→「すべてのテンプレートを管理」、「外観」→「エディター」→「パターン」→「すべてのテンプレートパーツを表示」から、テーマに搭載されているhtmlファイルを見ることができます。

「LIQUID PRESS」のテンプレート

「LIQUID PRESS」のテンプレートは「templates」フォルダー内のhtmlファイルに対応しています。

個別投稿（single.html）
固定ページ（page.html）
インデックス（index.html）
コンテンツのみ（single-content-only.html）
ページ: 404（404.html）
コンテンツとヘッダーフッターのみ（single-blank.html）
検索結果（search.html）
サイドバー付き（single-with-sidebar.html）
ページタイトル付き（page-with-title.html）
すべてのアーカイブ（archive.html）

「LIQUID PRESS」のテンプレートパーツ

同様に「LIQUID PRESS」のテンプレートパーツは「parts」フォルダー内のhtmlファイルに対応しています。

header
header-fixed-top
header-flat
posts
search
footer

テンプレートパーツをサイトエディターで修正すると全てのテンプレートに反映されます。

例えばfooterの「Theme by LIQUID PRESS.」を削除すると全てのページから削除されます。

今までのphpベースのテーマはカスタマイズする場合、phpの知識が必要でした。

しかし、ブロックテーマの登場によって、カスタマイズにプログラム言語の知識は必要なくなったと言えるでしょう。

「theme.json」とは

次に、「theme.json」をみてみましょう。

{
	"$schema": "https://schemas.wp.org/wp/6.3/theme.json",
	"version": 2,
	"customTemplates": [
		{
			"name": "single-with-sidebar",
			"postTypes": [
				"page",
				"post"
			],
			"title": "サイドバー付き"
		},
		{
			"name": "single-content-only",
			"postTypes": [
				"page",
				"post"
			],
			"title": "コンテンツとヘッダーフッターのみ"
		},
		{
			"name": "single-blank",
			"postTypes": [
				"page",
				"post"
			],
			"title": "コンテンツのみ"
		},
		{
			"name": "page-with-title",
			"postTypes": [
				"page"
			],
			"title": "ページタイトル付き"
		}
	],
	"templateParts": [
		{
			"area": "header",
			"name": "header"
		},
		{
			"area": "header",
			"name": "header-fixed-top"
		},
		{
			"area": "header",
			"name": "header-flat"
		},
		{
			"area": "footer",
			"name": "footer"
		},
		{
			"area": "uncategorized",
			"name": "posts"
		},
		{
			"area": "uncategorized",
			"name": "search"
		}
	],
	"settings": {
		"appearanceTools": true,
		"color": {
			"custom": true,
			"customGradient": true,
			"palette": [
				{
					"color": "#32bdeb",
					"name": "Primary",
					"slug": "liquid-primary"
				},
				{
					"color": "#00a5d4",
					"name": "Secondary",
					"slug": "liquid-secondary"
				},
				{
					"color": "#3eb370",
					"name": "Tertiary",
					"slug": "liquid-tertiary"
//以下省略

なにやら、色やスペースなどの定義があるのが分かります。

この「theme.json」はテーマの見た目などテーマ固有の情報を定義しています。

例えば、以下のようなサイト内共通項目です。

theme.jsonの定義

マージンやパディング、行間
フォントサイズ、フォントの種類
コンテンツ幅
カラーパレット　等

「theme.json」によってサイト自体の各種定義を集中管理できるのです。

「theme.json」については以下のページに詳しくまとまっていました。是非合わせて読んでみてください。

kiwi-dev.com

WordPressサイトエディター対応のブロックテーマ開発（theme.json編） – Kiwi blog

WordPress 5.9から「ブロックテーマ」というテーマ開発方法が登場しました。この記事では、ブロックテーマ開発の中で重要な役割を果...

しかし、ブロックテーマに必須というわけではありません。また、「theme.json」は、ブロックテーマだけに使われているわけではありません。

テーマの種類

ブロックテーマは、今までのphpベースのテーマとは一線を画すものです。

そこで、WordPressテーマを分類することになりました。

以下、クラッシックテーマ、ブロックテーマの説明は ja.wordpress.org からの抜粋です。

クラシックテーマ

ブロックエディターの用語として「クラシックテーマ」は、伝統的な .php ファイル形式でテンプレートを定義し、/block-templates または /templates フォルダ内に index.html 形式のテンプレートを持たないテーマを指します。クラシックテーマは、テーマサポートや theme.json ファイルを介して、ブロックエディタやブロックコンテンツに構成やスタイルオプションを提供する機能があります。ブロックテーマでないテーマでも theme.json ファイルの使用により得られる柔軟性の一部を利用できます。

ブロックテーマ

ブロックテーマは、少なくとも /block-templates または /templates フォルダに index.html 形式のテンプレートがあり、オプションで、ブロックコンテンツのマークアップ形式のテンプレートを提供するテーマです。多くのブロックテーマは theme.json ファイルを利用して、構成やスタイル設定を提供しますが、 theme.json はブロックテーマに必須ではありません。ブロックテーマの利点は、ヘッダー、フッター、サイドバーなど、サイト内のすべての領域をブロックエディタで編集できる点です。