2022年1月25日に大規模にアップデートされたWordPress。当記事では、WordPres 5.9で実装された「フルサイト編集(Full Site Editing)」の機能概要についてご紹介いたします。

日本時間2022年5月25日にリリースされたWordPress 6.0については、下記記事を参考にご覧いただけます。

WordPress 5.9で何が変わったのか?

もっとも大きく変わったのは、フルサイト編集(Full Site Editing)機能が実装された点です。

ざっくりいうと、従来のバージョンから実装されているブロックエディター(Gutenberg)を使ってサイトのすべてを組み立てられるようなイメージです。

サイトのトップページやヘッダー、フッター、サイドバーを含めたすべてをブロックで組み立てられるようになりました。例えばWixのようにサイトをフロント画面から直接編集できるような形です。

WordPress 5.9 Beta版でフルサイト編集を試す方法

以下の内容は、WordPress5.9の正式リリース前のものとなります。2022年5月現在は、最新バージョンのWordPressに更新いただくことで、フルサイト編集機能をご確認いただけます。

フルサイト編集機能を試すには、WordPressを5.9 Beta版にアップデートした上で、フルサイト編集機能に対応した「ブロックテーマ」を適用する必要があります。

Beta版は下記記事で紹介しているプラグインで簡単に試すことが可能です。Beta版は安定していないので、必ずテスト用のローカル環境などでお試しください。

5.9 Beta版にアップデートするとフルサイト編集機能に対応したデフォルトテーマ「Twenty Twenty-Two」が追加されます。これが従来のテーマ(=クラシックテーマ)に対して「ブロックテーマ」と呼ばれるものです。

それでは実際に操作していきましょう。

フルサイト編集の主な機能について

フルサイト編集機能は、従来のWordPressにも実装されているテーマカスタマイザー(外観>カスタマイズ)にブロックエディター機能が追加されたようなイメージです。サイトのフロント画面をプレビューしながらブロックエディターで編集できます。主な機能は下記の通りです。それぞれご紹介いたします。

スタイルインターフェース

新しく実装されたサイトのフロント画面を見ながらスタイルを編集できる機能です。

スタイルインターフェース

例えば、上記のようにトップページの背景色を変更できたり、フォントのタイプや外観、サイズ等も変更できるようになります。グラデーションカラーなども直感的に再現できる仕様になっています。すべてのブロックに対して活用できます。

ナビゲーションブロック

フロントを見ながらナビメニューを設定できる機能です。

ナビメニューブロック

従来までは「外観」>「メニュー」から設定していたナビメニューですが、こちらも上記のようにフロント画面を見ながら変更可能になります。

ヘッダー周辺で活用できる、サイトロゴやソーシャルアイコン、検索バーのブロックも用意されています。

検索バーに変更した例

また、モバイル時などにハンバーガーメニュー式に変更するかどうかも設定可能です。下記のようにサイズを変更して見え方のシミュレーションもできます。

ハンバーガーメニューのシミュレーション

ブロックパターンディレクトリ

5.8から使えるようになったブロックパターンディレクトリは5.9でも引き続き活用できます。画像とテキストを組み合わせて作られた様々なレイアウトをコピペするだけでサイト内に簡単に設置可能です。

お好みのレイアウトがあれば、コピペして画像やテキストを変更すれば自分のサイト用に活用できます。

パターンエクスプローラー

パターンエクスプローラーは、管理画面内でさまざまなブロックパターンを呼び出せる新機能です。左上のプラスボタンを押してパターンタブから参照をクリックします。

パターンエクスプローラー

先述のブロックパターンディレクトリから抽出されるようですが、beta版では現状一部のパターンしか参照できないようです。セクションごとに適したパターンを見つけやすくなる機能です。

パターンを適用した状態をリアルタイムプレビューできるのは便利ですね。

テンプレートパーツフォーカスモード

こちらは5.9からの新機能で、先ほどのブロックパターンディレクトリからコピペしたり、オリジナルで作成したテンプレートパーツを編集する際に他の要素を一時的に非表示にして集中しやすくするモードです。

テンプレートパーツを選択して、3つのドットをクリックして、「”テンプレート名”を編集する」でテンプレートフォーカスモードの編集画面が開きます。下記例では、テンプレート名を「Fuji」としています。

テンプレートフォーカスモード

リスト表示

リスト表示機能を使えば、サイトフロントのプレビューと共にコンテンツをリスト表示できるので、ページ構成を整理しやすくなります。ページ全体やブロックごとにもリスト表示も可能です。

ブロックごとの3本ラインをクリックするか、ヘッダー部分の3本ラインをクリックするとそれぞれのリストが表示されます。

リスト表示のサンプル

リストをドラッグ&ドロップして並び替えも可能になり、ページ構成を見ながら編集しやすくなっています。

まとめ

WordPress5.9で実装されたフルサイト編集機能を使えば、フロント画面を見ながらコード不要で直感的な編集が可能です。

スタイルインターフェースで細かい部分のスタイル調整は簡単になりますが、その一方で、無数のパターンを組み合わせてレイアウトできる自由度の高さは、サイト構築に時間を要します。

汎用性の高さが故に、あなたのコンセプトにマッチするデザインでサイトを作るには、ユーザーのデザインセンスやブロックエディターの操作性がカギを握るからです。

スピーディーにかっこいいサイトを作るという点や、現状のWordPressを使い慣れているユーザーにとってはまだまだ改良の余地があるかもしれません。

WordPressのアップデート一覧表

バージョン 名前 リリース日
(現地時間)
解説記事 WordPress公式
6.7 Rollins
(ロリンズ)
2024年11月12日 解説記事
6.6 Dorsey
(ドーシー)
2024年7月16日 解説記事
6.5 Regina
(レジーナ)
2024年4月2日 解説記事
6.4 Shirley
(シャーリー)
2023年11月7日 解説記事
6.3 Lionel
(ライオネル)
2023年8月8日 解説記事
6.2 Dolphy
(ドルフィー)
2023年3月30日 解説記事
6.1 Misha
(ミーシャ)
2022年11月15日 解説記事
6.0 Arturo
(アルトゥーロ)
2022年7月1日 解説記事
5.9 Josephine
(ジョセフィン)
2022年2月18日 解説記事