WordPress フルサイト編集: 初心者向けガイド

完全なサイト編集 (FSE) は、WordPress の最新の話題です。 この新進気鋭のテクノロジーを利用したプレミアム テーマは数年前から存在していましたが、2018 年に Gutenberg が採用されたことにより、ようやく主流になりました。 WordPress フルサイト編集とは何か、何に基づいて構築されているか、どのように使用するか。 始めましょう。

WordPressフルサイト編集とは？

過去数年間、WordPress は非常に独特な構造を持っていました。 WordPress エディターを使用して投稿やページにコンテンツを追加してから、追加機能用のプラグインをインストールします。 WordPress コア ファイルは、ヘッダー、フッター、コンテンツ領域、サイドバー、およびその他の要素を担当していました。 近年、WordPress の完全なサイト編集により、すべてが変わりました。 ブロックに基づいて、完全なサイト編集により、WordPress サイトのあらゆる側面を編集できるようになります。 カスタム ヘッダー、フッターを作成し、カスタム コンテンツをほぼどこにでも作成できます。 完全なサイト編集は、WordPress のコアを超えて拡張され、Divi のようなページ ビルダーを使用して、まったく新しいレベルのデザイン機能を実現します。

WordPress での完全なサイト編集のメリットは?

完全なサイト編集の最大の利点の 1 つは、サイトを上から下まで好きなようにカスタマイズできることです。 たとえば、投稿とページのテンプレート、ヘッダー、フッターをすべてフロント エンドで作成および編集できるようになりました。 さらに、サイトやブロックにグローバル スタイルを追加して、独自のカラー パレット、フォント、間隔などを作成できます。 最小限のコーディング要件により、WordPress ユーザーは以前よりも簡単にカスタム サイトを作成できます。 前述のように、完全なサイト編集テーマはブロックを使用するため、サイトのすべての領域でそれらを利用して、特にカスタマイズされたカスタム サイトを作成できます。

使いやすい

WordPress での完全なサイト編集のもう 1 つの利点は、クライアントにとっての使いやすさです。 あなたがフリーランサーまたは Web エージェンシーの専門家で、完成後に Web サイトを引き継ぎたい場合は、FSE テーマが最適です。 デザインを変更するためにテーマのコードを掘り下げる必要はありません。 ご覧のとおり、完全なサイト編集テーマは、開発者がスタイルと機能を簡単に追加できるようにする theme.json ファイルを利用します。 グローバル カラー パレットの作成、フォントの割り当て、およびその他のスタイルをグローバルに設定できるため、エンド ユーザーはコンテンツを簡単に追加および編集できます。

スピードのために最適化

最後に、通常、FSE の方が高速です。 それらは一般的に膨張が少なく、最適に構成されており、従来の WordPress テーマよりもはるかに高速にリクエストを処理します。 そうは言っても、ホスティングは要因であるため、キャッシュを利用し、PHP の最新バージョンと互換性があり、できればクラウド ホスティング オプションを提供する、評判の良いホスティング プロバイダーを選択する必要があります。 詳細については、SEO のページ速度を最適化する方法を確認してください。

WordPress フルサイト編集はブロックテーマでのみ利用可能

すべてのテーマが完全なサイト編集をサポートしているわけではないことに注意してください。 2018 年にリリースされた Gutenberg ブロック上に構築されたものが、FSE の基盤です。 最初に導入されたとき、ブロックは投稿やページなどの Web サイトのコンテンツ領域でのみサポートされていました。 FSE テーマを使用すると、その機能がテーマの文字通りすべての側面に拡張されます。 前述のとおり、theme.json ファイルは、サイトのグローバル設定とスタイルのすべてを制御します。 以前の世代では、テーマ カスタマイザーがサイト設定を制御していました。 WordPress サイト エディターは、すべてのグローバル スタイルと設定を制御し、ユーザーがテーマ全体にブロックを追加できるようになりました。

そうは言っても、完全なサイト編集テーマのオプションはまだたくさんありません. 何千もの WordPress テーマが存在しますが、現在利用可能な FSE テーマは 160 をわずかに超える程度です。 フルサイト編集の人気が高まっていますが、この技術はまだ定着し始めたばかりです。

ブロックテーマとは？

簡単に言うと、ブロックテーマは完全にブロック上に構築されたテンプレートを含む WordPress テーマです。 これには、投稿やページだけでなく、文字通りその他すべてが含まれます。 サイドバー、フッター、ヘッダー、投稿テンプレート、およびテーマのコンテンツのその他すべての側面。

これまで、WordPress Web サイトは一連の伝統的な PHP ファイルで構成されていました。 現在、ブロック テーマはすべてブロック テンプレートに基づいて構築されています。 前述のように、すべてのブロック テーマには、開発者とユーザーが機能を追加したり、グローバル スタイルを設定したりできるようにする theme.json ファイルがあります。

Twenty Twenty-Two などの既定のテーマは、ブロック テーマと見なされます。 古い W​​ordPress カスタマイザーを使用してサイトのタグラインを追加したり、色を選択したり、フォントを選択したりする代わりに、WordPress サイト エディターを使用してそれらを制御します。 さらに、ブロックを使用してコンテンツをテンプレートに追加し、それをパーソナライズします。

静的ブロックと動的（テーマ）ブロックの違いは何ですか

WordPress で完全なサイト編集を使用する方法を紹介する前に、WordPress のブロックに関して理解しておくべき基本事項がいくつかあります。 WordPress FSE には、静的ブロックと動的テーマ ブロックの 2 種類のブロックがあります。 静的ブロックは、投稿を作成して公開する時点で既知のコンテンツで構成されています。 静的ブロックの例としては、段落、見出し、画像 (動的なものもあります)、引用、改ページ、ボタンなどがあります。

一方、新しい FSE 動的ブロック (テーマ ブロックまたはサイト ブロックと呼ばれる) は、テンプレートを作成するときに使用するように設計されており、サイトのバックエンドからコンテンツを動的にプルしてサイトに表示できます。 これらの動的テーマ ブロックは、ブログ投稿フィード (クエリ ループ ブロックを使用)、投稿タイトル、投稿コンテンツ、注目の画像などを生成できます。 投稿コンテンツ ブロックは良い例です。バックエンドで投稿コンテンツに変更を加えると、サイト全体でその投稿コンテンツ ブロックの各インスタンスが自動的に更新されるからです。

WordPress での完全なサイト編集の開始

完全なサイト編集とは何かについての基本的な理解が得られたので、それを使用する方法について説明しましょう。 このセクションでは、ブロック テーマの選択方法、テーマに含まれるテンプレートのカスタマイズ方法、グローバル スタイルの設定方法、動的テーマ ブロックの使用方法、およびブロック パターンの紹介方法を理解するのに役立ちます。

完全なサイト編集をサポートするテーマの選択

現在、WordPress リポジトリで利用できる完全なサイト編集テーマは 150 以上あります。 FSE テーマを選択するには、2 つの方法があります。 WordPress リポジトリから無料のものを選択するか、プレミアム ベンダーから購入することができます。 この投稿では、WordPress リポジトリで FSE を選択します。

まず、WordPress ダッシュボードにログインし、[外観] > [テーマ] をクリックします。 次に、[新規追加] ボタンをクリックします。

次に、[機能フィルター] リンクをクリックして、フィルター オプションを設定します。

件名、機能、およびレイアウトを含む 3 つの並べ替えオプションがあります。 必要に応じてテーマのテーマを選択できます。それ以外の場合は、[サイト エディター]ボックスにチェックを入れるだけです。 選択したら、[フィルタを適用] をクリックします。

画面が更新され、利用可能な選択肢が表示されます。 このチュートリアルで従うテーマを選択するか、この投稿で使用する Twenty Twenty-Two テーマを選択することができます。 選択したら、テーマを有効にして開始します。

テンプレートのカスタマイズ

新しいテーマがアクティブになったら、次のステップはカスタマイズを開始することです。 このチュートリアルでは、theme.json の編集には入りません。 完全なサイト編集テーマの仕組みに慣れるために、Twenty Twenty-Two の基本に固執します。 そうは言っても、 Appearance > Editorに進んでください。

サイト エディターが読み込まれると、ホームページ テンプレートがデフォルトになります。

テーマ内の他のテンプレートを編集するには、サイト エディターの左上隅にあるWordPress ロゴをクリックし、[テンプレート] をクリックします。 Twenty Twenty-Two には、単一の投稿、ページ、404、空白、検索アーカイブなど、編集できる多数のテンプレートがあります。 編集する別のテンプレートを選択するには、そのテンプレートをクリックして、そのページのサイト エディターをアクティブにします。 さらに、ダッシュボードの右上隅にある [新規追加] ボタンをクリックして、サイトの新しいテンプレートを作成できます。

Twenty Twenty-Two の新しいテンプレートには、フロント ページ、作成者、カテゴリ、日付、タグ、分類ページなど、いくつかのオプションがあります。 そうは言っても、これらのオプションは、前のセクションで選択したテーマによって異なります。

テンプレートパーツ

ページ テンプレートで編集できる次の領域は、テンプレート パーツです。 Twenty Twenty-Two では、各テンプレートのヘッダーとフッターのテンプレート パーツを編集できます。 ただし、各テンプレートには、編集可能な異なるテンプレート パーツがあります。 たとえば、ホームページ テンプレートには、ブログ テンプレート パーツも用意されています。

この例では、ヘッダー テンプレート パーツを編集してみましょう。 ここで、既存のブロックを編集したり、新しいブロックをテンプレートに追加したりできます。 さらにブロックを追加するには、エディターの左上隅にある青い + ボタンをクリックして、ブロック挿入機能を切り替えます。

これにより、利用可能なすべてのブロックが明らかになります。 2 つの方法のいずれかでブロックを追加できます。 選択したブロックをクリックしてテンプレート パーツにドラッグするか、 + アイコンをクリックして追加します。

さらに、テンプレート内の既存のブロックを編集できます。 編集したいブロックをクリックするだけで、そのオプションが表示されます。 たとえば、サイトのロゴを編集する場合は、ロゴをクリックして新しい画像を追加します。

グローバル スタイルの設定方法

完全なサイト編集テーマのもう 1 つの優れた機能は、グローバル スタイルを設定できることです。 フォント、色、カラー テーマを選択し、間隔を調整できます。 サイト全体にスタイルを設定するか、特定のブロックのみにスタイルを設定するかを選択できます。 これは、過去のテーマに比べて大幅な時間の節約になります。

サイトのスタイルにアクセスするには、サイト エディターの右上にあるスタイル アイコンをクリックします。

有効にすると、スタイルの参照リンクをクリックしてサイトの配色を選択することで、Twenty Twenty-Two テーマで使用可能なスタイルを参照できます。

次のオプションであるタイポグラフィでは、テキストとリンクのフォント オプションを選択できます。 これには、フォント ファミリ、サイズ、行の高さ、およびフォントの太さ (外観) が含まれます。

色の下で、グローバル カラー パレットで使用される色を編集できます。 背景、テキスト、およびリンクに色を割り当てることができます。 Twenty Twenty-Two には、17 の単色と 20 のグラデーションがあります。 さらに、サイトにカスタムの色とグラデーションを追加できます。これは、ブランディングの目的に最適です.

最後に、パディングをレイアウトに合わせて調整できます。 パディングは、上、左、右、下全体に設定することも、個別に設定することもできます。

動的テーマ ブロックの使用

ブロック エディターには、サイト エディターでページ テンプレートを作成するために利用できる 90 を超えるブロックが含まれています。 その中には、サイトのフロント エンドに表示される動的コンテンツを設定する動的テーマ ブロックがいくつかあります。 たとえば、単一の投稿テンプレートをクリックすると、投稿のタイトル、投稿の注目の画像、投稿のコンテンツ ブロックなど、使用されているいくつかが表示されます。 これらは、動的テンプレートを作成してブログ投稿を動的に表示するのに役立ちます。

テーマを編集するときは、テーマ ブロックを利用してヘッダー、フッターなどを作成できます。 全部で 27 のテーマ ブロックがあります。 ここではすべてを説明することはしませんが、何ができるかをよく理解できるように、いくつかを取り上げます。

テンプレートの新しいヘッダーを作成する

いくつかのテーマ ブロックを使用して、サイトの新しいヘッダー テンプレート パーツを作成する方法を示しましょう。 まず、[テンプレート] メニューに移動します。 次に、[空のテンプレート] をクリックして開始します。

ページで使用されているブロックを確認したい場合は、レイヤー ビューを使用できます。 サイト編集画面の左上部分にあるレイヤー アイコンをクリックするとアクセスできます。

青い + アイコンをクリックしてブロックを表示し、下にスクロールしてテーマ ブロック オプションを表示します。 最初に選択するテーマ ブロックは、テンプレート パーツ ブロックです。 これは、サイトのグローバル セクションを作成するのに非常に役立ちます。 テンプレート パーツを使用して、特定のページに割り当てることができるサイトのカスタム ヘッダーを作成します。

テンプレート パーツ ブロックをサイト エディターの空白ページにドラッグします。 新しいテンプレート パーツを作成するには、空白の開始を選択します。

テンプレート パーツに名前を付けて、 [作成] をクリックします。

まず、ブロックを表示してスペーサーを検索し、それをペーストボードに追加します。 高さを20pxにします。 これにより、テンプレートの最上部に 20px のスペースが追加されます。

次に、列ブロックを見つけます。 ペーストボードにドラッグします。 33/33/33 列のバリエーションを選択します。 これにより、行に 3 つの列が配置されます。 各列は、使用可能なサイト スペースの 33% を占めます。

テンプレート パーツは次のようになります。

ヘッダー テンプレートにブロックを追加する

青色の + アイコンをクリックして、ブロック メニューを表示します。 テーマ ブロックまで下にスクロールし、サイト ロゴブロックを最初の列にドラッグします。 画像をアップロードするか、メディア ギャラリーから画像を割り当てます。

次に、ナビゲーションブロックを 2 列目にドラッグします。 ナビゲーション ブロックでは、Web サイトのページをメニューに追加したり、カスタム リンクを作成したりできます。 完全なサイト編集テーマでのメニューの追加は、他のテーマとは少し異なります。 Appearance > Menus を使用して追加する必要はなくなりました。 これで、すべてのメニューが作成され、サイト エディターに追加されました。 空の開始をクリックして、サイトのリンクを作成するか、ページを選択します。 それらを追加するには、キーボードのエンター キーを押します。

最後に、ソーシャル リンク ブロックを 3 番目の列に追加します。 ソーシャル アイコン ブロックの右側にある+をクリックして、取り上げたいソーシャル メディア アイコンを追加します。

注: テンプレートへのテーマ ブロックの追加に限定されません。 任意の WordPress ブロックを使用できます。 この例では、ソーシャル リンク ブロックは動的テーマ ブロックではありませんが、ヘッダーに追加するのに役立つ要素です。

ブロックがすべて追加されると、ヘッダーは次のようになります。

テンプレートのレイアウトを調整する

新しいヘッダーにすべてのブロックを配置したので、間隔が少しずれていることに気付くでしょう。 完全なサイト編集のあらゆる側面と同様に、それも調整できます。 まず、レイヤー ビューの最初の列をクリックします。 [列の設定] > [幅]の下の設定パネルで、ドロップダウンをクリックして、さまざまなサイズ オプションを表示します。 %を選択します。 最初の列の幅として20を入力します。

手順を繰り返して、2 番目の列を 60% に調整し、次に 3 番目の列を 20% に調整します。 ヘッダーの間隔が改善されました。 右上隅にある [公開] ボタンをクリックして、テンプレートを保存します。

テンプレートは次のようになります。

ブロック パターンを使用して設計を活性化する

テンプレートを作成するときに、一連のブロックをドロップして設計プロセスを容易にする簡単な方法があります。 これらのブロックのグループは、ブロック パターンと呼ばれます。 WordPress には、使用できるいくつかのブロック パターンが標準で付属しています。また、独自のブロック パターンを作成してサイト全体で再利用することもできます。 ブロック パターンにアクセスするには、サイト エディターの左上にある青い + アイコンをクリックし、パターン タブをクリックします。 フッター、ヘッダー、ボタン、ギャラリー、列など、いくつかのブロック パターンのカテゴリから選択できます。

各ブロック パターンは、デザインの選択に合わせて編集できます。 色、フォント、およびパディング スタイルは、パターン内の個々のブロック内で調整できます。 作成したブロック パターンを保存するには、リスト ビューの省略記号メニューをクリックし、[再利用可能なブロックに追加] をクリックします。 または、テンプレート パーツとして保存することもできます。

Divi: WordPress の究極のフルサイト編集テーマ

WordPress 用の多機能で機能満載の完全なサイト編集テーマを探しているなら、Divi 以外に探す必要はありません。 世界で最も高度な Visual Builder を利用して、完全なサイト編集をまったく異なるレベルに引き上げます。 ユーザーは、いくつかの機能を挙げると、ホバー エフェクトの適用、シェイプ ディバイダーの追加、アニメーションの適用、要素の一括編集、グローバル スタイルとカラー パレットの適用などを行うことができます。 さらに、Divi には 200 を超える要素があり、魅力的で機能性の高い Web サイトを作成するのに役立ちます。 ブログ、スライダー、行動を促すフレーズ、価格設定、お客様の声などの要素を使用して、ユーザーは真にユニークな Web サイトを作成できます。

ディビテーマビルダー

Divi の無制限のデザイン機能に加えて、ユーザーはカスタマイズを Web サイト全体に拡張することもできます。 ヘッダー、フッター、商品テンプレート、カテゴリーおよびアーカイブ ページ、404 テンプレート、投稿テンプレートなどをデザインできます。 さらに、これらすべてを Divi 独自の Visual Builder で行うことができるため、デザインの変更をリアルタイムで確認できます。 作成できるテンプレートの数に制限はありません。 さらに、Theme Builder テンプレートをグローバル要素として、または必要に応じて個々のページに割り当てることができます。

ディビ ダイナミック コンテンツ

Diviには、Webサイトの動的コンテンツを作成する機能も組み込まれています. Template Builder および/または Visual Builder を使用して、ユーザーは動的コンテンツを投稿、ページ、製品、およびテンプレートに割り当てることができます。 すべてのDivi要素で動的コンテンツを使用できます。これにより、動的モジュールを構築して、データベースから直接取得した情報を表示できます.

Diviの動的モジュール

動的モジュールは、あらゆるタイプの Web サイトでの使用に最適です。 これらは、旅行 Web サイト、レシピ、レンタル サービスなどのモジュールを構築するために使用できます。 Divi の Visual Builder を使用すると、作成するテンプレートのタイプに基づいて動的コンテンツを割り当てることができます。 たとえば、投稿またはカテゴリ テンプレートを作成する場合、テキスト モジュールで使用できる動的コンテンツには、画像モジュールのオプションとは異なるオプションがあります。 テキスト付きのモジュールの場合、投稿/アーカイブのタイトル、投稿の抜粋、公開日、コメント数、タグ、カテゴリの説明などを選択できます。 一方、画像モジュールは、アイキャッチ画像、著者プロフィール画像、サイト ロゴ画像などの動的なコンテンツを設定するために使用されます。

動的 WooCommerce モジュール

eコマースWebサイトの所有者は、Diviで追加のボーナスを獲得できます. WooCommerce がインストールされると、Divi は一連の動的 WooCommerce モジュールを追加し、製品、カート、およびチェックアウト ページのテンプレートを作成するときに動的コンテンツを追加する機能を提供します。 WooCommerce を使用する場合、サイトの商品ページとカート ページをブランディングと一致させるために CSS を使用する必要はなくなりました。 さらに、WooCommerce モジュールは、Divi 内のどこでも使用して、製品を強調したり、製品ギャラリーを作成したりできます。

WordPress フルサイト編集に関するよくある質問

すべての情報をお伝えしましたが、いくつか質問があると思います。 心配はいりません。答えがあります。

完全なサイト編集テーマに切り替えると、自分の Web サイトはどうなりますか?

ありがたいことに、完全なサイト編集テーマはブロック上に構築されています. したがって、ブロックに基づく別のテーマから交換する場合は、サイトの見栄えを良くするためにいくつかのことを行うだけで済みます. まずはヘッダーテンプレートパーツを作成してサイトのロゴとナビゲーションを設定します。 古いテーマはカスタマイザーを使用していた可能性があります。 FSE テーマでは、サイト エディターを使用してサイトのヘッダーを作成します。

完全なサイト編集テーマはどこにありますか?

完全なサイト編集テーマを見つける方法は 2 つあります。 最初の方法は、管理ダッシュボードの WordPress テーマ セクションでフィルター検索を実行することです。 160 以上のテーマから選択できます。 2 つ目の方法は、Divi などのプレミアム フルサイト編集テーマを購入することです。

私の古いサイトはウィジェットを使用しています。 完全なサイト編集テーマに切り替えても、それらはそのまま残りますか?

FSE テーマは完全にブロック上に構築されているため、以前のようにウィジェットを使用しません。 ただし、利用可能なウィジェット ブロックがあります。 おそらく、古いウィジェットを新しいウィジェット ブロックに置き換えるか、新しいブロック パターンを追加して、プロセスを高速化する必要があります。

完全なサイト編集テーマを使用するには、どのバージョンの WordPress が必要ですか?

完全なサイト編集は、5.8 のリリース以降の WordPress のバージョンと互換性があり、最近のバージョンではより多くのテーマ ブロックが追加されています。 インストールに 5.8 がない場合は、FSE テーマを使用するためにアップグレードする必要があります。 古いバージョンの WordPress を使用すると、サイトがセキュリティ ハッキングやその他の厄介な問題に対して脆弱になるため、とにかくアップグレードする必要があります。

私はあまり技術に精通していません。 FSE を使用できますか?

はい！ 完全なサイト編集を使用して Web サイトを構築する方法を学ぶことは、ほぼすべての人にとって簡単です。 FSE テーマはドラッグ アンド ドロップのビジュアル編集を利用するため、美しいレイアウトを簡単に作成できます。

完全なサイト編集テーマを使用するとサイトが高速化されますか?

はい、できますが、それだけではありません。 まず、完全なサイト編集テーマは、機能を追加するために必要なプラグインが少なくて済むように構築されているため、パフォーマンスを向上させることができます. したがって、必要な場所にサイトを取得するために多くをインストールする必要はありません. そうは言っても、FSE テーマはすぐにすぐに高速になるように自動的に設計されているわけではありません。 ホスティングプロバイダーなど、他にも考慮事項があります。 SiteGround などの優れたホスティング プロバイダーは、最新バージョンの PHP を実行し、Web サイトの実行を高速化する CDN やその他の速度拡張機能を提供します。

完全なサイト編集は WordPress の未来です

完全なサイト編集は、WordPress コミュニティで定着しています。 Web サイトのあらゆる側面を編集できる機能により、開発者やクリエイティブはその価値を理解し始めています。 Divi などのプレミアム テーマは 2021 年からこのテクノロジーを使用しており、時代を先取りしています。 そうは言っても、今年の初めに WordPress Twenty Twenty-Two テーマがリリースされたことで、完全なサイト編集テーマがまもなく標準になることが期待できます. WordPress 開発で完全なサイト編集を利用する方法を知ることは、将来に向けて準備を整えるための重要なステップです。

WordPress で完全なサイト編集を使用していますか? 以下、ご意見をお聞かせください。

開示:この投稿には、私たちのチームをサポートし、無料のブログ コンテンツの流れを維持するアフィリエイト リンクが含まれています。 アフィリエイト リンクをクリックして何かを購入すると、手数料が発生する場合があります。