オリジナルテーマ WordPress

【WordPress】オリジナルテーマ制作に必要なテンプレートの階層まとめ

【WordPress】オリジナルテーマ制作に必要なテンプレートの階層まとめ
WordPressのオリジナルテーマ制作に必要なテンプレートっていっぱいあってよく分からない・・・

WordPressのオリジナルテーマ制作については以下の記事から順番に解説しています。

WordPressオリジナルテーマの作り方①(ファイルの準備編)

ただしテンプレートには優先順位があり、その全ては解説出来ていないので、この記事で詳しく解説していきたいと思います。

効率よくWordPress制作したい人はこちら

WordPressオリジナルテーマ制作に必要なテンプレートの階層まとめ

テンプレートを解説していく前に知っておきたい情報があります。

WordPressはアクセスされたページの種類によって、表示されるテンプレートファイルが決まっています。

そしてページによって表示出来るテンプレートファイルは複数あり、その中で優先順位があるという事です。

例えば、トップページに使われるテンプレートファイルは以下の3つになります。

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

上から順に優先順位が高く、

  • index.phpしかなければindex.phpがトップページとして表示
  • home.phpとindex.phpがあればhome.phpがトップページとして表示
  • 3つ全てあればfront-page.phpがトップページとして表示

となります。

つまりそのページを表示出来るテンプレートファイルが複数ある場合、優先順位が高いものが使われるという事です。

そして優先順位が低く使われなかったテンプレートは別のページとして表示されたり、違う役割となります。

中でもindex.phpは一番優先順位が低く、そのページを表示出来るテンプレートが1つもない場合に適用されるため、優先順位は低いですが必須ファイルとなります。

それでは優先順位が高い順に書いていきます。

 

トップページ

トップページとして使用出来るテンプレートファイルは3つありますが、私は、

  • front-page.php → トップページ
  • home.php → 記事一覧ページ

として使っています。

 

front-page.php

トップページとして最優先に適用されるテンプレートファイル。

 

home.php

front-page.phpがない場合に適用されるテンプレートファイル。

front-page.phpがある場合は記事ページ一覧として使うことが多い。

 

index.php

上記テンプレートファイルが全て無い場合に適用。

 

固定ページ

固定ページはファイル名をpage-{slug}.phpにして、カスタムテンプレートファイルとして固定ページの編集画面からテンプレートを選択する、という方法を私は使っています。

つまり1番目(カスタムテンプレートファイル)と2番目(page-{slug}.php)を組み合わせる感じになります。

詳細は以下の記事を参照下さい。

WordPressオリジナルテーマの作り方④(固定ページ編)

カスタムテンプレートファイルだけでもいいのですが、テーマフォルダに大量のテンプレートファイルがある時、以下のようになります。

  • company.php
  • about.php
  • recruit.php
  • contact.php

しかしpage-{slug}.phpにすれば、ぱっと見で固定ページのテンプレートファイルだと分かります。

  • page-company.php
  • page-about.php
  • page-recruit.php
  • page-contact.php

逆にpage-{slug}.phpだけでも大丈夫ですが、このあと解説するカスタムテンプレートファイルのヘッダーにページ名を入れることで、ファイルを開いた時に「このテンプレートファイルは会社概要ページか」という感じにどのページのテンプレートファイルなのか分かりやすくなります。

 

カスタムテンプレートファイル

例えば会社概要のページをcompany.phpというファイルで作るとします。

そしてファイルには以下のようにコードを書きます(同時にheader.phpも読み込んでいます)

<?php
/*
Template Name: 会社概要
*/
get_header();
?>
<main>
〜省略〜
</main>
<?php get_footer(); ?>

Template Nameは英語でも日本語でもOKです。

そして固定ページの編集画面で、テンプレートから会社概要を選択すればOKです。

 

page-{slug}.php

例えば会社概要ページのパーマリンクがこちらだとしたら、赤枠がスラッグになります。

なのでテンプレートファイルはpage-company.phpとなります。

 

page-{ID}.php

IDが138の場合、page-138.phpとなります。

IDの確認方法はページ名にカーソルを乗せて、左下に表示される数字になります。

 

page.php

これはコードをテンプレートではなく、管理画面のテキストエディタに書く方法で固定ページを作るときに使います。

詳しくは以下のページで解説しています。

WordPressオリジナルテーマの作り方④(固定ページ編)

 

singular.php

上記テンプレートファイルが全て無い場合に適用。

 

index.php

上記テンプレートファイルが全て無い場合に適用。

 

記事一覧ページ

記事一覧ページとして使用出来るテンプレートファイルは2つありますが、トップページの項目で書いた通り、私はhome.phpを記事一覧ページとして使っています。

 

home.php

記事一覧ページとして使う場合は、まず記事一覧ページ用の固定ページを作ります。

次に「設定 → 表示設定 → ホームページの表示 → 固定ページを選択 → 投稿ページで先ほど作った固定ページを選択し変更を保存」で完了です。

 

index.php

home.phpが無い場合に適用。

 

個別記事ページ

 

single-{post_type}.php

これはカスタム投稿の個別記事ページに使うテンプレートで、post_typeは以下で確認します(Advanced Custom Fieldsの場合)

この場合、テンプレートファイルはsingle-news.phpとなります。

 

single.php

これは主に通常の投稿の個別記事ページで使いますが、カスタム投稿の個別記事ページとしても使えます。

 

singular.php

page.phpとsingle.phpが無い時に適用されるので、固定ページと個別記事をまとめるテンプレートファイルになります。

しかし、固定ページと個別記事ページのデザインが同じことはまずないと思うので、使う機会は滅多に無いかと思います(私は使った事ありません)

つまりpage.phpとsingle.phpがあれば不要です。

 

index.php

上記テンプレートファイルが全て無い場合に適用。

 

カテゴリー一覧ページ

 

category-{slug}.php

指定したスラッグのカテゴリー一覧ページになります。

例えば「お知らせ」「ブログ」「コラム」というカテゴリーの中で、お知らせだけデザインを変えたい場合などは、category-news.phpという書き方をします。

カテゴリーのスラッグは投稿 → カテゴリーで該当のカテゴリーの編集から確認出来ます。

 

category-{ID}.php

指定したIDのカテゴリー一覧ページになります。

IDが3の場合、page-3.phpとなります。

IDの確認方法は投稿 → カテゴリーのカテゴリー名にカーソルを乗せて、左下に表示される数字になります。

 

category.php

全てのカテゴリー一覧ページのデザインが同じならこのテンプレートファイルでOKです(いつもこれを使っています)

 

archive.php

上記テンプレートファイルが全て無い場合に適用。

 

index.php

上記テンプレートファイルが全て無い場合に適用。

 

カスタム投稿一覧ページ

 

archive-{post_type}.php

指定したカスタム投稿タイプの一覧を表示します。

single-{post_type}.phpと同じですが、post_typeは以下で確認します(Advanced Custom Fieldsの場合)

この場合、テンプレートファイルはarchive-news.phpとなります。

 

archive.php

archive-{post_type}.phpが無い場合に適用。

 

index.php

上記テンプレートファイルが全て無い場合に適用。

 

カスタムタクソノミー一覧ページ(カスタム分類)

これは通常投稿のカテゴリー一覧と同じような物になります(カテゴリー ≒ カスタムタクソノミー)

 

taxonomy-{taxonomy}-{term}.php

指定したカスタムタクソノミーとタームの一覧を表示します。

カスタムタクソノミーがnewscatで、タームがtokyoの場合はtaxonomy-newscat-tokyo.phpとなります。

 

taxonomy-{taxonomy}.php

指定したカスタムタクソノミーの一覧を表示します。

カスタムタクソノミーがnewscatの場合はtaxonomy-newscat.phpとなります(いつもこれを使っています)

 

taxonomy.php

上記2つが無い場合に適用されます。

カスタムタクソノミーが1つしか無ければこれでも大丈夫ですが、後から増える場合はtaxonomy-{taxonomy}.phpで分ける場合もあるので、基本的には1つしかなくてもtaxonomy-{taxonomy}.phpを使った方がいいでしょう。

 

archive.php

上記テンプレートファイルが全て無い場合に適用。

 

index.php

上記テンプレートファイルが全て無い場合に適用。

 

タグ一覧ページ

 

tag-{slug}.php

指定したスラッグのタグ一覧ページを表示します。

タグのスラッグは投稿 → タグで確認出来ます。

 

tag-{ID}.php

指定したIDのタグ一覧ページを表示します。

IDが4の場合、tag-4.phpとなります。

IDの確認方法は投稿 → タグのタグ名にカーソルを乗せて、左下に表示される数字になります。

 

tag.php

タグを指定せずタグ一覧を表示します。

 

archive.php

上記テンプレートファイルが全て無い場合に適用。

 

index.php

上記テンプレートファイルが全て無い場合に適用。

 

作成者一覧ページ

 

author-{nicename}.php

指定したユーザー名のユーザー一覧ページを表示します。

nicenameは管理画面のユーザー → ユーザー一覧から確認出来ます。

この場合は、author-test.phpとなります。

 

author-{ID}.php

指定したIDのユーザー一覧ページを表示します。

IDが10の場合、author-10.phpとなります。

IDの確認方法は投稿 → タグのタグ名にカーソルを乗せて、左下に表示される数字になります。

 

author.php

ユーザーを指定せずユーザー一覧を表示します。

 

archive.php

上記テンプレートファイルが全て無い場合に適用。

 

index.php

上記テンプレートファイルが全て無い場合に適用。

 

日付別一覧ページ

 

date.php

日付別一覧ページを表示するテンプレートファイルです。

デザインは記事一覧ページと同じ事が多いと思います。

 

archive.php

date.phpが無い場合に適用。

 

index.php

上記テンプレートファイルが全て無い場合に適用。

 

検索結果ページ

 

search.php

検索結果を表示するテンプレートファイルです。

デザインは記事一覧ページと同じ事が多いと思います。

 

index.php

search.phpが無い場合に適用。

 

404ページ

 

404.php

404ページを表示するテンプレートファイルです。

 

index.php

404.phpが無い場合に適用。

 

まとめ:テンプレートファイルの優先順位を理解して最適な物を選びましょう!

優先順位の高いものから使うのが基本ですが、中にはスラッグやタグで指定する方が優先順位が高く、それだとイメージ通りに作成出来ない場合もあるので、そう言った場合は別のテンプレートファイルを使うようにしましょう。


WordPress案件の単価と作業効率を上げる!

Brainランキング1位獲得 & 3日で500部突破

クチコミ約300件
(平均スコア

今だけ!5つの無料特典あり🎁

👇画像をクリック

  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月7万PV▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得。

-オリジナルテーマ, WordPress
-