WordPress フルサイト編集: 詳細ガイド (2024)

WordPress 5.8 では、テンプレート エディターによるサイト全体の編集が初めて導入されました。 そして今回の最新バージョンでは、このメジャーアップデートのあらゆる側面を包括的に体験できるようになりました。

FSE のビジュアル編集機能とユーザーフレンドリーな機能により、サイトのさまざまな部分での作業がはるかに簡単になります。 しかし、これらの新しい変更に慣れ、シームレスな編集エクスペリエンスを楽しむにはどれくらい時間がかかりますか? このブログでは、WordPress のフルサイト編集について知っておくべきことをすべて説明します。

サイト全体の編集で導入された新しい変更について学ぶ前に、WordPress のサイト全体の編集について少し学んでみましょう。

WordPress フルサイト編集とは何ですか?

サイト全体の編集は基本的にブロックの概念を中心に実行されます。 以前は、サイトのコンテンツ領域はブロックを通じて編集できました。 サイト全体を編集すると、Web サイトのすべての部分がブロックとして扱われます。

このメジャー アップデートにより、ユーザーは単一のインターフェイスでグローバル要素とページ要素を操作できるようになります。 また、新しい開発ツールと新しいテーマ構成ファイルも導入されました。

WordPress バージョンを 5.9 にアップグレードしたら、完全なサイト編集テーマ (Twenty Twenty-Two など) をアクティブ化する必要があります。 その後は、Gutenberg ブロックだけを使用して Web サイト全体を構築できます。

サイト全体の編集にはどのようなメリットがありますか?

サイト全体の編集により、WordPress Web サイトの構築とデザインがこれまでより簡単になります。 同じエディターを使用してグローバル要素を定義し、ページに変更を加えることができます。

グローバル要素とは何ですか?

グローバル要素は、割り当てられたときに Web サイト全体にデプロイできる要素、コンテナー、および列です。

この新しい方法では、Web サイトまたは個々のページで変更を加えることができるため、時間を節約できます。 編集中にすべてのライブ変更が表示されるため、それらの変更を追跡するためにエディタ間を移動する必要はありません。

その結果、グローバル レベルとページ レベルで同時に作業することで、Web サイトのデザインが向上します。

WordPress 6.4 でサイト全体の編集を有効にする方法

WordPress 6.4 バージョンでは、デフォルトではサイト全体の編集が有効になっていません。 ただし、以下の簡単な手順に従って、この機能を有効にすることができます。

注: 5.9 より古い WordPress バージョンを使用している場合は、最初に WordPress バージョンを更新してから、完全なサイト編集機能を使用するために FSE テーマをアクティブ化する必要があります。

• サイトのダッシュボードに移動します。
• 現在の WordPress のバージョンとテーマが表示されます。

• 上の画像が示すように、「 Twenty Twenty-One 」テーマを使用しているため、それを更新する必要があります。
• [外観] > [テーマ]をクリックします。

• 「 Twenty Twenty-Two 」テーマまたはその他の FSE テーマを見つけて、 「アクティブ化」をクリックします。

• アクティブ化したら、「外観」をクリックして「エディター」の新しいオプションを表示します。
• [エディタ]をクリックします。

• これで、完全なサイト編集機能が有効になりました。 さあ、ブロックをいじってウェブサイトをデザインしてみましょう。

WordPress フルサイト編集: 新機能?

サイト全体の編集により、WordPress サイトの構築とデザインが簡素化され、ユーザーはコーディング行を使用せずに Web サイトを最初から構築できるようになりました。

サイト エディターを使用すると、テンプレートを作成、プレビュー、編集できます。 スタイル インターフェイスを介してデフォルトのスタイルを選択し、Web サイト全体の構築にブロックを使用できます。 さらに他にもあるので、フル サイト エディターで導入された新しい変更点について学びましょう。

サイトの作成

前述したように、サイト全体の編集では、ページまたはテンプレートのすべての部分がブロックとして扱われます。 テンプレート パーツを使用してページを構築することも、単一のテンプレートを使用することもできます。

さらに、新しいサイト エディターでテンプレートとテンプレート パーツを作成、編集、プレビューすることができます。 また、テンプレートのリストも見つかります。

カスタマイザーとウィジェットのメニュー リンク

フルサイト編集テーマを有効にすると、カスタマイザーとウィジェットが WordPress ダッシュボードの [外観] タブから消えます。

これは、サイト全体の編集テーマがブロックのみに基づいているため、カスタマイザーとウィジェットのタブが非表示になっているために発生します。 ただし、カスタマイザーを使用するプラグインを有効にすると、それらを再度表示させることができます。

デフォルトのタイポグラフィと色

サイト エディターには、画面の右上にスタイルと呼ばれる新しいサイドバー パネルが導入されています。 それをクリックして、タイポグラフィ、色、レイアウトを選択します。

「スタイル」タブのブロックオプションを使用すると、特定のブロックとサイト全体の外観をカスタマイズできます。 段落、画像、見出し、ボタン、リストなどのオプションがブロック内にあります。

テーマ作成者向けの新機能

FSE が登場する前は、開発者は PHP を使用して WordPress テーマのコードを作成していました。 今後は、HTML にさらに重点を置き、マークアップをブロックできるようになります。

カスタマイザーの代わりに、ブロック パターンとグローバル スタイルがデザインにおいてより重要です。

ブロックパターン

ブロック パターンは、再利用可能なレイアウトを作成するコンポーネント/ブロックのグループです。 また、FSE は、パターンをプレビューし、ブロック インサーターを介してコンテンツ内でパターンを使用するためのパターン エクスプローラーを提供します。 これにより、パターンの複数のコピーを任意のページに追加し、それらを編集することもできます。

さらに、パターン エクスプローラーはサイトのテーマ パターンに限定されず、WordPress リポジトリ パターン ライブラリから任意のパターンを選択できます。

ブロック パターンは、フォントと色のオプションが「スタイル」で管理され、カスタマイザーでコーディングすることなくパターンを簡単に作成できるため、テーマ開発者にとって役立ちます。

ブロックパターンの作成と登録方法

ブロック パターンを作成する前に、ブロックの目的を決定する必要があります。 それはフォーム、機能セクション、またはヒーローセクションでしょうか? 決まったらエディタ上でブロックを組み合わせてパターンを作ります。 最後に、ブロック マークアップを値として使用して、ブロック パターンを登録します。

PHP 関数 register_block_pattern と init フックを使用してブロック パターンを登録できます。 以下の手順に従います。

• テーマ内にフォルダーを作成し、パターンに名前を付けます。
• 次のコードを含む PHP ファイルを作成します。

 関数 prefix_block_pattern() {
register_block_pattern( ... );
}

add_action( 'init', 'prefix_block_pattern' );

• このファイルをfunctions.phpに含めます。

ブロック パターンでデフォルトのコンテンツを使用する必要がありますか?

ユーザーは、プロセスを容易にするために、デモ コンテンツを自分のものに置き換えることを好みます。 デモ画像を追加して「ユーザーに通知」し、それらを置き換えます。 画像はテーマ内にローカルに保存されるため、ユーザーがテーマを変更するとデモ画像は失われます。

パターンの作成について詳しくは、WordPress トレーニング チームの詳細なドキュメントをお読みください。

テーマブロック

FSE が登場する前は、要素の配置はブロック エディターのテンプレートを通じて行われていました。 ただし、完全なサイト エディターを使用して、テーマ ブロックを介してこれらすべての要素を追加し、その位置を設定することができます。

テーマ ブロックを使用してページ レイアウトを制御できるため、テーマとそのテンプレートによって設定された境界から解放されます。 FSE では、さまざまなページでさまざまなテーマ要素を使用できるようにすることで、この機能をさらに一歩進めています。

さらに、カスタム テンプレートを作成し、サイト訪問者がコンテンツにアクセスする方法を完全に制御することで、ブロック エディターとテーマ ブロックを組み合わせることもできます。

プラグインの再アクティブ化と更新

プラグインによりユーザー エクスペリエンスが向上し、開発者が迅速な変更を行うことが容易になります。 ほぼすべてのレスポンシブでユーザーフレンドリーな WordPress Web サイトは、いくつかのプラグインでサポートされています。 ただし、これらのプラグインは、一部のバージョンではサポートされていない可能性があるため、WordPress の更新ごとに更新する必要があります。

ベスト プラクティスは、プラグイン リストを定期的にチェックし、更新する必要があるプラグインを確認することです。 FSE を使用する場合は、プラグイン リストを再確認し、互換性のないプラグインや更新が必要なプラグインがあるかどうかを確認する必要があります。

問題なくエクスペリエンスを得るには、以前に非アクティブ化したプラグインの一部を再アクティブ化する必要がある場合もあります。

テンプレート

テンプレートはブロックパターンや属性などを含むレイアウトであり、WordPress テーマファイルの一部でした。 通常、これらは、WordPress の以前のバージョンでは、HTML を含む PHP ファイルでした。

ただし、FSE では、これらのテンプレート ファイルはブロック マークアップを含む HTML ファイルではありません。 これらにはコンテンツ領域とテンプレート パーツが含まれるようになり、他のテンプレートでも再利用できるようになりました。

フルサイトエディターを使用してテーマを構築する方法

フルサイトエディターを使用してテーマを作成することが、これまでよりも簡単になりました。 サイト エディターでさまざまなブロックとパターンを使用して、独自に選択したレイアウトを作成できます。

デザインを完成させたら、それを .zip ファイルとしてエクスポートできます。

以下の手順に従ってテーマを編集し、エクスポートします。

• WordPress ダッシュボードに移動します
• [外観] > [エディタ]をクリックします。
• ニーズに応じてテーマを編集します
• 画面の右上にある3 つの縦の点をクリックします。
• 「エクスポート」をクリックして、テーマを圧縮ファイルとしてエクスポートします。

注: ZIP ファイルには、テーマという名前のフォルダーと、テンプレートとパーツという名前の 2 つのサブフォルダーが含まれています。

Theme.json — テーマ構成ファイル

theme.json は、ブロック テーマとクラシック テーマの両方に役立つ新しいテーマ構成ファイルです。 このファイルは、さまざまな機能の有効化と無効化、「スタイル」インターフェイスへの値の割り当て、カスタム CSS プロパティの作成に役立ちます。

テーマ開発者は JSON を使用して、色、フォント、パディング、コンテンツの幅などのデフォルトのプロパティを設定します。

WordPress コミュニティは FSE についてどう考えていますか?

ご覧のとおり、このメジャー アップデートにはいくつかの大きな変更が含まれています。 私たちはサイト全体の編集について意見を得るためにさまざまな WordPress 専門家に連絡しました。彼らの意見は次のとおりです。

Robert Jacobi – Cloudways WordPress ディレクター

Gutenberg の発売以来、Web 開発の複雑さの抽象化は着実に進歩してきました。 WordPress に簡単にアクセスして、素晴らしいコンテンツを作成して公開できるユーザーが増えています。 ユーザー エクスペリエンスに対するこのような配慮の集大成が、フル サイト編集 (FSE) です。 FSE は、これまでずっとコア WordPress の一部として立ち上げられてきました。

私はベータ版、リリース候補版の段階で FSE を実験してきましたが、現在は「最終的な」FSE です。 なぜ引用符で「最終」としているのかというと、これはテーマプロバイダーやその他のプラグインがまったく新しい FSE エコシステムを成長させるための最初のステップにすぎないからです。

私の最初の経験としては、全体的に、FSE は私たちがここ数年間慣れ親しんだブロックの驚くべきアップグレードです。 一般的なページ ビルダーを使用せずにテーマのコンポーネントを管理できることは、解放的な体験です。 テーマの切り替えは、ほとんどの場合、期待どおりに機能し、いずれかのテーマを使用した作業は驚くほどうまくクロスオーバーできます。

ただし、最初のリリースの多くの機能と同様、常にではありませんが、髪が引っ張られたり、しゃっくりが発生したりすることがあります。 ブロック スペースは常にクリアされるわけではなく、フロントエンドではすべてが期待どおりに機能する場合でも、編集エクスペリエンスが混乱する可能性があります。 もちろん、これらの問題は着実に減少し、より堅牢な機能が続くでしょう。

この使いやすさが開発者にどのような影響を与えるかについて懸念があるかもしれませんが、その懸念は誇張されているように感じます。 テクノロジーは、ほとんどの人間の働き方やテクノロジーの理解ともっと結びつくように努めなければなりません。 基本機能のこの抽象化は期待されており、必要とされています。 サードパーティのプロバイダーは、この最初のステップを受け入れ、拡張する方法を必ず見つけます。

ミラナ キャップ – XWP エキスパート

私を専門家と呼ぶべきかどうかはわかりませんが、私は常に意見を持っています。

そろそろ、Gutenberg と FSE が存続していることを、より広範なコミュニティが認識する時期が来ていると思います。 世界中で息を呑んだり息を吐いたりしても、その事実は変わりませんし、目標を達成するのにも役立ちません。

私たちは、「誰が私にこれで良いかと尋ねたのか、誰がコアに何を採用するのか、そしてなぜ採用するのかを決めることができるのか」という点を超えました。 これからは、WordPress ビジネスの世界であなた自身が生き残ることが重要です。

一方、私たち全員が Gutenberg の使用方法を理解しようとして (まだベータ版なので手遅れではありません)、適切な設定の下で Gutenberg が提供する利点を実装する方法を学べば (まだすべての環境で使用することが必須ではないため)、場合によっては、少なくともまだ）複数の利点があります。

• 一部のバグや欠陥はより早く明らかになり、修正されるでしょう
• 望ましい機能のリストは、より早くまとめられる予定です
• 書類作成のプロセスがスピーディーになります
• 質の高いコースやその他のコンテンツはより早く公開されます
• 私たち全員が予定どおりに FSE 移行の準備を整えます
• 私たちは、立ち上げの準備ができていなかったためにグーテンベルクで犯した間違いを繰り返しません。

また、振り返ってみると、Gutenberg は、PHP と React が 1 つの CMS にバンドルされたオープンソースの歴史の最初のケースでした。 そして、正確に言うと、インターネット全体の 40% を実行する CMS です。

このような大規模なタスクが何の問題もなく完了することを期待していた人がいるなら、PHP と JavaScript を組み合わせるという前回の試みがどれほどスムーズに完了したかを思い出していただきたいと思います。

Aleksandar Predic – 技術コンサルタント: Blexr | WordPress エキスパート

以前、巨大なウェブサイトのコード全体を書き直すよう依頼されたことがあります。 作業を進める中で以下の点に気づきました。

• Gutenberg は、大きな問題なく使用できるほど安定しています。
• タスクを完了するために必要なほとんどすべてをドキュメントで見つけたり (ドキュメント チームに感謝します)、Gutenberg コードを調べたりしました。
• サイトのパフォーマンス結果はトップクラスで、Gutenberg はスクリプトの数を減らしてその結果に貢献しました。

ブロックパターンが素晴らしいですね。 本当に便利です。 コンテンツ チームがまとめたリストから黒を開発する代わりに、すぐに使用できるようにパターンをファイルに保存しました。 これにより、開発時間とメンテナンス時間を大幅に節約できました。 ブロック パターンは、開発者ではなく、コア チームが保守するものです。

さらに、パターンを使用すると、モジュールで複雑なデザインを開発でき、後でブロック パターンと組み合わせることができます。 これは、モジュール (個々のブロック) を簡素化し、潜在的なバグの数を減らし、モジュールのテストとメンテナンスを容易にするため、特に重要です。

レビュー テンプレート ページのハイブリッド デザインにも取り組みました。 計画されたコンテンツを追加するにはバックエンドの 4 つの異なるセクションが必要になるように要件が設定されました。 レイアウトには、まったく異なるタイプのコンテンツを含む 4 つの異なるコンテンツ タブが含まれていました。

私は、タスクの実行に FSE を実装する可能性のある方法を調査しました。 しかし、当時は FSE 向けのインフラが整っておらず、ドキュメントも完成していなかったので、アイデアを実行することはできませんでした。

FSE は、その特定のケースにとって理想的なソリューションとなります。 FSE がなければ、1 つの管理コンテンツ セクション内のブロックを使用してハイブリッド ソリューションを構築する必要がありました。 最終的に、ユーザーがワンクリックで REST API が収集したデータをページ全体に入力できるワークフローを実現できたので、Gutenberg は非常に役に立ちました。

開発者として、私は FSE が理想的ではない例を目にしています。 多くの企業は、1 人のユーザー (コンテンツ編集者など) が Web サイトをクリックしてすべてのコンポーネントを編集できるため、設計チームや開発チームが行う多くの作業が無駄になるという事実を歓迎していません。

技術的な教育を受けていない仮想アシスタントを導入している企業は、特に「大惨事が発生するまで少数のクライアント」という問題にさらされています。 このような企業は、Web サイトのデータベースではなく、Web サイトの最大部分をコード化することを好みます。

簡単な要約: FSE は素晴らしいです。 作業が楽になります。 現在のwpテーマのコンセプトは目の前で変わりつつあります。 クライアントはより自由になりました。 しかし、FSE はすべての人に適しているわけではないため、昔ながらの開発の必要性は常に存在します。

最後にちょっとした免責事項:これは、私が FSE で数回プレイしたことに基づいた、私の現在の意見にすぎません。

Nikola Štulic – Codeable の認定 WordPress エキスパート開発者

待望のフルサイト編集機能がついに登場しました。 これにより、新しいものを公開したり、既存のものを編集したりするサイト所有者に、私たちの助けなしでより良い編集エクスペリエンスを提供できるようになるため、多くの新しい機会が開かれます。

多くの開発者 (私を含む) は、主に私たちが数日、数週間、場合によっては何か月もかけて構築したものを顧客が台無しにする可能性がある場合、「根本的な」変更には常に懐疑的です。

FSE を使用すると、編集者はスタイル、ヘッダー、フッター、またはサイドバーを制御できます。 まだ最終的な結果を確認する必要がありますが、現時点では、FSE は優れた機能以上のものです。

それは前進するための全く新しい道を開きます。 DIY アプローチを愛する新しいユーザーが参入するため、この新機能によって WordPress はさらに大きくなると私は確信しています。

Nick Diego – 開発者擁護者 | WPエンジン

確かに私は偏見を持っていますが、ブロック エディター自体を除けば、ここ 10 年間で WordPress に登場した中で最もエキサイティングなものはフル サイト編集 (FSE) です。 FSE は、WordPress のパワーと柔軟性を備えた、事実上ノーコードのソリューションを約束します。 少しトレーニングすれば、Web 開発の知識のないユーザーでも、ブロックベースのテーマを選択し、単一のインターフェイスから Web サイト全体を設定できるようになります。 まさに魔法！

FSE は、サイト エディター、テーマ ブロック、テンプレート編集、グローバル スタイルなどを含む機能の集合であることを覚えておくことが重要です。 WordPress 5.9 は、この機能スイートの最初のデビューにすぎません。 追加の機能強化と微調整がまだ行われていないため、多くの反復が計画されています。

現時点では、すべての WordPress 開発者に、ブロックベースのテーマの検討を開始し、まだ開発していない場合はブロック開発を開始することをお勧めします。 Gutenberg プラグインには最新の FSE 機能がすべて含まれており、WordPress 6.0 のプレビューであるため、新しいプロジェクトと一緒に Gutenberg プラグインを使用してください。 問題やバグが見つかるかもしれません。 開発に関する決定事項に同意できない場合もあります。 それで大丈夫です！

WordPress の利点の 1 つはその柔軟性です。 FSE 機能の多くはオプトインですが、すべてではありません。 これは、特に政府機関にとって問題となっており、将来的にはさらなる管理が計画されています。 アクセシビリティやユーザー権限などに関するコミュニティの懸念もありました。 こうした懸念は当然であり、対処する必要があります。 改善を図るためには、欠点について率直に語らなければなりません。

問題を見つけた場合は、GitHub で問題をオープンするか、私と WordPress スペースの別の開発者擁護者に連絡してください。 私たちは、WordPress をすべてのユーザーにとって最高のものにすることに情熱を持っています。

私は FSE が WordPress の未来であると強く信じていますが、このエキサイティングな旅はまだ始まったばかりです。 さらに詳しく知りたい場合は、WordPress Social Learning で毎週の教育セッションをチェックしてください。その多くは FSE トピックを中心としています。 またお会いしたいと思います。

最終的な考え

FSE は、エンドユーザーがこれまで以上に制御できるようにするページ構築エクスペリエンスの革命を表しています。 サイト全体を編集すると、すべてがブロックで管理されるため、複雑なコーディングに取り組む必要がなくなります。 ただし、将来の WordPress バージョンのリリースで埋められる可能性のある大きなギャップがまだあります。

FSEがデザイナーや開発者の仕事を奪うのではないかと心配する人もいる。 FSE は確かにユーザーに完全な制御を与えますが、Web サイトのデザイナーや開発者は最大限に機能するようにカスタマイズできます。

ミラナ・キャップの言葉を借りれば、「FSE はここに留まります。」 私たちが新たな変化を受け入れ、それを最大限に活用する時期が来ています。