Web Design Leaves

サイトエディターでの変更の保存

サイトエディターでテンプレートに変更を加えて「保存」をクリックすると変更はデータベースに保存され、データベースに保存されたユーザー作成テンプレートとなり、テンプレートファイルを上書きします。

管理画面の「外観」→「エディター」→「テンプレート」で、変更を保存したテンプレートのオプションボタン（）をクリックすると、「リセット」という項目が表示されます。

「リセット」をクリックすると、以下のモーダルが表示され、さらにここで「リセット」をクリックすると、テンプレートに加えた変更がリセット（クリア）されます。

スタイル

スタイルは基本的に theme.json や style.css などで管理されるので、テンプレートと関係ありせんが、サイトエディターでスタイルを変更して保存すると、どうなるかを確認してみました。

以下は、カスタムカラーを追加して、テキストに適用した例です。ここで「保存」をクリックすると、

以下が表示され、「保存」をクリックすると、グローバルスタイルに Custom Styles として（？）データベースに保存されます。

出力されるコードを確認すると、フロントエンド側では head 要素内の <style id='global-styles-inline-css'>〜</style> に カスタム CSS として color: var(--wp--preset--color--custom-dark-green) などのように出力されています。

追加した（変更を加えた）スタイルをリセット（クリア）するには、スタイルタブのオプションボタン（）をクリックして表示される「スタイルをリセット」をクリックします。そして「保存」をクリックします。

グローバルスタイルの変更をテーマの theme.json に反映させるには、Create Block Theme プラグインを使うのが簡単です。

フロントページ階層

フロントページテンプレートの階層は管理画面の「設定」→「表示設定」の「ホームページの表示」ででユーザーが何を選択したかによって変わります。

「ホームページの表示」に「最新の投稿」を選択した場合、階層は次のようになります。

1. front-page.html
2. ホーム階層

「ホームページの表示」に「固定ページ」を選択した場合、階層は次のようになります。

1. front-page.html
2. 固定ページ階層

※「ホームページの表示」設定に関係なく、front-page.html テンプレートが常に優先されます。

ホーム階層

名前は「ホーム」ですが、ホームテンプレートは必ずしもサイトのホームページに使用されるわけではありません。WordPress のデフォルトでは、最新のブログ投稿が表示されるページ (ブログ投稿のインデックス) を指します。

フロントページテンプレートの階層と同様、ホームテンプレートも、管理画面の「設定」→「表示設定」の「ホームページの表示」設定に依存します。

「ホームページの表示」に「最新の投稿」を選択した場合、階層は次のようになります。

1. front-page.html
2. home.html
3. index.html

「ホームページの表示」設定で「固定ページ」を選択し、「投稿ページ」設定で固定ページを選択した場合、ホームテンプレートの階層は選択した投稿ページに適用され、階層は次のようになります。

1. home.html
2. index.html

個別（単一）ページ階層

単一の投稿や固定ページ、添付ファイルページ、またはカスタム投稿タイプのエントリにアクセスすると、WordPress はクエリされた投稿に基づいてテンプレートを見つけようとします。

すべての単一のテンプレートはカスタムテンプレートを利用できます。以下ではカスタムテンプレートは{custom_template}.html としています（custom_template の部分は任意の名前）。

個別投稿階層

単一の投稿（個別投稿）やカスタム投稿タイプにアクセスしたときには、次の階層を使用してテンプレートが決定されます。

1. {custom_template}.html
2. single-{post_type}-{post_name}.html
3. single-{post_type}.html
4. single.html
5. singular.html
6. index.html

例えば、投稿タイプが product のカスタム投稿タイプで、記事のスラッグ（投稿名）が blue-shirt の場合、WordPress は次の階層を使用します。

1. {custom_template}.html
2. single-product-blue-shirt.html
3. single-product.html
4. single.html
5. singular.html
6. index.html

固定ページ階層

単一の固定ページにアクセスしたときには、次の階層を使用してテンプレートが決定されます。

1. {custom_template}.html
2. page-{post_name}.html
3. page-{post_id}.html
4. page.html
5. index.html

例えば、投稿名 (スラッグ) が about-me で ID が 200 のページでは、次の階層が使用されます。

1. {custom_template}.html
2. page-about-me.html
3. page-200.html
4. page.html
5. index.html

添付ファイル（メディア）階層

単一の添付ファイル (メディアファイルページ) にアクセスすると、WordPress はデフォルトの個別投稿のテンプレート階層の先頭にいくつかのテンプレートを追加します。以下が添付ファイル（メディア）のテンプレート階層です。

1. {mime_type}-{sub_type}.html
2. {sub_type}.html
3. {mime_type}.html
4. attachment.html
5. 個別投稿階層

MIME タイプが image/jpeg の添付ファイルの場合、image 部分が {mime_type} になり、jpeg 部分が {sub_type} になります。

例えば、MIME タイプが image/jpeg で red-bird という投稿名 (スラッグ) の添付ファイルの場合、完全なテンプレート階層は次のようになります。

1. image-jpeg.html
2. jpeg.html
3. image.html
4. attachment.html
5. {custom_template}.html
6. single-attachment-red-bird.html
7. single-attachment.html
8. single.html
9. singular.html
10. index.html

WordPress6.4から添付ファイルページが無効に

WordPress6.4 未満では、メディアにアップロードしたファイルに対して自動で添付ファイルページが作成される仕様になっていますが、WordPress6.4 からは新規インストールした環境でのみ、この添付ファイルページが無効化されています（バージョンを6.4にアップデートしても、添付ファイルページは無効化されません）。詳細は以下のページで確認できます。

Changes to attachment pages

プライバシーポリシーページ階層

プライバシーポリシーページは特別なケースで、WordPress は通常の固定ページテンプレート階層を調べる前に privacy-policy.html テンプレートを探します。テンプレート階層は次のとおりです。

1. privacy-policy.html
2. 固定ページ階層

カスタムタクソノミー階層

カスタムタクソノミーを使用する場合、タクソノミーの各タームには独自のアーカイブページがあります。カスタムタクソノミーのテンプレートの階層は次のとおりです。

1. taxonomy-{taxonomy_slug}-{term_slug}.html
2. taxonomy-{taxonomy_slug}.html
3. taxonomy.html
4. archive.html
5. index.html

例えば、カスタムタクソノミー名（タクソノミーのスラッグ）が location で、ターム名（タームのスラッグ）が alabama の場合、テンプレート階層は次のようになります。

1. taxonomy-location-alabama.html
2. taxonomy-location.html
3. taxonomy.html
4. archive.html
5. index.html

カテゴリー階層

カテゴリアーカイブページでは、次のテンプレート階層が使用されます。

1. category-{slug}.html
2. category-{id}.html
3. category.html
4. archive.html
5. index.html

例えば、カテゴリーのスラッグ（カテゴリー名）が news で、カテゴリー ID が 123 のカテゴリアーアーカイブを表示する場合、テンプレート階層は次のようになります。

1. category-news.html
2. category-123.html
3. category.html
4. archive.html
5. index.html

タグ階層

タグアーカイブページでは、次のテンプレート階層が使用されます。

1. tag-{slug}.html
2. tag-{id}.html
3. tag.html
4. archive.html
5. index.html

例えば、タグのスラッグ（タグ名）が flowers で、タグ ID が 456 のタグアーアーカイブを表示する場合、テンプレート階層は次のようになります。

1. tag-flowers.html
2. tag-456.html
3. tag.html
4. archive.html
5. index.html

カスタム投稿アーカイブ階層

カスタム投稿タイプには、アーカイブページを設定できます。これは基本的にその投稿タイプのインデックスページとして機能し、デフォルトで最新の投稿が一覧表示されます。カスタム投稿タイプのアーカイブのテンプレートの階層は次のようになります。

1. archive-{post_type}.html
2. archive.html
3. index.html

例えば、カスタム投稿タイプの投稿名（スラッグ）が portfolio_project の場合、そのアーカイブページのテンプレート階層は次のようになります。

1. archive-portfolio_project.html
2. archive.html
3. index.html

デフォルトの post 投稿タイプ（投稿）のアーカイブページはホーム階層を使用し、デフォルトの固定ページおよび添付ファイル投稿タイプにはアーカイブビューがありません。

著者（投稿者）アーカイブ階層

著者アーカイブのテンプレート階層は次のようになります。

1. author-{user_nicename}.html
2. author-{user_id}.html
3. author.html
4. archive.html
5. index.html

例えば、nicename が matt で ID が 333 のユーザーの著者アーカイブページの場合、著者アーカイブテンプレートの階層は次のようになります。

1. author-matt.html
2. author-333.html
3. author.html
4. archive.html
5. index.html

日付アーカイブ階層

日付または日付ベースのアーカイブページ (例: 年、月、週のアーカイブ) を表示する場合、テンプレートの階層は次のようになります。

1. date.html
2. archive.html
3. index.html

検索階層

検索テンプレート階層は、ウェブサイトで検索結果を表示するときに使用されます。複数の投稿をリストする点でアーカイブに似ていますが、技術的にはアーカイブ ページではありません。検索結果のテンプレート階層は次のとおりです。

1. search.html
2. index.html

404 階層

ウェブサイト上で存在しない URL にアクセスすると、WordPress は 404 テンプレートを探します。404 ページのテンプレート階層は次のとおりです。

1. 404.html
2. index.html

埋め込み（embed）階層

埋め込みテンプレートは、あるサイトが WordPress サイトの投稿を埋め込むときに使用されます。WordPress は出力を <iframe> でラップし、テンプレートに従って埋め込まれたコンテンツを表示します。

※ 埋め込みテンプレートはブロックテンプレートシステムではサポートされていません。カスタム埋め込みテンプレートを作成して使用するには、テンプレートをテーマのルートフォルダーに配置し、PHP ファイル拡張子（.php）を使用する必要があります。

埋め込みコンテンツのテンプレート階層は次のとおりです。

1. embed-{post_type}-{post_format}.php
2. embed-{post_type}.php
3. embed.php

テーマにカスタム埋め込みテンプレートが含まれていない場合、WordPress はコアにバンドルされている /wp-includes/theme-compat/embed.php テンプレートを使用します。他のテンプレート タイプのように、インデックス テンプレートにフォールバックすることはありません。

投稿タイプが投稿（post）、投稿フォーマットが画像（image）の投稿を埋め込む場合、階層は次のようになります。

1. embed-post-image.php
2. embed-post.php
3. embed.php

テンプレートパーツの登録

必須ではありませんが、ほとんどの場合、theme.json 経由でテンプレートパーツを登録する必要があります。そうすることで、サイトエディターとテンプレートエディターで使用するために、翻訳可能なラベルが付いたテンプレートパーツがユーザーインターフェイスに表示されるようになります。

例えば、ヘッダーとフッターのテンプレートパーツ（header.html と footer.html）を作成して、テーマの /parts フォルダーに配置した場合、theme.json の templateParts プロパティに以下のように登録します。

{
  "version": 3,
  "templateParts": [
    {
      "area": "header",
      "name": "header",
      "title": "サイトヘッダー"
    },
    {
      "area": "footer",
      "name": "footer",
      "title": "サイトフッター"
    }
  ]
}

テンプレートパーツの登録については、templateParts プロパティ を御覧ください。

テンプレートパーツの編集

管理画面からテンプレートにアクセスするには、管理画面の「外観」→「エディター」を選択し、サイトエディターが開くので左側のメニューで「パターン」をクリックすると、テンプレートパーツのセクションがあります。

テンプレートパーツは、テンプレートパーツエリア（template part areas）によって分類されます。

各エリアには、そのエリアに登録されているパーツが一覧表示されます。「一般」は分類されていない（Uncategorized）エリアになります。

表示されるテンプレートパーツは以下の3つの場所から取得されます。

• データベースに保存されたユーザー作成のテンプレートパーツ (wp_template_part 投稿タイプとして保存される)
• テーマの /parts フォルダーからのテンプレートパーツ
• プラグインによって動的に追加されたテンプレートパーツ

上記画面で、編集したいテンプレートパーツを選択してカスタマイズすることができます。

この画面からパーツを保存すると、データベースに保存され、テーマ内のテンプレートが上書きされます。

このテーマを他の人に配布したり、別のサイトで使用したりする場合は、ブロックマークアップを /parts フォルダー内の対応するテンプレートにコピーする必要があります。

このプロセスは Create Block Theme プラグインを使うと簡単です。

ビデオチュートリアル：Intermediate Theme Developer Template parts

テンプレートパーツの追加

新しいテンプレートを作成するには、右上の「新規パターンを追加」をクリックし、ドロップダウンが表示されるので「新規テンプレートパーツを追加」を選択します。

ポップアップモーダルが表示されるので、カスタムテンプレートパーツ名を入力してそのエリア（template part areas）を選択します。

エリアはデフォルトでは、一般、ヘッダー、フッターから選択できます。

「追加」をクリックしてテンプレートパーツを作成でき、任意のブロックを含めることができます。

繰り返しになりますが、エディターで追加した新しいパーツはすべてデータベースに保存されます。

テーマを配布する場合は、/parts フォルダー内にテンプレートパーツファイルを作成し、ブロックマークアップをそのファイルにコピーする必要があります。または Create Block Theme プラグインを利用してテーマファイルに保存（書き出し）ます。

カスタムエリアの登録

default_wp_template_part_areas フックにフィルターを追加することで、必要な数のカスタムエリアを登録できます。

コールバック関数は、エリア定義の配列 $areas を受取り、各エリア定義は、次のキー/値のペアが定義された配列である必要があります。

例えば、「サイドバー」という名前のエリアを作成するには、テーマの functions.php に次のコードを追加します。「themeslug」の部分は、テーマのスラッグ（テーマフォルダの名前）などにすることが多いです。

add_filter( 'default_wp_template_part_areas', 'themeslug_template_part_areas' );

function themeslug_template_part_areas( array $areas ) {
  $areas[] = array(
    'area'        => 'sidebar',
    'area_tag'    => 'section',
    'label'       => 'サイドバー', // または __('Sidebar', 'default'),
    'description' => 'このエリアの説明',
    'icon'        => 'sidebar'
  );

  return $areas;
}

これにより、テーマの新しいサイドバーエリアが登録されますが、これを有効にするには、theme.json のテンプレートパーツの登録で area に新しいエリアを指定する必要があります。

以下は Sidebar テンプレートパーツの area に sidebar を指定する例です（15行目）。

{
  "version": 3,
  "templateParts": [
    {
      "area": "header",
      "name": "header",
      "title": "Header"
    },
    {
      "area": "footer",
      "name": "footer",
      "title": "Footer"
    },
    {
      "area": "sidebar",
      "name": "sidebar",
      "title": "Sidebar"
    }
  ]
}

上記により、例えば以下のようにサイトエディターでサイドバーのエリアが表示されます。

関連 WordPress 開発者ブログ：Upgrading the site-editing experience with custom template part areas