WordPress6.0がリリースされるので、そろそろフルサイト編集（FES）と向き合う
WordPress6.0が2022年5月26日にリリースされる予定
※Beta版は以下からダウンロード。
今回のアップデートでは、WordPress5.9で導入されたフルサイト編集機能の強化が主になっています。
フルサイト編集について、WordPressのテーマ制作者として使用するべきか考えておいたほうがいいと思うので、自分でいろいろ試してみた感想を書いておきます。
フルサイト編集対応テーマ（twentytwentytwo）を眺める
※詳しい解説は以下のサイトでされていました。詳しく知りたい方は以下のサイトをご参照ください。
↓ファイル構造（一部）↓
twentytwentytwo
│ functions.php
│ index.php
│ readme.txt
│ screenshot.png
│ style.css
│ theme.json
├─inc
│ │
│ └─patterns
│ footer-about-title-logo.php
│ footer-blog.php
│ footer-dark.php
│ footer-default.php
| ～以下略～
├─parts
│ footer.html
│ header-large-dark.html
│ header-small-dark.html
│ header.html
└─templates
404.html
archive.html
blank.html
home.html
index.html
page-large-header.html
page-no-separators.html
page.html
search.html
single-no-separators.html
single.html
気になる点
-
テーマテンプレート（page.php、date.php）などが無くなっている
今までのWordPressといえばテンプレート階層を元にページを構築していくのが常識だったがかなり仕組みが変わっている。フルサイト編集対応サイトは、仕組みを理解していないと今までの知識では上手く編集することが難しそう。 -
テンプレート分かりずらい
個人差があると思いますが、テンプレートのwp:groupなどが全てコメントアウトで記載するように変更してあるのでとても分かりずらい。誤って必要なものも削除してしまいそう。 -
Gutenberg推しがすごい
テンプレートやブロックパーツなど、ほとんどの機能をGutenbergが担っている。WordPressがGutenbergを今後メインで開発していくことは明白。
partsについて
ここに登録したものは、テンプレートパーツに登録される。（templatesでインクルードするものが多い）
※{}で囲んであるところはブロックのオプションです。Gutenbergでは画面の右側にブロックの設定項目が表示されますが、それはこのオブジェクトで管理されることになります。
「wp:groupやwp:patternって何者？？」と思ったのですが、Gutenbergの投稿画面で、
適当なブロックを挿入→ブロック上に出てくる三点ドットをクリック→コピーでコードをコピーできます。
コピーしたコードを組み立てていくことで、パーツを組み立てます。
templatesについて
これが従来のarchive.phpなどのテンプレートファイルに該当する。
templatesで使用されているGutenbergのブロックでクエリー関連のもの
- wp:query(クエリーループ)
サブクエリーループを取得します。
このブロックはこのフルサイト編集を可能にするために、重要な役割を果たします。
https://lunalunadesign.net/2021/07/1772/ - wp:query-pagination（ページ送り）
ページネーションを吐き出してくれるブロック。カスタマイズの仕方が不明。ボタンのデザインが自由に変えられなそうかも？ - wp:post-featured-image（投稿のアイキャッチ画像）
記事に登録されているアイキャッチを表示します。 - wp:post-title（投稿タイトル）
記事のタイトルを表示します。
その他
- wp:template-part
テンプレートをインクルードします。
patternsについて
WordPress5.5からブロックパターンが利用可能になっています。
このときはregister_block_patternで登録する必要がありましたが、WordPress5.9からはpatternsというディレクトリ以下にコードを登録するだけでブロックパターンを追加出来るようになりました。
これで作成者側が意図したようなテンプレートを作成できます。
※ただし、ブロックも管理画面で自由に追加できてしまうので、管理画面上でも誤って操作すると簡単に崩れます。
フルサイト編集（FES）のメリット
- とても自由度が上がってヘッダーやフッターもクライアントがいじれるようになる。
- phpわからなくてもある程度自分でカスタマイズできる。
- アーカイブテンプレートや固定ページテンプレートなど、従来はテーマのテンプレートで行っていたものを、WordPressの管理画面でほぼすべて自由に変更することができる。ブロックの追加や固定テキストの追加も簡単に可能。
- WordPressの開発者の方々は、フルサイト編集の開発に力を入れているため、今後こちらのサポートが主流になっていくであろう。WordPressを使用するのであれば、数年後にはフルサイト編集が前提になっている可能性もある。
- レスポンシブ対応もデフォルトで可能になっている。（これは昔からかも？）
フルサイト編集（FES）のデメリット
- 自由度が高い分、色々なことができてしまうため、クライアントのWordPress（フルサイト編集）に対する理解が低いとサイトが壊れてしまう
- 細かい要望に答えることが難しい
- WordPressのデフォルトのCSSを適用することが基本になっているので、今までやっていたスタイリングを、こちらの意図通りに動かすのが大変になりそう。大雑把なデザインしか再現できない可能性が高い。
- これからどんどん開発が進んでいき、新機能がたくさんついていくと思うので、バージョンアップの度に対応が必要になる。
- フルサイト編集の情報が少なく、カスタマイズするのに時間がかかりそう。
- クライアントが自由にカスタマイズできる分、クライアントにかかる負担が大きくなる可能性がある。（知識を入れる必要がある）
フルサイト編集テーマの作り方の注意点（想像）
- とにかくすべてはGutenbergのブロックにのっとって開発を進めていく。（一覧ページも）
- 特に記事詳細はデザインをGutenbergを使用することを前提に進めていく必要がありそう。
- CSSはオリジナルのCSSを多用せず、WordPressが提供しているCSSを利用してブロックを組み立てる。（theme.jsonなどで色やフォントサイズは指定する形が良さそう）
- 今まではテーマファイルを変更して本番サーバーにアップロードすることでWordPressの運用が出来ていたが、それができなくなってしまう（管理画面でテーマを操作することになるから）ので、テスト環境→本番環境の反映でミスが起こる可能性が非常に高い。
フルサイト編集テーマをクライアントに提案する際の注意点（想像）
- フルサイト編集を勉強してもらう必要がある。
つまり、クライアントの負担がとても重くなる可能性が大きい。 - ヘッダーやフッターもサイトエディターでいじれてしまうので、どこまで自由度をもたせるかを決めておく。
まとめ
フルサイト編集は、一般のphpに詳しくない方がWordPressの勉強をするだけでWebサイトを更新できるようになるものなので、WordPressテーマ開発者としては、しばらくはフルサイト編集に完全に対応する必要がないのではないと思います。
しかし、今後フルサイト編集への移行に伴い、数年後には今までのテンプレート階層に対応しなくなる可能性もないとは言い切れません。
なので、従来のテーマテンプレート（page.phpなど)ではなくtemplates,parts,patternsなどのWordPressが今後進めていくであろう、Gutenbergの使用を前提とした構造で今後は構築していくのがいいと思います。
有識者のサイト(引用)
以前は、ページ全体のレイアウトを変更しようとすると、php を学ぶことから始めるのが一般的でした。Twenty Twenty-Two（フルサイト編集対応のテーマ）からは、それが不要になったということになりそうです。
引用:https://sapporogeezer.me/2021/12/04/wp_twenty-twenty-two_theme/
単純にこれまでのワークフローに当てはめようとすると、デザインカンプからスタイルガイドを作成して、サイトやページを作成していくような形にもっていくという形になるわけですが、ちょっと手軽な感じではありません。
従来の、HTML&CSSでページを作成してからのWordPrss化というスタイルとは、最悪な相性にさえ思えます。
引用:https://ebisu.com/note/twenty-twenty-two/
Discussion