私のブックマーク
ブックマークを追加
ブックマークを削除テンプレートとは何ですか？
要するに、テンプレートは動的データを取り込み、それを構造化されたHTMLマークアップにラップし、ブラウザに送信します。これは特に革新的な概念ではなく、動的データを持つほぼすべてのウェブサイトシステムが使用しています。
WordPressのテンプレートシステムは、いくつかの重要なことを行います：
- 静的および動的データを参照するために使用されるブロックマークアップを解析します。
- データベースから動的データ（例：投稿内容、サイトオプションなど）を取得します。
- 結果として得られたHTMLを訪問者のブラウザに送信します。
WordPressと他のほとんどのプラットフォームとの大きな違いは、ブロックマークアップの含有です。ブロックテーマのテンプレートは完全にブロックで構成されており、静的または動的データを表すことができます。WordPressのテンプレートシステムは、これらのブロックを解析して、訪問者のブラウザに送信される際に正しいコンテンツが出力されることを保証します。
WordPressがうまく行うもう一つのことは、管理画面から直接テンプレートを構築またはカスタマイズするためのビジュアルインターフェースを提供することです：
サイトエディタは、テーマのユーザーが管理インターフェース内からブロックテンプレートやパーツを上書きできるようにします。ユーザーが行った変更は、サイトのデータベースに保存されます。これらのカスタマイズは、テンプレートファイルと同じ方法でデータベースに保存されます：ブロックマークアップとして。
テンプレートとプレーンHTMLの違い
基本的なHTMLを学んだことがあるなら、ウェブページをいくつか作成したことがあるでしょう。しかし、HTMLで完全なウェブサイトを構築するのは非常に難しいことがあります。なぜなら、サイト全体でグローバルな変更を行うたびに、すべてのファイルを常に更新しなければならないからです。
これは、HTMLが文書言語であるためです。動的データを処理する方法を知らず、再利用可能なコードの部分を動的に読み込むこともできません。
技術的には、ブロックテンプレートは .html ファイルです。しかし、これらはWordPressのテンプレートシステムによって解析される特殊なブロックマークアップを含んでおり、これはPHP（フロントエンド）とJavaScript（エディタ）で構築されています。このシステムを使用することで、ブロックは .html ファイル内に存在していても動的にすることができます。
動的データ
テンプレートとプレーンHTMLファイルを書くことの大きな違いは、テンプレートが動的データを挿入する能力を持っていることです。CMSのようなWordPressを使用せずに、ウェブサイトをゼロから構築する場合の例を見てみましょう。
サイトタイトルをプレーンHTMLで出力したいとします。通常、<h1> タグでラップし、手動でサイト名を入力します：
<h1>Your Website Name</h1>
WordPressを使用すると、正しいHTMLやサイト名を知る必要はありません。テーマは任意のWordPressサイトで使用できるため、サイトタイトルはサイトごとに異なる動的データです。
ブロックテーマで正しいサイトタイトルとその関連HTMLを出力するには、代わりにブロックマークアップを追加します：
<!-- wp:site-title /-->
ブロックマークアップを使用することで、あなたのテーマはWordPressがインストールされているどこでも機能します。
再利用性
良いウェブデザインの原則の一つはDRY（Don’t Repeat Yourself）です。プレーンHTMLでウェブサイトを構築する場合、サイトのすべてのページに対してそのHTMLを再コーディングしなければなりません。
たとえば、ほとんどのウェブサイトのヘッダーとフッターは、サイトのすべてのページでまったく同じです。したがって、すべてのページにそのコードを繰り返すのは理にかなっていません。テンプレートシステムを使用すると、コードを一度書いてどこでも再利用できます。
WordPressでは、これらの小さな再利用可能なテンプレートのセクションをテンプレートパーツ（または単にパーツ）と呼びます。
header.html という名前のテンプレートパートを作成すると、任意のテンプレートで正しいブロックマークアップを使用してそれを含めることができます：
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
これにより、すべてのテンプレートでヘッダーパートを再利用できますが、header.html ファイルを一度作成するだけで済みます。
ブロックマークアップ
テンプレートとテンプレートパーツは、個々のブロックとその設定を表すブロックマークアップで完全に構成されたファイルです。WordPressはこのブロックマークアップを解析し、ウェブブラウザが理解できる最終的なHTMLマークアップに変換します。
クラシックテーマとは異なり、WordPressはブロックテーマ用のいくつかの標準HTML要素を自動的に出力します。これには、ラッピング <html> および <body> タグ、<head>、および外部 <div class="wp-site-blocks"> が含まれます。WordPressとプラグインは、メタ、スタイル、およびスクリプトも自動的に出力します。クラシックテーマと比較して、ブロックテーマはPHPフックを追加する責任を負いません。
ブロックマークアップは技術的には有効なHTMLです。WordPressは、マークアップの標準化された形式を持つカスタムHTMLコメント構文を使用します。
テンプレート内の架空のブロックのマークアップを見てみましょう：
<!-- wp:namespace/slug {"align":"full"} /-->
ご覧のとおり、コードは開く <!-- と閉じる /--> HTMLコメントタグでラップされています。これはWordPressにブロックマークアップを探すように指示します。マークアップは次の4つの部分に分解できます：
- プレフィックス：
wp:プレフィックスは、これが解析が必要なブロックであり、単なる通常のHTMLコメントではないことをWordPressに伝えます。これはコアおよびサードパーティのブロックに必要です。 - ネームスペース： 解析するブロックのネームスペース。
- スラッグ： 解析するブロックのスラッグ。
- ブロック設定： ブロックの設定を表す有効なJSONコード。
コアのWordPressブロックを使用する場合、ブロックネームスペースは使用しません。たとえば、core/site-title ブロックは呼び出すときに前の core/ を含みません：
<!-- wp:site-title /-->
サードパーティのブロックへの参照にはネームスペースを含める必要があります。
ブロックマークアップの作成方法
テーマのためにすべてのブロックマークアップを手動で書くことを学ぶことは確かにできます。しかし、すべての可能なブロック設定を覚えるのは難しく、エラーを犯しやすく、結果として壊れたウェブサイトになることがあります。
代わりに、ブロックテンプレートを構築する際には、ほぼ常にブロックエディタを介して構築し、データベースに直接保存するか、ブロックマークアップをテーマのテンプレートファイルにコピーすることをお勧めします。
テンプレート全体を構築する最も簡単な方法は、WordPress管理画面の 外観 > エディタ > テンプレート を介して行うことです。以下は、その画面からのTwenty Twenty-Threeの ホーム テンプレートの様子です：
ビジュアルサイトエディタを使用して、ブロックを追加、移動、または削除することで、テンプレートを完全にカスタマイズできます。また、個々のブロック設定を調整することもできます。
テンプレートが希望通りにデザインされたら、ツールバーの オプション ボタン（⋮ アイコン）をクリックし、 コードエディタ オプションを選択します。これにより、テンプレートのブロックマークアップが得られます。そこから、テンプレートファイルにコピー＆ペーストします：
ホームテンプレートの場合、/templates/home.html テンプレートにブロックマークアップをペーストします。
もちろん、これは他の人にテーマを配布する予定がある場合にのみ必要です。自分のサイトであれば、その画面からテンプレートを保存すれば、データベースに保存され、/templates/home.html テンプレートファイルを上書きします。
一部のテーマ作成者が採用する別の技術は、投稿/ページエディタまたはテンプレートエディタから構築することです。時には、特定の小さなセクションを作成して、それを直接テンプレートやテンプレートパーツにコピー＆ペーストします。
投稿エディタからブロックをコピーするには、使用したいブロックを選択し、ブロック編集ツールバーの オプション ボタン（⋮ アイコン）をクリックします。次に、ドロップダウンから コピー ボタンをクリックします：
そこから、コピーしたコードをテンプレートまたはテンプレートパートファイルにペーストできます。また、サイトエディタと同様にこの画面から コードエディタ モードに切り替え、同じようにブロックマークアップをコピーできます。
テンプレートとパーツの関係
テンプレートは、ブラウザに送信される全体のHTML出力を表します。これらを「トップレベルテンプレート」と考えるのは簡単です。なぜなら、これらはテンプレートシステムの最上位、外側のレベルだからです。
テンプレートパーツは、トップレベルテンプレート内に存在する部分テンプレートです。パーツは、各テンプレートのためにブロックマークアップを再作成することなく、再利用可能なセクションを含めるのを容易にします。
テーマ内では、テンプレートとテンプレートパーツはそれぞれ /templates および /parts フォルダーに配置されます。以下は、その構造の例です：
- `````footer.html
header.html
- `````404.html
archive.htmlindex.html（必須）singular.html
アーカイブテンプレート（archive.html）とそのブロックマークアップの例を見てみましょう：
<!-- wp:template-part {"slug":"header","tagName":"header"} /--><!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} --><main class="wp-block-group"><!-- wp:template-part {"slug":"loop","align":"full"} /--></main><!-- /wp:group --><!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
このテンプレートは基本的に、3つのテンプレートパーツを含むラッパーとして機能します：
/parts/header.html/parts/loop.html/parts/footer.html
これはすべてのブロックテーマが使用する技術ではありませんが、一般的な慣行です。複数のテンプレートにわたって繰り返されるコードがある場合、そのコードをテンプレートパートファイルにコピーし、トップレベルテンプレートに含めるのが一般的に良いアイデアです。
この時点で、あなたはテンプレートについての全体的な高レベルの学習をしてきました。今、テンプレートシステムの各部分がどのように機能するかをより深く掘り下げる時が来ました。次のステップとして、これらのドキュメントに従ってください：
