会員ログイン
テーマ開発

WordPressオリジナルテーマはテンプレートファイルの理解が重要

WordPressオリジナルテーマはテンプレートファイルの理解が重要のアイキャッチ画像
はじめに
概要

WordPressでオリジナルテーマを作るときは、HTMLやCSSの知識だけでなく、どのページでどのテンプレートファイルが使われるのかを理解することが大切です。
静的サイトでは、作成したHTMLファイルをそのままブラウザで表示します。たとえばトップページなら index.html、会社概要なら about.html のように、ファイルとページの関係が比較的わかりやすいです。
一方でWordPressでは、ページの種類に応じて読み込まれるPHPファイルが決まっています。この仕組みを押さえると、オリジナルテーマの構造がかなり理解しやすくなります。

疑問を持つ読者のイラスト読者

WordPressオリジナルテーマは テンプレートファイルの理解が重要は、最初にどこを理解するとよいですか?

著者・木村のプロフィール写真木村

WordPress標準機能、プラグインの機能、テーマ側の処理を分けて考えると、どこを変更すべきか判断しやすくなります。

話を聞く読者のイラスト読者

実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか?

著者・木村のプロフィール写真木村

はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

WordPressは決められたテンプレートファイルで表示される

WordPressのテーマは、決められた名前のテンプレートファイルを使ってページを表示します。

代表的なファイルには、次のようなものがあります。

  • front-page.php:トップページ用
  • home.php:投稿一覧ページ用
  • index.php:最後に使われる基本ファイル
  • page.php:固定ページ用
  • archive.php:一覧ページ用
  • single.php:投稿やカスタム投稿の詳細ページ用

これらのファイル名は、WordPress側が認識する名前です。自由に名前を付ける静的サイトとは違い、WordPressのルールに合わせてファイルを用意する必要があります。

例:テーマ内でよく使う基本ファイル

original-theme
├── front-page.php
├── home.php
├── index.php
├── page.php
├── archive.php
└── single.php

WordPressは決められたテンプレートファイルで表示されるで押さえたいポイント

WordPressは決められたテンプレートファイルで表示されるは、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

トップページで使われるファイルの優先度

トップページでは、主に front-page.phphome.phpindex.php が関係します。

特に重要なのは、どのファイルが優先されるかです。

例:トップページのテンプレート優先順位

front-page.php
↓
home.php
↓
index.php

トップページ専用のデザインを作りたい場合は、まず front-page.php を用意します。

front-page.php がない場合、設定や表示条件によって home.php が使われることがあります。さらに該当するファイルがなければ、最終的に index.php が使われます。

index.phpは最後の受け皿になる

index.php は、WordPressテーマに必ず必要な基本ファイルです。

ただし、すべてのページを index.php だけで作るという意味ではありません。より適切なテンプレートファイルがあれば、WordPressはそちらを優先して使います。

つまり index.php は、他に該当するテンプレートがないときの最後の受け皿として考えるとわかりやすいです。

まず覚えたい基本ファイル

オリジナルテーマを学び始める段階では、すべてのテンプレートファイルを一気に覚える必要はありません。

まずは、次の4つのページの種類を押さえることが重要です。

  1. トップページ
  2. 固定ページ
  3. 一覧ページ
  4. 詳細ページ

例:ページの種類とテンプレートファイル

トップページ:front-page.php
固定ページ:page.php
一覧ページ:archive.php
詳細ページ:single.php
最後の基本ファイル:index.php

この対応関係を理解しておくと、どのファイルを編集すればよいか判断しやすくなります。

まず覚えたい基本ファイルで押さえたいポイント

まず覚えたい基本ファイルは、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

固定ページと一覧ページの違い

初心者がつまずきやすいポイントのひとつが、固定ページと一覧ページの違いです。

どちらもWebサイト内の1ページに見えるため、最初は混同しやすいです。しかし、役割は大きく異なります。

固定ページは単発のページに使う

固定ページは、内容が単発で完結するページに使います。

たとえば、会社概要ページ、お問い合わせページ、サービス紹介ページ、プロフィールページなどです。

静的サイトで about.htmlcontact.html として作るようなページは、WordPressでは固定ページで管理することが多いです。

例:固定ページとして考えやすいページ

about
contact
service
privacy-policy

固定ページの基本テンプレートは page.php です。単発で完結するページは、まず固定ページとして考えると整理しやすくなります。

一覧ページは複数の記事を並べるページに使う

一覧ページは、投稿やカスタム投稿など、複数のコンテンツを並べて表示するページです。

一覧ページに記事のカードやタイトルを並べ、クリックするとそれぞれの詳細ページへ移動します。

固定ページと一覧ページの違いの補足

固定ページと一覧ページの違いの補足では、前の章に続く項目を整理します。各項目の役割と違いを確認しながら、必要な部分を自分の制作へ取り入れてください。

例:一覧ページと詳細ページの関係

お知らせ一覧:archive.php
├── お知らせ詳細 1:single.php
├── お知らせ詳細 2:single.php
└── お知らせ詳細 3:single.php

このように、一覧ページと詳細ページがセットになっているコンテンツでは、一覧側に archive.php、詳細側に single.php を使う考え方が基本になります。

同じ種類のページを1つのPHPファイルで表示できる

WordPressテーマでは、「同じ種類のページを、1つのPHPファイルでまとめて表示できる」という考え方があります。

たとえば、固定ページは page.php、投稿一覧やカテゴリー一覧などは archive.php、個別記事は single.php というように、ページの種類ごとに使われるテンプレートファイルが決まっています。

少しわかりにくいのは、これらのファイルが「1ページにつき1ファイル」ではないという点です。たとえば固定ページが10ページあっても、基本的には page.php が1つあれば、その10ページすべての表示に対応できます。WordPressがアクセスされたページの内容を自動で読み込み、同じ page.php の中にタイトルや本文を差し込んで表示してくれるためです。

個別記事も同じです。記事が100本あっても、基本的には single.php が1つあれば、それぞれの記事ページを表示できます。記事ごとにPHPファイルを100個作る必要はありません。WordPressが「今表示する記事はどれか」を判断し、その記事のタイトル、本文、画像、日付などを single.php に流し込んでくれます。

アーカイブページも同様に、カテゴリー一覧、月別一覧、投稿者別一覧などを archive.php でまとめて表示できます。表示する内容はアクセスされた条件によって変わりますが、見た目の枠組みは1つのテンプレートで共通化できます。

つまり、WordPressのテンプレートファイルは「特定の1ページを作るファイル」ではなく、「同じ種類のページを表示するための設計図」のようなものです。page.php、single.php、archive.php を用意しておけば、WordPressが中身を自動で入れ替えながら、たくさんのページを効率よく表示してくれます。

archive.phpとsingle.phpはセットで考える

繰り返しになりますが、ブログ記事、お知らせ、制作実績、商品情報などは、一覧ページと詳細ページの両方が必要になることが多いです。

この場合は、次のように考えると整理しやすくなります。

例:archive.phpとsingle.phpの役割

archive.php:複数の記事を一覧表示する
single.php:クリックした1件の記事を詳しく表示する

たとえば「お知らせ」というコンテンツを作る場合、一覧ページではお知らせを複数件表示します。そして、それぞれの記事をクリックすると詳細ページへ移動します。

この流れがある場合は、固定ページだけで無理に作るのではなく、一覧ページと詳細ページの構造として考えることが大切です。

archive.phpとsingle.phpはセットで考えるで押さえたいポイント

archive.phpとsingle.phpはセットで考えるは、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

まとめ

  • WordPressのオリジナルテーマは、決められたテンプレートファイルでページを表示する仕組みになっています。
  • トップページでは front-page.phphome.phpindex.php の優先度が重要
  • 固定ページは page.php で表示する
  • 一覧ページは archive.php で表示する
  • 詳細ページは single.php で表示する
  • index.php は最後に使われる基本ファイルとして考える
  • 特に大切なのは、固定ページと一覧ページの違いを明確にすることです。
  • 単発で完結するページは固定ページ。複数の記事を並べ、クリックして詳細ページへ移動するコンテンツは一覧ページとして考えます。
  • この考え方がわかると、WordPressのオリジナルテーマは一気に理解しやすくなります。まずは、トップページ、固定ページ、一覧ページ、詳細ページの4つを意識して、どのテンプレートファイルが使われるのかを確認していきましょう。

MEMBER COMMENTS

コメント(0件)

会員ログイン後にコメントできます

記事への質問や感想をコメントで共有できます。無料会員登録後もこの記事へ戻れます。