今回は、もうすぐリリースされる WordPress 5.9 に実装される、Full Site Editing についてどういうものか先行体験しようとおもって、Kansai WordPress Meetup 参加しました。まだ Gutenberg に非対応な WordPress もある中で、何がどう変わったのかこのあたりで知っておこうということですね。
事前準備（前日）
プログラム
によると、ローカル開発環境として Local を使うということだったので、これをインストール。前日となる 2021年12月17日に、WordPress のデモサイトを１つ立ち上げておきました。
デフォルトでは、PHPバージョンが 7.3系で、WordPress 5.9ベータ版のヘルスチェックで警告がでるので、 PHP7.4系にしておきました。またログイン後の言語を日本語に変更し、タイムゾーンも Asia/Tokyoに変更にしておきました。
WordPress Beta Tester プラグインをインストールし、ツール > ベータテストより、下記のように、最前線、ナイトリーに設定変更。
あとは更新メニューから、5.9 ナイトリービルドへ更新します。
2021年12月17日時点では、5.9-beta3-52383 でした。日々更新されるバージョンのため、本番では若干バージョンアップしているかもしれません。
この時点ではテーマが、Twenty Twenty-One となっているので、外観より Twenty Twenty-Two に変更します。
そうすると、従来の外観テーマメニュー（左図）から、新しいテーマメニュー（右図）になります。
以下、筆者が理解したことのメモを残します。
当日
今年度の初雪であり、さらに積もりました。これをZoomの背景にして参加しました。
冒頭、軽く皆で雑談したあと、始まりました。
参加者数は登録サイトをみると 48名、始まった当初は28名でした。途中 36名になっていました。
冒頭今回の Meetup 開催側で注意事項や WordPress, WordCampの紹介がされた。
その中で気になったものをメモ。
その中で気になったものをメモ。
- 参加したホスティングサーバー側で WordPressのテストを定期的に行って、WordPress がホスティングサーバーで問題なく動くかどうかチェックするプロジェクトとのこと。
自己紹介はブレイクアウトルームにて
最初の4名は、全員知ってるメンバーだったので自己紹介せずに雑談をしていた。
2度目は、過去に新聞記者をされていた方がいた。いまは会社を起こして最近はWeb制作部門を作ったとのこと。話していると時間が足りない。一回5分だそうだ。それを知らずにダラダラと話してしまった。
最後の3度目は7分になった。出版社のインハウスデザイナーが参加された。知り合いもいたので時間が足りないですね。
いずれにしても、話足りないほど楽しかったですね！
その後10分休憩。その間に Local 環境を構築していない人は構築してね！というノリですね。
Full Site Editingをみんなで触ってみよう!
Full Site Editing（フルサイト編集）とは、設定、スタイルからテンプレートやテーマまで、サイトのあらゆるパーツにブロックの操作性と拡張性を導入するもの。
これを実現するためには、WordPress コア（5.9以降）とテーマ（現行は Twenty-Twenty Two）となる。
まずは前日インストールした WordPress 5.9のナイトリービルドを更新（5.9-beta3-52384）。
コンテンツを試すのは、テーマユニットテストデータ日本語版が活用できるよ！
https://github.com/jawordpressorg/theme-test-data-jaから、ZIPダウンロードする。
利用するのは、wordpress-theme-test-data-ja.xml
これを WordPress にインポートするには WordPress Importer プラグインをインストールして有効化する。
するとツール > インポートより、WordPress のインポートが増える。
WordPress のインポーターの実行のリンクをクリック
ファイルを選択ボタンをクリックして、先程の wordpress-theme-test-data-ja.xml を選択。そして、ファイルをアップロードしてインポートボタンを押した上で、出てくる画面の一番下にある「添付ファイルのインポート」をチェックしておきます。
これで実行ボタンを押して待つと、投稿、固定ページ、メディアにサンプルデータがいろいろ入ります。
投稿ページ
固定ページ
メディア
クエリループブロック
- 投稿一覧を表示するなどをすることができる。
上記のようにクエリループブロックを追加して、「選択」ボタンを押すと、ブロックの設定ができるようになる。ソートもできるようだ。
プレビューという機能が実質なくなっている
編集画面自体がプレビューという考えに対して、様々な意見が飛び交っていた。
自前でフロントページを指定したい場合には、別途フロントページ（テンプレートで作成できるのか）を作って指定してあげる必要あり。フロントページを作ってしまうと、それが優先されてしまうようだ。テンプレートのフロントページを削除したら、ホームのテンプレートがベースになっている模様。
画面上からは page-◯◯.php は作成できない。直接作成（FTP等）で作成できるようだ。ただしテーマに対応している必要あり。子テーマを作ってやる感じ？
外観を消すなどユーザーが誤操作しないようなツールはあるのか。以前、外観のカスタマイズメニューを削除する方法についてはネットで載っていたので、そこを参考にやってみた。
管理者も含めて、外観のサブメニューの Editor を非表示にする
利用側も管理者権限を有する場合は結構ある。となると、テーマの functions.php に下記のコードをいれておけば、Editorを非表示にできますね。
// のコメントした部分で権限によって除外できたりするようだ。
function remove_menus() {
// if (!current_user_can('administrator')) {
remove_submenu_page('themes.php', 'site-editor.php'); // 外観->Editorを非表示
// }
}
add_action('admin_menu', 'remove_menus');
従来のテーマエディタを開くためには
- wp-admin/theme-editor.php
に直接アクセスすると利用できる。
theme.json とかあるけど？
- 新デフォルトテーマTwenty Twenty-Twoがお目見え (Capital P)
- Global Settings & Styles (theme.json) (WordPress.org）
- Block Theme (WordPress.org）
- 【WordPress5.9】theme.json 全解説（Qiita）
- FSE プログラムのテスト募集 #11: サイト編集の探索（WordPress.org 日本語版）
上記をみると、テーマのスタイル変更が JSON によってできる（それまで CSS/PHP でガリガリしなくてよくなるようだ）そうだ。
WordPress のデフォルトテーマはレスポンシブWebデザイン対応しているのか
そういうやり取りがあったので、調べてみた。
をみると、Twnty Twelve の項目のところに
--
The 2012 theme for WordPress is a fully responsive theme that looks great on any device.
--
とあるので、このときからレスポンシブに対応したものと思う。
スクラッチでテーマを作る場合、ブロックも一つずつ作らないといけないのか
ブロックデータがいろいろはいっているプラグインを活用するのもよし。
誰かが作ったデザインを使って、それをテーマとしてカスタマイズする必要がある場合にはどうしたらいいのか
そういう場合には、フルサイト編集はそぐわないケースが多そう。結局は CSS のことを考慮してデザインしてくれないと難しい（非効率でお金がかかる）。
以上、いろいろ議論が活発に続いているところで時間となりました。
今回は知らなかったことをいろいろ聞けてよかったと思います。
その後、オンライン懇親会に突入。22名。
特にフルサイト編集を案件として取り扱う場合にどうすればいいのか、どういう問題があるのか、支払いや見積もりをどうしてる？などの雑談が熱かったですね。19時付近は、パソコン教室のような雑談が続いていました。Windows11の使用感、外部ディスクを接続するとどこにディスクが出てくるのか等。
筆者も家族と夕食を食べたりしていたのでミュートにしながらも、雑談されているのを楽しく聞いておりました。
その他チャット等で出てきた情報メモ
- フルサイト編集に対応したブロックテーマを作ってみる（Olein Design）
- Vektor WordPress Solutions Advent Calendar 2021
- フリーランスの請求書 – BillVektorをカスタマイズして使ってみよう！ を試してみた。おお、きれいに出ますね！
2021年12月18日 @kimipooh
