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

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

テンプレート入門

提供: WordPress Codex 日本語版
移動先: 案内検索

テンプレートファイルは、あなたの 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 参照は、あるテンプレートファイルで開始して別のテンプレートファイルで終了するというように、複数のテンプレートファイルにまたがっても構いません。例えば、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 フォーラムに多く寄せられています。タグを追跡して、必ず閉じるようにしてください。(タグが正しいかを確認するには、個別記事ページとアーカイブページを HTML validator で確認するとよいでしょう。)
テンプレートの CSS スタイル
テンプレートでは、HTML と CSS を好きなように使うことができます。しかしながら、WordPress テーマ構造 (Site Architecture 1.5 参照) に従うことが推奨されています。こうすることで、利用する人にとって、あなたのテーマが理解しやすくなるでしょう。

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

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

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