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

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

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

提供: WordPress Codex 日本語版
移動先: 案内検索
(一部翻訳しました)
(Template Files Within Template Files: 訳しきれず…)
1行目: 1行目:
 +
{{Stub}}
 
<!-- 原文: http://codex.wordpress.org/Stepping_Into_Templates -->
 
<!-- 原文: http://codex.wordpress.org/Stepping_Into_Templates -->
 
__TOC__
 
__TOC__
116行目: 117行目:
 
== Template Files Within Template Files ==
 
== Template Files Within Template Files ==
  
 +
テンプレートファイル <tt>index.php</tt> の中に、WordPress がどのように他のテンプレートファイルを読み込むかを見てきました。あなたはもう、テンプレートファイルの中に複数のテンプレートファイルを取り込めるようになっています。
 +
 +
<tt>sidebar.php</tt> の内側には、サイドバーに検索フォームボックスを設置する <tt>searchform.php</tt> を取り込むための、もう一つの典型的なテンプレートファイルが存在します。
 +
<!-- 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.
 
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.
 
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.
 +
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>(使用中のテーマディレクトリまでのパス)も使われています。
 +
 +
この方法を用いると、最終的に生成したいウェブページ構成に必要な、(前節で挙げた以外の)その他のテンプレートを読み込むことができます。'''<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.
 
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.
 
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.
 
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.
131行目: 142行目:
 
<?php include (TEMPLATEPATH . '/sidebar2.php'); ?>
 
<?php include (TEMPLATEPATH . '/sidebar2.php'); ?>
 
</pre>
 
</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">
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:50px">
 
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">
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>)の典型的なものです。
 +
<!-- 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:
 
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>header.php</tt>
# The Content (<tt>index.php</tt>)
+
# コンテンツ (<tt>index.php</tt>)
## <tt>wp-comments.php</tt>
+
## <tt>comments.php</tt> <!-- 原文では wp-comments.php となっていますが、デフォルトテーマに合わせて変更しました。ぼの -->
 
# <tt>sidebar.php</tt>
 
# <tt>sidebar.php</tt>
 
## <tt>searchform.php</tt>
 
## <tt>searchform.php</tt>
 
# <tt>footer.php</tt>
 
# <tt>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.
 
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.
  
166行目: 188行目:
  
 
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.
 
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.
 +
Original End -->
  
 
== Using Alternative Template Files ==
 
== Using Alternative Template Files ==

2006年11月7日 (火) 21:52時点における版

このページ「テンプレート入門」はまだ書きかけで、情報が不足しています。続きを書いて WordPress を手助けしましょう.


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

従来のウェブページは、2つのファイル―ページの構造を担当する HTML ページ と、 ページの表現を担当する スタイルシート ―とで構成されます。WordPress では、スタイルシートは従来どおりですが、HTML の構造は いくつもの部品と要素に分割され、一つのウェブページを生成するために、いろいろな手法で各ブロックを組み合わせることができます。このブロックを テンプレートファイル といいます。

WordPressテーマは、スタイルシートと、WordPressサイト上の各種のページ表示のためのブロックやテンプレートファイルで構成されます。

Simple Page Structure

ごく単純なウェブページ構成を見てみましょう。たいていのウェブページは、ヘッダ部・コンテンツ部・フッタ部を持ちます。3ブロック構成のページです。

ヘッダ

コンテンツ

フッタ

ヘッダ部(テンプレートファイル)には、doctypemeta タグ、スタイルシートへのリンク、bodyの開始タグ、あなたのサイトのタイトルを含むヘッダ表示といった、ウェブページの上部を作るのに必要な全ての情報が入っています。

コンテンツ は、ドキュメント・記事・投稿といった、あなたのサイトの の部分です。

フッタ はたいてい、他のページへのリンクや、サイト内の各カテゴリへのナビゲーションメニュー、著作権表示、コンタクト情報、その他の詳細などの情報を受け持ちます。

Building a Template Foundation

As with all building blocks, you have to start with a good foundation upon which to build. WordPress で核となるテンプレートファイルは、あなたの WordPress テーマの中にある index.php です。index.php テンプレートファイル内のコードは、他のブロックやテンプレートファイルの 呼び出し と、ウェブページを完成させるためにデータベースから情報を集める WordPress Loop で始まります。

index.php テンプレートファイルにおいて、ヘッダ部とフッタ部は次のように呼ばれます:

<?php get_header(); ?>
<?php get_footer(); ?>

ウェブページの構成に他のブロックを加えるなら、さらなるナビゲーション機能とあなたのウェブサイトについての情報を含む サイドバー を追加してもよいでしょう。

<?php get_sidebar(); ?>

ヘッダ

コンテンツ

サイドバー

フッタ

これらの "get" コマンドは、最終的なページにこれらのテンプレートファイルを "get(取得)" したり読み込むよう指示します。

コンテンツ部の "取得" には、テンプレートタグは使わないことに注意してください。コンテンツ部は index.php に書くのです。index.php テンプレートファイルは、構成要素が配置される土台です。 It compiles the blocks all together around the content instructions in the index.php.

シンプルな WordPressウェブページをレイアウトする際の基本的なステップを示します:

  1. index.php を開始。
  2. header.php を取得。
  3. index.php の中でコンテンツを生成。
  4. sidebar.php を取得。
  5. footer.php を取得。
  6. 完成したページをブラウザに表示する。

これらのブロックやテンプレートファイルが 最終的にウェブページ上のどの位置にどのように "表示" されるかは、スタイルシートによって確定します。スタイルシートの中で、ヘッダを上に配置したり、サイドバーを右か左に置いたり、フッタをきちんとコンテンツの下に据えるなど、ヘッダ・サイドバー・コンテンツ・フッタのための指示が出されます。あなたの WordPressテーマとウェブページのスタイリングについての詳細は、Blog Design and Layout を見てください。

Template Files Within Template Files

テンプレートファイル index.php の中に、WordPress がどのように他のテンプレートファイルを読み込むかを見てきました。あなたはもう、テンプレートファイルの中に複数のテンプレートファイルを取り込めるようになっています。

sidebar.php の内側には、サイドバーに検索フォームボックスを設置する searchform.php を取り込むための、もう一つの典型的なテンプレートファイルが存在します。

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

命令の仕方は今までと異なりますが、行なうことは同じです。"get(取得)" するための WordPress テンプレートタグを使う代わりに、テンプレートファイルを "include(読み込む)" ための PHPコマンド include が使われています。また、指定されたテンプレートファイルをあなたのテーマディレクトリ内から見つけるための TEMPLATEPATH(使用中のテーマディレクトリまでのパス)も使われています。

この方法を用いると、最終的に生成したいウェブページ構成に必要な、(前節で挙げた以外の)その他のテンプレートを読み込むことができます。get コマンド(命令)テンプレートタグは、標準のテンプレートファイルを呼び出します。include PHPコマンドは、標準のテンプレートファイルも標準以外のテンプレートファイルも取得できます。

For example, if you are using a query in your Loop that asks "if displaying a post from category ID 14, use header2.php and sidebar2.php instead of the normal header and sidebar", you would use the include function as part of that query. While the innards of header2.php may be exactly the same as header.php 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 header2.php isn't the "standard" header template file, you need an include command.

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

ヘッダ

コンテンツ

コメント・
フォーム

サイドバー

検索フォーム

フッタ

ほとんどの WordPressテーマでは、サイト上で個別のウェブページを生成するために、テンプレートの中で様々なテンプレートファイルを読み込んでいます。例えば、サイドバー・テンプレートファイルの中では、読み込みたい検索フォーム・テンプレートを呼び出します。次に示すテンプレートファイルは、WordPressサイトのフロントページ(index.php)の典型的なものです。

  1. header.php
  2. コンテンツ (index.php)
    1. comments.php
  3. sidebar.php
    1. searchform.php
  4. footer.php

多くのブロックは互換性があり、あなたのサイト構成のどこにでもテンプレートファイルを移動できるようになっています。あるテーマは、サイドバーから移動してヘッダに設置した検索フォームが特徴です。あるテーマではフッタを使わず、そのデザインからフッタ・テンプレートを抜いてあります。あるユーザは、コメントを受け付けたくないので、コメントフォームの呼び出しを削除、あるいはコメントアウトしています。

テンプレートのカスタマイズはWordPressページでも行なえ、独自のスタイルや構成を可能にします。あなたは、別のヘッダやサイドバー、フィード、asides、ウェブページに常時/時々追加したい構成要素など、どのようなパーツやピースでも追加・交換して、あなた自身のカスタムテンプレートを作り出すことができます。

覚えておいてください。スタイリングはスタイルシートで行ないます。でも、どの構成要素にも、include コマンドで呼び出せるテンプレートタグを置くことができるのです。

Using Alternative Template Files

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 index.php template file, WordPress' inherent template hierarchy allows specific templates to be used instead of the index.php file. This allows even more fine-tuning and customization.

Header

Single Post

Comment Form

Footer

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:

What template file will WordPress use when the _______________ (page) is displayed?

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 single.php 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 sidebar.php. 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 category.php template file to generate the list of category posts, and if it isn't found, then generates them using the index.php. Using the template hierarchy, if it finds the category.php template file, it then looks for a category template file that matches the category ID number being sought, for example, category-2.php. 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:

Template File Tips

Template files include the use of XHTML tags and CSS references. They are also packed with template files, queries, and the WordPress Loop which generates the content within each page view from within the core template files like index.php, single.php, category,php, archives.php, and others.

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 html and body HTML tags begin in the header.php and end in the footer.php. In some WordPress Themes, the content container may start in the header.php and end in the index.php or single.php. Tracking down where one tag begins and the other one ends can get complicated if you are developing, designing, or adjusting a Theme. We recommend you use comments to note in the template files where a large container tag opens and when it closes so you can track which </div> 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, 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 div 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 index.php, single.php, archives.php, 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

Themes

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