まえがき
数年ぶりに WordPress を触ってみたところ、UIデザインの仕組みの変化に驚かされました。
WordPress 5.9 ではブロックという概念が導入されました。ブロックはUIをパーツ単位で定義したもので、例えば見出しや段落のような基本的な集約から、コメント欄や投稿一覧のようなより応用的な集約までをも表現できるものです。私達はそのブロックをプレビュー画面に配置することで固定ページや投稿のデザインを表現でき、従来より直感的にデザインができるようになりました。
さらに、WordPress 6.0では、スタイルという概念が導入されました。これは、ブロックとHTML要素に対して事前定義した装飾を適用できる機能です。CSS をブロックにも適用できるように拡張したものと考えるとよさそうです。私達は予め定義したスタイルから編集画面上で選択するだけで、中身は同じで見た目は異なるページを簡単に表現できるようになりました。
環境準備
- WordPress 6.1
- Twenty Twenty Three テーマ
スタイルを指定するファイルです。テーマを自身で作成しているときにこのファイルを変更したい場合は、wp-config.php ファイルにデバッグモードの指定をいれる方が良いと書かれていました。これによって、ブラウザのキャッシュによってレイアウト変更が即時反映されるようになります。
独自スタイルの追加
まず、theme.json を styles ディレクトリにコピーして、ファイル名を好きな名前に変更します。すでに適用済みのテーマを編集したい場合には、既存のスタイルを直接編集することもできます。
WordPress のダッシュボード – 外観 – エディタ を開くと、編集画面が表示されて、右上のボタンからスタイルを変更できます。
スタイルの中には、ファイル名に指定した名前と同じ項目が選択肢に含まれているはずです。他の項目は、もともと styles ディレクトリに含まれていた json ファイルで定義されたスタイルです。
スタイルが反映されない問題とその対策
theme.json を変更してもすぐに変更内容が反映されないことがあり、ちょっと困りました。
WP_DEBUG の指定
運用でカバー
「別のスタイルを選択して保存 → 編集ページをリロード → もとのスタイルを選択して保存」
という手順を踏むと、すぐに反映されることが分かりました。
とりあえずはこれで作業ができますが、ちょっとイマイチですね…。