WordPress 5.9の特徴とフルサイト編集

WordPress 5.9が2022年1月25日にリリースされました。このバージョンの最大の目玉は、ブロックエディターを使ったフルサイト編集（FSE）で、バージョン5.0で登場したブロックエディター（Gutenberg、グーテンベルク）の機能強化が行われました。

この記事では、WordPressの最新バージョンを最大限に活用できるように、WordPress 5.9の新機能と注目すべき点をご紹介します。

1. フルサイト編集（FSE）

WordPress 5.9の最大のニュースは、2021年のバージョン5.8でリリースされたフルサイト編集（Full Site Editing、FSE）の拡張です。フルサイト編集は、WordPressの管理画面からWebサイト全体をコントロールできるようにするためのものです。

WordPress FSEの目標は、ブロックエディターの編集力を、投稿や固定ページのコンテンツ以外に拡張することです。つまり、Webサイト全体をブロックエディターでカスタマイズできるようにすることです。

例えばヘッダー、フッター、サイドバーなどのWebサイト全体のスタイルを視覚的に編集することができるようになっています。5.7以前のバージョンでは、サードパーティーのページビルダーを使わない限り、テーマのファイルを直接編集する必要がありました。

ただし、フルサイト編集への切り替えを行う前に注意すべきことがいくつかあります。

フルサイト編集を利用するには、ブロックテーマが必要です

テンプレートがすべてブロックで構成されているブロックテーマを適用することで、フルサイト編集が利用できます。公式WordPressサイトに掲載されているフルサイト編集対応のテーマはこちらです。

フルサイト編集は開発途上のベータ版です

WordPress 5.8で初めて導入されたフルサイト編集は、5.9でもまだベータ版です。フルサイト編集機能自体、実用最小限の製品（MVP）ですので、より高度な機能が追加されるなどアップデートされていきます。ほとんどのWordPressテーマはフルサイト編集に対応していませんが、これから徐々に採用されていくでしょう。

必ずしもフルサイト編集を採用しなくても構いません

ブロックテーマを利用しなくとも、これまでのテーマはそのまま利用できますので、必ずフルサイト編集を採用しなければならないことはありません。

各種ページビルダーやテーマでより多彩で高度な編集ができます

Elementorなどのページビルダーや、各種ページビルダーを採用したテーマ、Diviなどの高機能なテーマは、現状のフルサイト編集機能より直感的で複雑なデザイン構築が可能です。

1.1. サイトエディター

ブロックテーマを有効にすると、「外観」の配下に「エディター（ベータ）」というメニュー項目が表示されます。このエディターでは、「サイト」「テンプレート」「テンプレートパーツ」のスタイルやブロックを視覚的に編集することができます。

見た目はWordPressの管理画面や投稿・固定ページのエディターに似ています。メニュー項目は左側に配置され、上部のツールバーからさらに多くの設定を行うことができます。

1.2. テンプレートの編集

ブロックベーステーマでサイトエディターを用い、フルサイト編集を行うと、テンプレートの編集機能が解放されます。フルサイト編集を使わなければ、Webサイトの構成やスタイルを制御する場合、これまでと同様に、テンプレートファイルを編集することになります。

Twenty Twenty-Twoでは、以下のようなテンプレートが追加されています。

• 404
• アーカイブ
• 空白
• ホーム
• インデックス
• ページ (大きなヘッダー)
• ページ (区切りなし)
• 固定ページ
• 検索
• 単一投稿 (区切りなし)
• 個別投稿

テンプレート名をクリックすると、投稿や固定ページのエディターと同様のエディターで、テンプレートを編集することができ、新たなテンプレートも追加できます。

テンプレートファイルを直接編集しなくともよくなったということは、HTML、CSS、PHP、JavaScriptなどの知識がなくとも、Webサイト構築が可能になったということです。

1.3. テンプレートパーツの編集

テンプレートパーツは、ヘッダーやフッターなど、サイト全体の特定のコンポーネントを制御することができます。

Twenty Twenty-Twoでは、以下のようなテンプレートパーツが追加されています。

• フッター
• ヘッダー (暗い、大)
• ヘッダー (暗い、小)
• ヘッダー

これらを編集したり、新しいテンプレートパーツを追加することができます。

テンプレートパーツの「新規追加」からは、「一般」「ヘッダー」「フッター」の3種類のカテゴリーから選択し、作成できます。

1.4. スタイルの編集

フルサイト編集では、Webサイト全体や、「段落」「引用」「ボタン」など、様々なブロックの「タイポグラフィ」「色」「レイアウト」を細かく調整できます。

これは、上部ツールバー右上の丸いアイコンをクリックと表示されます。

手順としては、まずサイト全体のスタイル（グローバルスタイル）を決め、個別のブロックを調整していくのがよいでしょう。

1.5. 「Twenty Twenty-Two」テーマ

WordPress 5.9には、ブロックテーマである「Twenty Twenty-Two」が同梱されており、アップデートではなく5.9を初めてインストールする際には、このテーマが適用されます。

なお、フルサイト編集が初めて一般向けに導入されたWordPress 5.8では、「Twenty Twenty-One」がデフォルトのブロックテーマでした。

ブロックテーマは、配色や書体の組み合わせからページテンプレートや画像フィルターまで、さまざまなビジュアルの選択肢をサイト編集インターフェイスにまとめました。一箇所で変更を加えることで、Twenty Twenty-Twoをあなたのブランドや他のサイトと同じ外観や雰囲気にしたり、まったく別の方向へ持っていくことができます。

WordPress 5.9のAboutページ

Twenty Twenty-Twoには、様々な代替カラースキームがあり、Webサイトの外観を大きく変更できます。

1.6. ナビゲーションブロック

WordPress 5.9では、ページリンクからサイトロゴなどの様々なブロックで構成された、管理や再利用のできるナビゲーションブロックが導入されています。

作成したナビゲーションブロックは、新しいテンプレートでも、テーマを変更した後でも、テンプレートだけではなく、投稿やページでも再利用ができます。

1.7. カスタマイザー、メニュー、ウィジェットの無効化

フルサイト編集を導入するとコンテンツを直接編集できるようになるため、「カスタマイズ（カスタマイザー）」「メニュー」「ウィジェット」は「外観」メニューからは非表示となります。

（フルサイト編集に対応した）新しいテーマを使用する場合、カスタマイザーはもう必要ありません。代わりに、サイトエディター内のスタイルインターフェイスのすべての機能を利用できます。Twenty Twenty-Twoと同様、親しんだ流れるようなインターフェースでサイトのルック & フィールを構築できます。

WordPress 5.9のAboutページ

2. ブロックエディターの改良

ブロックエディター（グーテンベルク）は、2018年のWordPressバージョン5.0で初めて導入されました。この5.9でも大きな変更が加わり、グーテンベルクのバージョンは12となって、活発に開発が続けられています。

現在の状況は、WordPress/GutenbergのGithubページで御覧ください。

2.1. ブロックの設定拡張

これまでのエディターでは、ブロックの調整が限られており、細部を微調整するにはブロックの設定を変更する必要がありました。

WordPress 5.9のブロックエディターでは、多様なタイポグラフィ、柔軟なレイアウト、カラーパレットを活用した色の調整が細かくできるようになっています。

例えば、「段落」では、「タイポグラフィ」で、文字サイズ、行間、フォントのスタイル、文字間隔の調整が、「色」では、カラーパレットに基づく色の設定、背景色、文字色、リンク文字列の色が設定できるようになっています。

2.2. より強力なリスト表示

WordPress 5.9になって大きく改善されたリスト表示の機能は、特に複雑なレイアウトを用いる場合、かなり有効です。

例えば、リスト表示からブロックをドラッグして任意の場所に移動できるようになっています。ネストされたブロックの開閉も行えるようになっており、構造を把握するのに大変便利です。

2.3. ギャラリーブロックの改善

ギャラリーブロックにあるすべての画像を、画像ブロックと同じように、切り取りやデュオトーンなどのスタイリングできるようになりました。また、ドラッグ＆ドロップで、画像の順序を入れ替えることもできます。

2.4. パターン

WordPressのパターンは、すぐに挿入可能な、作成済みのWordPressブロックレイアウトです。パターンはWordPressのブロックをまとめたもので、いくつかのボタンをクリックするだけで、複雑なレイアウトをいくつでも作成することができます。

パターンディレクトリには、デザインや機能を追加するための様々なパターンが登録されており、エクスプローラで比較して選択することができます。

2.5. Gutenberg 12.5

Gutenberg 12.5がリリースされ、以下のアップデートがなされています。

• グローバルスタイルのバリエーションが切り替えられるようになった
• カスタムタクソノミーのフィルタリングなどクエリーループが拡張された
• 新しいボタンを挿入する際に、隣接するボタンのスタイルを保持するようになった
• サイトエディターにコードエディターが追加された

3. パフォーマンスの改善

WordPress 5.9では、パフォーマンスに関するいくつかの改良が施されています。詳しくは、WordPress 5.9 Performance Improvementsで解説されています。

ここでは、改善点のいくつかを紹介します。

3.1. インサーターのパフォーマンス改善

インサーターのパフォーマンスが向上し、ブロックやパターンの検索や挿入のスピードが向上しています。

3.2. 画像の遅延読み込みが改善

これまでのWordPressでは、自動的に画像が遅延読み込みされ、コアウェブバイタル指標のうち、LCP（Largest Contentful Paint）に悪影響を与えていました。

具体的には、最初のコンテンツの画像またはiframe要素の遅延読み込み処理をスキップすることにより、パフォーマンスの向上が図られています。

3.3. その他

ブロックテーマを利用することによって、フロントエンドのパフォーマンスが向上します。コンテンツの表示に必要なスタイルシートのみが読み込まれるようになり、呼び出されるスタイルシートが削減されるため、ロード時間が短縮されています。

4. 開発者向けの改善点

WordPress 5.9では、開発者向けの多くのアップデートが行われています。詳細はWordPress 5.9 Field Guideで説明されています。

4.1. ブロックベース・テーマ構築のためのリソース

WordPress 5.9では、5.8に引き続き、サイト全体を構成するテンプレートをブロックで定義するブロックテーマが導入されています。新しいテンプレートとテンプレートパーツはHTMLで定義され、theme.jsonで提供されるカスタムスタイルが使用されます。

WordPress Theme ExperimentsリポジトリにはEmpty Themeが提供されており、ブロックベースのテーマ作成を始めるための必要なすべての定型文が含まれています。

テーマを生成するコマンドラインスクリプトもありますので、このテーマを元にすると、独自のブロックテーマを作成しやすくなります。

Block Editor Handbookから辿れる以下のドキュメントは、ブロックテーマ作成のよいガイドです。

Block Theme

ブロックテーマの基本や、テーマの構成・形式について解説しています。

Create a block theme

ブロックテーマを作成するための完全なチュートリアルです。

Global Settings & Styles (theme.json)

theme.jsonを使ってテーマにスタイルを追加する方法について説明しています。

以下にいくつかを紹介します。

4.2. 投稿、投稿タイプ、タクソノミを操作するための新しいフックと関数

WordPress 5.9では、投稿、投稿タイプ、タクソノミーを扱うための、新しいフックと関数が追加されています。

4.3. ひとつのブロックに複数のスタイルシート

1ブロックに複数のスタイルシートを登録できるようになりました。スタイルシートの再利用と、スタイルシートの読み込みの最適化により、ページが軽量になります。

詳しくはUsing multiple stylesheets per blockを御覧ください。

4.4. theme.jsonの更新

theme.jsonはWordPress 5.9でバージョン2となりましたが、バージョン1でも実行時にバージョン2に変換されるため、問題なく動作します。

ただし、バージョン1のtheme.jsonを更新する場合には、バージョン2に更新する必要があります。

詳しくは、Updates for Settings, Styles, and theme.jsonをご確認ください。

最後に

ブロックエディタ（Gutenberg）の評価は著しく悪いようです。テキストエリアへの入力に慣れている今までの利用者にとって、ユーザーインターフェイスが大きく変更され、コンテンツとプレゼンテーションが一体となったことは、大きな戸惑いとなっているようです。

しかし、WordPressは圧倒的なユーザー数を誇るCMSですので、この大きな変更は次第に受け入れられていくと思われます。

新たな問題に常に対処しなければならないプロのエンジニアや、常に学ぶ意志のあるプログラミング学習者には、この変更はチャンスとみなすこともできます。GutenbergにはReactの技量が問われることもありますので、新たな技能を習得するきっかけにもなるでしょう。