• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細

このWikiはいつでも誰でも編集できます

「テンプレート階層」の版間の差分

提供: WordPress Codex 日本語版
移動先: 案内検索
(en:Template Hierarchy 2008年2月25日 (月) 18:28 Otto42 版)
 
(和訳+再構成(ノート参照))
1行目: 1行目:
 +
{{テーマ・テンプレートガイド|テンプレート}}
 +
<!-- ↓の替わりに↑のガイドテンプレートを挿入
 
<div style="border: 1px solid #036; background:#eee; text-align:center; margin:5px; padding:10px">'''Note:'''  This article covers an advanced topic. See [[Stepping Into Templates]] for an introduction to WordPress templates.</div>
 
<div style="border: 1px solid #036; background:#eee; text-align:center; margin:5px; padding:10px">'''Note:'''  This article covers an advanced topic. See [[Stepping Into Templates]] for an introduction to WordPress templates.</div>
 +
-->
 +
<div id="Introduction">
 +
== はじめに ==
 +
</div>
  
 +
[[テーマの作成#テーマテンプレートファイル|テンプレート]]は WordPress サイトを生成するために使われるファイルです。WordPress v1.5 で[[:ja:Using Themes|「テーマ」]]機能が導入されて以来、テンプレートはますます構造化しやすくなり、たくさんのカスタマイズを盛り込んだ[[テーマの作成|テーマを作成]]できるようになっています。サイト内の全ページを同じデザインにすることも、メインページ・カテゴリ・検索結果といった''ページの種類''ごとに別のテンプレートを設けて、デザインや表示内容を変えることもできます。
  
== Introduction ==
+
'''テンプレート階層'''とは、WordPress サイトの各ページを表示する際に WordPress がチェックする、テンプレートファイル名の優先順序です。これを利用して、特に作り込みたいページ(種別)のみ専用のテンプレートファイルを設け、その他のページは共通のテンプレートで生成させる、といったことができます。
  
WordPress Templates fit together like the pieces of a puzzle to generate the web pages on your WordPress site. Some templates (the header and footer template files for example) are used on all the web pages, while others are used only under specific conditions.
+
このページは、次の問いに答えを出そうとするものです。
  
 
+
<blockquote id="question">
=== What this article is about ===
+
''○○(ページ)を表示するとき、どのテンプレートファイルが使われるのか?''
 
+
This article seeks to answer the following question:
+
 
+
<blockquote>
+
''Which template file(s) will WordPress use when it displays a certain type of page?''
+
 
</blockquote>
 
</blockquote>
  
 +
テーマを作成するには、ブログの各ページを表示するために WordPress がテンプレートファイルを選び出す仕組みを適切に理解しておくことが不可欠です。既存の WordPress テーマをカスタマイズしたい場合も、編集すべきテンプレートファイルを判断するのに役立ちます。
  
=== Who might find this useful ===
+
<div id="Visual_Overview">
 +
== 概観図 ==
 +
</div>
  
Since the introduction of [[Using Themes|Themes]] in WordPress v1.5, [[Templates]] have become more and more configurable. In order to [[Theme_Development|develop]] WP themes, a proper understanding of the way WordPress selects template files to display the various pages on your blog is essential. If you seek to customize an existing WordPress theme, this article aims to help you decide which template file needs editing.
+
次の図は、WordPress テンプレート階層に基づいてウェブページを生成する際に呼ばれるテンプレートファイルを図解したものです。訪問者がアクセスする各種ページの[[用語集#Query string|クエリ文字列]]と、それに対応する[[:ja:Conditional Tags|条件タグ]]、そして、WordPress が探すテンプレートファイル名の順序を示しています。
  
{| cellspacing="3"
+
[[:en:Image:templatehierarchyexample.png|WordPress テンプレート階層構造図]] (英語版 Codex サイトにあります)
|- valign="top"
+
|class="MainPageKnowledgeBaseBox" style="border: 1px solid #ffc9c9; padding: 1em; color: #000000; background-color: #fff3f3"|
+
=== Conditional Tags and the Template Hierarchy ===
+
 
+
WordPress provides more than one way to match templates to query types. WordPress Theme developers can also use [[Theme_Development#Query-based_Templates|Conditional Tags]] to control which templates will be used to generate a certain page. Some WordPress Themes may not implement all of the template files described here. Some Themes use conditional tags to load other template files. See the [[Theme Development#Query-based Templates|Theme Development]] and [[Conditional Tags]] pages for more.
+
|}
+
 
+
 
+
== The Template File Hierarchy ==
+
 
+
 
+
=== The General Idea ===
+
 
+
WordPress uses the [[Glossary#Query_string|Query String]] &mdash; information contained within each link on your web site &mdash; to decide which template or set of templates will be used to display the page.
+
 
+
First, WordPress matches every Query String to query types &mdash; i.e. it decides what type of page (a search page, a category page, the home page etc.) is being requested.
+
 
+
Templates are then chosen &mdash; and web page content is generated &mdash; in the order suggested by the WordPress Template hierarchy, depending upon what templates are available in a particular WordPress Theme.
+
 
+
WordPress looks for template files with specific names in the current Theme's directory and uses the ''first matching'' template file listed under the appropriate query section below.
+
 
+
With the exception of the basic <tt style="font-weight:bold; color:#036"><nowiki>index.php</nowiki></tt> template file, Theme developers can choose whether they want to implement a particular template file or not. If WordPress cannot find a template file with a matching name, it skips down to the next file name in the hierarchy. If WordPress cannot find any matching template file, <tt style="font-weight:bold; color:#036">index.php</tt> (the Theme's home page template file) will be used. 
+
 
+
 
+
=== Examples ===
+
 
+
If your blog is at <tt style="font-weight:bold; color:#036"><nowiki>http://domain.com/wp/</nowiki></tt> and a visitor clicks on a link to a category page like
+
<tt style="font-weight:bold; color:#036; font-size: 0.8em"><nowiki>http://domain.com/wp/category/your-cat/</nowiki></tt>, WordPress looks for a template file in the current Theme's directory that matches the category's ID. If the category's ID is 4, WordPress looks for a template file named <tt style="font-weight:bold; color:#036"><nowiki>category-4.php</nowiki></tt>. If it is missing, WordPress next looks for a generic category template file, <tt style="font-weight:bold; color:#036"><nowiki>category.php</nowiki></tt>. If this file does not exist either, WordPress looks for a generic archive template, <tt style="font-weight:bold; color:#036"><nowiki>archive.php</nowiki></tt>. If it is missing as well, WordPress falls back on the main Theme template file, <tt style="font-weight:bold; color:#036"><nowiki>index.php</nowiki></tt>.
+
 
+
If a visitor goes to your home page at <tt style="font-weight:bold; color:#036"><nowiki>http://domain.com/wp/</nowiki></tt>, WordPress looks for a template file called <tt style="font-weight:bold; color:#036">home.php</tt> and uses it to generate the requested page. If <tt style="font-weight:bold; color:#036">home.php</tt> is missing, WordPress looks for a file called <tt style="font-weight:bold; color:#036">index.php</tt> in the active theme's directory, and uses that template to generate the page.
+
 
+
 
+
=== Visual Overview ===
+
 
+
The following diagram shows which template files are called to generate a WordPress page based on the WordPress Template hierarchy. It also illustrates the relationship of [[Glossary#Query_string|Query Strings]] to corresponding [[Conditional Tags]].
+
 
+
[[Image:templatehierarchyexample.png||Graphic Example of the WordPress Template Hierarchy Structure]]
+
  
 
<!-- Codex image page: http://codex.wordpress.org/Image:wp_Template_Hierarchy.png -->
 
<!-- Codex image page: http://codex.wordpress.org/Image:wp_Template_Hierarchy.png -->
<small>[http://codex.wordpress.org/images/1/1d/wp_Template_Hierarchy.png Full-Size Image (png)]</small>
+
* [http://codex.wordpress.org/images/1/1d/wp_Template_Hierarchy.png フルサイズ画像(PNG形式)]
 +
* [http://www.scoutpress.de/download/wp_Template_Hierarchy.zargo ArgoUML-0.22-File (zargo) ダウンロード](外部リンク)
  
<small>[http://www.scoutpress.de/download/wp_Template_Hierarchy.zargo Download ArgoUML-0.22-File (zargo)] (external link)</small>
+
<div id="The_Template_File_Hierarchy">
 +
== 仕組み ==
 +
</div>
  
=== The Template Hierarchy In Detail ===
+
訪問者が WordPress サイト上のページにアクセスしたとき、WordPress は次のように動きます。
  
The following sections describe the order in which template files are being called by WordPress for each query type.
+
# URI に含まれる[[用語集#Query_string|クエリ文字列]]とクエリタイプを照合し、要求されているページの種類(メインページ、カテゴリページなど)を判断。
 +
# 該当するページ種類の[[#ページ種類別テンプレート階層|テンプレート階層]]に基づき、現在のテーマディレクトリ内からテンプレートファイルを探す。
 +
# 最初に見つかったテンプレートファイルを用いて、要求されたページを生成。
  
 +
例えば、ブログが <code><nowiki>http://example.com/wp/</nowiki></code> にあり、訪問者が <code><nowiki>http://example.com/wp/category/apple/</nowiki></code> という「りんご」カテゴリのアーカイブページにアクセスしたとしましょう。WordPress は、現在のテーマディレクトリの中からりんごカテゴリに使えるテンプレートファイルを探します。
  
=== The Main page ===
+
[[#Category page|カテゴリページのテンプレート階層]]は次のとおりです。WordPress はこのリストの'''上から順に'''、ファイルがないかどうか探していき、'''最初に'''見つけたファイルを使います。
 +
<blockquote>
 +
# category-''ID''.php -- 特定のカテゴリ用テンプレート
 +
# category.php -- カテゴリの汎用テンプレート
 +
# archive.php -- 汎用アーカイブテンプレート(タグ・日別アーカイブなどと共用)
 +
# index.php
 +
</blockquote>
 +
りんごカテゴリの ID が <code>'4'</code> であれば、最初に <code>category-''4''.php</code> というテンプレートファイルを探します。ディレクトリ内にそのファイル名が存在しなければ、次に <code>category.php</code> を探し、それもなければ <code>archive.php</code> を探します。それもなければ、あらゆるページに使える基本のテーマテンプレートファイル <code>index.php</code> を使います。
  
:#home.php
+
<code>index.php</code> はテーマに必須ですが、他のテンプレートファイルを設けるか否かは、テーマの作成者が選べます。WordPress は、一致する名前のテンプレートファイルを見つけられなければそれを飛ばし、次の候補のファイル名を探してくれます。例えば、他のページと様式を変えたいのがカテゴリID 4 だけなのであれば、テーマディレクトリ内に置くテンプレートファイルは <code>category-4.php</code> と <code>index.php</code> だけでいいのです。
:#index.php
+
  
=== Single Post page ===
+
'''備考''': WordPress がページの種類(クエリタイプ)に合うテンプレートファイルを特定する方法は一つではありません。'''[[:ja:Conditional Tags|条件タグ]]'''は表示しようとしているページの種類を判定できるので、その判定結果によってテンプレートファイルを切り替えたり、複数のページ種類で共通のテンプレートファイルを使い、そのページ内の表示の一部分だけをページ種類に応じて変える、というような細かい制御もできます。詳しくは[[テーマの作成#Query-based Templates|テーマの作成]]および[[:ja:Conditional Tags|条件タグ]]のページをご覧ください。
  
:#single.php
+
<div id="The_Template_Hierarchy_In_Detail">
:#index.php
+
== ページ種類別テンプレート階層 ==
 +
</div>
  
=== WordPress Page ===
+
以下、表示するページの種類別に、WordPress に呼ばれるテンプレートファイルの順序を示します。各セクションの見出しが、冒頭の問い「''○○(ページ)を表示するとき、どのテンプレートファイルが使われるのか?''」の ○○ に当てはまります。
  
:#The template selected from the "Page Template" dropdown when editing the [[Pages|Page]].
+
<div id="The_Main_page">
:#[[Pages|page.php]]
+
=== メインページ ===
:#index.php
+
 
+
<div style="border: 1px solid #ffc9c9; padding: 1em; color: #000000; background-color: #fff3f3">'''Note:''' This section refers to ''WordPress Pages'', not generic posts or web pages from your blog. Please see [[Pages|WordPress Pages]] for details.
+
 
</div>
 
</div>
  
 +
# home.php
 +
# index.php
  
=== Category page ===
+
<div id="Single_Post_page">
 +
=== 単体記事ページ ===
 +
</div>
  
:#The Category Template with a matching ID. If the category's ID were <tt style="font-weight:bold; color:#036">6</tt>, WordPress would look for [[Category Templates|category-6.php]]
+
# single.php
:#[[Category Templates|category.php]]
+
# index.php
:#[[Creating_an_Archive_Index|archive.php]]
+
:#index.php
+
  
<div style="border: 1px solid #ffc9c9; padding: 1em; color: #000000; background-color: #fff3f3">'''Note:''' See [[Category Templates]] for details.</div>
+
<div id="WordPress_Page">
 +
=== WordPress ページ ===
 +
</div>
  
 +
# [[:ja:Pages|ページ]]作成・編集画面の「ページテンプレート」ドロップダウンメニューで選択したページテンプレート
 +
# [[:ja:Pages|page.php]]
 +
# index.php
  
=== Tag page ===
+
注: この節は[[:ja:Pages|「WordPress ページ」]]についてであり、ブログの一般的な記事やウェブページではありません。
  
:#The Tag Template with a matching slug. If the tag's slug were <tt style="font-weight:bold; color:#036">sometag</tt>, WordPress would look for [[Tag Templates|tag-sometag.php]]
+
<div id="Category_page">
:#[[Tag Templates|tag.php]]
+
=== カテゴリページ ===
:#[[Creating_an_Archive_Index|archive.php]]
+
</div>
:#index.php
+
  
<div style="border: 1px solid #ffc9c9; padding: 1em; color: #000000; background-color: #fff3f3">'''Note:''' See [[Tag Templates]] for details.</div>
+
# [[:en:Category Templates|category-''ID''.php]] -- 例えばカテゴリID 6 用のテンプレートであれば <code>category-6.php</code>
 +
# [[:en:Category Templates|category.php]]
 +
# archive.php
 +
# index.php
  
=== Author page ===
+
<div id="Tag_page">
 +
=== タグページ ===
 +
</div>
  
:#[[Author Templates|author.php]]
+
# [[:en:Tag Templates|tag-''タグスラッグ''.php]]
:#[[Creating_an_Archive_Index|archive.php]]
+
# [[:en:Tag Templates|tag.php]]
:#index.php
+
# archive.php
 +
# index.php
  
<div style="border: 1px solid #ffc9c9; padding: 1em; color: #000000; background-color: #fff3f3">'''Note:''' The [[Author Templates|Author Template]] can be used to display information about authors.</div>
+
注: [[Version 2.3|WordPress 2.3]] 以上でのみ使えます。
  
 +
<div id="Author_page">
 +
=== 著者テンプレート ===
 +
</div>
  
=== Date page ===
+
# [[:en:Author Templates|author.php]]
 +
# archive.php
 +
# index.php
  
For example, a monthly archive page.
+
<div id="Date_page">
 +
=== 日付別ページ ===
 +
</div>
  
:#date.php
+
例えば月別アーカイブページなど
:#[[Creating_an_Archive_Index|archive.php]]
+
:#index.php
+
  
 +
# date.php
 +
# archive.php
 +
# index.php
  
=== Search Result page ===
+
<div id="Search_Result_page">
 +
=== 検索結果ページ ===
 +
</div>
  
:#[[Creating_a_Search_Page|search.php]]
+
# [[:en:Creating a Search Page|search.php]]
:#index.php
+
# index.php
  
=== 404 (Not Found) page ===
+
<div id="404_.28Not_Found.29_page">
 +
=== 404 (Not Found) ページ ===
 +
</div>
  
:#[[Creating_an_Error_404_Page|404.php]]
+
# [[:en:Creating an Error 404 Page|404.php]]
:#index.php
+
# index.php
  
<div style="border: 1px solid #ffc9c9; padding: 1em; color: #000000; background-color: #fff3f3">'''Note:''' See [[Creating an Error 404 Page]] for more information about the 404 template.</div>
+
<div id="Attachment_page">
 +
=== 添付ファイルページ ===
 +
</div>
  
 +
記事本文への[[:en:Using Image and File Attachments#Inserting Files|画像添付]]で 'Linked to Page' を選んだ場合に、画像のリンク先として使われるページ
  
=== Attachment page ===
+
# attachment.php
 +
# index.php
  
:#attachment.php
+
== 変更履歴 ==
:#index.php
+
  
<div style="border: 1px solid #ffc9c9; padding: 1em; color: #000000; background-color: #fff3f3">'''Note:''' See [[Using Image and File Attachments#Inserting_Files|Image attachments]] for more information about this template.</div>
+
* (確認中) : [[#Attachment_page|添付ファイルページ]]を追加。
 +
* [[Version 2.3|2.3]] : [[#Tag_page|タグページ]]を追加。
  
== See also ==
+
<!-- 冒頭のガイドテンプレートで代用
 +
== See also ==
  
 
The following links have direct relevance to the topic of this article.
 
The following links have direct relevance to the topic of this article.
  
 
[[Theme Development]] | [[The Loop]] | [[Conditional Tags]] | [[Template Tags]] | [[Using Permalinks]]
 
[[Theme Development]] | [[The Loop]] | [[Conditional Tags]] | [[Template Tags]] | [[Using Permalinks]]
 +
-->
  
{{原文|Template Hierarchy}}
+
{{DEFAULTSORT:てんふれえとかいそう}}
 
+
[[Category:デザインとレイアウト]]
[[Category:Design and Layout]]
+
[[Category:上級トピック]]
[[Category:Advanced Topics]]
+
[[Category:テンプレート]]
[[Category:Templates]]
+
[[Category:テンプレートタグ]]
[[Category:Template Tags]]
+
[[Category:wp2.3]]
  
 
[[en:Template Hierarchy]]
 
[[en:Template Hierarchy]]

2008年3月10日 (月) 03:58時点における版

テンプレートは WordPress サイトを生成するために使われるファイルです。WordPress v1.5 で「テーマ」機能が導入されて以来、テンプレートはますます構造化しやすくなり、たくさんのカスタマイズを盛り込んだテーマを作成できるようになっています。サイト内の全ページを同じデザインにすることも、メインページ・カテゴリ・検索結果といったページの種類ごとに別のテンプレートを設けて、デザインや表示内容を変えることもできます。

テンプレート階層とは、WordPress サイトの各ページを表示する際に WordPress がチェックする、テンプレートファイル名の優先順序です。これを利用して、特に作り込みたいページ(種別)のみ専用のテンプレートファイルを設け、その他のページは共通のテンプレートで生成させる、といったことができます。

このページは、次の問いに答えを出そうとするものです。

○○(ページ)を表示するとき、どのテンプレートファイルが使われるのか?

テーマを作成するには、ブログの各ページを表示するために WordPress がテンプレートファイルを選び出す仕組みを適切に理解しておくことが不可欠です。既存の WordPress テーマをカスタマイズしたい場合も、編集すべきテンプレートファイルを判断するのに役立ちます。

概観図

次の図は、WordPress テンプレート階層に基づいてウェブページを生成する際に呼ばれるテンプレートファイルを図解したものです。訪問者がアクセスする各種ページのクエリ文字列と、それに対応する条件タグ、そして、WordPress が探すテンプレートファイル名の順序を示しています。

WordPress テンプレート階層構造図 (英語版 Codex サイトにあります)

仕組み

訪問者が WordPress サイト上のページにアクセスしたとき、WordPress は次のように動きます。

  1. URI に含まれるクエリ文字列とクエリタイプを照合し、要求されているページの種類(メインページ、カテゴリページなど)を判断。
  2. 該当するページ種類のテンプレート階層に基づき、現在のテーマディレクトリ内からテンプレートファイルを探す。
  3. 最初に見つかったテンプレートファイルを用いて、要求されたページを生成。

例えば、ブログが http://example.com/wp/ にあり、訪問者が http://example.com/wp/category/apple/ という「りんご」カテゴリのアーカイブページにアクセスしたとしましょう。WordPress は、現在のテーマディレクトリの中からりんごカテゴリに使えるテンプレートファイルを探します。

カテゴリページのテンプレート階層は次のとおりです。WordPress はこのリストの上から順に、ファイルがないかどうか探していき、最初に見つけたファイルを使います。

  1. category-ID.php -- 特定のカテゴリ用テンプレート
  2. category.php -- カテゴリの汎用テンプレート
  3. archive.php -- 汎用アーカイブテンプレート(タグ・日別アーカイブなどと共用)
  4. index.php

りんごカテゴリの ID が '4' であれば、最初に category-4.php というテンプレートファイルを探します。ディレクトリ内にそのファイル名が存在しなければ、次に category.php を探し、それもなければ archive.php を探します。それもなければ、あらゆるページに使える基本のテーマテンプレートファイル index.php を使います。

index.php はテーマに必須ですが、他のテンプレートファイルを設けるか否かは、テーマの作成者が選べます。WordPress は、一致する名前のテンプレートファイルを見つけられなければそれを飛ばし、次の候補のファイル名を探してくれます。例えば、他のページと様式を変えたいのがカテゴリID 4 だけなのであれば、テーマディレクトリ内に置くテンプレートファイルは category-4.phpindex.php だけでいいのです。

備考: WordPress がページの種類(クエリタイプ)に合うテンプレートファイルを特定する方法は一つではありません。条件タグは表示しようとしているページの種類を判定できるので、その判定結果によってテンプレートファイルを切り替えたり、複数のページ種類で共通のテンプレートファイルを使い、そのページ内の表示の一部分だけをページ種類に応じて変える、というような細かい制御もできます。詳しくはテーマの作成および条件タグのページをご覧ください。

ページ種類別テンプレート階層

以下、表示するページの種類別に、WordPress に呼ばれるテンプレートファイルの順序を示します。各セクションの見出しが、冒頭の問い「○○(ページ)を表示するとき、どのテンプレートファイルが使われるのか?」の ○○ に当てはまります。

メインページ

  1. home.php
  2. index.php

単体記事ページ

  1. single.php
  2. index.php

WordPress ページ

  1. ページ作成・編集画面の「ページテンプレート」ドロップダウンメニューで選択したページテンプレート
  2. page.php
  3. index.php

注: この節は「WordPress ページ」についてであり、ブログの一般的な記事やウェブページではありません。

カテゴリページ

  1. category-ID.php -- 例えばカテゴリID 6 用のテンプレートであれば category-6.php
  2. category.php
  3. archive.php
  4. index.php

タグページ

  1. tag-タグスラッグ.php
  2. tag.php
  3. archive.php
  4. index.php

注: WordPress 2.3 以上でのみ使えます。

著者テンプレート

  1. author.php
  2. archive.php
  3. index.php

日付別ページ

例えば月別アーカイブページなど

  1. date.php
  2. archive.php
  3. index.php

検索結果ページ

  1. search.php
  2. index.php

404 (Not Found) ページ

  1. 404.php
  2. index.php

添付ファイルページ

記事本文への画像添付で 'Linked to Page' を選んだ場合に、画像のリンク先として使われるページ

  1. attachment.php
  2. index.php

変更履歴