WordPress Logo WordPress のテンプレートとテンプレート階層について

更新日:2019年02月17日

作成日:2019年01月18日

テンプレート

テンプレートとは雛形のことで、ウェブページとして表示する情報をデータベースから取得し、ウェブページを生成する方法を制御する(WordPress のルールに従って記述された)PHP ファイルです。WordPress では、投稿などのデータベースに格納されたデータをテンプレート(ページの雛形)を使って出力・表示します。

テンプレートファイルは HTML、PHP、テンプレートタグで構成されています。

WordPress では、アクセスされたページに合わせて、表示するテンプレートファイルが自動的に選択されるようになっています。(テンプレートからページへの変換

1つのテーマには複数のテンプレートを入れてページの種類によって使い分けることができます。テンプレートの名前(ファイル名)は WordPress が定めたルールがあり以下のようなテンプレートがあります(一部抜粋)。

テンプレートの例
ページの種類 テンプレート 概要
フロントページ front-page.php サイトのトップページを出力
ホーム(メイン)ページ home.php サイト(ブログ)のトップページを出力
固定ページ page.php 個々の固定ページを出力
個別投稿 single.php 個々の投稿ページを出力
カテゴリー category.php カテゴリーごとのアーカイブ(一覧)ページを出力
タグ tag.php タグごとのアーカイブ(一覧)ページを出力
作成者 author.php 作成者別のアーカイブ(一覧)ページを出力
日付 date.php 日付ごとのアーカイブ(一覧)ページを出力
アーカイブ archive.php 月ごとのアーカイブ(一覧)ページを出力
検索結果 search.php 検索結果のページを出力
404 (Not Found) 404.php 404エラー(Not Found)ページを出力

テンプレートには、優先順位が付いていて、WordPress はアクセスされたページによって優先順位の高いテンプレートを自動的に探します。

テンプレート階層

WordPress では、アクセスされた URL をもとに、各ページをテンプレートに基づいて出力します。その際に、複数のテンプレートの中から優先順位が高いものを選択する仕組みを「テンプレート階層(Template Hierarchy)」と呼びます。

WordPress Codex(日本語版):テンプレート階層

例えば、個々の投稿ページはテーマの中に single-post_type.php と言うテンプレートが含まれていれば、そのテンプレートを使って出力しますが、single-post_type.php がない場合は、single.php というテンプレートを使って出力します。single-post_type.php も single.php もなければ singular.php というテンプレートを使います(singular.php は Version 4.3 以降)。いずれのテンプレートもなければ、index.php を使って出力します。

以下はテンプレートファイルの優先順位を示す表です。左側ほど優先順位が高いテンプレートになります。

右側にあるほど優先順位は低くなり、逆に適用されるページの種類が多くなります。single-post_type.php は投稿専用のテンプレートですが、singular.php は投稿だけではなく、固定ページのテンプレートにも含まれます。もし、投稿と固定ページの構造がほぼ同じ場合、singular.php で投稿と固定ページの両方を出力するというようなことが可能です。

index.php は全てのページの最後の(優先順位の最も低い)テンプレートなので、index.php のテンプレートのみを使って出力するようなテーマも作成することは可能です。但し、その場合、テンプレートのコード(条件分岐等)が複雑になる可能性があります。Web サイトの設計に合わせて、適切なテンプレートの設計が必要になります。

※テーマを作成する際は、テンプレート階層を理解して、適切にテンプレートを選択することが大切になります。

テンプレートファイルの優先順位
ページの種類
条件分岐タグ
高い ← 優先度 → 低い
フロントページ
is_front_page
front-page.php ※1固定ページ表示ルール ※2ホームページ表示ルール - index.php
ホームページ
is_home
home.php - - -
カテゴリー
is_category
category-slug.php category-id.php category.php archive.php
タグ
is_tax
tag-slug.php tag-id.php tag.php
カスタム分類
is_tax
taxonomy-taxonomy-term.php taxonomy-taxonomy.php taxonomy.php
作成者
is_author
author-nicename.php author-id.php author.php
日付
is_date,is_day
is_month
is_year
date.php - -
アーカイブ
is_archive
is_post_type_archive
archive-post_type.php - -
検索結果
is_search
search.php - - -
404 (Not Found)
is_404
404.php - - -
固定ページ
is_page
is_singular
customname.php
(カスタムページテンプレート)
page-slug.php page-id.php page.php
singular.php
※3
個別投稿
is_single
is_singular
single-post_type.php - - single.php
添付ファイル
is_attachment
is_singular
MIME_type.php
image.php
video.php
audio.php
application.php
attachment.php single-attachment.php
  • オレンジ色の箇所は、id 名やスラッグ名、カスタム名の値を指定
  • フロントページ:特定のページをトップページに表示するときに使う。「管理画面」→「設定」→「表示設定」の「フロントページの表示」で指定したページが表示される。詳細は下記「トップページのテンプレート」参照。
  • ホームページ:Webサイトのトップページに使う。「管理画面」→「設定」→「一般設定」の「サイトのアドレス(URL)」に設定されているURLにアクセスされた際に表示するページ。
  • ※1:固定ページ表示ルール:「管理画面」→「設定」→「表示設定」の「フロントページの表示」が「固定ページ」で「フロントページ」が設定(選択)されている場合
  • ※2:ホームページ表示ルール:「管理画面」→「設定」→「表示設定」の「フロントページの表示」が「固定ページ」で「投稿ページ」が設定(選択)されている場合
  • ※3:Version 4.3 から新たに singular.php というテンプレートが追加されました。singular.phpは、固定ページ・投稿ページのテンプレートである page.php、single.php がない時に読み込まれます。

トップページのテンプレート

  1. front-page.php
  2. home.php
  3. index.php
  • front-page.php が存在する場合は「管理画面」→「設定」→「表示設定」の「フロントページの表示」で「固定ページ」を選択している場合でも、front-page.php が優先される。(home.php、index.php に対しては固定ページが優先される)
  • front-page.php と home.php の両方がある場合は front-page.php がトップページに表示される
  • front-page.php と home.php がない場合は index.php がトップページに表示される

個別投稿ページのテンプレート

  1. single-{post_type(カスタム投稿名)}.php
  2. single.php
  3. singular.php
  4. index.php
  • 通常の投稿記事の個別ページで使用するテンプレートは「single.php」
  • スラッグや id で振り分けることはできないので、表示をページに合わせて分ける場合は条件分岐タグによる切り替えを行う
  • (in_category などを使ってカテゴリーにより分岐し、get_template_part タグを利用してテンプレートパーツを読み込むなど)
  • カスタム投稿を利用した場合は「single-カスタム投稿名.php(single-{post_type}.php)」のテンプレートで専用のテンプレートを利用できる

固定ページのテンプレート

  1. カスタムテンプレートページ作成画面の「ページテンプレート」メニューで選択したテンプレートのファイル名
  2. (テンプレートの名前 「Template Name:~」を記述してあるファイルの名前)
  3. page-slug.php
  4. page-id.php
  5. page.php(固定ページの汎用テンプレート)
  6. singular.php
  7. index.php
  • 固定ページは、テンプレート階層でもっとも優先順位の高い「ページテンプレート」(次項参照)を、ページごとに設定することができる。

WordPress Codex(日本語):固定ページ

カスタムページテンプレート(カスタムテンプレート)

カスタムテンプレートは特定の「固定ページ」の生成に利用できるテンプレートで、任意のファイル名をつけて作成します。

テーマフォルダの中に、customname(任意のファイル名).php というファイルを作成し、以下のようにテンプレート名を指定します。(この名前は、管理画面「固定ページ」の編集画面のテンプレートのプルダウンに表示されます)

  • ファイル名とテンプレート名が同一である必要はありません。
  • Template Name: 「Template Name」と「:」の間にスペースを入れてはいけません。
customname.php
<?php
/*
Template Name: テンプレート名(管理画面で表示されるテンプレート名:日本語可)
*/
?>   
ここからは通常のテンプレートファイルと同じ

上記のコメントを追加したテンプレートファイルをテーマフォルダに保存すると、固定ページの新規追加・編集画面で「ページ属性」部分に「テンプレート」の項目が追加され、リストから識別名を選択すると、テンプレート階層より優先されるテンプレートファイルとして設定することができます。

カテゴリーページのテンプレート

  1. category-slug.php
  2. category-id.php
  3. category.php(カテゴリーの汎用テンプレート)
  4. archive.php(汎用アーカイブテンプレート。タグ・日別・アーカイブなどと共用)
  5. index.php
  • カテゴリー記事の一覧などに使用するテンプレート
  • すべてのカテゴリーを1つのデザインで表示する場合は、「category.php」のみで問題ないが、カテゴリーによりデザインを変更する場合は、条件分岐でデザインを変更するか、カテゴリーのスラッグや id を使用してテンプレートを分けることができる

WordPress Codex(日本語):カテゴリーテンプレート

タグ表示ページのテンプレート

  1. tag-slug.php
  2. tag-id.php
  3. tag.php(タグの汎用テンプレート)
  4. archive.php(汎用アーカイブテンプレート。カテゴリー・日別・アーカイブなどと共用)
  5. index.php
  • タグとは関連記事をまとめたりする際の目印のような機能
  • タグのスラッグや id を使用してテンプレートを分けることができる

カスタム分類のテンプレート

  1. taxonomy-{taxonomy}-{term}.php
  2. カスタムタクソノミー名が「topicscat」、ターム(スラッグ)が「economy」の場合:taxonomy-topicscat-economy.php
  3. taxonomy-{taxonomy}.php
  4. カスタムタクソノミー名が「topicscat」の場合:taxonomy-topicscat.php
  5. taxonomy.php
  6. archive.php
  7. index.php
  • ターム:カスタムタクソノミーで作成するタグ機能やカテゴリー機能を持ったもの

WordPress Codex(日本語):カスタム分類

カスタム投稿タイプの一覧表示のテンプレート

  1. archive-{post_type(カスタム投稿名)}.php
  2. archive.php(汎用アーカイブテンプレート。カテゴリー・タグ・日別・アーカイブなどと共用)
  • カスタム投稿タイプのインデックスページ(一覧ページ)は archive-投稿タイプ名.php というテンプレートで扱うことができる。(3.1以降)
  • カスタム投稿タイプのアーカイブを表示するためには、カスタム投稿タイプを登録のとき、register_post_type() の引数に、‘has_archive’ => true を指定する

WordPress Codex(日本語):カスタム投稿タイプ(投稿タイプ)

作成者表示テンプレート

  1. author-{nicename}.php - 作成者の nicename が tom の場合は author-tom.php
  2. author-{id}.php - 作成者の作成者ID が 6 ならば author-6.php
  3. author.php
  4. archive.php
  5. index.php
  • 作成者別アーカイブインデックスページの表示に使用されるテンプレートファイル

日付表示テンプレート

  1. date.php
  2. archive.php
  3. index.php
  • ブログなどで日時別の一覧を表示するときに使用する。
  • 通常サイトでは更新情報の一覧を年/月ごとに表示する場合などに使用。

テンプレートからページへの変換

HTML で作成した静的な Web サイトの場合、ファイルの物理的な位置が URL と関連しますが、WordPress の場合は異なります。アクセスされたページ(リクエストされた URL)をどのテンプレートで表示するかは以下のような仕組みになっています。

WordPress をインストールしたディレクトリを見ると、以下のように .htaccess 及び index.php と言うファイルがあります。

WordPress インストールディレクトリの中身

以下は WordPress を wp と言うディレクトリにインストールした場合に生成される、.htaccess の例です。

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /wp/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wp/index.php [L]
</IfModule>

# END WordPress   

内容は「リクエストされたファイルが存在せず(6行目)」かつ「リクエストされたディレクトリが存在しない(7行目)」場合はどんなファイル(.)でも /wp/index.php へ書き換える(8行目)と言うような指示が記述されています( .htaccess )。

つまり、指定されたファイルやディレクトリがない場合は、インストールディレクトリの index.php を参照するようにとなっています。

以下がインストールディレクトリにある index.php に記述されている内容です。冒頭のコメントには「WordPress アプリケーションへの入り口です。このファイルはテーマをロードするために wp-blog-header.php を読み込む(load)以外は何もしません。」というようなことが記述されています。

define('WP_USE_THEMES', true) は、define() 関数でテーマファイルを読み込むかどうかの定数「WP_USE_THEMES」を「true」に定義しています。後述する「③ テーマのテンプレートのロード(wp-include/template-loader.php)」でこの定数を使ってテーマのテンプレートを読み込むかどうか条件分岐しています。

require() は外部ファイルを読み込む指示で、dirname() はディレクトリのパスを返してくれる関数です。

dirname( __FILE__ ) は、そのファイルのあるディレクトリのパスを返してくれるので、同じディレクトリ(インストールディレクトリ)にある wp-blog-header.php を読み込む指示になります。

<?php  /* index.php */
/**
 * Front to the WordPress application. This file doesn't do anything, but loads
 * wp-blog-header.php which does and tells WordPress to load the theme.
 */

/**
 * Tells WordPress to load the WordPress theme and output it.
 * @var bool
 */
define('WP_USE_THEMES', true);

/** Loads the WordPress Environment and Template */
require( dirname( __FILE__ ) . '/wp-blog-header.php' );

同じディレクトリにある wp-blog-header.php を見ると以下のようになっています。

コメントには「WordPress の環境設定とテンプレートを読み込む」とあります。

<?php  /* wp-blog-header.php */
/**
 * Loads the WordPress environment and template.
 * @package WordPress
 */
if ( !isset($wp_did_header) ) {
  $wp_did_header = true;
  //  Load the WordPress library.
  require_once( dirname(__FILE__) . '/wp-load.php' );
  //  Set up the WordPress query.
  wp();
  //  Load the theme template.
  require_once( ABSPATH . WPINC . '/template-loader.php' );
}

① WordPress のライブラリのロード(読み込み)
require_once( dirname(__FILE__) . '/wp-load.php' );

wp-load.php では、定数(ABSPATH)の定義や設定ファイル(wp-config.php)の読み込みなどが行われます。

 /* wp-load.php 抜粋*/
define( 'ABSPATH', dirname( __FILE__ ) . '/' );

require_once( ABSPATH . 'wp-config.php' );

wp-config.php には、WordPress をインストールした際に入力したデータベースへの接続情報などの設定情報が保存されています。また、wp-settings.php の読み込みも記述されています。

/* wp-config.php 一部抜粋 */
/** WordPress のためのデータベース名 */
define('DB_NAME', 'database_name_here');

/** MySQL データベースのユーザー名 */
define('DB_USER', 'username_here');

/** MySQL データベースのパスワード */
define('DB_PASSWORD', 'password_here');

/** MySQL のホスト名 */
define('DB_HOST', 'localhost');

/** データベースのテーブルを作成する際のデータベースの文字セット */
define('DB_CHARSET', 'utf8');

/** データベースの照合順序 (ほとんどの場合変更する必要はありません) */
define('DB_COLLATE', '');

/** Sets up WordPress vars and included files. */
require_once(ABSPATH . 'wp-settings.php');

wp-settings.php には、必要なファイルの読み込みやデフォルトのフィルターや functions.php の読み込み、init、wp_loaded、setup_theme、after_setup_theme などのアクションフックの実行なども記述されています。

//wp-settings.php(抜粋)
/**
 * Used to set up and fix common variables and include
 * the WordPress procedural and class library.
 * Allows for some configuration in wp-config.php (see default-constants.php)
 * @package WordPress
 * Stores the location of the WordPress directory of functions,classes,and core content.
 * @since 1.0.0
 */
define( 'WPINC', 'wp-includes' );

// Include files required for initialization.
require( ABSPATH . WPINC . '/load.php' );
require( ABSPATH . WPINC . '/default-constants.php' );
require_once( ABSPATH . WPINC . '/plugin.php' ); 

・・・中略・・・

// Load early WordPress files.
require( ABSPATH . WPINC . '/compat.php' );
require( ABSPATH . WPINC . '/class-wp-list-util.php' );
require( ABSPATH . WPINC . '/functions.php' );
require( ABSPATH . WPINC . '/class-wp-matchesmapregex.php' );
require( ABSPATH . WPINC . '/class-wp.php' );
require( ABSPATH . WPINC . '/class-wp-error.php' );
require( ABSPATH . WPINC . '/pomo/mo.php' );

// Include the wpdb class and, if present, a db.php database drop-in.
global $wpdb;
require_wp_db();

// Set the database table prefix and the format specifiers for database table columns.
$GLOBALS['table_prefix'] = $table_prefix;
wp_set_wpdb_vars();

// Start the WordPress object cache, or an external object cache if the drop-in is present.
wp_start_object_cache();

// Attach the default filters.(デフォルトフィルタの読み込み)
require( ABSPATH . WPINC . '/default-filters.php' );

・・・中略・・・

// Load most of WordPress.(wp-includes にあるほとんどのファイルの読み込み)
require( ABSPATH . WPINC . '/class-wp-walker.php' );
require( ABSPATH . WPINC . '/class-wp-ajax-response.php' );
require( ABSPATH . WPINC . '/formatting.php' );
require( ABSPATH . WPINC . '/capabilities.php' );
・・・
・・・中略・・・

/* Fires once all must-use and network-activated plugins have loaded. */
do_action( 'muplugins_loaded' );
・・・
/* Fires once activated plugins have loaded. */
do_action( 'plugins_loaded' );
・・・
/* Fires before the theme is loaded. */
do_action( 'setup_theme' );

・・・
//Load the functions for the active theme,for both parent and child theme if applicable.
if ( ! wp_installing() || 'wp-activate.php' === $pagenow ) {
  if ( TEMPLATEPATH !== STYLESHEETPATH && file_exists( STYLESHEETPATH . '/functions.php' ) )
    include( STYLESHEETPATH . '/functions.php' );
  if ( file_exists( TEMPLATEPATH . '/functions.php' ) )
    include( TEMPLATEPATH . '/functions.php' );
}

/* Fires after the theme is loaded */
do_action( 'after_setup_theme' );

・・・
/*
Fires after WordPress has finished loading but before any headers are sent.
Most of WP is loaded at this stage, and the user is authenticated. 
WP continues to load on the {@see 'init'} hook that follows (e.g. widgets), and many plugins instantiate themselves on it for all sorts of reasons (e.g. they need a user, a taxonomy, etc.).
If you wish to plug an action once WP is loaded, use the {@see 'wp_loaded'} hook below.
 */
do_action( 'init' );

・・・
/*  This hook is fired once WP, all plugins, and the theme are fully loaded and instantiated. */
do_action( 'wp_loaded' );

② WordPress クエリのセットアップ
wp();

wp() 関数の実行。ブアクセスされた URL を元にクエリー条件の設定や、アクセスされた URL に該当するページのデータのデータベースからの読み込みを実行。

以下は wp() の定義で、$wp->main() が呼び出されています。

function wp( $query_vars = '' ) {
  global $wp, $wp_query, $wp_the_query;
  $wp->main( $query_vars );

  if ( !isset($wp_the_query) )
    $wp_the_query = $wp_query;
}

main() は wp-include/class-wp.php に以下のように定義されていて、「リクエストに基づくクエリ変数のセットアップ」「クエリ変数に基づくループをセットアップ」「リクエストされた URL が見つからない場合 404ヘッダをセット」「グローバル変数のセットアップ」「wp アクションフックの実行」などが行われています。

public function main($query_args = '') {
  $this->init(); //現在のユーザーをセットアップ
  $this->parse_request($query_args); //リクエストに基づくクエリ変数のセットアップ
  $this->send_headers();
  $this->query_posts(); //クエリ変数に基づくループをセットアップ
  $this->handle_404(); //リクエストされた URL が見つからない場合 404ヘッダをセット
  $this->register_globals(); //グローバル変数のセットアップ

  /**
  * Fires once the WordPress environment has been set up.
  *
  * @since 2.1.0
  *
  * @param WP $this Current WordPress environment instance (passed by reference).
  */
  do_action_ref_array( 'wp', array( &$this ) ); //wp アクションフックの実行
}

③ テーマのテンプレートのロード(読み込み)
require_once( ABSPATH . WPINC . '/template-loader.php' );

ABSPATH は絶対パスを表す定数で、WPINC は wp-include フォルダを意味します。

wp-include フォルダにある template-loader.php(テンプレートの読み込み)は以下のようになっています。

 /* template-loader.php 一部抜粋 */
if ( defined('WP_USE_THEMES') && WP_USE_THEMES ) :
  $template = false;
  if     ( is_embed()          && $template = get_embed_template()       ) :
  elseif ( is_404()            && $template = get_404_template()         ) :
  elseif ( is_search()         && $template = get_search_template()      ) :
  elseif ( is_front_page()     && $template = get_front_page_template()  ) :
  elseif ( is_home()           && $template = get_home_template()        ) :
  elseif ( is_post_type_archive() && $template = get_post_type_archive_template() ) :
  elseif ( is_tax()            && $template = get_taxonomy_template()    ) :
  elseif ( is_attachment()     && $template = get_attachment_template()  ) :
    remove_filter('the_content', 'prepend_attachment');
  elseif ( is_single()         && $template = get_single_template()      ) :
  elseif ( is_page()           && $template = get_page_template()        ) :
  elseif ( is_singular()       && $template = get_singular_template()    ) :
  elseif ( is_category()       && $template = get_category_template()    ) :
  elseif ( is_tag()            && $template = get_tag_template()         ) :
  elseif ( is_author()         && $template = get_author_template()      ) :
  elseif ( is_date()           && $template = get_date_template()        ) :
  elseif ( is_archive()        && $template = get_archive_template()     ) :
  else :
    $template = get_index_template();
  endif;

template-loader.php は、is_single() や is_page() などの条件分岐タグを使って、HTML を生成するためのテンプレートを決定しています。言い換えると、アクセスされたページ(リクエストされた URL)をどのテンプレートで表示するかと言うテンプレート階層の仕組みが記述されています。

WordPress は上記のような手順でアクセスされたページに該当するテンプレートを探します。もし、どのテンプレートにも該当しない場合は、最後の get_index_template() が実行され、index.php が読み込まれます。

ファイルの読み込み順序

以下がファイルの読み込みの概要です。

  1. インストールディレクトリの index.php(wp-blog-header.php の読み込み)
  2. wp-blog-header.php(wp-load.php の読み込み)
  3. wp-load.php(wp-config.php の読み込み)
  4. wp-config.php(データベースへの接続情報などの読み込みや wp-settings.php の読み込み)
  5. wp-settings.php(functions.php や各種設定ファイルの読み込み、init、wp_loaded、setup_theme、after_setup_theme アクションフックの実行 などを含む設定情報の読み込み)
    wp() 関数の実行。アクセスされた URL を元にクエリー条件の設定(query_var や query_string)、該当するページのデータのデータベースからの読み込み、404の設定。
  6. template-loader.php テーマのテンプレートの読み込み(アクセスされたページ、つまりリクエストされた URL をどのテンプレートで表示するかを決定)

関連情報参考ページ

テンプレートパーツ

一般的な Web サイトの構造は、ヘッダー、コンテンツ部分、サイドバー、フッターなどから構成されています。ページごとにテンプレートを作成していくと、ヘッダーやフッターなどの共通部分を繰り返し記述することになるので、共通のパーツは「テンプレートパーツ」と言うテンプレートファイルに記述して、各テンプレートでインクルードタグを使って読み込みます。

テンプレートパーツは「パーツテンプレート」や「モジュールテンプレート」、または単にテンプレートと呼ばれることもあり、テンプレートを構成するファイルのことです。

テンプレートパーツによる分割の概念図

テンプレートパーツの読み込みの概念図

テンプレートパーツの一覧
パーツ テンプレートファイル名 読み込むためのインクルードタグ
ヘッダー header.php <?php get_header(); ?>
header-{name}.php <?php get_header($name); ?>
フッター footer.php <?php get_footer(); ?>
footer-{name}.php <?php get_footer($name); ?>
サイドバー sidebar.php <?php get_sidebar(); ?>
sidebar-{name}.php <?php get_sidebar($name); ?>
検索フォーム searchform.php <?php get_search_form(); ?>
コメント comments.php <?php comments_template(); ?>
カスタム aaa.php <?php get_template_part('aaa'); ?>
aaa-bbb.php <?php get_template_part('aaa', 'bbb'); ?>

それぞれのインクルードタグについては「テンプレートの読み込みを行う関数」を参照ください。