WordPress ブロックテーマの作成とフルスタック編集

最近、WordPress のフォーラムやニュースをフォローしている場合は、フルサイト編集 (FSE) について聞いたことがあるでしょう。少なくとも、ブロック テーマの作成など、FSE に関する言及を見たことがあるでしょう。 それが何であるかを知らなくても、おそらくそれについての話を聞いたことがあるでしょう。

WordPress を頻繁に使用するか、開発者であるかにかかわらず、素晴らしいニュースがあります。 本当のキッカーは、それを恐れてはならず、すべてがうまくいき、プロセスが楽になるということです.

私たちは何に基づいてそれを主張しますか? 最初が最初です。 タイトルで取り上げた内容を学ぶ前に、WordPress の完全なサイト編集について少し理解しましょう。

WordPress フルサイト編集 (FSE) とは…?

基本的に、サイト全体の編集ではブロックの概念が回避されます。 以前は、ブロックを使用して Web サイトのコンテンツ領域を編集できました。 サイト全体の編集を使用すると、サイトのすべてのセクションがブロックと見なされるようになりました。

この大幅な改善により、ユーザーは単一のプラットフォームでページとグローバル要素の両方を操作できるようになりました。 さらに、新しいテーマ構成ファイルと開発ツールが追加されました。

WordPress を最新バージョンに更新したら、Twenty Twenty-Two などの FSE テーマを有効にする必要があります。 その後、Gutenberg ブロックのみを使用して Web サイト全体を構築できます。

FSEはどのようにあなたを助けることができますか?

完全なサイト編集のおかげで、WordPress Web サイトの構築と開発がこれまでになく簡単になりました。 グローバル要素とページの更新は、どちらも同じエディターを使用して行うことができます。

そして、グローバル要素、それらは何ですか? 割り当てられると、グローバル要素、コンテナー、および列を Web サイト全体で使用できます。

この革新的な手法により、Web ページまたは特定のページを編集できるため、時間を節約できます。 編集中にリアルタイムですべてを確認できるため、何が起こっているかを確認するためにエディターを切り替える必要はありません。 結果？ ページレベルとグローバルレベルで同時に操作すると、Web サイトのデザインが向上します。

WordPress 6.0 リリースでは、デフォルトで FSE が有効になっていません。 したがって、WordPress 6.0 より古いエディションを使用しているときにサイト全体の編集機能を利用するには、まず WordPress を更新してから FSE テーマをアクティブ化する必要があります。 サイトのダッシュボードは、そのすべてを処理する場所です。

WordPress 環境は再び進化しています

WordPress のこの種の変更は、前期に発生しました。 私たちは皆、約 3 年前にグーテンベルクを知っていました (ここ数年のうちの 1 つ以上が突然姿を消したため、思い出すことは困難です)。 これをブロック エディターと呼ぶことができます。

ただし、最初に WordPress コアに組み込まれたとき、コードネーム Gutenberg が与えられました。 変化は難しい。 したがって、ほとんどの人は何らかのフリークアウトで反応しました。 まあ、ほぼ全員。 数年後の今日のグーテンベルクは、かなり役に立ち、しばしば快適に使用でき、継続的に発展していると認識されています。 このため、このシフトは成功すると確信しています。 しかし、変化は以前よりも重要です。

フォーカス シフト: ユーザーからビルダーへ

このようなブロック エディターが最初に導入されたとき、開発者は素材の作成方法を変更しました。 ブログ投稿を作成していた人にとっては、Web サイトを作成したり Web ページを開発したりする人ほど破壊的ではありませんでした。 ブロックへの切り替えはユーザーにとって有利であり、マテリアルのブロックを定義してサイトのどこにでも (そしてどこにでも) 動的に配置する機能など、多くのエキサイティングな機能が続きました。 誰でも、コードを使用せずにこれを実行できるようになりました。

しかし、この変更は少し特徴的です。 サイト全体の編集で変わったのは、単にサイトを変更する方法だけではありません。 それはあなたのウェブサイトの基本的なフレームワークに関係しています. ここで定義されるのは、ヘッダーやフッターだけではありません。 これは、テーマのコンポーネントに関するものです。 言い換えれば、FSE は最終的にはユーザーに利益をもたらすものですが、今のところは、ビルダー (Web ページを作成する人とテーマを作成する人の両方) の改善に重点が置かれているように感じられます。

ページ ビルダーを使用しているかどうか、つまり、最高のメンバーシップ Web サイト ビルダーの中で使いやすいプラットフォームを使用してサイトを立ち上げるプロジェクトを完了しているか、それらを構築しているかにかかわらず、多くの人はこの段階に慣れてきました。 ページは自由にデザインできます。 しかし、後でパフォーマンスの問題に気付きます。 Google はあなたのランキングを引き下げ、DOM が大きすぎると述べました (それが何であれ)。 パフォーマンスが重要であることは誰もが知っているので、今こそ FSE と、作成する Web サイトが FSE によってどのように変化するかについて学ぶ絶好の機会です。

では、なぜフルサイト テーマの構築が重要なのでしょうか?

Beaver Builder は Elementor の前に登場しましたね。覚えていますか? あなたの多くは、自分自身で、またはビジネスクライアント向けの実質的なWebサイトを作成するために働いていた会社でそれを使用していました. ただし、Beaver Themer という別の製品が必要でした。 それ以外の場合は、Web ページ (または投稿) のヘッダーとフッターを変更する必要があるときに、カスタム (および動的) ヘッダーとフッターをサポートするテーマを提供する必要がありました。

Blocksy、Kadence、Astra などのテーマがこれらの機能を開発し始めたときは興奮しました。 しかし、それはまた、いくつかのロックインにもつながりました。 次に何が起こるかを認識しています。顧客が Web サイトにプラグインをインストールした後、それがテーマまたはページ ビルダーと互換性がないことに気付きます。

突然、誰もが指を指しています。 テーマ会社は、それは彼らではないと主張しています。 ページビルダーによると、それも彼らではありません. 何だと思う？ ゲームの新しいプレーヤーであるホスティング会社は、自分たちではないと主張しています。 最初にサイトを建設した建築業者 (請負業者と代理店) が最終的に非難されました。

同じページビルダーが生成したコードのおかげで、これらのページの読み込みが遅いとユーザーが不満を言い始めたときも、同じことが起こりました. 代理店やフリーランサーは批判を受けました。

解決

サイト全体のカスタマイズをサポートするブロック テーマへのこの変更は、Web サイトの作成方法の根本的な変化を表しています。 この変更により、ページ上および Web サイト全体のすべての要素 (コンテンツ、メニュー、サイドバー、ヘッダー、フッター) がブロックになります。 各ブロック。 したがって、結果としてテーマを軽くすることができます。

テーマは、サイト全体でブロックの普遍的なスタイルを統一したり、誤植を修正したりするなど、いくつかのタスクを完了する必要があります。 開発者は、新しい themes.json ファイルですべてを構成できます。 しかし、パラメータを設定するためだけに使用されるわけではありません。 これは、開発者が顧客がエディターを使用する方法を変更する方法でもあります。

さらに、テーマには多くの UI 要素がありません。 カスタム ビルダーを使用して慣れ親しんできたことの次の反復は、現在の JSON コンフィギュレーターによって駆動されることは容易に想像できます。

一言で言えば、これは次世代のテーマであり、ユーザーがそのような新しいテーマで達成できることを最終的に制限できる手段です。

すべてを論理的に理解するには？

わくわくするように思えても、もっと難しいのは、皆さんがこれをどのように解決するかを決定することです。 非常に単純であることが判明した斬新なコンセプトを開発したいと思う人は誰もいません。 ユーザーを苛立たせるまったく新しいテーマを開発したいと思う人はいません。

あなたは、「新しいもの」の強さを備えた「実証済みの」快適さを望んでいます. そして、解決策よりも多くの質問があります…

ブロックテーマを統合および構築するための開発者コースを検討しています

ブロック テーマと FSE の構築について理解する必要があるすべてのことを詳細に説明するコースを受講することを想像してみてください。 他の項目に加えて、次の 14 項目を参照しています。

• サイト全体の編集について学び、それがテーマ開発にどのように影響するかを確認してください。
• 最低限のインデックス テンプレートを作成し、ブロックを使用してデータベースから投稿を取得します。
• 1 行もコーディングせずに、ブログ ホーム テンプレート全体を実装します。
• テーマのヘッダーとフッターを追加する必要があります。
• サイト全体の編集でナビゲーション メニューがどのように扱われるかを理解します。
• theme.json ファイルを使用してブロック エディターの設定を事前に調整する方法を学びます。
• 組み込みのパターン コントロールを使用して、多彩なレイアウトを作成する方法をご覧ください。
• theme.json を使用して、ユニバーサルなタイポグラフィと配色を適用します。
• 間隔コントロールを使用してパディングとマージンを管理します。
• 設定がテーマに沿ったものになるようにブロック エディターをセットアップする方法を学びます。
• フォントの選択、グラデーション、カラー パレット、およびその他のカスタマイズ オプションを追加します。
• クライアントが基本設計からどれだけ変化できるかを制限するには、ブロックから望ましくないカスタマイズの選択肢を排除する方法を学びます。
• あなたとあなたのクライアントがより迅速にページを作成するのに役立つパターンを採用する方法を学びましょう。
• テンプレート要素を利用して、別のテンプレートでブロック コンポーネントを再度使用しないようにします。

これは、学ぶべき教訓の印象的なリストです。 そして良いニュースは、知識を伝えることだけに焦点を当てたトレーニングではないということです. このトレーニングでは、指と爪を汚すことをお勧めします。 練習はそれを完璧にします。

想像する必要はありません。これはすばらしいニュースです。 プログラムが作成されます。 それはすべて設定されています。 投稿の意図したトピックではありませんでしたが、記事の情報収集中に遭遇したため、開示します。 このコースを作成したのは、WordPress の専門家から高く評価されている有名な開発者である Frank Klein 氏です。

皆さん、ブロック テーマの構築と FSE の実行で頑張ってください!