
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.php | 404ページ |
| coomments.php | コメント |
| searchform.php | 検索フォーム |
| search.php | 検索結果ページ |
テーマとして必須なのは style.css と index.php だけなのですが、WordPressサイトを作成・運用していく上でそれだけでは足りないことがほとんどでしょう。他のテンプレートも活用してテーマを作っていきます。
「このページではこのファイルを優先して読み込む」というのがWordPressで決まっているので、ファイル名のスペルミスに注意しましょう。
ファイルを作成したのに該当のファイルでページが表示されない場合は、ファイル名がちゃんと付けられているか確認してみて下さい。
テンプレート階層
WordPressではページを生成するために呼び出されるファイルの優先度が決まっています。テンプレート階層はこのルールのことを指します。
この階層を覚えておくと、テンプレートファイルが思った通りに適用されない、といったときなどに対応しやすいです。
【テンプレート階層図】
引用 : Template Hierarchy | Theme Developer Handbook | WordPress Developer Resources
トップページのファイル優先順位
- front-page.php
- home.php
- index.php
投稿の個別ページのファイル優先順位
- single-[post_type].php
- single.php
- singular.php
- index.php
カテゴリーページのファイル優先順位
- category-[slug].php
- category-[ID].php
- category.php
- archive.php
- index.php
タグページのファイル優先順位
- tag-[slug].php
- tag-[ID].php
- tag.php
- archive.php
- index.php
固定ページのファイル優先順位
- カスタムファイル名.php
- page-[slug].php
- page-[ID].php
- page.php
- singular.php
- index.php
カスタム投稿タイプのファイル優先順位
- archive-[post_type].php
- archive.php
- index.php
カスタムタクソノミーのファイル優先順位
- taxonomy-[taxonomy]-[teram].php
- taxonomy-[taxonomy].php
- taxonomy.php
- archive.php
- index.php
作成者ページのファイル優先順位
- author-[name].php
- author-[ID].php
- author.php
- archive.php
- index.php
日付ページのファイル優先順位
- date.php
- archive.php
- index.php
検索結果ページのファイル優先順位
- search.php
- index.php
404ページのファイル優先順位
- 404.php
- 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.php と home.php はサイトのトップページで表示されるファイルです。
WordPressの「表示設定」にある「フロントページの表示」の設定によって適用されるファイルが異なります。
「最新の投稿」を選択した場合、 front-page も home も同じ。「固定ページ」を選択した場合、「フロントページ」に front-page.php 「投稿ページ」に home.php のファイルが適用されます。
【front-page と home の違い参考】WordPressのfront pageとhomeの違い : トイレのうず/ブログ
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






