フルサイト編集を使用すると、サイトエディターから直接、さまざまなブロック機能を使って、ヘッダーからフッターまでWordPressサイトのあらゆる部分を構築できます。
サイトエディターでは、テンプレートやテンプレートパーツを変更し、サイト全体のスタイルをカスタマイズできます。サイトエディターが登場する前は、サイトの主要な要素（ヘッダー、サイドバー、フッターなど）のデザインはテーマによって決められていました。サイトエディターを使えば、サイトの構造やスタイルを自分で決められます。ページや投稿のコンテンツ作成だけでなく、テンプレートを使ってサイト全体の外観や雰囲気を作成することもできます。
テンプレートエディターでは、各投稿やページにテンプレートを編集、作成、割り当てることができます。また、通常のWordPressブロックエディターを使って、投稿やページ用のカスタムテンプレートをデザインできます。
目的
この学習を終えると、参加者は次のことができるようになります。
- サイトエディターとテンプレートエディターの機能の違いを説明する。
- サイトエディターを通じて、テンプレート、テンプレートパーツ、グローバルスタイル設定を管理する。
- テンプレートエディターを通じて、各投稿やページにテンプレートを編集、作成、割り当てる。
必要なスキル
参加者は、次の事項に慣れていると、この学習を最大限に活用できます。
関連する習熟度確認の質問
- テンプレートの機能を説明できますか？
- 投稿またはページにテンプレートを割り当てる方法を理解していますか？
必要な教材
プレゼンター向けメモ
- この学習を始める前に、ローカルサイトを作成しておくと役立ちます。
- サイトエディターとテンプレートエディターの概要
- テンプレート
- テンプレートパーツ
教材の概要
- サイトエディターのレイアウトと機能（テンプレート、テンプレートパーツ、スタイル設定）の概要を説明する。
- スタイル設定を使ってサイト全体のスタイルを変更する方法を示す。
- テンプレートが、ウェブページのデザインやページ全体のレイアウトを作成するために組み合わせられたブロックの集合であることを説明する。
- テンプレートの動的な部分（コンテンツ）と再利用可能な部分（静的なパーツ）の違いを説明する。
- 既存のテンプレートパーツを変更し、新しいものを作成する方法を実演する。
- テンプレートエディターを使って各投稿やページのテンプレートを編集、作成、割り当てる方法を実演する。
演習
- スタイル設定を使って、サイトのフォント、背景色、テキストの色を変更します。
- 既存のテンプレートを編集し、ヘッダーとフッターのテンプレートパーツを変更します。
- カスタムテンプレートを作成し、ページで使用します。
評価
サイトエディターでは、次の機能にアクセスできます。該当するものをすべて選択してください。
- テンプレート
- テンプレートパーツ
- ページまたは投稿の編集
- グローバルスタイル設定
回答：1. テンプレート、2. テンプレートパーツ、4. グローバルスタイル設定
テンプレートエディターでは、次のことができます…
- ブロックを使ってサイト全体を構築する。
- 各投稿やページのテンプレートを編集、作成、割り当てる。
回答：2. 各投稿やページのテンプレートを編集、作成、割り当てる。
テンプレートを管理するとき、コンテンツは投稿コンテンツブロックを通じて表示されます。
- 正しい
- 誤り
回答：1. 正しい
テンプレートを作成するとき…
- 再利用可能な部分と動的な部分を分離しない場合に、最も効果的に使用できます。
- 再利用可能な部分と動的な部分を分離した場合に、最も効果的に使用できます。
回答：2. 再利用可能な部分と動的な部分を分離した場合に、最も効果的に使用できます。
その他の参考資料
- サイトエディター
- テンプレートエディター
- ブロックエディターハンドブック：フルサイト編集テンプレート
- ブロックエディターハンドブック：テンプレート階層
- テーマ開発者ハンドブック：テンプレートとテンプレートパーツ
学習例
今日は、サイトエディターとテンプレートエディターについて詳しく学びます。Twenty Twenty-Twoなどのブロックテーマをインストールし、フルサイト編集の旅を始める準備ができている場合、カスタマイザーが表示されなくなっていることに気づくでしょう。しかし、「外観」に移動すると、「エディター」という新しいオプションが表示されます。そして「エディター」をクリックすると、サイトエディターに移動します。
ここでは、テンプレートやテンプレートパーツを変更し、サイト全体のスタイルもカスタマイズできます。サイトエディターには、左側に表示される「テンプレート一覧」があり、ユーザーはサイトの各部分、つまりホームページテンプレート、テンプレート、その他すべてのテンプレートパーツを確認できます。これはサイトエディターの一連のセクションの重要な部分であり、基本的にサイト全体のデザインを編集できるようになります。表示内容を切り替えるには、左上にあるWordPressアイコンまたはサイトアイコンをクリックします。すると、ダッシュボードに戻る、サイト（前述のホームページテンプレート）、テンプレート一覧、テンプレートパーツ一覧のいずれかを選択できます。
「スタイル」アイコンをクリックすると、サイト全体のタイポグラフィと色を変更できます。さらに下を見ると、サイト全体で特定のブロックの外観をカスタマイズするオプションもあります。なお、編集中のテンプレートやテンプレートパーツに関係なく、スタイル設定は利用できます。「タイポグラフィ」をクリックすると、テキストとリンクのタイポグラフィ設定を管理できます。ワンクリックで、サイトの背景色やテキストとリンクの色を変更できます。右上には「ウェブサイト全体の背景色またはグラデーションを設定」と表示されます。
右上にある縦三点リーダーをクリックすると、エディター設定でいくつかの環境設定を変更できます。
- スポットライトモード：選択したブロックを強調表示し、その他のコンテンツを薄く表示します。
- ボタンのテキストラベルを表示：ボタンにアイコンではなくテキストを表示します。
- リスト表示を常に開く：デフォルトでリスト表示のブロックサイドバーを開きます。
サイトエディターでテンプレートを管理するにはどうすればよいでしょうか？左上のWordPressアイコンをクリックし、「テンプレート」を開きます。テンプレートとは、ウェブページのデザインを作成するために組み合わせられたブロックの集合です。「ページ」テンプレートを開いてみましょう。テンプレートはページ全体のレイアウトだと言えます。ヘッダー領域、コンテンツ、フッターなどが含まれます。「リスト表示」をクリックします。上部にはヘッダー、ページ下部にはフッター、中央には投稿コンテンツブロックが表示されます。テンプレートを作成するときは、再利用可能な部分と動的な部分を分離すると最も効果的です。動的な部分は、そのテンプレートを使用する各ページで変化するコンテンツ部分です。再利用可能な部分は、同じ状態を保つテンプレートの静的な部分です。テンプレートはコンテンツを投稿するためのものではありません。投稿またはページ用のテンプレートは、投稿コンテンツブロックを使ってコンテンツを表示します。テンプレートはその名のとおり、1つまたは複数のページや投稿で使用できるデザインテンプレートです。
新しいウェブサイトを構築し始めるときは、既存のテンプレートを編集したり、新しいテンプレートを追加したりできます。カスタムテンプレートを作成することもできます。テンプレートエディターを使って、各ページや投稿にテンプレートを割り当てることを忘れないでください。
次に、テンプレートパーツの管理について詳しく説明します。補足情報として、テンプレートパーツはヘッダー、フッター、サイドバーなどの領域を作成するのに最適です。
テンプレートパーツを開くと、自分で作成したテンプレートパーツと、使用中のテーマがあらかじめ提供しているテンプレートパーツが表示されます。リストの下部にある4つのテンプレートパーツは、Twenty Twenty-Twoテーマが提供するテンプレートパーツです。テンプレートパーツのアイコンの上に点が表示されている場合、そのテンプレートパーツが変更されていることがわかります。上部にあるページテンプレートは、私が作成したテンプレートパーツです。
最後に、新しいテンプレートパーツを追加することもできます。新しいテンプレートパーツを追加するときは、一般、ヘッダー、フッターのいずれかを選択できます。一般テンプレートパーツは特定の領域に結び付けられていません。テンプレートパーツには、内容がわかる名前を付けることを忘れないでください。
テンプレートパーツブロックを追加する方法を見てみましょう。コンテンツが見つからないときに表示される404テンプレートを開きます。ご覧のとおり、現在はヘッダーがありません。そこで「リスト表示」を開きます。グループブロックの上にテンプレートパーツブロックを挿入します。テンプレートパーツブロックを選択すると、既存のテンプレートパーツブロックを選択するか、新しいものを作成できます。すでに作成してある既存のものを選択してみましょう。
では、テンプレートエディターについて説明します。テンプレートエディターでは、各投稿やページのテンプレートを編集、作成、割り当てることができます。実際に操作しながら、その仕組みを見てみましょう。左上のWordPressアイコンをクリックしてダッシュボードに戻ります。「固定ページ」をクリックし、既存のページを1つ開きます。右側の設定サイドバーを見ると、このページに割り当てられているテンプレートはデフォルトテンプレート、つまりページテンプレートであることがわかります。利用可能な別のテンプレートを割り当てることもできます。準備ができたら、選択したテンプレートを編集できます。
「編集」をクリックすると、テンプレート編集モードに移動します。上部のバーにテンプレート名が表示されていれば、テンプレート編集モードにいることがわかります。もう1つの特徴は、編集中のテンプレートの周囲に濃い色の枠が表示されることです。ただし、3つ目の選択肢として、新しいカスタムテンプレートを作成することもできます。「テンプレートの用途を説明してください。例：全幅」と表示され、カスタムテンプレートは任意の投稿またはページに適用できます。ランディングページ用、あるいはポートフォリオページ用にカスタムテンプレートを作成してもよいでしょう。
「作成」をクリックすると、ヘッダーの見た目が異なり、フッターがないことがわかります。これで、独自のカスタムテンプレートを作成するための空白のキャンバスが用意されました。念のためお伝えすると、テンプレート編集モードでは、各投稿またはページのコンテンツと、その投稿またはページで使用されているテンプレートを切り替えて編集できます。
これで、サイトエディターとテンプレートエディターの使い方をよりよく理解できたと思います。
学習のまとめ