• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / WordPress / WordPress 5.9から始まるフルサイト編集はサイト制作のワークフローを大きく変える可能性

WordPress 5.9から始まるフルサイト編集はサイト制作のワークフローを大きく変える可能性

池田祐太郎 | 2021年12月10日 公開 コメントを書く

時期WordPressのバージョン5.9からフルサイト編集(Full Site Editing: 略してFSE)が利用できるようになります。

フルサイト編集の紹介と、実際に触ってみてどうか、どんな動きをするのか、それによるWordPress制作のワークフローへの影響などを考察します。

目次

  • 1 WordPress 5.9は重大な障害によりリリースを年明けに延期
  • 2 フルサイト編集で何ができるようになるのか
  • 3 WordPress 5.9 を触ってみる
    • 3.1 概観内の各メニューが様変わり
    • 3.2 フルサイト編集はこんな感じ
    • 3.3 ブロックごとの制御やスタイル設定を変更するにはtheme.jsonファイル
  • 4 Gutenbergプラグインは不要?
  • 5 フルサイト編集はサイト制作のワークフローを変える

WordPress 5.9は重大な障害によりリリースを年明けに延期

もともと2021年12月に公開予定だったWordPress 5.9は「Beta 1 の期日までに間に合わないほどの大きな障害が発生」という理由で2022年1月に延期となりました。(その後Beta 1 は約2週間遅れて11/30に完了)

WordPress 5.9 has been delayed due to significant blockers that could not be resolved in time for Beta 1, which was previously scheduled to be released November 16.

https://wptavern.com/wordpress-5-9-delayed-until-january-2022

5.9が楽しみな反面、年内にリリースされて稼働中のWordPressサイトに影響が出るリスクはサイト運営側からの観点としてはなるべく避けたいので、1月に遅れてくれて良かったという気持ちもしないでもありません。

フルサイト編集で何ができるようになるのか

WordPress 5.9から提供される機能のフルサイト編集について、紹介動画が公開されています。

フルサイト編集により、ヘッダーやフッターといった共通箇所のテンプレートや、トップページ、詳細ページ、一覧ページといった各ページのテンプレートをブロックエディターを使って管理画面から変更、管理できるようになります。

ブロックエディターのため、スタイルの変更も画面内からできるようになりますし、ランディングページの制作も可能です。

WordPress 5.9 を触ってみる

実際に開発環境にWordPress 5.9を導入しテストしてみました。11/30に公開されたWordPress 5.9 Beta 1は以下からダウンロードできます。

News – WordPress 5.9 Beta 1 – WordPress.org

開発中なので、くれぐれも稼働中の本番サイトではテストせず、開発環境などクローズドで最悪バックアップから復元できたり不具合が発生しても問題ない場所でテストするようにしましょう。

上記に紹介されている、オプション1の「WordPress Beta Tester」プラグインをインストール&有効化後、サイドバーの「ツール」→「ベータテスト」から、更新チャンネルを「最前線」、ストリーム設定を「ベータ / RCのみ」に設定し保存します。

その後、ダッシュボードから更新画面にWordPress 5.9が表示されているので、更新します。

更新後の画面。5.9 Beta 1が現在のバージョンと表示されている

概観内の各メニューが様変わり

最新のデフォルトテーマである Twenty Twenty-Two がインストールされています。Github からもダウンロードできます。このテーマはフルサイト編集できるよう設計されており、有効化すると、サイドバーの概観内に「エディター(ベータ)」というのが表示されました。

「エディター」が出現。

そして今まであった各メニューはなくなり概観は大きく刷新されました。

■無くなったメニュー

  • カスタマイズ
  • ウィジェット
  • メニュー
  • ヘッダー
  • 背景
  • テーマオプション
  • テーマエディター

■新しく出現したメニュー

  • エディター(ベータ)
  • スタイル
  • テンプレート
  • テンプレートパーツ
  • ナビゲーションメニュー

フルサイト編集はこんな感じ

「エディター(ベータ)」からフルサイト編集を試してみます。静止画のため伝わりづらいかもしれませんが、各ページや各テンプレート、そして各パーツを管理画面から設定できます。

ホーム画面のフルサイト編集
任意のテンプレートを選択し編集することが可能
共通ヘッダーといった任意のテンプレートパーツを選択し編集できる

一通りの設定やスタイリングはここからできるため、凝ったデザインは別として、基本的にはこれである程度はできてしまいますね。むしろ、細やかなデザインを必要としない前提でフルサイト編集からサイトを作り、必要な箇所のみデザイン対応する、という方が明らかに理に適っている作りです。

ブロックごとの制御やスタイル設定を変更するにはtheme.jsonファイル

ブロックごとの制御やスタイリングの設定は theme.json ファイルに集約されています。これはWordPress 5.8 で導入された機能です(参照)。これを直接修正することで、デフォルトで設定されている値を変更できます。ここでようやく管理画面から離れて初めてコードを触ることに驚きます。

例えば、Twenty Twenty-two テーマではグローバルカラーとして5色設定済みです。

「テーマ」とかかれているパレットに5つ色があり、4つ目の色は「#ffe2c7」カラーが設定されている

この色を変更したい場合はどうするか。 theme.json ファイル内を見てみると以下の palette という記述があり、各色のslug、カラーコード、名称が設定されていました。

"palette": [
	{
		"slug": "foreground",
		"color": "#000000",
		"name": "Foreground"
	},
	{
		"slug": "background",
		"color": "#ffffff",
		"name": "Background"
	},
	{
		"slug": "primary",
		"color": "#1a4548",
		"name": "Primary"
	},
	{
		"slug": "secondary",
		"color": "#ffe2c7",
		"name": "Secondary"
	},
	{
		"slug": "tertiary",
		"color": "#F6F6F6",
		"name": "Tertiary"
	}
]

ここのカラーコードを直接変更し保存することで、管理画面側もフロントも一括で変更されます。なんて楽なんだ!

試しに「#e5d6d6」に変更して保存し画面を再読み込みすると変更が適用されている。フロントも同様。

実際はテーマを直接変更せず、子テーマを作ってカスタマイズ箇所のみ変更するようにします。

Gutenbergプラグインは不要?

フルサイト編集の機能を有効にするには WordPress Theme Experiments にあるように Gutenberg プラグインを有効にし、「Enable the “Full Site Editing” experiment in the Gutenberg > Experiments panel.」にて有効となる、という記述がありましたが、記事執筆時点では「実験中」には「ナビゲーションスクリーンを有効化」しか選択肢がありませんでした。(「Enable the “Full Site Editing” experiment in the Gutenberg > Experiments panel.」に該当するものがない)

この機能を無効にした状態でもフルサイト編集はできたし、上記の通り該当する設定が無いようです。また、上記のGithubの最終更新日は4ヶ月前なので既に役目を終えているのかもしれません。

フルサイト編集はサイト制作のワークフローを変える

Twenty Twenty-two にも書いてあるとおり、フルサイト編集では極力CSSでの制御ではなくブロックエディター側での制御が理想と明記されています。

The theme aims to ship with as little CSS as possible: our goal is for all theme styles to be configured through theme.json and editable through Global Styles.

訳: このテーマは、できるだけ少ないCSSで出荷することを目指しています。私たちの目標は、すべてのテーマスタイルをtheme.jsonで設定し、Global Stylesで編集できるようにすることです。

https://github.com/WordPress/twentytwentytwo

従来のワークフローの場合、結局CSSで再定義する羽目になり、フルサイト編集の良さが活かしきれません。フルサイト編集機能を無効化したり、事前の工数計算も難しいため、想定外の作業増加になるケースも容易に想像できます。

となると、制作会社やフリーランスのウェブ制作者でありがちな従来のデザインをきっちり作ってからのHTMLへの落とし込み、そこからのオリジナルテーマでのWordPress構築、というワークフローよりは、例えば、先にWordPressでフルサイト編集で構成と大まかなレイアウト、コンテンツを作成してから、必要なデザインを対応する、というワークフローの方がすんなり行きそうです。ただ、デザインがどこまで対応できるのか、どこまで影響するかは事前把握するにはある程度の経験が必要でしょうし、そもそもオリジナルテーマを作成するのか、既存テーマにするのか、公開後の運用において改修となった場合やブロックエディタへの対応等も考えておく必要があり、HTMLとCSS、多少のJSが書ける程度だと対応は困難というのが現実です。

まだ私自身現時点では正解が何かは見えていませんが、WordPress自体が Jimdo や Wix 等のフルサイト編集を前提としたサービスに対して本気で戦っている現状と将来から考えると、我々のようなWordPressを使ってサポートする立場の人間は、WordPressの流れに合わせてワークフローも随時変えていく必要があると強く感じています。

メールコンサルティング
WordPress保守管理サービス

Filed Under: WordPress 関連タグ:Gutenberg, WordPressテーマ, フルサイト編集

池田祐太郎

WordPress の構築・保守を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在は WordPress の保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

I agree to these terms.

この記事と関連する記事

2022年以降WordPressのテーマを選ぶ際にこれだけは注意しておきたいポイント
2022年5月6日
タグ: フルサイト編集
カテゴリー: WordPress
WordPress ブロックパターンディレクトリに自分のブロックを登録・公開できるように
2022年3月29日
タグ: Gutenberg
カテゴリー: WordPress
WordPressを自作テーマで作ることで発生する様々な問題
2021年11月5日
タグ: WordPressテーマ
カテゴリー: WordPress

人気記事

  1. git pull してもエラーが出てファイルが反映されないときの対処法
  2. 同一サーバー上に構築するWordPressのテスト環境の作り方
  3. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  4. ダウンロードして即使えるサイトマップ(サイト構成図)のテンプレート5点
  5. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  6. WordPress で PHP エラーメッセージを非表示にしたい時

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • WordPress保守あるある:プラグインを更新したらエラー表示
  • WordPressのアップデートはどのタイミングで行うのが正解か
  • 同一ページでMW WP Formのフォームを切り替える方法
  • WordPressの不要なプラグインは残していいのか、それとも削除したほうがいいのか
  • WordPressの自動&定期バックアップをプラグインで簡単に設定する

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

ai Android ChatGPT CMS css elementor git google workspace Gutenberg HTML iPhone jQuery Mac MAMP Photoshop php SEO SNS ssh Sublime Text UpdraftPlus Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール ブログ プラグイン マーケティング リニューアル 保守管理 効率化 最適化

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2023 high five create All rights reserved.