WordPress次の進化 サイトエディターを体験（version5.8か5.9で搭載予定）
今日（2021年4月17日）、Kansai WordPress Meetup #6 「フルサイトエディティングをテストしながらひと足お先に体験しちゃう会」に参加させて頂きました。
ワードプレスversion5.8または5.9で搭載される予定というサイトエディターを体験させて頂きました。
Gutenbergの発展版ともいえなくないですが、Gutenbergが登場したとき以上に大きなインパクトがあるんじゃやないか、と思いました。
この記事では、私が今日体験したサイトエディターベータ版の内容をお伝えすることで、サイトエディターとはどんなものか？を感じ取って頂ければと思います。
なお、誰でもこちらのサイトの手順通りすれば体験できるようになっています。
https://ja.wordpress.org/team/2021/04/17/1987/
体験方法・手順は記事の後半に紹介します。
また、実際のデモ動画も記事の最後にあります。
ワードプレス サイトエディターとは？
サイトエディターというのは、その名の通り、webサイト表示（に近い）状態で編集できる新しいエディタ機能です。
操作方法は、基本的にはGutenbergと同じくブロック単位でコンテンツを挿入・編集・削除していきます。
ただ今回インパクトがあったのは、従来であればPHPでテンプレートファイルやfunctions.phpなどを触る必要があったクエリ（記事一覧表）をブロックとして挿入できるということでした。
クエリブロック（記事一覧表）
例えば、ヘッダーとフッターしかないページがあったとします。
サイトエディターではこのヘッダーとフッターの間に次のように記事一覧表を挿入することができるのです。
この例では、カテゴリー毎の記事一覧としていますが、当然カテゴリーによらず新着記事を表示することもできます。
この記事一覧の挿入には新たに設けられたクエリブロックを使います。
クエリだけでない新たに加わったブロック
今回のベータ版に準備されていたのはクエリブロックだけではありません。
代表的なものを紹介しておきます。
ブロック一覧の中のデザインカテゴリに多数追加されているのがわかります。
おなじみのボタン、カラム、グループ、スペーサなどのブロックがデザインカテゴリの最初の方にありますが、そのあと新しいブロックが目白押しです。
- サイトロゴ
- サイトのキャッチフレーズ
- サイトのタイトル
- クエリー
- 投稿タイトル
- 投稿コンテンツ
- 投稿者
- 投稿コメント
- 投稿日
- 投稿の抜粋
- 投稿のアイキャッチ
- 投稿タグ
- ナビゲーション
などなど・・・・
先の例では記事一覧の中にアイキャッチや投稿日などは表示していませんでしたが、これらのブロックをクエリブロックと組み合わせることで自由に挿入できます。
また、サイトロゴやナビゲーションなど、ヘッダー・フッターエリアに配置するものもサイトエディターで配置できるようになっていることも予想できるでしょう。
実際に体験してみよう
それでは、実際に体験してみましょう。
方法は、先に案内したクエリークエストのページに記載がありますが、少しわかりやすく紹介していきます。
※注意事項
あくまでベータ版なので何が起こるかわかりませんから、テストサイトを準備して体験してみてください。
手順概要
１．最新のGutenbergプラグインをインストール・有効化
２．テーマTT1 Blocksをインストール・有効化
３．デモコンテンツをダウンロードしてインポート（8記事の投稿が入ります）
４．サイトエディターを開ける
５．すでに存在する記事一覧表を削除
６．新しく記事一覧を挿入・編集（カラムブロックで大枠をつくりクエリブロックを挿入していきます）
７．サイト表示
手順詳細
１．最新のGutenbergプラグインをインストール・有効化
※本日私がダウンロードしたのはversion10.4.1でした。
２．テーマTT1 Blocksをインストール・有効化
Twenty Twenty-Oneと色合いが似てるので間違いやすいです。
デモコンテンツをダウンロードしてインポート
8記事がインポートされます。べつに自分で8記事準備してもらっても構いません。
アイキャッチ画像もついているはずですが、インポートがうまくいかないのか、アイキャッチ画像が表示されないという方が多かったです。
インポートが慣れていない方が多いと思うので少し詳しく解説します。
①ダウンロードページへ
クエリークエストページのGutenbergデモコンテンツをクリック
②ダウンロードする
”DOWNLOAD”をクリックすると、xml形式のファイルがダウンロードされます。
③インポート
次の画像の通り進めてください。
④サイトエディターを開ける
手順の②までですでにダッシュボードメニューに追加されています。
記事一覧表を削除
8記事分+Hello worldといった既存の記事一覧表を削除します。
具体的には、次の通りです。
①リスト表示を開ける
②グループ真下のクエリーをクリック
③ブロックの詳細メニューを開ける
④”ブロックを削除”をクリック
クエリ削除後、次のようにヘッダーとフッターだけになればOKです。
従来の概念でしたら、このようにクエリ自体が削除できる、ということが驚きですよね。
記事一覧表の挿入（参考動画あり）
ここから先は、クエリブロックなど先に紹介した新しいブロックを使って、クエリを削除した部分に新たにクエリブロックを配置したり、投稿者や投稿日を配置したりしていきます。
自由にいろいろと挿入してみて、操作感を体験してみるとよいでしょう。
参考までに実際に行った内容を動画でご案内します（クエリクエストのページの手順に沿っています）。
ただし、インポートした記事のアイキャッチ画像がうまく表示されないので、手動で各記事にアイキャッチを適当につけてから作業しました。
①カラムブロックで50：50の2カラムを配置
②左右のカラムそれぞれに、見出し（カテゴリー名）とクエリを配置（この段階で左右とも8記事表示）
③フィルター機能でカテゴリーを絞る（左右各4記事となった）
サイトエディターの導入時期
サイトエディターの導入は、version5.8からともいわれていましたが、今日のKansai WordPress Meetup #6では、おそらく5.9からで、5.8ではその前段階としてテンプレートエディター？なるものが導入されるだろうとのことでした。
ちなみにversion5.8は2021年7月、5.9は12月予定です。
Gutenbergが導入されたときもそうでしたが、すぐには普及しないでしょう。
各テーマが対応するのが早くて半年くらいからで、様子見しながら1年後くらいというのが相場じゃないかなという気はします。
今後のワードプレス（まとめに代えて）
サイトエディターを体験したことで、今後のワードプレスの進む方向が少しイメージできるようになりました。
まだベータ版なので、さらにここからどのように進化するのか楽しみです。
Kansai WordPress Meetupに参加して本当によかったと思います。主催頂いたスタッフの皆様、ありがとうございました。
サイトエディターが本格的に普及すれば、PHPをいじる必要性もどんどん減ってきて、基本的にはCSSとjavascriptでサイトデザインの差別化をしていくのがテーマの方向性なのかなと思います。
便利になる反面、コードいじりの楽しみが少し減るのも寂しい気がしますが、まださらにどんどん新しい技術を勉強して加えていく必要も出てくるでしょう。
わくわくどきどき・・・ですね。
