wordpress テンプレートファイルまとめ | KoMariCote

wordpress テンプレートファイルまとめ

更新2024/03/28

WordPressのテーマを作成、カスタマイズする時に覚えておきたいテンプレートファイルについてのメモです。

WordPressは特定のURLで表示されるファイル名が決められています。どのファイルがどのページで動作するのかを知っておくとテーマを作成がスムーズに進みます。
ページがうまく表示されない場合にはテンプレートファイルが作成されているか、そのファイルのコードに問題がないかといった確認がすぐにできますし、無駄なファイルを作成しなくて済む場合もあります。

また同じページで複数のファイルが読み込まれることがあります。この場合、優先順位も決まっているので覚えておきましょう。

テンプレートファイルの種類

テンプレートファイルには以下のような種類があります。

style.cssスタイルシート
index.phpメインテンプレート
front-page.phpトップページ
home.phpトップページ、投稿一覧のトップページ
functions.phpオプション関数ファイル
header.phpヘッダー
footer.phpフッター
sidebar.phpサイドバー
archive.php投稿のアーカイブページ
category.phpカテゴリー一覧ページ
tag.phpタグ一覧ページ
taxonomy.phpタクソノミー一覧ページ
author.php作者の投稿一覧ページ
single.php投稿記事ページ
page.php固定ページ
404.php404ページ
coomments.phpコメント
searchform.php検索フォーム
search.php検索結果ページ

テーマとして必須なのは style.css と index.php だけなのですが、WordPressサイトを作成・運用していく上でそれだけでは足りないことがほとんどでしょう。他のテンプレートも活用してテーマを作っていきます。

「このページではこのファイルを優先して読み込む」というのがWordPressで決まっているので、ファイル名のスペルミスに注意しましょう。
ファイルを作成したのに該当のファイルでページが表示されない場合は、ファイル名がちゃんと付けられているか確認してみて下さい。

テンプレート階層

WordPressではページを生成するために呼び出されるファイルの優先度が決まっています。テンプレート階層はこのルールのことを指します。
この階層を覚えておくと、テンプレートファイルが思った通りに適用されない、といったときなどに対応しやすいです。

【テンプレート階層図】

引用 : Template Hierarchy | Theme Developer Handbook | WordPress Developer Resources

トップページのファイル優先順位

  1. front-page.php
  2. home.php
  3. index.php

投稿の個別ページのファイル優先順位

  1. single-[post_type].php
  2. single.php
  3. singular.php
  4. index.php

カテゴリーページのファイル優先順位

  1. category-[slug].php
  2. category-[ID].php
  3. category.php
  4. archive.php
  5. index.php

タグページのファイル優先順位

  1. tag-[slug].php
  2. tag-[ID].php
  3. tag.php
  4. archive.php
  5. index.php

固定ページのファイル優先順位

  1. カスタムファイル名.php
  2. page-[slug].php
  3. page-[ID].php
  4. page.php
  5. singular.php
  6. index.php

カスタム投稿タイプのファイル優先順位

  1. archive-[post_type].php
  2. archive.php
  3. index.php

カスタムタクソノミーのファイル優先順位

  1. taxonomy-[taxonomy]-[teram].php
  2. taxonomy-[taxonomy].php
  3. taxonomy.php
  4. archive.php
  5. index.php

作成者ページのファイル優先順位

  1. author-[name].php
  2. author-[ID].php
  3. author.php
  4. archive.php
  5. index.php

日付ページのファイル優先順位

  1. date.php
  2. archive.php
  3. index.php

検索結果ページのファイル優先順位

  1. search.php
  2. index.php

404ページのファイル優先順位

  1. 404.php
  2. index.php

【参照】テンプレート階層 – Japanese Team – WordPress.org 日本語

style.css

WordPressのテーマを作成する際にはフォルダの直下に style.css が必須です。このCSSの冒頭にテーマの設定を記述していきます。

/*
  Theme Name: テーマ名
  Theme URI: サイトのURI
  Author: 作成者
  Author URI: 作成者のサイトURI
  Description: テーマの説明
  Version: テーマのバージョン
  Requires at least: テーマが動作する一番古いWordPressバージョン
  Tested up to: 動作テストをした最新のWordPressバージョン
  Requires PHP: 推奨するPHPバージョン
  Tags: テーマの特徴を表すタグ(カンマ区切り/オプション)
  License: テーマのライセンス
  License URI: テーマのライセンスについて記載しているURI
  Text Domain: 翻訳ファイルを参照するためのテキストドメイン
  Template: 子テーマの場合に親テーマを指定
*/

テーマを一般公開しない場合は「Theme Name: テーマ名」のみ記述し、その他は省略しても大丈夫です。「Theme Name」の記述も必須というわけでは内容で、記載がない場合、テーマフォルダの名前がテーマ名として表示され、テーマを切り替えることができました。
ただプラグインなどで不具合が起こることもあるようなので設定しておいた方が良いでしょう。

テーマ情報を記載した後にサイトのスタイルを記述すると反映されます。このファイルでスタイルを作っていってもいいですし、別でスタイルを管理したい場合はCSSファイルを別に作成して読み込むようにします。

index.php

index.phpテンプレート階層図にも書いてあるようにどのページでも表示されるテンプレートファイルです。それぞれのページを表示させるためのファイルを優先度の高い順に探し、なければ最終的に index.php が表示されます。そのためテーマには index.php が必須です。

トップページとしてもよく使用されますが、それぞれのページのテンプレートファイルをしっかり作っている場合、このファイルが使用されることはありません。この場合でも index.php というファイルは必要なので、 使用しないファイル構成でも空のファイルとして置いておく必要があります。

front-page.php / home.php

front-page.phphome.php はサイトのトップページで表示されるファイルです。

WordPressの「表示設定」にある「フロントページの表示」の設定によって適用されるファイルが異なります。
「最新の投稿」を選択した場合、 front-page も home も同じ。「固定ページ」を選択した場合、「フロントページ」に front-page.php 「投稿ページ」に home.php のファイルが適用されます。

functions.php

functions.php はテーマの中で使用する機能を記述するためのファイルです。ここに記述することでどのテンプレートからもその機能を使用することができます。

WordPressをカスタマイズする場合は必須です。このファイルにミスがあるとサイトが表示されないことも。編集する際には最も気をつけたいファイルです。

header.php / footer.php / sidebar.php

ヘッダーやフッター、サイドバーは色々なページで共通パーツになります。header.php / footer.php / sidebar.php はその共通する部分を記載するテンプレートファイルです。

それぞれに該当するファイルを作成し、呼び出すためのテンプレートタグを記述することで、これらのテンプレートファイルに書かれている内容が表示されます。

テンプレートファイル名パーツ箇所呼び出しコード
header.phpヘッダーget_header()
footer.phpフッターget_footer()
sidebar.phpサイドバーget_sidebar()

とあるページでは別のヘッダーやフッターを使用したいといった場合は、ファイル名を header-〇〇.php、footer-〇〇.php などにし、呼び出す際に get_header('〇〇'); とすればそのファイルを呼び出すことができます。

【header.php サンプル】

header.php は主にheadタグの内容やヘッダーとして表示させたいコードを記述します。またhead終了タグの前に wp_head(); を付けます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 他にも必要なmetaタグ -->
  <title>サイトのタイトル</title>
<?php wp_head(); ?>
</head>
<body>
  <header>
    <!-- ヘッダーの内容 -->
  </header>

【footer.php サンプル】

フッターに表示させたい内容を記述します。body終了タグの前に wp_footer(); を付けます。

  <footer class="footer">
    <!-- フッターの内容 -->
  </footer>
  <small class="copyright">©2023 KoMriCote</small>
<?php wp_footer(); ?>
</body>
</html>

archive.php

archive.php は投稿記事の一覧ページに使用されるファイルです。カテゴリーやタグ、作者や日付、カスタム投稿タイプといった各一覧のページに全て適用されます。

一覧ページを同じテンプレートにしたい場合、このファイルだけを作成して条件分岐をかけて作成することができます。

各一覧で別のテンプレートファイルを使用したい場合はそれぞれのテンプレートファイルを別途作成しましょう。例えばカスタム投稿タイプの一覧を個別に作りたい場合は archive-**.php といったファイルを作ると適用されます。

single.php

投稿の個別ページで使用されるファイルです。

以下のような記述をすることで投稿編集画面でテンプレートファイルを選択することができます。

<?php
/*
* Template Name: Template_name
* Template Post Type: post
*/
?>

上記の記載があればページの編集画面でテンプレートを選択することができ、 single-**.php というようなファイル名にしなくても適用させたいファイルを当てることができます。もちろん分かりやすいように single-**.php という形のファイル名にしても大丈夫です。

page.php

page.php は固定ページで使用されるテンプレートファイルです。

固定ページの投稿編集画面に表示される「テンプレート」の「デフォルトテンプレート」は page.php です。

page-slug.php (slug にはURLのスラッグ)というファイル名にするとそちらが優先して適用されます。/theme_name/pages/page-**.php のようにthemeフォルダの直下にない場合は自動的には適用されません。固定ページのファイルをフォルダにして管理したい場合は、「Template Name」を設定して投稿編集画面でそのページに使用するファイルを選択できるようにします。

<?php
/*
* Template Name: Template_name
*/
?>

上記の記載があればページの編集画面でテンプレートを選択することができるようになります。固定ページ用のファイルをフォルダにまとめたい、 page-slug.php といったファイル名以外の名前にしたい場合はこの記述方法を覚えておきましょう。

author.php

author.php はWordPressに登録されているユーザーごとの記事一覧が表示されるページで利用されます。

【URL例】https://example.com/author/user-name/

404.php

404.php ファイルを作っておくと、サイトに存在しないURLにアクセスした場合に自動的にこのファイルの内容が表示されます。
このファイルがない場合は index.php の内容が表示されます。

サイト画面からどのファイルが適用されているか確認する

現在表示しているページがどのファイルを読み込んでいるかが分からない場合の確認方法があります。思った通りの表示になっていない、どのファイルが適用されているかわからない、といった場合に確認方法を知っておくと探す手間が省けます。

phpコードを使って任意の場所にテンプレートファイル名を表示させる方法とプラグインを使用して確認できるようにする方法があります。
詳しくはこちらの記事にまとめました。
表示されているページでどのテンプレートファイルが使われているかを調べる

カテゴリー : WordPress

TOPへ