ガイド/サイトをカスタマイズ/テーマ/テーマ、テンプレート、ページ

テーマ、テンプレート、ページ

WordPress でサイトを構築すると、テーマテンプレートコンテンツという3つのレイヤーが連携して、訪問者に表示される内容を作り上げます。このガイドでは、WordPress で最も一般的なテーマタイプであるブロックテーマでこれらのレイヤーがどのように機能するかを説明します。

テーマ

テーマはサイトの全体的な外観です。すべてのページに適用されるデフォルトの色、フォント、間隔、レイアウトを設定します。テーマを有効化することは、サイトのデザインの出発点を選択することを意味します。

Several theme thumbnails in the Theme Gallery.
「外観」→「テーマ」にあるテーマショーケース。

最適なテーマを選ぶ方法を参照してください。

テンプレート

テーマ内では、テンプレートが特定のタイプのコンテンツのレイアウトを制御します。サイトには、固定ページ、投稿、ホームページ、アーカイブリストなどのテンプレートが個別に用意されています。各テンプレートは、ヘッダー、フッター、コンテンツエリアなどの要素が表示される場所を定義します。

テンプレートを編集すると、そのテンプレートが使用されているすべての場所に変更が適用されます。たとえば、固定ページテンプレートのヘッダーを変更すると、サイトでそのテンプレートを使用するすべてのページに更新が反映されます。

テンプレートの表示と編集は、同じサイトエディター「外観」→「エディター」→「テンプレート」から行えます。

The Site Editor open to the Templates menu item and template thumbnails appear on the right.

サイトのテンプレートを扱う方法を参照してください。

コンテンツ

固定ページと投稿は、サイトを自分らしくカスタマイズするテキスト、画像、ブロックといった独自コンテンツを追加する場所です。このコンテンツは、テンプレートのコンテンツエリア内に表示されます。テンプレートは周囲の構造 (ヘッダー、フッター、サイドバー) を指定し、コンテンツはその間のスペースを埋めます。

最も頻繁に編集するレイヤーです。ダッシュボードで、「固定ページ」から固定ページを編集し、「投稿」から投稿を編集します。

An about us page open in the editor with the list view and page sidebar both open.

固定ページ投稿の扱い方を参照してください。

レイヤーが連携する仕組み

3つのレイヤーが連携して機能する仕組みは次のとおりです: テーマで全体的なデザインを設定し、テンプレートで各タイプのコンテンツのレイアウトを定義し、固定ページと投稿にコンテンツを表示します。各レイヤーは、その上のレイヤーの内側にネストされます。

テーマを選択する

Several theme thumbnails in the Theme Gallery.

テンプレートとレイアウトをカスタマイズする

The Site Editor open to the Templates menu item and template thumbnails appear on the right.

コンテンツを作成する

An about us page open in the editor with the list view and page sidebar both open.

訪問者が固定ページまたは投稿の1つを表示すると、WordPress は3つのレイヤーすべてを組み合わせます。テーマのスタイルに従い、一致するテンプレートのレイアウトを適用し、作成したコンテンツを組み込みます。

変更を加える場所

ブロックテーマを使用する際は、編集すべきレイヤーを把握することが重要です。

  • サイトの全体的な外観を変更するには、「外観」→「テーマ」テーマを選択します。
  • ヘッダー、フッター、ページレイアウトのいずれかを変更するには、「外観」→「エディター」→「テンプレート」テンプレートを編集します。
  • 特定のページのテキスト、画像、ブロックのいずれかを変更するには、「ページ」からページを選択して、ページを編集します。

⚠️

テンプレートのコンテンツに注意してください。よくある間違いは、ページ固有のコンテンツ (テキストや画像など) をテンプレートに直接追加することです。テンプレートは共有されるため、そのコンテンツは対象のテンプレートを使用するすべてのページに表示されます。このような場合は、「ページではなくテンプレートに追加されたコンテンツを修正する」を参照してください。

次のステップ

これらのガイドでは、システムの各部分について詳しく説明しています。

Copied to clipboard!