HTMLでは、自由にファイル名を指定することができましたが、WordPressではファイル名にルールが設けられています。このルールを理解していないと意図したページが表示されないといったことが起こります。
今回は、ファイル名を指定する際のルールである「テンプレート階層」について解説します。WordPressは、このテンプレート階層で躓く方が多いので、しっかりと理解するようにしましょう。
- WordPressのテンプレート階層について
案件が取れなくて悩んでいるあなたへ
プログラミング案件獲得のために必要なスキルは、単に技術力だけではありません。営業力、コミュニケーション力、人脈などの幅広いスキルや要素が求められてきます。
営業からライティング、SEOまで学べるフリーランス特化型プログラミングスクールZeroPlusで、フリーランスエンジニアに必要なすべてを手に入れませんか？
- またゼロからやり直さないといけないの？
- 本当にフリーランスになれるの？
といった不安にも、超フレンドリーな相談員が親切に相談にのります。スクール以外のご質問もOK！
＼お申し込みは30秒で終わります。／
新しい一歩を、今踏み出してみませんか？
テンプレート階層
テンプレート階層について解説します。
テンプレート階層とは
テンプレート階層とは、ページを表示する際にどのテンプレートファイルを利用し表示するかを決定する仕組みのことを指します。WordPressは、なんらかのページにアクセスした際、テンプレート階層にしたがって、優先順位の高いテンプレートファイルを選択し、表示しています。
そしてこの優先順位は、テンプレートファイルのファイル名によって決定されるため、テンプレートファイルを作成する際に理解していないと、意図したページが表示されないといったことが起こってしまいます。
- 404.php
- index.php
上記は、存在しないURLにアクセスした際に表示される「404ページ」の優先順位です。
404ページを表示するために、はじめに404.phpというファイルを探しにいきます。テーマ内に404.phpが存在した場合、その404.phpを表示し、存在しなかった場合はindex.phpを表示します。
また、「必須ファイル」でもお伝えしたように、index.phpは、該当ファイルが存在しなかった際に最終的に選択されるファイルで、404ページに限らず全てのページで適応されます。
テンプレート階層一覧
以下、代表的なテンプレート階層一覧になります。
現時点では{}内のslugやidが何かは理解していなくても問題ありません。
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.phpとstyle.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サイトを制作する際のテンプレートファイルはある程度限られてきますが、一覧で紹介したもの以外にも様々なものが存在しますので、ご自身で調べてみてください。
