WordPressのフルサイト編集の完全初心者ガイド

WordPressは何年にもわたって大きく進化しており、各アップデートでウェブサイト構築を容易にする新機能が追加されています。よく寄せられる質問の1つは、WordPress 5.9で導入された新しいフルサイト編集(FSE)機能の使用方法についてです。

私たちは個人的に、Genesisフレームワークに基づいたカスタムテーマと、カスタムページ用のSeedProdのようなページビルダーを使用しています。しかし、フルサイトエディターがより広く使われるようになるにつれて、多くのユーザーがこの新機能をご自身のウェブサイトでどのように活用できるかを知りたいと思っています。

フルサイト編集は、ブロックエディターの概念をサイト全体に本質的に拡張します。これにより、コンテンツだけでなく、サイトのヘッダー、フッター、その他の構造要素も視覚的に編集できます。

この記事では、WordPressのフルサイトエディターの使用方法を説明します。WordPress初心者の方でも、この新機能を探求したい経験豊富なユーザーの方でも、このガイドがあれば、すぐにWordPressで素晴らしい見た目のウェブサイトを作成できます。

WordPressフルサイト編集の初心者ガイド

WordPressのフルサイト編集(FSE)とは何ですか?

WordPressのフルサイト編集(FSE)は、本質的にGutenbergプロジェクトの継続です。これは、WordPress.orgの組み込みウェブサイトおよびテーマカスタマイズツールにブロックコンテンツエディターインターフェイスを使用する機能です。

これは、ブロックコンテンツエディターを、ページや投稿のコンテンツだけでなく、ヘッダー、フッター、サイドバーなどにも使用できることを意味します。

WordPressフルサイトエディター

フルサイト編集の目標は、WordPressでのウェブサイト構築を簡素化することです。WordPressは非常に使いやすいですが、初心者にとっては常に最も簡単なツールではありませんでした。

まず、以前のクラシックエディターはかなり基本的なものです。新しいページを作成しても、すぐにどのように見えるかを確認できません。代わりに、プレビューページと編集インターフェイスを切り替えて、フロントエンドでのページの表示を確認する必要があります。

クラシックエディターの投稿例

ドラッグアンドドロップ機能がないため、WordPressテーマカスタマイザーが限定的だと感じる人もいます。

言い換えれば、要素を思い通りに移動したり編集したりすることはできません。そのため、多くの人がデザインの柔軟性を高めるためにWordPressのページビルダープラグインをインストールしています。

カスタマイザーのトラベルテーマ

Gutenbergプロジェクトは、フルサイト編集を含む、より新しく、よりユーザーフレンドリーなウェブサイト構築ツールを導入することで、これらの問題の解決を目指しています。

FSEを使用すると、初心者でも簡単なドラッグ&ドロップブロックエディターを使用してWordPressウェブサイトを作成し、変更を加えながらライブプレビューを確認できます。

WordPressフルサイト編集を使用する前に知っておくべきこと

WordPressのフルサイトエディターを使用する前に、この機能はWordPressブロックテーマユーザーのみが利用できることを知っておく必要があります。

ブロックベースでない(クラシック)テーマを使用している場合、フルサイトエディターにアクセスできません。代わりに、WordPressテーマカスタマイザーまたはサポートされているページビルダーを使用してカスタマイズする必要があります。

ブロックテーマのインスピレーションを見たい場合は、WordPress のフルサイト編集に最適なブロックテーマのガイドをご覧ください。

もう一つ覚えておくべきことは、WordPressのフルサイト編集は、Gutenbergブロックコンテンツエディターと同じように機能するということです。それを念頭に置いて、WordPressブロックエディターの使い方に関するガイドを読むことをお勧めします。

このガイドでは、WordPressのフルサイト編集機能を使用してウェブページのデザイン、コンテンツ、レイアウトを編集する方法に焦点を当てます。これらのクイックリンクを使用して、特定のトピックにスキップできます。

WordPressフルサイト編集機能にアクセスする方法

WordPressフルサイトエディターにアクセスするには、WordPressダッシュボードに移動し、外観 » エディターに進む必要があります。

WordPress管理パネルからフルサイトエディタを選択

その後、WordPressフルサイトエディターにアクセスします。

インターフェイスは次のようになります。

WordPressフルサイトエディター

左側には、メイン設定パネルがあります。一方、右側にはウェブサイトの外観のプレビューがあります。ウェブサイトをすぐに編集したい場合は、そのサイドをクリックできます。

ナビゲーション、スタイル、ページ、テンプレート、パターンの5つの主要な設定があります。それらを一つずつ見ていきましょう。

FSEでナビゲーションメニューを編集する方法

一番上の最初の設定はナビゲーションで、ブロックテーマのナビゲーションメニューを編集できます。それをクリックしてください。

WordPress フルサイト編集でのナビゲーションの選択

このページではいくつかのことができます。

「ナビゲーション」の横にある3点リーダーボタンをクリックすると、メニューの名前変更、複製、または削除ができます。

WordPressフルサイト編集のナビゲーションの横にある3点リーダーボタンをクリックする

メニューに表示されているページを並べ替えたり、削除したりすることもできます。

これを行うには、ページのいずれかの横にある3つのドットボタンをクリックします。「上に移動」、「下に移動」、「削除」のオプションが表示されます。特定のページを編集したい場合は、「…に移動」ボタンを選択できます。

WordPressフルサイト編集のナビゲーション内のページリンクの横にある3点リーダーボタンをクリックする

メニューのデザインやリンクをカスタマイズすることもできます。

それを行うには、鉛筆の「編集」アイコンをクリックしてブロックエディターを開くだけです。

WordPressのフルサイト編集でナビゲーションの鉛筆編集ボタンをクリックする

これで、ナビゲーションメニューの編集インターフェイスが表示されます。これは通常のGutenbergエディターのように見えます。

メニュー要素の追加、編集、削除、および並べ替え

続行する前に、ウェブサイトのナビゲーションメニューの場所はテーマによって異なることに注意してください。上部、側面、または非表示になっており、特定のボタンをクリックすると表示される場合があります。

新しいページリンクを追加するには、メニュー内の「+」ブロック追加ボタンをクリックできます。次に、ナビゲーションメニューに挿入したいページの名前、投稿タイトル、または外部URLを入力して選択します。

WordPressフルサイトエディターを使用してナビゲーションメニューに新しいページリンクを追加する

リンクしたいページがまだ作成されていない場合でも、ナビゲーションメニューにリンクを追加できます。

下書きページのタイトルを検索バーに入力し、「下書きページを作成」をクリックするだけです。WordPressは、後で編集できるその名前のページを作成します。

ナビゲーションメニュー用のWordPressフルサイトエディターでドラフトページを作成する

ページのリンク、名前、タブの設定を編集したい場合は、ページを選択してブロックツールバーのリンクアイコンをクリックするだけです。

それが完了したら、鉛筆ボタンを選択します。

WordPressフルサイト編集でブロックツールバーからページリンクを編集する

これで、ページのリンクを変更し、リンクを新しいタブで開くことができるようになります。

完了したら、「保存」をクリックしてください。

WordPressフルサイト編集でページリンクを編集し、ナビゲーションメニューの保存をクリックする

ここでは、ページリンク以外にも新しいナビゲーションメニュー要素を追加できます。

「+」追加ブロックボタンをクリックするだけです。その後、サイトロゴやサイトタグラインなど、利用可能なナビゲーションブロックオプションが見つかります。

場合によっては、これらのブロックを見つけるために下にスクロールする必要があるかもしれません。「すべて表示」を選択して、ブロックの選択肢の完全なリストを表示することもできます。

WordPress フルサイト編集でページリンク以外のメニュー要素を追加する

ある時点で、メニュー要素を並べ替えたい場合もあります。

これを行うには、ブロックを選択し、矢印アイコンのいずれかを選択して、ブロックを左または右に移動します。

WordPressのフルサイト編集でメニューブロックを左に移動する

ページリンクやその他のメニュー要素を削除したい場合は、削除したい要素を選択できます。

次に、ブロックツールバーの3点メニューをクリックし、「削除」を選択します。

WordPressフルサイト編集でナビゲーションメニューからブロックを削除する

詳細については、WordPressでブロックを削除する方法に関するチュートリアルをご覧ください。WordPressでブロックを削除する方法

サブメニューの作成

オンラインストアのように多くのウェブページがある場合、ドロップダウンサブメニューを作成すると良いでしょう。これにより、ナビゲーションメニューが多くのリンクで散らからず、より整理された見た目になります。

サブメニューを作成する最初のステップは、「+」追加ブロックボタンをクリックし、「サブメニュー」ブロックを選択することです。

WordPressフルサイト編集内のナビゲーションでサブメニューブロックを選択する

次に、サブメニューの親メニューとして機能するページまたはURLを選択します。

たとえば、ブログを運営している場合、ブログページを親メニューとして使用する場合があります。サブメニュー内には、ブログコンテンツの個々のカテゴリページへのリンクがあります。

この例では、「ブログ」を選択します。

WordPressフルサイト編集でブログページをサブメニューの親メニューとして選択する

それが完了したら、単に「+」追加ブロックボタンをクリックします。

親メニューの下にあるはずです。

WordPressフルサイトエディターでページリンクブロックをサブメニューとして追加する

この時点で、挿入したいページリンクの名前を入力して選択できます。必要に応じて、この手順を繰り返してサブメニューリンクをいくつでも追加できます。

ナビゲーションメニューが完了したら、右上隅にある「保存」ボタンをクリックして変更を保存することを忘れないでください。

WordPressフルサイトエディターでメニューの変更を正式に適用するために保存をクリックする

FSEでウェブサイトのグローバルスタイルを変更する方法

ナビゲーションの下にある次の設定はスタイルです。この機能を使用すると、ウェブサイト全体のデザインを変更できます。

スタイルページに入ると、異なる色、タイポグラフィ、レイアウトの選択肢を持ついくつかの定義済みスタイルオプションが表示されます。これらの定義済みオプションは、ブロックテーマによって見た目が異なることに注意してください。

WordPressフルサイトエディターのスタイルページ

「スタイル」の横にある目のアイコンをクリックすることもできます。これはスタイルブックを表します。

これにより、スタイルオプションのタイポグラフィと、見出し、段落、リストなどのテキストブロックがこのスタイルでどのように表示されるかを確認できるようになります。

WordPressフルサイトエディターでスタイルブック機能を選択する

前のセクションと同様に、このページの鉛筆ボタンをクリックすると編集インターフェースが表示されます。

ここでは、主に右側のパネルを使用して、タイポグラフィ、色、背景画像、影、レイアウトを正確なニーズに合わせて変更します。ウェブサイト全体の特定のブロックの外観もカスタマイズできます。

WordPressフルサイトエディターのグローバルスタイル設定

通常、エディターでホームページが表示されます。ただし、ここで行った変更は他のウェブページにも反映されます。

ウェブサイトのタイポグラフィを編集する

ウェブサイトのフォントを変更するには、右側の「スタイル」サイドバーに移動し、「タイポグラフィ」を選択します。

ここで、編集可能ないくつかのテキスト要素が表示されます:テキスト、リンク、見出し、キャプション、ボタン。

WordPressフルサイトエディターで編集可能なタイポグラフィ要素

テキスト要素の設定は、サイト全体のフォントの外観を決定します。つまり、この要素に変更を加えると、ウェブサイト上のテキストを使用するすべてのブロックに反映されます。

それでも、リンク、見出し、キャプション、またはボタンの要素をクリックして、これらの特定のブロックのスタイルを編集し、他のテキストとは異なる外観にすることができます。

例えば、見出しを段落ブロックと異なるフォントにして目立たせたい場合、見出し要素の設定で構成できます。

一般的に、各要素のフォント、サイズ、外観、行の高さを変更できます。

フォントの選択肢は、使用しているテーマによって異なります。一方、外観では、フォントの通常、太字、または斜体バージョンを使用するかどうかを制御します。

WordPressフルサイトエディターのテキスト要素の設定

一部の要素には特定のオプションがある場合がありますので、一つずつ確認してください。

例えば、見出し要素には文字間隔と文字の大文字・小文字をカスタマイズするオプションがあります。

WordPressフルサイトエディターの見出しタイポグラフィ要素の設定

ウェブサイトのカラーパレットのカスタマイズ

次に、ウェブサイトのカラースキームの設定に進みましょう。これを行うには、スタイルパネルの「色」をクリックするだけです。パレットと色の2つのセクションが表示されます。

「パレット」内の色を選択します。

WordPressフルサイトエディターのカラーオプションでパレットを選択

パレットのソリッドタブには、テーマ、デフォルト、カスタムのセクションが表示されます。

テーマには、ウェブサイト全体のカラーパレットをカスタマイズするために使用できる色がいくつか含まれています。

WordPressフルサイトエディターの「スタイル」タブにあるテーマ、デフォルト、カスタムのカラー設定

一方、デフォルトの色は、色設定を持つブロックを変更できます。一部のテーマにはこの機能が含まれていない場合があるため、エディターに表示されない可能性があることに注意してください。

最後に、カスタムカラーはテーマに追加できる色です。テーマまたはデフォルトのカラーオプションのどちらも適切でない場合は、この設定を使用できます。

新しいカスタムカラーを追加するには、「+ カラーを追加」ボタンをクリックし、カラーピッカーツールを使用するだけです。

WordPressフルサイトエディターでカスタムカラーを追加する

テーマ、デフォルト、またはカスタムカラーを変更したい場合は、カラーを選択し、カラーピッカーツールを使用して別のオプションに切り替えるだけです。

これらの色を使用するブロックも影響を受けることを忘れないでください。

WordPressフルサイトエディターのスタイル設定でソリッドカラーを変更する

「グラデーション」タブに切り替えましょう。これは「単色」タブと似ていますが、色のオプションがグラデーションの形式になっており、2色以上の色が混ざり合ったものです。

テーマオプションには、テーマの無彩色を使用したグラデーションオプションがいくつか含まれています。一方、デフォルト設定は、ブロックをカスタマイズするために使用できるカラーグラデーションです。

デュオトーンカラーは、画像を含むブロックに追加できるフィルターです。利用可能なデュオトーンを確認することはできますが、ここで編集することはできません。

WordPressフルサイトエディターのスタイル設定にあるグラデーションタブ

必要に応じてカスタムグラデーションを作成することもできます。

これを行うには、単に「+色の追加」ボタンをクリックします。次に、線形または放射状のグラデーションタイプを選択し、角度を変更してグラデーションの方向をカスタマイズできます。

さらに、スライダー上の任意の場所をクリックして、グラデーションミックスにさらに多くのカラーを選択できます。カラーピッカーが表示され、カラーを選択できます。

WordPressフルサイトエディターでカスタムグラデーションカラーを作成する

色タブに戻ると、テキスト、背景、リンク、キャプション、ボタン、見出しの特定の色の設定をカスタマイズできます。

要素をクリックして、単色またはグラデーションを選択して要素の色を変更するだけです。プレビューセクションを選択してカラーピッカーにアクセスすることもできます。

WordPressのフルサイトエディターで背景色を変更する

背景画像を追加する

ブロックテーマで背景色ではなく背景画像を使用したい場合は、スタイルメインメニューの「背景」オプションをクリックできます。

ここから、メディアライブラリから既存の画像を選択するか、新しく大きな画像をアップロードできます。

フルサイトエディターで背景画像を追加する

ドロップシャドウ効果の変更

フルサイトエディターで変更できるもう1つのことは、ブロックに適用される影の効果です。この効果は、コールトゥアクションボタンなどの特定のブロックで有効にできます。

FSEでのドロップシャドウ効果の変更

シャドウ効果を編集するには、「デフォルト」の下にあるオプションのいずれかをクリックするだけです。

次に、影の色、アウトセットまたはインセット、位置、ぼかし、およびスプレッドの設定を変更できます。

FSEでドロップシャドウ効果を編集する

ウェブサイトのレイアウトを調整する

スタイルタブの最後のオプションはレイアウトです。ここで、ウェブページ要素間のスペースを変更できます。

WordPressフルサイトエディターのスタイルタブのレイアウト設定

レイアウトパネルの上部には、ページのコンテンツと幅の幅を変更する設定があります。コンテンツ幅は、ブロックツールバーでブロックの配置設定が「なし」の場合の個々のブロックのデフォルト幅を決定します。

一方、ワイド幅は、ブロックがワイド幅のアライメントに設定されている場合のブロックのデフォルト幅を決定します。

その下には、ウェブページコンテンツの周囲の余白を制御するパディングがあります。

利用可能なスライダーを使用して、上、下、左、右のパディングを設定できます。パディングサイズをより具体的にしたい場合は、スライダーアイコンをクリックしてピクセルサイズを入力できます。下のスクリーンショットを参照してください。

WordPressフルサイトエディターでパディング設定を構成する

下の方に進むと、ブロックの間隔の設定が表示されます。このオプションは、個々のブロックが近すぎたり離れすぎたりしないように、ブロック間の間隔を決定します。これはパディングの編集と同じ方法で編集できます。

変更を正式なものにするために、右上にある「保存」ボタンをクリックすることを忘れないでください。

WordPressのフルサイト編集でグローバルスタイル変更を保存する

特定のブロックの外観を変更する

ウェブサイト全体で特定のブロックの外観をカスタマイズしたい場合は、スタイルパネルのメインメニューにある「ブロック」オプションをクリックできます。

ここから、利用可能なデフォルトのWordPressブロックを1つ選択できます。

FSEでカスタマイズが必要なブロックの選択

各ブロックの特定のスタイル設定は異なります。

例えば、段落ブロックを選択した場合、フォント、行の高さ、文字間隔などを変更できます。ブロックによっては、高さと幅を変更するオプションが含まれているものもあります。

FSEでの段落ブロックのスタイルの変更

カスタム CSS の追加

ブロックテーマにカスタムCSSを追加したい場合は、この設定で行うことができます。

スタイルのメインメニューにある3点リーダーメニューをクリックするだけです。次に、「追加CSS」を選択します。

フルサイトエディターで追加CSSメニューを開く

ここから、適切なボックスにCSSコードを挿入できます。

このように:

フルサイトエディターにカスタムCSSを挿入する

FSEでWordPressページをカスタマイズする方法

これまで、ナビゲーションとスタイルについて説明しました。次にページに進みましょう。このタブには、既存のページのリストが表示されます。編集については後ほど詳しく説明します。

FSEのページセクション

フルサイトエディターで新しいページを作成することもできます。

そのためには、「新規ページを追加」ボタンをクリックするだけです。その後、新しいページに名前を付けて、「下書きを作成」をクリックします。

FSEで新しいページを追加する

そこから、ページのカスタマイズを開始できます。

既存のページを編集するには、変更したいページを選択します。この場合、「プライバシーポリシー」です。

FSEでページを編集する

フルサイトエディターを使用してページを編集することは、ブロックエディターを使用することと基本的に同じです。

これに関する詳細については、いくつかのガイドをご用意しています。これらのガイドから始めることができます。

FSEでWordPressテンプレートを編集する方法

WordPressのフルサイトエディターの「テンプレート」ページには、テーマが提供するテンプレートのリストが表示されます。

FSEのテンプレートページ

WordPressのフルサイト編集では、テンプレートは、ウェブサイト上の特定の種類のページをデザインするために使用できる事前定義された構造です。

例えば、多くのWordPressブロックテーマには、シングル投稿テンプレートが付属しています。このページテンプレートはブログ投稿ページのレイアウトを定義するため、そのウェブサイト上のすべてのブログ投稿はこのテンプレートを使用します。

この機能は、WordPressブログに複数のページがあり、それらの多くで同じレイアウトが使用されている場合に役立ちます。

これらのページで同じ要素を変更する必要があるが、個別に編集したくない場合は、テンプレートを変更するだけで済みます。すると、そのテンプレートを使用しているすべてのページに変更が適用されます。

カスタムテンプレートを作成したい場合は、「新規テンプレートを追加」ボタンを選択します。

ここから、新しいテンプレートを適用するページを選択します。

または、下にスクロールして「カスタムテンプレート」を選択することもできます。

WordPressフルサイト編集でカスタマイズするためのページテンプレートの選択

この段階で、編集インターフェイスが表示され、ブロックを追加できる空白のページが表示されます。ステップバイステップの例については、ブロックエディターを使用してカスタムホームページテンプレートを作成する方法に関するガイドをご覧ください。

既存のテンプレートを編集するには、それをクリックするだけです。

FSEでテンプレートを編集する

これで、ブロックエディターを使用して他の要素を編集するように、ページテンプレートを編集できます。新しいブロックを追加したり、ブロックまたはページの設定をカスタマイズしたりできます。

ブロックエディターを使用してページまたは投稿を編集していて、フルサイト編集モードに移行せずにテンプレートを変更したい場合は、それも可能です。

単純にページまたは投稿に移動し、ページまたは投稿設定サイドバーを開きます。次に、「概要」内の「テンプレート」セクションを見つけてクリックします。

テンプレートの編集ページをクリックして、WordPressフルサイトエディターのテンプレートにアクセスします

ドロップダウンメニューを使用してページテンプレートを変更したり、「テンプレートを編集」をクリックしてすぐにテンプレートエディターにアクセスしたりできます。または、「テンプレートを追加」ボタンをクリックして、ゼロから新しいカスタムテンプレートを作成することもできます。

FSEでWordPressパターンを編集する方法

WordPress フルサイト編集では、パターンは、ページや投稿に挿入できるすぐに使えるブロックのセットです。パターンを作成すると、ブロックディレクトリに追加され、ウェブサイトの任意の投稿やページに簡単に追加できます。

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

パターンは、複数のページや投稿で同じブロックセットを使用する必要がある場合に役立ちます。多くの人が、カスタムのコールトゥアクションバナーや、ブログ投稿の画像ギャラリーの設計に使用しています。

さらに、これらのパターンを「同期済み」にするオプションもあります。これは、パターンが複数の投稿またはページで使用されている場合、行った変更がパターンが使用されているすべてのインスタンスに自動的に適用されることを意味します。

WordPressのフルサイトエディターの「パターン」ページには、パターンのコレクションが表示されます。

FSE のパターンページ

フォルダアイコンが付いたメニューには、選択したテーマが提供するデフォルトのパターンのリストが含まれています。これらはロックされており、編集できません。

その下には、「テンプレートパーツ」があります。これは、ウェブサイトの構造で使用される特別な種類のパターンであり、必ずしもページコンテンツの一部ではありません。例としては、ウェブサイトのヘッダー、フッター、コメントセクションなどがあります。これらはすべてカスタマイズ可能です。

新しいパターンを追加するには、左側のパネルにある「+ パターンを作成」ボタンをクリックし、新しいパターンまたはテンプレートパートの作成を選択します。

FSEで新しいパターンまたはテンプレートパーツを追加する

どちらを選ぶべきか迷っている場合は、パターンは、ページや投稿のコンテンツに追加できる再利用可能なブロックに似ています。一方、テンプレートパーツは、ヘッダー、フッター、サイドバーなど、テンプレート構造の一部であるブロックのセットのようなものです。

テンプレートパーツは自動的に同期機能を持ち、それに対して行われたすべての変更はウェブサイト全体に適用されます。パーツはヘッダーやフッターのようなものです。

一方、パターンは同期することも同期しないこともできます。

その後、テンプレートパーツまたはパターンの名前を付け、同期するかどうかを選択する必要があります。それが完了したら、「作成」をクリックするだけで、編集インターフェイスにリダイレクトされます。

WordPressフルサイトエディターで新しいパターンに名前を付ける

パターンの作成と使用に関する詳細については、WordPressブロックパターンの使用方法に関する初心者ガイドをご覧ください。

ページやテンプレートを編集する際に、ブロックパターンやテンプレートパーツを調整したい場合もあります。パターンメニューに移動せずに、エディター内で直接行うことができます。

パターンまたはテンプレートパーツにカーソルを合わせます。その後、「編集」をクリックします。その後、その要素のフルサイトエディターにリダイレクトされます。

ブロックエディターを使用して投稿またはページを編集しているときに、パターンまたはテンプレートパーツの編集をクリックする

WordPressフルサイト編集を最大限に活用するためのヒント

フルサイト編集の基本に慣れたところで、最大限に活用するためのヒントとコツについて説明しましょう。

コマンド検索バーを使用する

コマンド検索バーを使用すると、ウェブサイトの特定の場所にすばやく移動したり、Webデザインを編集するためのアクションを実行したりできます。

この機能は、さまざまなボタンやメニューをたどるのではなく、サイト全体エディターで特定の簡単な設定を見つけたい場合に役立ちます。

フルサイトエディターのメインメニューにいる場合は、虫眼鏡アイコンをクリックして使用できます。

WordPressフルサイトエディターで虫眼鏡アイコンをクリックする

または、編集インターフェイスでキーボードの Ctrl/Command+K を押すこともできます。

次に、検索または実行したい内容を入力するだけです。例えば、WordPressダッシュボードに戻ることなく、新しい投稿やページを追加できます。

コマンド検索バーを使用して新しい投稿またはページを追加する

リストビューでブロックを管理する

ページ、テンプレート、またはパターンを編集しているときに、あまりにも多くのブロックを追加してしまい、すべてを把握するのが困難になることがあります。

ここでリストビューが役立ちます。この機能を使用すると、ページ、テンプレート、またはパターンに追加されたすべてのブロックを確認できます。これには、別の親ブロックにネストされているブロックも含まれます。

リスト表示機能を有効にするには、エディターのメニューバーの左上にある3本線のボタンをクリックするだけです。これにより、そのページ、投稿、テンプレート、またはパターンのすべてのブロックが表示されます。

グループ、行、列などに含まれる特定のブロックを設定したい場合は、リストビューからそのブロックをクリックするだけです。そこからブロックが選択され、ツールバーが表示されます。

フルサイトエディターでリストビューをアクティブにする

例については、上記のスクリーンショットをご覧ください。ここでは、フィーチャー画像ブロックを編集したいのですが、クリックするたびにクエリーループブロックが代わりに選択されてしまいます。

リストビューを使用すると、クエリーループブロック内にネストされているすべてのブロックを確認し、実際に編集したいブロックを選択できます。

キーボードショートカットに慣れる

ウェブサイトの編集をより速く行いたい場合は、キーボードショートカットを学ぶことを検討してください。ショートカットを使用すると、マウスを動かして行ったり来たりするのではなく、キーボードを使用してさまざまなボタンや設定を移動できます。

ブロックコンテンツエディターで使用されるショートカットは、フルサイト編集でも機能します。詳細については、WordPressキーボードショートカットのリストを確認してください。

チャイルドブロックテーマを作成する

WordPressテーマを使用する際の問題の1つは、コアテーマファイルをカスタマイズした場合、それらの変更はテーマの更新中に失われる可能性があることです。ここで子ブロックテーマが役立ちます。

子ブロックテーマは、親ブロックテーマのすべてのスタイルと機能を継承するため、コアテーマファイルを変更せずにカスタマイズを行うことができます。これにより、カスタマイズを失うことなく、将来的に親テーマを簡単に更新できます。

以前にクラシックテーマの子テーマを作成したことがある場合、子ブロックテーマの作成は少し異なります。

これは、ブロックテーマがテーマ情報を保存するためにtheme.jsonファイルと、ウェブサイトのスタイルを設定するためのCSSを使用するためです。子ブロックテーマで親テーマのPHPファイルを変更する必要はありません。

幸いなことに、子ブロックテーマの作成は、思っているほど複雑ではありません。私たちが発見した最も簡単な方法は、Create Block Themeプラグインを使用することです。

Create Block Themeで子テーマを作成する

Create Block Theme プラグインは、既存のテーマの子ブロックテーマを簡単に作成できるだけでなく、ゼロから独自のブロックテーマを作成するための優れたツールでもあります。

これにより、既成のテーマに依存することなく、ウェブサイトのデザインと機能性を完全に制御できます。

WordPressで子テーマを作成する方法の詳細については、子テーマの作成方法に関するガイドをご覧ください。

WordPressフルサイト編集の制限事項

WordPressのフルサイト編集は、新しいWordPressユーザーがウェブサイトをカスタマイズするのを間違いなく容易にしました。それでも、この機能にはいくつかの欠点があります。

まず、それを使用するにはブロックテーマが必要です。多くの新しいブロックテーマが利用可能ですが、通常のWordPressテーマほど多くはありません。WooCommerceを使用している場合、テーマの選択肢はさらに限られる可能性があります。

その他の点では、一部のWordPressユーザーは、ブロックテーマにウィジェットがないという事実を好んでいません。ブロックは配置においてより柔軟性を提供しますが、一部のユーザーは指定された領域でのドラッグアンドドロップウィジェットのシンプルさを好みます。

さらに、テーマの切り替えは手間がかかる場合があります。テーマを再度設定し、WordPressプラグインとの互換性の問題がないか確認する必要があるためです。

さらに、カスタマイズの多くは、WordPressテーマが提供するオプションに依存します。これにより、サイト構築における創造性が制限される可能性があります。

フルサイト編集の代替手段の使い方

WordPressのフルサイト編集の代替を探しているなら、SeedProdをチェックできます。これは、あらゆる種類のウェブサイトを作成するための300以上のモバイルフレンドリーなテンプレートを備えた、強力なページビルダープラグインおよびテーマビルダーです。

ドラッグ&ドロップビルダーは使いやすく、コンテンツ要素には90以上のページブロックが用意されています。また、コンバージョンに最適化されたコールトゥアクションのような数十の事前構築済みセクションもあり、これらの要素を最初からデザインする必要はありません

SeedProdテーマビルダー

SeedProdのレビューと、カスタムWordPressテーマの作成方法に関する記事で詳細をご確認いただけます。

この初心者向けガイドが、WordPressのフルサイト編集(FSE)の使い方を学ぶのに役立ったことを願っています。また、WordPressブロックエディターの一般的な問題とその解決方法に関する記事や、初心者向けWordPress SEOの究極ガイドも参照することをお勧めします。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterFacebookでもフォローできます。

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

読者とのインタラクション

15 CommentsLeave a Reply

  1. WordPressのフルサイト編集に関するこのリソースをありがとうございます。私のようなウェブ開発者にとって、WordPressブロックエディターが提供する柔軟性は気に入っています。また、パターンを使用できるという事実は、計り知れないメリットと時間節約になります。WordPressのフルサイト編集をマスターできる人は、簡単かつ効率的に見事なカスタムウェブサイトを作成できるようになります。共有していただき感謝します。

  2. 包括的なガイドをありがとうございます。
    ナビゲーション内の項目(ページ、カテゴリ、サブメニュー、カスタムリンク)の近くにカスタムアイコン(例:Font Awesome)を追加する方法を探しています。それは可能ですか?

  3. 私にとって、クラシックエディターは今でも大好きです。一部のECプラグインやその他の推奨事項でもクラシックエディターを使用しています。

    Gutenbergは非常に遅く、もっさりしており、モバイルではまったくフレンドリーではありません。

    Gutenberg の代わりに Seedprod や Elementor のようなページビルダーを使用する方が好きです。

    Gutenbergのその部分については、コミュニティがフレンドリーで、高速で、モバイルに最適化するために、まだ多くの作業が必要です。

      • しかし、私が考えていることの1つは、いつかGutenbergが十分に開発され、使いやすく高速になれば、ページビルダーを追い出すかもしれないということです。

        コミュニティに注目されれば、ブロックエディターは最高になるはずです。将来的にそうなるかもしれません。

        これは、WordPressにまだ未来があるという希望を与えてくれます。

        • WordPressに関しては、Gutenbergが未来です。
          WordPress開発者に関しては、彼らはWordPressを可能な限りアクセス可能で利用可能なオープンソースにするために、あらゆる努力をしています。
          複雑さに関しては、私たちは長い間クラシックエディターの使用に慣れてきました。費やされた時間と労力を考えると、それに傾倒するのは自然なことです。

  4. フルサイト編集を使ってウェブサイトを編集することを長い間避けていました。その理由は単純です。Gutenbergでの作業が好きではないため、フルサイト編集での作業もGutenbergでの作業と同じくらい不快だろうと自動的に思い込んでいました。しかし、この記事を読んだ後、この可能性にチャンスを与え、より深く探求してみるかもしれません。wpbeginnerのおかげで、Gutenbergでかなりのことを制御できるようになり、どこで何を見つけ、具体的に何をどこに設定すればよいかをようやく少しずつ慣れてきました。

  5. コーディングスキルがなくてもフルサイト編集はできますか?サイトに問題が発生するのを恐れて、WP管理ダッシュボードでこのアクションを常に無視していましたが、今ではいつものように、編集が視覚的であれば、サイトのグローバル設定の一部を編集してみます。

  6. サイトを軽量にし、余分なコードを必要としないフルサイト編集は、サイトの利用に非常に適しています。ページ構築のために外部プラグインをインストールすると、タスクは簡単になりますが、同時にページ速度と読み込みの点で何らかのトレードオフが生じます。このフルサイトエディターは、読み込み時間が速く効率的な、非常に高速なブログの構築に役立つと思います。
    フルサイト編集について教えていただきありがとうございます。

    • それは必ずしもそうではありません。それは常にウェブサイトの作成者次第です。私はElementorで約7つのウェブサイトを構築しましたが、pagespeed Insightではすべて98から99の速度が出ています。ページビルダーではなく、ウェブサイト全体の最適化です。残念ながら、フルサイト編集は高速なウェブサイトを保証するものではありません。ウェブを複雑な単位として考慮することが重要です。

  7. すごい、これは本当に強力そうですね!Elementorビルダーの答えになると思いますか?Elementorの使用はウェブサイトを非常に遅くする可能性があるため悪いと聞いたことがあります。

    • It heavily depends on how you design the site for speed concerns, the plugin itself should not cause a massive performance drop. While the full site editor is improving we would recommend taking a look at the final section of the article for our opinion :)

      管理者

返信する

コメントを残していただきありがとうございます。すべてのコメントは、当社のコメントポリシーに従ってモデレーションされますので、ご了承ください。メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。