ZeroPlus Media > Web制作 > WordPress > WordPressのテンプレート階層について学ぼう

WordPressのテンプレート階層について学ぼう

Web制作

2022/07/20

2022/08/10

WordPressのテンプレート階層について学ぼう

HTMLでは、自由にファイル名を指定することができましたが、WordPressではファイル名にルールが設けられています。このルールを理解していないと意図したページが表示されないといったことが起こります。

今回は、ファイル名を指定する際のルールである「テンプレート階層」について解説します。WordPressは、このテンプレート階層で躓く方が多いので、しっかりと理解するようにしましょう。

テンプレート階層

テンプレート階層について解説します。

テンプレート階層とは

テンプレート階層とは、ページを表示する際にどのテンプレートファイルを利用し表示するかを決定する仕組みのことを指します。WordPressは、なんらかのページにアクセスした際、テンプレート階層にしたがって、優先順位の高いテンプレートファイルを選択し、表示しています。

 

そしてこの優先順位は、テンプレートファイルのファイル名によって決定されるため、テンプレートファイルを作成する際に理解していないと、意図したページが表示されないといったことが起こってしまいます。

 

  1. 404.php
  2. index.php

上記は、存在しないURLにアクセスした際に表示される「404ページ」の優先順位です。

 

404ページを表示するために、はじめに404.phpというファイルを探しにいきます。テーマ内に404.phpが存在した場合、その404.phpを表示し、存在しなかった場合はindex.phpを表示します。

 

また、「必須ファイル」でもお伝えしたように、index.phpは、該当ファイルが存在しなかった際に最終的に選択されるファイルで、404ページに限らず全てのページで適応されます。

テンプレート階層一覧

以下、代表的なテンプレート階層一覧になります。

現時点では{}内のslugidが何かは理解していなくても問題ありません。

 

WordPress Codexに分かりやすい図があるので、そちらも確認してみてください。

ページ 優先順位 ↑高 低↓
フロントページ

front-page.php

index.php

ホーム

home.php

index.php

固定ページ

{customname}.php

page-{slug}.php

page-{id}.php

page.php

index.php

個別記事ページ

single-post.php

single.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

日付ページ

date.php

archive.php

index.php

記事作成者ページ

author-{nicename}.php

author-{id}.php

author.php

archive.php

index.php

検索結果ページ

search.php

index.php

404ページ

404.php

index.php

ファイルを作成して確認する

実際にファイルを作成して、テンプレート階層の仕組みを確認していきます。確認するための準備がいくつかありますので、順に解説していきます。

 

フォルダとファイルの作成

必要となるフォルダとファイルを作成します。

上記の画像と同じようにthemes直下にhierarchyフォルダ、その中にindex.phpstyle.cssを作成してください。themes直下に作成するhierarchyがテーマとなります。

フォルダとファイルの作成が終了したら、index.phpに一行コードを記述します。

 

index.php

<p>このファイルは「index.php」です</p>

テキストエディタで、hierarchyを開き、index.phpに上記の一行コードを記述してください。また、style.cssはまっさらな状態で構いません。

 

テーマを切り替える

現在、テーマは「twentytwenty」が適応されている状態ですので、新たに作成した「hierarchy」に切り替えます。テーマの切り替えは、管理画面の「外観」→「テーマ」から行います。

赤枠の「有効化」をクリックすることでテーマの表示切り替えが実行されます。

切り替えが完了したら、サイト画面を確認してみましょう。上記の画像と同じ状態になっているはずです。

 

テンプレート階層の仕組みを確認する

「テンプレート階層とは」で解説した、404ページを例に確認していきたいと思います。404ページは、存在しないページにアクセスされた際に自動で表示されるエラーページとなります。

WordPressは、テンプレート階層にしたがって、優先順位の高いテンプレートファイルを選択し、表示するとお伝えしました。404ページの場合は、404.phpが最も高くなるため、存在しないページにアクセスした際に、一番最初にこの404.phpを探しに行き、テーマ内に404.phpが存在すれば表示し、存在しなければindex.phpを表示します。

現段階で、みなさんが作成したhierarchyには、404.phpは存在しませんので、URLに存在しないページを指定しアクセスするとindex.phpが表示されます。試しに、上記の画像のようにURLに存在しないページを指定し、アクセスしてみてください。「このファイルは「index.php」です」と表示されたページが表示されるはずです。

 

上記の確認ができましたら、続いて404.phpが存在した際の挙動について確認していきましょう。

<p>このファイルは「404.php」です</p>

index.php同様、hierarchy直下に404.phpを作成し、一行コードを記述します。

404.phpの作成が終了したら、先ほどと同じようにURLに存在しないページを指定しアクセスしてください。今度は、「このファイルは「404.php」です」と表示されたページが表示されるはずです。

 

これがテンプレート階層の仕組みになります。

テンプレート階層を常に意識しよう

今回は、テンプレート階層について解説しました。

 

意図したページが表示されないといった事を防ぐためにも初めのうちはテンプレート階層を意識して開発を行いましょう。また、ブログやwebサイトを制作する際のテンプレートファイルはある程度限られてきますが、一覧で紹介したもの以外にも様々なものが存在しますので、ご自身で調べてみてください。

\ 学んだことをSNSでシェアしよう /

おすすめのタグ

この記事を書いた人

ZeroPlusMedia変種部

ZeroPlusMedia編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlusMediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

質問について

ZeroPlus Media読者限定で質問対応をおこなっています。以下の2つの方法で質問を受け付けています。

選べる2つの質問方法

1

Google Foam(テキスト)で質問

フォーム送信

メールで解答

formで質問
2

Google meet(オンラインmtg)で質問

日時選択

メールを受け取る

メールからmtgに参加

meetで質問
ZeroPlus Gateバナー

あなたの目的に合わせた2つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

完全無料!30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから