当サイト、Codex 日本語版は今後積極的な更新は行わない予定です。後継となる新ユーザーマニュアルは、https://ja.wordpress.org/support/ にあります。
万が一、当サイトで重大な問題を発見した際などは、フォーラムWordSlack #docs チャンネルでお知らせください。</p>

「テンプレート入門」の版間の差分

提供: WordPress Codex 日本語版
移動先: 案内検索
(Oldテンプレ、原文リンク挿入(19:07, February 19, 2006 Richardc020 版)、カテゴリ名日本語化)
(December 2008 Fonus 版に更新、翻訳)
1行目: 1行目:
{{Old}}
 
{{Stub}}
 
 
__TOC__
 
__TOC__
[[テンプレート|テンプレートファイル]]は、あなたの WordPressサイトの構成要素です。サイト上のどのウェブページを生成するときにも、パズルのピースのように組み合わさります。ヘッダやフッタ・テンプレートファイルのようなテンプレートは、その他のテンプレートが特定の条件でのみ使われる一方で、あらゆるウェブページのために繰り返し使われます。
+
テンプレートファイルは、あなたの WordPressサイトの構成要素です。サイト上のどのウェブページを生成するときにも、パズルのピースのように組み合わさります。ヘッダ・テンプレートファイルやフッタ・テンプレートファイルのようなテンプレートは、あらゆるウェブページのために繰り返し使われます。特定の条件でのみ使われるテンプレートもあります。
<!-- Original Start
+
[[Templates|Template files]] are the building blocks of your WordPress site. They fit together like puzzle pieces to generate any web page on your site. Some are used repeatedly for every web page, like the header and footer template files, while others are used only under specific conditions.
+
Original End -->
+
  
従来のウェブページは、2つのファイル―ページの構造を担当する '''HTML ページ''' と、 ページの表現を担当する '''スタイルシート''' ―とで構成されます。WordPress では、スタイルシートは従来どおりですが、HTML の構造は いくつもの部品と要素に分割され、一つのウェブページを生成するために、いろいろな手法で各ブロックを組み合わせることができます。このブロックを '''テンプレートファイル''' といいます。
+
従来のウェブページは、2つのファイルで構成されます。
<!-- Original Start
+
A traditional web page consists of two files: the '''HTML page''' to hold the structure of the page and the '''style sheet''' which holds the presentation styles of the page.  In WordPress, the style sheet is still present, but the HTML structure is broken up into various parts and pieces, blocks if you will, that can be put together in many different ways to generate a single web page.  These blocks are known as '''template files'''.
+
Original End -->
+
  
[[Using Themes|WordPressテーマ]]は、スタイルシートと、WordPressサイト上の各種のページ表示のためのブロックやテンプレートファイルで構成されます。
+
*ページの構造と内容を担当する [[Glossary#XHTML|XHTML page]]  
<!-- Original Start
+
*ページの表示スタイルを担当する [[Glossary#CSS|CSS Style Sheet]]
Each [[Using Themes|WordPress Theme]] is made up of a style sheet and the building blocks or template files to generate the different page views found on a WordPress site.
+
Original End -->
+
  
== Simple Page Structure ==
+
WordPress には、(X)HTML 構造と CSS スタイルシートの両方が含まれていますが、内容に関しては、様々な [[テンプレート]] の影に隠れて生成されます。テンプレートファイルおよびスタイルシートは共に、[[テーマの使い方|WordPress Theme]] として保存されます。テーマの作り方については、[[テーマの作成]] を参照してください。
  
ごく単純なウェブページ構成を見てみましょう。たいていのウェブページは、ヘッダ部・コンテンツ部・フッタ部を持ちます。3ブロック構成のページです。
 
<!-- Original Start
 
Let's look at a very simple web page structure.  Most web pages feature a header, the content, and a footer.  Three "blocks" that make up the whole of the page.
 
Original End -->
 
  
<div style="background:white; border:2px blue solid;margin:5px; padding-top:10px; font-size: 130%; text-align: center; width:120px; height:50px">
+
== WordPress のページ構造 ==
ヘッダ
+
 
 +
ごく単純なウェブページ構成は、ヘッダー部分、コンテンツ部分、フッター部分の 3 ブロックで構成されます。各ブロックは、利用中の WordPress テーマのテンプレートファイルで生成されます。
 +
 
 +
<div style="margin:5px;float:right">
 +
<div style="background:white; border:2px blue solid;margin:5px; padding-top:10px; font-size:130%; text-align:center; width:120px; height:50px">
 +
Header
 
</div>
 
</div>
<div style="background:white; border:2px red solid;margin:5px; padding-top:10px; font-size: 130%; text-align: center; width:120px; height:50px">
+
<div style="background:white; border:2px red solid;margin:5px; padding-top:10px; font-size:130%; text-align:center; width:120px; height:50px">
コンテンツ
+
Content
 +
</div>
 +
<div style="background:white; border:2px purple solid;margin:5px; padding-top:10px; font-size:130%; text-align:center; width:120px; height:50px">
 +
Footer
 
</div>
 
</div>
<div style="background:white; border:2px purple solid;margin:5px; padding-top:10px; font-size: 130%; text-align: center; width:120px; height:50px">
 
フッタ
 
 
</div>
 
</div>
  
'''ヘッダ'''部(テンプレートファイル)には、<tt>doctype</tt><tt>meta タグ</tt>、スタイルシートへのリンク、<tt>body</tt>の開始タグ、あなたのサイトのタイトルを含む[[Designing Headers|ヘッダ表示]]といった、ウェブページの上部を作るのに必要な全ての情報が入っています。
+
* '''ヘッダー'''部分は、'先頭''に配置する必要のある情報、例えば &mdash; i.e. inside the <tt style="font-weight:bold; color:#036"><nowiki><head></nowiki></tt> tag &mdash; of your XHTML web page, such as the <tt style="font-weight:bold; color:#036"><nowiki><doctype></nowiki></tt> <tt style="font-weight:bold; color:#036"><nowiki><meta></nowiki></tt> などのタグや、スタイルシートへリンクなど、XHTML で <tt style="font-weight:bold; color:#036"><nowiki><head></nowiki></tt> タグ内に含まれる情報が全て含まれます。<tt style="font-weight:bold; color:#036"><nowiki><body></nowiki></tt> の開始タグや、ブログで表示される [[Designing Headers|ヘッダー]] (典型的にはサイトのタイトル、ナビゲーションメニュー、ロゴ、サイト概要など) も含まれます。
<!-- Original Start
+
Inside of the '''header''' block or template file is all the information that needs to be at the ''top'' of your web page, such as the <tt>doctype</tt>, <tt>meta tags</tt>, links to style sheets, the start of the <tt>body</tt> tag, and the [[Designing Headers|header information]] itself which typically includes the title of your site.
+
Original End -->
+
  
'''コンテンツ''' は、ドキュメント・記事・投稿といった、あなたのサイトの '''' の部分です。
+
* '''コンテンツ'''ブロックは、ブログの記事やページなど、あなたのサイトの""の部分です。
<!-- Original Start
+
The '''content''' holds the documentation, articles, posts, the ''meat'' of your site.
+
Original End -->
+
  
'''フッタ''' はたいてい、他の[[Pages|ページ]]へのリンクや、サイト内の各カテゴリへの[[Good_Navigation_Links|ナビゲーションメニュー]]、著作権表示、コンタクト情報、その他の詳細などの情報を受け持ちます。
+
* '''フッター''部分は、末尾に配置する情報、例えばサイト内の他の[[ページ]]やカテゴリーへのリンクなどの[[en:Good_Navigation_Links|ナビゲーションメニュー]]、著作権表示、コンタクト情報、その他の詳細、などが表示されます。
<!-- Original Start
+
The '''footer''' usually holds information like links to other [[Pages]] or categories on your site in a [[Good_Navigation_Links|navigation menu]], copyright, contact information, and other details.
+
Original End -->
+
  
=== Building a Template Foundation ===
 
  
As with all building blocks, you have to start with a good foundation upon which to build. WordPress で核となるテンプレートファイルは、あなたの [[Using Themes|WordPress テーマ]]の中にある <tt>index.php</tt> です。<tt>index.php</tt> テンプレートファイル内のコードは、他のブロックやテンプレートファイルの ''呼び出し'' と、ウェブページを完成させるためにデータベースから情報を集める [[The Loop|WordPress Loop]] で始まります。
+
=== Basic テンプレートファイル ===
<!-- Original Start
+
As with all building blocks, you have to start with a good foundation upon which to build. In WordPress, the core template file is the <tt>index.php</tt> found within your [[Using Themes|WordPress Theme's]] folder. The code inside the <tt>index.php</tt> template file begins the ''call'' to other blocks or template files and the [[The Loop|WordPress Loop]] to gather information from the database to create the final web page.
+
Original End -->
+
  
<tt>index.php</tt> テンプレートファイルにおいて、ヘッダ部とフッタ部は次のように呼ばれます:
+
[[テーマの使い方|WordPress Theme]] の構成を生成するには、あなたのテーマディレクトリに <tt style="font-weight:bold; color:#036">index.php</tt> テンプレートファイルを作ることから始めましょう。このファイルの主な機能は、次の 2 つです。
<!-- Original Start
+
* 他のテンプレートファイルを include する(読み込む)。
In the <tt>index.php</tt> template file, the call for the header and footer looks like this:
+
* データベースから (投稿、ページ、カテゴリ等の) 情報を集める [[The Loop|WordPress Loop]] を読み込む。
Original End -->
+
 
 +
単純な構造では、'''ヘッダー'''と'''フッター'''の 2 つのファイルを読み込むだけで良いです。ヘッダーは <tt style="font-weight:bold; color:#036">header.php</tt>、フッターは <tt style="font-weight:bold; color:#036">footer.php</tt> という名前にする必要があります。ヘッダーおよびフッターを読み込む[[テンプレートタグ]]は、以下の通りです。
  
 
<pre><?php get_header(); ?>
 
<pre><?php get_header(); ?>
 +
 +
 
<?php get_footer(); ?></pre>
 
<?php get_footer(); ?></pre>
  
ウェブページの構成に他のブロックを加えるなら、さらなる[[Customizing Your Sidebar|ナビゲーション機能]]とあなたのウェブサイトについての情報を含む '''サイドバー''' を追加してもよいでしょう。
+
あなたのブログの投稿とページを表示する (そして表示方法をカスタマイズする) には、<tt style="font-weight:bold; color:#036">index.php</tt> は、ヘッダー読み込みとフッター読み込みの間に [[The Loop|WordPress Loop]] を実行する必要があります。
<!-- Original Start
+
To add another block to our web page's structure, we could add a '''sidebar''' that includes more [[Customizing Your Sidebar|navigation features]] and information about your website.
+
Original End -->
+
  
<pre><?php get_sidebar(); ?></pre>
+
== より複雑なページ構造 ==
  
 
<div style="margin:5px;float:right">
 
<div style="margin:5px;float:right">
<div style="background:white; border:2px blue solid;margin:5px; font-size: 130%; text-align: center; padding-top:10px; width:120px; height:50px">
+
<div style="background:white; border:2px blue solid;margin:5px; font-size:130%; text-align:center; padding-top:10px; width:120px; height:50px">
ヘッダ
+
Header
 
</div>
 
</div>
<div style="background:white; border:2px red solid;margin:5px; padding-top:10px; font-size: 130%; text-align: center; width:120px; height:50px">
+
<div style="background:white; border:2px red solid;margin:5px; padding-top:10px; font-size:130%; text-align:center; width:120px; height:50px">
コンテンツ
+
Content
 
</div>
 
</div>
<div style="background:white; border:2px green solid;margin:5px; padding-top:10px; font-size: 130%; text-align: center; width:120px; height:50px">
+
<div style="background:white; border:2px green solid;margin:5px; padding-top:10px; font-size:130%; text-align:center; width:120px; height:50px">
サイドバー
+
Sidebar
 
</div>
 
</div>
<div style="background:white; border:2px purple solid;margin:5px; padding-top:10px; font-size: 130%; text-align: center; width:120px; height:50px">
+
<div style="background:white; border:2px purple solid;margin:5px; padding-top:10px; font-size:130%; text-align:center; width:120px; height:50px">
フッタ
+
Footer
 
</div>
 
</div>
 
</div>
 
</div>
これらの "get" コマンドは、最終的なページにこれらのテンプレートファイルを "get(取得)" したり読み込むよう指示します。
 
<!-- Original Start
 
These "get" commands are called [[Stepping Into Template Tags|template tags]] which instruct the page to "get" or include these template files in the final page.
 
Original End -->
 
  
コンテンツ部の "取得" には、テンプレートタグは使わないことに注意してください。コンテンツ部は <tt>index.php</tt> に書くのです。<tt>index.php</tt> テンプレートファイルは、構成要素が配置される土台です。 It compiles the blocks all together around the content instructions in the <tt>index.php</tt>.
+
多くの WordPress テーマでは、[[en:Customizing Your Sidebar|ナビゲーション機能]]やあなたのサイトについての情報を含む'''サイドバー'''が含まれています。サイドバーは <tt style="font-weight:bold; color:#036">sidebar.php</tt> という名前のテンプレートファイルで生成されます。サイドバーは、<tt style="font-weight:bold; color:#036">index.php</tt> テンプレートファイルから、下記の[[テンプレートタグ]]で読み込むことができます。
<!-- Original Start
+
Notice that we haven't included a template tag to "get" the content.  That is because the content is in the <tt>index.php</tt>. The <tt>index.php</tt> template file is the foundation upon which the building blocks are laid. It compiles the blocks all together around the content instructions in the <tt>index.php</tt>.
+
Original End -->
+
  
シンプルな WordPressウェブページをレイアウトする際の基本的なステップを示します:
+
<pre><?php get_sidebar(); ?></pre>
<!-- Original Start
+
Here are the basic steps it takes for a simple layout on a WordPress web page:
+
Original End -->
+
  
# <tt>index.php</tt> を開始。
+
=== 肉はどこ? ===
<!-- Original Start
+
Initiate <tt>index.php</tt>
+
Original End -->
+
# <tt>header.php</tt> を取得。
+
# <tt>index.php</tt> の中でコンテンツを生成。
+
# <tt>sidebar.php</tt> を取得。
+
# <tt>footer.php</tt> を取得。
+
# 完成したページをブラウザに表示する。
+
  
これらのブロックやテンプレートファイルが 最終的にウェブページ上のどの位置にどのように "表示" されるかは、スタイルシートによって確定します。スタイルシートの中で、ヘッダを上に配置したり、サイドバーを右か左に置いたり、フッタをきちんとコンテンツの下に据えるなど、ヘッダ・サイドバー・コンテンツ・フッタのための指示が出されます。あなたの WordPressテーマとウェブページのスタイリングについての詳細は、[[Blog Design and Layout]] を見てください。
+
ウェブページの''コンテンツ''を取得するテンプレートタグがまだないこと に注意してくだだい。というのも、コンテンツは <tt style="font-weight:bold; color:#036">index.php</tt> 内の [[The Loop|WordPress Loop]] で生成されるからです。 
<!-- Original Start
+
The process of determining where and how these blocks or template files "look" on your final web page are determined within the style sheet file. Inside the style sheet are instructions for the header, sidebar, content, and footer to place the header at the top, put the sidebar on the right or left, and make sure the footer sits below the content. For more information on styling your WordPress Themes and web pages, see [[Blog Design and Layout]].
+
Original End -->
+
  
== Template Files Within Template Files ==
+
また、テーマのスタイルシートが、訪問者のブラウザ上でのヘッダー、フッター、サイドバーおよびコンテンツの見え方や配置を決定することに注意してください。WordPress テーマとウェブページのスタイルについての詳細は、[[Blog Design and Layout]] を参照してください。
  
テンプレートファイル <tt>index.php</tt> の中に、WordPress がどのように他のテンプレートファイルを読み込むかを見てきました。あなたはもう、テンプレートファイルの中に複数のテンプレートファイルを取り込めるようになっています。
+
== テンプレートファイルの中にテンプレートファイル ==
  
<tt>sidebar.php</tt> の内側には、サイドバーに検索フォームボックスを設置する <tt>searchform.php</tt> を取り込むための、もう一つの典型的なテンプレートファイルが存在します。
+
テンプレートファイル <tt style="font-weight:bold; color:#036">index.php</tt> の中に、WordPress がどのようにして標準テンプレートファイル (ヘッダー、フッター、サイドバー) を読み込むかを見てきました。どのテンプレートファイルも、他のテンプレートファイルを読み込むことができます。
<!-- Original Start
+
You have seen how WordPress includes template files within the <tt>index.php</tt> template file. You can include multiple template files within template files.
+
  
Inside of the <tt>sidebar.php</tt> is typically another template file for getting the <tt>searchform.php</tt> to include a search form box in the sidebar.
+
例えば、<tt style="font-weight:bold; color:#036">sidebar.php</tt> は、検索フォームを生成するテンプレートファイル <tt style="font-weight:bold; color:#036">searchform.php</tt> を含むことができます。検索フォームは WordPress の標準テンプレートファイルではないので、読み込むためのコードが少し異なります。
Original End -->
+
  
 
<pre><?php include (TEMPLATEPATH . '/searchform.php'); ?></pre>
 
<pre><?php include (TEMPLATEPATH . '/searchform.php'); ?></pre>
  
命令の仕方は今までと異なりますが、行なうことは同じです。"get(取得)" するための WordPress テンプレートタグを使う代わりに、テンプレートファイルを "include(読み込む)" ための [http://jp.php.net/manual/ja/function.include.php PHPコマンド <tt>include</tt>] が使われています。また、指定されたテンプレートファイルをあなたのテーマディレクトリ内から見つけるための <tt>TEMPLATEPATH</tt>(使用中のテーマディレクトリまでのパス)も使われています。
+
ファイルを読み込むのに WordPress テンプレートタグを使用しません。代わりに、[http://us3.php.net/manual/en/function.include.php PHP コマンド <tt style="font-weight:bold; color:#036">include</tt>] を使います。ファイルの場所を知る必要があるため、WordPress のテーマテンプレートファイルのあるディレクトリを示す <tt style="font-weight:bold; color:#036">TEMPLATEPATH</tt> が用いられます。
 
+
この方法を用いると、最終的に生成したいウェブページ構成に必要な、(前節で挙げた以外の)その他のテンプレートを読み込むことができます。'''<tt>get</tt>''' コマンド(命令)テンプレートタグは、標準のテンプレートファイルを呼び出します。'''<tt>include</tt>''' PHPコマンドは、標準のテンプレートファイルも標準以外のテンプレートファイルも取得できます。
+
<!-- Original Start
+
While the command structure is different, it does the same thing. Instead of using the WordPress template tags to "get", it uses the [http://us3.php.net/manual/en/function.include.php PHP command <tt>include</tt>] to "include" the template file. It also uses the <tt>TEMPLATEPATH</tt> to find the appropriate template file within your Theme's folder.
+
 
+
This method allows other template files to include other template files as needed to build the structure of the final generated web page.  The '''<tt>get</tt>''' command template tags call to standard template files. The '''<tt>include</tt>''' PHP command gets template files that are standard AND non-standard template files.
+
Original End -->
+
 
+
For example, if you are using a query in your [[The Loop|Loop]] that asks "if displaying a post from category ID 14, use <tt>header2.php</tt> and <tt>sidebar2.php</tt> instead of the normal header and sidebar", you would use the <tt>include</tt> function as [http://www.cameraontheroad.com/?p=623 part of that query]. While the innards of <tt>header2.php</tt> may be exactly the same as <tt>header.php</tt> except for a slight change in the style sheet link to style posts within category 14 differently from the rest of the category posts, because <tt>header2.php</tt> isn't the "standard" header template file, you need an <tt>include</tt> command.
+
 
+
<pre><?php include (TEMPLATEPATH . '/header2.php'); ?>
+
<?php include (TEMPLATEPATH . '/sidebar2.php'); ?>
+
</pre>
+
  
 
<div style="margin:5px; float:right">
 
<div style="margin:5px; float:right">
<div style="background:white; border:2px blue solid;margin:5px; font-size: 130%; text-align: center; padding-top:10px; width:120px; height:50px">
+
<div style="background:white; border:2px blue solid;margin:5px; font-size:130%; text-align:center; padding-top:10px; width:120px; height:50px">
ヘッダ
+
Header
 
</div>
 
</div>
<div style="background:white; border:2px red solid;margin:5px; padding-top:10px; font-size: 130%; text-align: center; width:120px">
+
<div style="background:white; border:2px red solid;margin:5px; padding-top:10px; font-size:130%; text-align:center; width:120px; height:50px">
コンテンツ
+
Content
<div style="background:white; border:2px #FF9900 solid;margin:5px; text-align: center">
+
コメント・<br />フォーム
+
 
</div>
 
</div>
 +
<div style="background:white; border:2px #FF9900 solid;margin:5px; font-size:130%; text-align:center; width:120px; height:80px">
 +
Comment Form
 
</div>
 
</div>
<div style="background:white; border:2px green solid;margin:5px; padding-top:10px; font-size: 130%; text-align: center; width:120px">
+
<div style="background:white; border:2px green solid;margin:5px; padding-top:10px; font-size:130%; text-align:center; width:120px; height:50px">
サイドバー
+
Sidebar
<div style="background:white; border:2px #FF148A solid;margin:5px; padding-top:10px; text-align: center">
+
検索フォーム
+
 
</div>
 
</div>
 +
<div style="background:white; border:2px #FF148A solid;margin:5px; padding-top:10px; font-size:130%; text-align:center; width:120px; height:50px">
 +
Search Form
 
</div>
 
</div>
<div style="background:white; border:2px solid purple;margin:5px; font-size: 130%; text-align: center; width:120px; height:50px">
+
<div style="background:white; border:2px solid purple;margin:5px; font-size:130%; text-align:center; width:120px; height:50px">
フッタ
+
Footer
 
</div>
 
</div>
 
</div>
 
</div>
<!-- 例に合わせてコメントフォームと検索フォームを内側に入れました。 ぼの -->
 
  
ほとんどの WordPressテーマでは、サイト上で個別のウェブページを生成するために、テンプレートの中で様々なテンプレートファイルを読み込んでいます。例えば、サイドバー・テンプレートファイルの中では、読み込みたい検索フォーム・テンプレートを呼び出します。次に示すテンプレートファイルは、WordPressサイトのフロントページ(<tt>index.php</tt>)の典型的なものです。
+
ほとんどの WordPress テーマは、ウェブページを生成するために、テンプレートの中でさまざまなテンプレートファイルを読み込んでいます。典型的には、WordPress サイトのメインテンプレート (<tt style="font-weight:bold; color:#036">index.php</tt>) は、以下のテンプレートファイルを読み込んでいます。
<!-- Original Start
+
Most WordPress Themes include a variety of template files within templates to generate the different web pages on the site. For example, within the sidebar template file is a call for the search form template to be included.  The following template files are typical for the front page (<tt>index.php</tt>) of a WordPress site:
+
Original End -->
+
  
# <tt>header.php</tt>
+
* <tt style="font-weight:bold; color:#036">header.php</tt>
# コンテンツ (<tt>index.php</tt>)
+
** <tt style="font-weight:bold; color:#036">theloop.php</tt> (The Content)
## <tt>comments.php</tt> <!-- 原文では wp-comments.php となっていますが、デフォルトテーマに合わせて変更しました。ぼの -->
+
** <tt style="font-weight:bold; color:#036">wp-comments.php</tt>
# <tt>sidebar.php</tt>
+
* <tt style="font-weight:bold; color:#036">sidebar.php</tt>
## <tt>searchform.php</tt>
+
** <tt style="font-weight:bold; color:#036">searchform.php</tt>
# <tt>footer.php</tt>
+
* <tt style="font-weight:bold; color:#036">footer.php</tt>
  
多くのブロックは互換性があり、あなたのサイト構成のどこにでもテンプレートファイルを移動できるようになっています。あるテーマは、サイドバーから移動してヘッダに設置した検索フォームが特徴です。あるテーマではフッタを使わず、そのデザインからフッタ・テンプレートを抜いてあります。あるユーザは、コメントを受け付けたくないので、コメントフォームの呼び出しを削除、あるいは[[Commenting Code|コメントアウト]]しています。
+
この構造を変更することもできます。例えば、ヘッダーに検索フォームを置くことが可能です。フッターを必要としないデザインであれば、フッターテンプレートを完全に除去することもできます。
  
テンプレートのカスタマイズは[[Pages|WordPressページ]]でも行なえ、独自のスタイルや構成を可能にします。あなたは、別のヘッダやサイドバー、フィード、asides、ウェブページに常時/時々追加したい構成要素など、どのようなパーツやピースでも追加・交換して、あなた自身のカスタムテンプレートを作り出すことができます。
 
  
覚えておいてください。スタイリングはスタイルシートで行ないます。でも、どの構成要素にも、<tt>include</tt> コマンドで呼び出せるテンプレートタグを置くことができるのです。
+
== 特殊なテンプレートファイル ==
<!-- Original Start
+
A lot of the blocks are interchangeable, allowing you to move template files around in the structure of your site. Some Themes feature the search form in the header, moving it from the sidebar. Others don't use a footer, leaving the footer template off their design. Other users don't want comments, so they eliminate or [[Commenting Code|comment out]] the call for the comments form.
+
  
Customized templates can also be used with [[Pages]], allowing these to be uniquely styled and structured. You can also create your own custom templates to add or replace any of the parts and pieces, such as an alternative header, sidebar, feeds, asides, whatever building block you want to add all the time or occasionally to your web pages.
+
WordPress サイトでは、ウェブページの表示に 2 通りの'''コア表示'''機能が用意されています。'''単一記事表示'''は、個別記事を表示するのに使用します。'''複数記事表示'''は、複数の投稿もしくは投稿のサマリーを一覧表示します。カテゴリーアーカイブ、日別アーカイブ、著者アーカイブ、そして (たいていの場合) ブログのトップページで用いられます。状況に応じて、<tt style="font-weight:bold; color:#036">index.php</tt> テンプレートファイルを用いてこれらのページ全てを生成するか、あるいは WordPress [[テンプレート階層]] に従って異なるテンプレートファイルを使用することができます。
  
Remember, the styles are in the style sheet, but any structural elements can be put into a template tag and then called with an <tt>include</tt> command.
+
次の疑問には、WordPress テンプレート階層が答えとなります。
Original End -->
+
<blockquote>
 +
あるタイプのページを表示するとき、WordPress はどのテンプレートファイルを使用するのか?
 +
</blockquote>
  
== Using Alternative Template Files ==
+
WordPress は、標準名のテンプレートファイルを自動認識し、ウェブページのタイプに応じて使用します。例えば、訪問者がブログ投稿のタイトルをクリックすると、WordPress は、訪問者がウェブページのその記事のみを見たいのだ、と理解します。The WordPress [[テンプレート階層]] は、<tt style="font-weight:bold; color:#036">single.php</tt> ファイルが存在すれば、<tt style="font-weight:bold; color:#036">index.php</tt> テンプレートファイルではなく <tt style="font-weight:bold; color:#036">single.php</tt> テンプレートファイルを使用して個別記事ページを生成します。同様に、訪問者が特定のカテゴリへのリンクをクリックすると、WordPress は <tt style="font-weight:bold; color:#036">category.php</tt> テンプレートファイルが存在する場合はこのファイルを利用します。<tt style="font-weight:bold; color:#036">category.php</tt> が存在しない場合は、<tt style="font-weight:bold; color:#036">archive.php</tt> を探します。<tt style="font-weight:bold; color:#036">archive.php</tt> も存在しない場合は、WordPress は <tt style="font-weight:bold; color:#036">index.php</tt> テンプレートファイルを使用します。特定のカテゴリー用に特定のテンプレートファイルを作成することができます (詳細は [[en:Category Templates]] を参照)。
  
WordPress features two '''core page views''' of web pages in a WordPress site.  The '''single post view''' showcases the view of a single post web page. The '''multi-post view''' lists the posts or post summaries of more than one post. These are usually sorted by category, date (archives), author posts, and other ways. While some of the multi-post views can be generated from the <tt>index.php</tt> template file, WordPress' inherent [[Template Hierarchy|template hierarchy]] allows specific templates to be used instead of the <tt>index.php</tt> file. This allows even more fine-tuning and customization.
 
  
<div style="margin:5px; float:right">
 
<div style="background:white; border:2px blue solid;margin:5px; font-size: 130%; text-align: center; padding-top:10px; width:120px; height:50px">
 
Header
 
</div>
 
<div style="background:white; border:2px red solid;margin:5px; padding-top:10px; font-size: 130%; text-align: center; width:120px; height:50px">
 
Single Post
 
</div>
 
<div style="background:white; border:2px #FF9900 solid;margin:5px; font-size: 130%; text-align: center; width:120px; height:50px">
 
Comment Form
 
</div>
 
<div style="background:white; border:2px solid purple;margin:5px; font-size: 130%; text-align: center; width:120px; height:50px">
 
Footer
 
</div>
 
</div>
 
The use of template files allow users to play with different blocks to build their own pages, choosing which ones they want to use when, and where, they need them.  Built into WordPress' core programming is something called the [[Template Hierarchy]]. Basically, it answers the following question:
 
  
<blockquote>
+
== テンプレート利用のヒント ==
''What template file will WordPress use when the _______________ (page) is displayed?''
+
 
</blockquote>
+
WordPress テンプレートファイルを作成するヒントをいくつか紹介します。
 +
 
 +
;'''開始タグと終了タグを追跡する'''
 +
 
 +
: テンプレートファイルには、[[Glossary#XHTML|XHTML]] タグと [[Glossary#CSS|CSS]] 参照が含まれます。HTML 要素と CSS 参照は、あるテンプレートファイルで開始して別のテンプレートファイルで終了するというように、複数のテンプレートファイルにまたがっても構いません。例えば、<tt style="font-weight:bold; color:#036">html</tt> と <tt style="font-weight:bold; color:#036">body</tt> HTML 要素は、典型的には <tt style="font-weight:bold; color:#036">header.php</tt> で開始し、<tt style="font-weight:bold; color:#036">footer.php</tt> で終了します。ほとんどの WordPress テーマは、HTML <tt style="font-weight:bold; color:#036">div</tt> 要素を使用しますが、これは複数のファイルにまたがっても構いません。例えば、ページコンテンツの main <tt style="font-weight:bold; color:#036">div</tt> が <tt style="font-weight:bold; color:#036">header.php</tt> で開始し、<tt style="font-weight:bold; color:#036">index.php</tt> あるいは <tt style="font-weight:bold; color:#036">single.php</tt> で終了しても構いません。[[Theme Development|テーマの作成、デザイン、修正]]をしている場合は、HTML 要素の開始と終了を追跡するのは、大変なこともあります。中身の多いタグの開始と終了をテンプレートファイルで [[Commenting Code|コメント]]を使用してメモしておくと、 どの <tt style="font-weight:bold; color:#036">div</tt> が別セクションのどこで終了しているかを追跡しやすくなります。
  
WordPress won't generate any special template files, but it will automatically recognize them if they are present and use them, without any effort on your part. Well, that's not true. If they aren't there, you have to provide them.
+
;'''異なるビューでテンプレートファイルを確認する'''  
  
For instance, in the WordPress Default Theme, when a user clicks on the title of a post, if WordPress detects the <tt>single.php</tt> template file, it will use it to generate the web page view of a single post. In this Theme, the single post view does not include the <tt>sidebar.php</tt>. This is an example of the flexibility of WordPress template files.
+
: コメント、サイドバー、検索フォーム等テンプレートファイルのいずれかに変更を加えた場合は、(個別記事、異なるタイプのアーカイブ、ページなどの) 異なるページビューで確認するようにしてください。
  
You might want to have different information or looks to specific category listings of posts.  WordPress automatically looks for the <tt>category.php</tt> template file to generate the list of [[Category Templates|category posts]], and if it isn't found, then generates them using the <tt>index.php</tt>. Using the template hierarchy, if it finds the <tt>category.php</tt> template file, it then looks for a category template file that matches the category ID number being sought, for example, <tt>category-2.php</tt>.  If that template file matches, it will use that template file to generate a page view of all the posts in category 2.
+
;'''変更点をコメントする'''  
  
WordPress will automatically look for a variety of template files based upon the user's request and you can learn more about creating and styling these and other custom template files at:
+
: [[Designing Themes for Public Release|公開するテーマをデザインする]]場合、ダウンロードした人が自分で変更を加えるかもしれないことに留意してください。Default あるいは Classic テーマのロジックから変更した点について、テンプレートファイルにメモを記入するとよいでしょう。スタイル情報を別の個所 (例えば<tt style="font-weight:bold; color:#036">header.php</tt> ファイルあるいは HTML タグなど) で指定している場合は、テーマのメインスタイルファイルにコメントしておくとよいでしょう。 
  
* [[Template Hierarchy]]
+
;'''ドアを開けたら必ず閉める'''
* [[Creating_an_Archive_Index|Archive Templates]]
+
* [[Category Templates]]
+
* [[Creating a Search Page|Search Templates]]
+
* [[Customizing Your Sidebar|Sidebar Templates]]
+
* [[Designing Headers|Header Templates]]
+
* [[Pages#Creating_your_own_Page_Templates|Page Templates]]
+
* [[Styling Theme Forms|Form Templates: Comment, Search, etc.]]
+
* [[Creating_an_Error_404_Page|404 Page Not Found Templates]]
+
* [[Author Templates]]
+
  
== Template File Tips ==
+
:テンプレートファイルで HTML タグまたは <tt style="font-weight:bold; color:#036">div</tt> タグを開始した場合、どこかのテンプレートファイルで必ず終了タグを含むようにしてください。ヘッダーテンプレートファイルで開始したタグを閉じないでフッターテンプレートファイルを取り除いてしまい、「テーマがおかしくなった」という質問が WordPress フォーラムに多く寄せられています。タグを追跡して、必ず閉じるようにしてください。(タグが正しいか兼sんほうするには、個別記事ページとアーカイブページを [http://validator.w3.org HTML validator] で確認するとよいでしょう。)
  
Template files include the use of [[Glossary#XHTML|XHTML]] tags and [[Glossary#CSS|CSS]] references. They are also packed with [[Templates|template files]], queries, and the [[The Loop|WordPress Loop]] which generates the content within each page view from within the core template files like <tt>index.php</tt>, <tt>single.php</tt>, <tt>category,php</tt>, <tt>archives.php</tt>, and others.
+
;'''テンプレートの CSS スタイル'''
  
Here are some tips for using WordPress template files:
+
:テンプレートでは、HTML と CSS を好きなように使うことができます。しかしながら、WordPress テーマ構造 ([[Site Architecture 1.5]] 参照) に従うことが推奨されています。こうすることで、利用する人にとって、あなたのテーマが理解しやすくなるでしょう。
  
;Tracking Opening and Closing Tags :HTML tags and CSS references can cross template files, beginning in one and ending in another. For example, the <tt>html</tt> and <tt>body</tt> HTML tags begin in the <tt>header.php</tt> and end in the <tt>footer.php</tt>. In some WordPress Themes, the content container may start in the <tt>header.php</tt> and end in the <tt>index.php</tt> or <tt>single.php</tt>. Tracking down where one tag begins and the other one ends can get complicated if you are [[Theme Development|developing, designing, or adjusting a Theme]].  We recommend you use [[Commenting Code|comments]] to note in the template files where a large container tag opens and when it closes so you can track which <tt>&lt;/div></tt> is which at the end of different sections.
 
;Test Template Files Under Different Views :If you have made changes to the comments, sidebar, search form, or any other template file, make sure you view these template files in all their possible page generations. For example, check out the single post view, and various multi-post views like categories, archives, or search to make sure the changes you've made to template files included in other template files work across all of the various page views.
 
;Comment Deviations :If you are [[Designing Themes for Public Release|designing Themes for public release]], make notes in your template files where you have made dramatic changes from the Default and/or Classic Themes, especially where you have changed style references or added styles outside of the style sheet like in the header or inline with the XHTML tags. Make a note of the styles used outside of the style sheet in the style sheet and include comments within the template files to guide future users.
 
;Close the Tag Door Behind You :If you start a HTML tag or <tt>div</tt> in one template file, make sure you include the closing tag in another template file. The WordPress Forum gets a lot of questions about "what happened to my theme" when they remove the footer template file without closing the tags that began in the header template file. Track down your tags and make sure they are closed.
 
;CSS Styles in Templates :Different core or included template files may feature CSS styles the same as other core template files, or different.  For example, the Default Theme features different styles depending upon if the user is viewing a page generated with the <tt>index.php</tt>, <tt>single.php</tt>, <tt>archives.php</tt>, and other template files. While Theme authors may change the style references in their Theme, for a list of the general architecture and style references in the Default and Classic WordPress Themes, see [[Site Architecture 1.5]].
 
  
== Template File Resources ==
+
== テンプレートファイルの参考資料 ==
Templates
+
* [[:Category:Templates]]
+
** [[Templates]]
+
* [[:Category:Template Tags]]
+
** [[Template Tags]]
+
** [[Stepping Into Template Tags]]
+
** [[Conditional Tags]]
+
* [[Site Architecture 1.5]]
+
* [[The Loop]]
+
* [[The Loop in Action]]
+
  
Themes
+
テンプレートについての詳細な参考資料のリストは、[[テンプレート]] を参照してください。[[:Category:テンプレート]] および [[:Category:テンプレートタグ]] の他のドキュメントも参考にしてください。
* [[Theme Development]]
+
* [[Designing Themes for Public Release]]
+
* [[Template_Tags/query_posts|Query Posts Template Tag]]
+
* [http://www.cameraontheroad.com/?p=623 Creating Multiple Single Posts for Different Categories]
+
  
{{原文|Stepping Into Templates|30688}}<!-- 19:07, February 19, 2006 Richardc020 版 -->
+
{{原文|Stepping Into Templates|65211}}<!-- 11:05, 19 December 2008 Fonus 版 -->
  
 
{{DEFAULTSORT:てんふれえとにゆうもん}}
 
{{DEFAULTSORT:てんふれえとにゆうもん}}

2009年4月17日 (金) 09:19時点における版

テンプレートファイルは、あなたの WordPressサイトの構成要素です。サイト上のどのウェブページを生成するときにも、パズルのピースのように組み合わさります。ヘッダ・テンプレートファイルやフッタ・テンプレートファイルのようなテンプレートは、あらゆるウェブページのために繰り返し使われます。特定の条件でのみ使われるテンプレートもあります。

従来のウェブページは、2つのファイルで構成されます。

WordPress には、(X)HTML 構造と CSS スタイルシートの両方が含まれていますが、内容に関しては、様々な テンプレート の影に隠れて生成されます。テンプレートファイルおよびスタイルシートは共に、WordPress Theme として保存されます。テーマの作り方については、テーマの作成 を参照してください。


WordPress のページ構造

ごく単純なウェブページ構成は、ヘッダー部分、コンテンツ部分、フッター部分の 3 ブロックで構成されます。各ブロックは、利用中の WordPress テーマのテンプレートファイルで生成されます。

Header

Content

Footer

  • ヘッダー部分は、'先頭に配置する必要のある情報、例えば — i.e. inside the <head> tag — of your XHTML web page, such as the <doctype><meta> などのタグや、スタイルシートへリンクなど、XHTML で <head> タグ内に含まれる情報が全て含まれます。<body> の開始タグや、ブログで表示される ヘッダー (典型的にはサイトのタイトル、ナビゲーションメニュー、ロゴ、サイト概要など) も含まれます。
  • コンテンツブロックは、ブログの記事やページなど、あなたのサイトの"身"の部分です。
  • 'フッター部分は、末尾に配置する情報、例えばサイト内の他のページやカテゴリーへのリンクなどの、著作権表示、コンタクト情報、その他の詳細、などが表示されます。


Basic テンプレートファイル

WordPress Theme の構成を生成するには、あなたのテーマディレクトリに index.php テンプレートファイルを作ることから始めましょう。このファイルの主な機能は、次の 2 つです。

  • 他のテンプレートファイルを include する(読み込む)。
  • データベースから (投稿、ページ、カテゴリ等の) 情報を集める WordPress Loop を読み込む。

単純な構造では、ヘッダーフッターの 2 つのファイルを読み込むだけで良いです。ヘッダーは header.php、フッターは footer.php という名前にする必要があります。ヘッダーおよびフッターを読み込むテンプレートタグは、以下の通りです。

<?php get_header(); ?>


<?php get_footer(); ?>

あなたのブログの投稿とページを表示する (そして表示方法をカスタマイズする) には、index.php は、ヘッダー読み込みとフッター読み込みの間に WordPress Loop を実行する必要があります。

より複雑なページ構造

Header

Content

Sidebar

Footer

多くの WordPress テーマでは、やあなたのサイトについての情報を含むサイドバーが含まれています。サイドバーは sidebar.php という名前のテンプレートファイルで生成されます。サイドバーは、index.php テンプレートファイルから、下記のテンプレートタグで読み込むことができます。

<?php get_sidebar(); ?>

肉はどこ?

ウェブページのコンテンツを取得するテンプレートタグがまだないこと に注意してくだだい。というのも、コンテンツは index.php 内の WordPress Loop で生成されるからです。

また、テーマのスタイルシートが、訪問者のブラウザ上でのヘッダー、フッター、サイドバーおよびコンテンツの見え方や配置を決定することに注意してください。WordPress テーマとウェブページのスタイルについての詳細は、Blog Design and Layout を参照してください。

テンプレートファイルの中にテンプレートファイル

テンプレートファイル index.php の中に、WordPress がどのようにして標準テンプレートファイル (ヘッダー、フッター、サイドバー) を読み込むかを見てきました。どのテンプレートファイルも、他のテンプレートファイルを読み込むことができます。

例えば、sidebar.php は、検索フォームを生成するテンプレートファイル searchform.php を含むことができます。検索フォームは WordPress の標準テンプレートファイルではないので、読み込むためのコードが少し異なります。

<?php include (TEMPLATEPATH . '/searchform.php'); ?>

ファイルを読み込むのに WordPress テンプレートタグを使用しません。代わりに、PHP コマンド include を使います。ファイルの場所を知る必要があるため、WordPress のテーマテンプレートファイルのあるディレクトリを示す TEMPLATEPATH が用いられます。

Header

Content

Comment Form

Sidebar

Search Form

Footer

ほとんどの WordPress テーマは、ウェブページを生成するために、テンプレートの中でさまざまなテンプレートファイルを読み込んでいます。典型的には、WordPress サイトのメインテンプレート (index.php) は、以下のテンプレートファイルを読み込んでいます。

  • header.php
    • theloop.php (The Content)
    • wp-comments.php
  • sidebar.php
    • searchform.php
  • footer.php

この構造を変更することもできます。例えば、ヘッダーに検索フォームを置くことが可能です。フッターを必要としないデザインであれば、フッターテンプレートを完全に除去することもできます。


特殊なテンプレートファイル

WordPress サイトでは、ウェブページの表示に 2 通りのコア表示機能が用意されています。単一記事表示は、個別記事を表示するのに使用します。複数記事表示は、複数の投稿もしくは投稿のサマリーを一覧表示します。カテゴリーアーカイブ、日別アーカイブ、著者アーカイブ、そして (たいていの場合) ブログのトップページで用いられます。状況に応じて、index.php テンプレートファイルを用いてこれらのページ全てを生成するか、あるいは WordPress テンプレート階層 に従って異なるテンプレートファイルを使用することができます。

次の疑問には、WordPress テンプレート階層が答えとなります。

あるタイプのページを表示するとき、WordPress はどのテンプレートファイルを使用するのか?

WordPress は、標準名のテンプレートファイルを自動認識し、ウェブページのタイプに応じて使用します。例えば、訪問者がブログ投稿のタイトルをクリックすると、WordPress は、訪問者がウェブページのその記事のみを見たいのだ、と理解します。The WordPress テンプレート階層 は、single.php ファイルが存在すれば、index.php テンプレートファイルではなく single.php テンプレートファイルを使用して個別記事ページを生成します。同様に、訪問者が特定のカテゴリへのリンクをクリックすると、WordPress は category.php テンプレートファイルが存在する場合はこのファイルを利用します。category.php が存在しない場合は、archive.php を探します。archive.php も存在しない場合は、WordPress は index.php テンプレートファイルを使用します。特定のカテゴリー用に特定のテンプレートファイルを作成することができます (詳細は を参照)。


テンプレート利用のヒント

WordPress テンプレートファイルを作成するヒントをいくつか紹介します。

開始タグと終了タグを追跡する
テンプレートファイルには、XHTML タグと CSS 参照が含まれます。HTML 要素と CSS 参照は、あるテンプレートファイルで開始して別のテンプレートファイルで終了するというように、複数のテンプレートファイルにまたがっても構いません。例えば、htmlbody HTML 要素は、典型的には header.php で開始し、footer.php で終了します。ほとんどの WordPress テーマは、HTML div 要素を使用しますが、これは複数のファイルにまたがっても構いません。例えば、ページコンテンツの main divheader.php で開始し、index.php あるいは single.php で終了しても構いません。テーマの作成、デザイン、修正をしている場合は、HTML 要素の開始と終了を追跡するのは、大変なこともあります。中身の多いタグの開始と終了をテンプレートファイルで コメントを使用してメモしておくと、 どの div が別セクションのどこで終了しているかを追跡しやすくなります。
異なるビューでテンプレートファイルを確認する
コメント、サイドバー、検索フォーム等テンプレートファイルのいずれかに変更を加えた場合は、(個別記事、異なるタイプのアーカイブ、ページなどの) 異なるページビューで確認するようにしてください。
変更点をコメントする
公開するテーマをデザインする場合、ダウンロードした人が自分で変更を加えるかもしれないことに留意してください。Default あるいは Classic テーマのロジックから変更した点について、テンプレートファイルにメモを記入するとよいでしょう。スタイル情報を別の個所 (例えばheader.php ファイルあるいは HTML タグなど) で指定している場合は、テーマのメインスタイルファイルにコメントしておくとよいでしょう。
ドアを開けたら必ず閉める
テンプレートファイルで HTML タグまたは div タグを開始した場合、どこかのテンプレートファイルで必ず終了タグを含むようにしてください。ヘッダーテンプレートファイルで開始したタグを閉じないでフッターテンプレートファイルを取り除いてしまい、「テーマがおかしくなった」という質問が WordPress フォーラムに多く寄せられています。タグを追跡して、必ず閉じるようにしてください。(タグが正しいか兼sんほうするには、個別記事ページとアーカイブページを HTML validator で確認するとよいでしょう。)
テンプレートの CSS スタイル
テンプレートでは、HTML と CSS を好きなように使うことができます。しかしながら、WordPress テーマ構造 (Site Architecture 1.5 参照) に従うことが推奨されています。こうすることで、利用する人にとって、あなたのテーマが理解しやすくなるでしょう。


テンプレートファイルの参考資料

テンプレートについての詳細な参考資料のリストは、テンプレート を参照してください。Category:テンプレート および Category:テンプレートタグ の他のドキュメントも参考にしてください。

最新英語版: WordPress Codex » Stepping Into Templates最新版との差分

この記事は翻訳時に編集が必要であるとマークされていました。その為Codex原文が大きく編集されている可能性があります。内容を確認される際は原文を参照していただき、可能であれば本項目へ反映させてください。よりよいCodexを作成するためのお手伝いをお願いします。