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

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

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

提供: WordPress Codex 日本語版
移動先: 案内、 検索
(en:Stepping Into Templates 19:07, February 19, 2006 Richardc020 版)
 
細 ({{テーマ・テンプレートガイド}})
 
(5人の利用者による、間の9版が非表示)
1行目: 1行目:
−
<!-- 原文： http://codex.wordpress.org/Stepping_Into_Templates -->
+
{{テーマ・テンプレートガイド}}
 
__TOC__
 
__TOC__
−
[[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.
+
テンプレートファイルは、あなたの WordPress サイトの構成要素です。サイト上のどのウェブページを生成するときにも、パズルのピースのように組み合わさります。ヘッダ・テンプレートファイルやフッタ・テンプレートファイルのようなテンプレートは、あらゆるウェブページのために繰り返し使われます。特定の条件でのみ使われるテンプレートもあります。
  
−
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'''.
+
従来のウェブページは、2つのファイルで構成されます。
  
−
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.
+
*ページの構造と内容を担当する [[Glossary#XHTML|(X) HTML ページ]]
 +
*ページの表示スタイルを担当する [[Glossary#CSS|CSS スタイルシート]]
  
−
== Simple Page Structure ==
+
WordPress には、(X)HTML 構造と CSS スタイルシートの両方が含まれていますが、内容に関しては、様々な[[テンプレート]]の影に隠れて生成されます。テンプレートファイルおよびスタイルシートは共に、[[テーマの使い方|WordPress テーマ]]として保存されます。テーマの作り方については、[[テーマの作成]]を参照してください。
  
−
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.
 
  
−
<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
 
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
 
Content
 
</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
 
Footer
 +
</div>
 
</div>
 
</div>
  
−
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.
+
* '''ヘッダー'''部分は、'先頭''に配置する必要のある情報、例えば &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|ヘッダー]]（典型的にはサイトのタイトル、ナビゲーションメニュー、ロゴ、サイト概要など）も含まれます。
  
−
The '''content''' holds the documentation, articles, posts, the ''meat'' of your site.
+
* '''コンテンツ'''ブロックは、ブログの記事やページなど、あなたのサイトの「身」の部分です。
  
−
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.
+
* '''フッター''部分は、末尾に配置する情報、例えばサイト内の他の[[ページ]]やカテゴリーへのリンクなどの[[en:Good_Navigation_Links|ナビゲーションメニュー]]、著作権表示、コンタクト情報、その他の詳細、などが表示されます。
  
−
=== Building a Template Foundation ===
 
  
−
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. 
+
=== 基本のテンプレートファイル ===
  
−
In the <tt>index.php</tt> template file, the call for the header and footer looks like this:
+
[[テーマの使い方|WordPress テーマ]]の構成を作るには、あなたのテーマディレクトリに <tt style="font-weight:bold; color:#036">index.php</tt> テンプレートファイルを作ることから始めましょう。このファイルの主な機能は、次の2つです。
 +
* 他のテンプレートファイルを include する（読み込む）。
 +
* データベースから（投稿、ページ、カテゴリ等の）情報を集める [[The Loop|WordPress ループ]]を読み込む。
 +
 
 +
単純な構造では、'''ヘッダー'''と'''フッター'''の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>
  
−
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.
+
あなたのブログの投稿とページを表示する（そして表示方法をカスタマイズする）には、<tt style="font-weight:bold; color:#036">index.php</tt> は、ヘッダー読み込みとフッター読み込みの間に [[The Loop|WordPress ループ]]を実行する必要があります。
  
−
<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
 
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
 
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
 
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
 
Footer
 
</div>
 
</div>
 
</div>
 
</div>
−
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.
 
  
−
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>.
+
多くの 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> テンプレートファイルから、下記の[[テンプレートタグ]]で読み込むことができます。
  
−
Here are the basic steps it takes for a simple layout on a WordPress web page:
+
<pre><?php get_sidebar(); ?></pre>
  
−
# Initiate <tt>index.php</tt>
+
=== 大事なコンテンツはどこ？ ===
−
# Get the <tt>header.php</tt>
+
−
# Generate the content within the <tt>index.php</tt>
+
−
# Get the <tt>sidebar.php</tt>
+
−
# Get the <tt>footer.php</tt>
+
−
# Display entire page in the browser
+
  
−
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]].
+
ウェブページの''コンテンツ''を取得するテンプレートタグがまだないことに注意してください。というのも、コンテンツは <tt style="font-weight:bold; color:#036">index.php</tt> 内の [[The Loop|WordPress ループ]]で生成されるからです。
  
−
== Template Files Within Template Files ==
+
また、テーマのスタイルシートが、訪問者のブラウザ上でのヘッダー、フッター、サイドバーおよびコンテンツの見え方や配置を決定することに注意してください。WordPress テーマとウェブページのスタイルについての詳細は「[[WordPress サイトデザイン リファレンス]]」を参照してください。
  
−
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">index.php</tt> の中に、WordPress がどのようにして標準テンプレートファイル （ヘッダー、フッター、サイドバー） を読み込むかを見てきました。どのテンプレートファイルも、他のテンプレートファイルを読み込むことができます。
  
−
<pre><?php include (TEMPLATEPATH . '/searchform.php'); ?></pre>
+
例えば、<tt style="font-weight:bold; color:#036">sidebar.php</tt> は、検索フォームを生成するテンプレートファイル <tt style="font-weight:bold; color:#036">searchform.php</tt> を含むことができます。検索フォームは WordPress の標準テンプレートファイルではないので、読み込むためのコードが少し異なります。
  
−
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.
+
<pre><?php get_search_form(); ?></pre>
  
−
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.
+
現在は [[関数リファレンス/get_search_form|get_search_form]] テンプレートタグが存在するため、検索フォームをテーマ内に表示させるためにインクルード方式や TEMPLATEPATH を使うべきではありません。
  
−
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
 
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
 
Content
 
</div>
 
</div>
−
<div style="background:white; border:2px #FF9900 solid;margin:5px; font-size: 130%; text-align: center; width:120px; height:50px">
+
<div style="background:white; border:2px #FF9900 solid;margin:5px; font-size:130%; text-align:center; width:120px; height:80px">
 
Comment Form
 
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; 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
 
Sidebar
 
</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">
+
<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
 
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
 
Footer
 
</div>
 
</div>
 
</div>
 
</div>
  
−
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:
+
ほとんどの WordPress テーマは、ウェブページを生成するために、テンプレートの中でさまざまなテンプレートファイルを読み込んでいます。典型的には、WordPress サイトのメインテンプレート (<tt style="font-weight:bold; color:#036">index.php</tt>) は、以下のテンプレートファイルを読み込んでいます。
  
−
# <tt>header.php</tt>
+
* <tt style="font-weight:bold; color:#036">header.php</tt>
−
# The Content (<tt>index.php</tt>)
+
** <tt style="font-weight:bold; color:#036">theloop.php</tt> (The Content)
−
## <tt>wp-comments.php</tt>
+
** <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>
  
−
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.
+
== 特殊なテンプレートファイル ==
  
−
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 サイトでは、ウェブページの表示に2通りの'''コア表示'''機能が用意されています。'''単一記事表示'''は、個別記事を表示するのに使用します。'''複数記事表示'''は、複数の投稿もしくは投稿のサマリーを一覧表示します。カテゴリーアーカイブ、日別アーカイブ、著者アーカイブ、そして （たいていの場合） ブログのトップページで用いられます。状況に応じて、<tt style="font-weight:bold; color:#036">index.php</tt> テンプレートファイルを用いてこれらのページ全てを生成するか、あるいは WordPress [[テンプレート階層]] に従って異なるテンプレートファイルを使用できます。
  
−
== Using Alternative Template Files ==
+
次の疑問には、WordPress テンプレート階層が答えとなります。
 +
<blockquote>
 +
あるタイプのページを表示するとき、WordPress はどのテンプレートファイルを使用するのか？
 +
</blockquote>
  
−
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.
+
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]] を参照）。また、特定のページ向けに[[Page_Templates|カスタムページテンプレート]]を作ることもできます。
  
−
<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>
+
WordPress テンプレートファイルを作成するヒントをいくつか紹介します。
−
''What template file will WordPress use when the _______________ (page) is displayed?''
+
 
−
</blockquote>
+
;'''開始タグと閉じタグを追跡する'''
 +
 
 +
: テンプレートファイルには、[[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.
+
: [[Designing Themes for Public Release|公開するテーマをデザインする]]場合、ダウンロードした人が自分で変更を加えるかもしれないことに留意してください。Default あるいは Classic テーマのロジックから変更した点について、テンプレートファイルにメモを記入するとよいでしょう。スタイル情報を別の個所（例えば<tt style="font-weight:bold; color:#036">header.php</tt> ファイルあるいは HTML タグなど）で指定している場合は、テーマのメインスタイルファイルにコメントしておくとよいでしょう。  
  
−
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:
+
;'''ドアを開けたら必ず閉める'''  
  
−
* [[Template Hierarchy]]
+
:テンプレートファイルで HTML タグまたは <tt style="font-weight:bold; color:#036">div</tt> タグを開始し、そのファイル内で閉じタグを書かなかった場合、どこか他のテンプレートファイルで必ず閉じタグを含むようにしてください。ヘッダーテンプレートファイルで開始したタグを閉じないでフッターテンプレートファイルを取り除いてしまい、「テーマがおかしくなった」という質問が WordPress フォーラムに多く寄せられています。タグを追跡して、必ず閉じるようにしてください。(タグが正しいかを確認するには、個別記事ページとアーカイブページを [http://validator.w3.org HTML validator] で確認するとよいでしょう。)
−
* [[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 ==
+
;'''テンプレートの CSS スタイル'''
  
−
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.
+
:テンプレートでは、HTML と CSS を好きなように使うことができます。しかしながら、WordPress テーマ構造 ([[Site Architecture 1.5]] 参照) に従うことが推奨されています。こうすることで、利用する人にとって、あなたのテーマが理解しやすくなるでしょう。
  
−
Here are some tips for using WordPress template files:
+
== テンプレートファイルの参考資料 ==
  
−
;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.
+
テンプレートについての詳細な参考資料のリストは、[[テンプレート]] を参照してください。[[:Category:テンプレート]] および [[:Category:テンプレートタグ]] の他のドキュメントも参考にしてください。
−
;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 ==
+
{{原文|Stepping Into Templates|130550}}<!-- 2013-05-02T23:36:35 Hearvox 版 -->
−
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
+
{{DEFAULTSORT:てんふれえとにゆうもん}}
−
* [[Theme Development]]
+
[[Category:WordPress レッスン]]
−
* [[Designing Themes for Public Release]]
+
[[Category:デザインとレイアウト]]
−
* [[Template_Tags/query_posts|Query Posts Template Tag]]
+
[[Category:テンプレート]]
−
* [http://www.cameraontheroad.com/?p=623 Creating Multiple Single Posts for Different Categories]
+
  
−
[[Category:WordPress_Lessons]]
+
[[en:Stepping Into Templates]]
−
[[Category:Design and Layout]]
+
[[zh-cn:模板入门]]
−
[[Category:Templates]]
+
−
{{Copyedit}}
+

2015年5月7日 (木) 18:01時点における最新版

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

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

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


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> の開始タグや、ブログで表示されるヘッダー（典型的にはサイトのタイトル、ナビゲーションメニュー、ロゴ、サイト概要など）も含まれます。
  • コンテンツブロックは、ブログの記事やページなど、あなたのサイトの「身」の部分です。
  • 'フッター部分は、末尾に配置する情報、例えばサイト内の他のページやカテゴリーへのリンクなどの、著作権表示、コンタクト情報、その他の詳細、などが表示されます。


基本のテンプレートファイル

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

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

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

<?php get_header(); ?>


<?php get_footer(); ?>

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

より複雑なページ構造

Header

Content

Sidebar

Footer

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

<?php get_sidebar(); ?>

大事なコンテンツはどこ？

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

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

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

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

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

<?php get_search_form(); ?>

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

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

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

最新英語版： WordPress Codex » Stepping Into Templates （最新版との差分）

「http://wpdocs.osdn.jp/wiki/index.php?title=テンプレート入門&oldid=8527」から取得