こんにちは!Web制作会社のスタッフ、R.T.です。
Webサイトを運用していると、「ブログ記事の見た目を少し変えたい」「お問い合わせページのレイアウトを調整したい」といった場面が出てきます。
WordPressで構築されたサイトを調整・カスタマイズする際、最初に知っておくと非常に役立つのが「WordPressがどのようにして画面を作っているのか(仕組み)」です。
今回は、難しいプログラムコードは一切使わずに、WordPressの基本構造である「テンプレート」と「ループ」の概念、そして「どのページがどのテンプレートファイルで作られているかの一覧表」をまとめました。
全体の概要をサクッと把握するためのガイドとしてご活用ください。
通常のホームページ(静的なHTMLサイト)は、1つのページに対して1つのファイル(about.html や contact.html など)を作成します。
一方、WordPressは「データベースに保存された文章や画像」と「デザインの骨組み(テンプレートファイル)」を、ユーザーがアクセスした瞬間に組み合わせ、1つのページを出力しています。
データベースに登録された「この記事の3行目のテキスト」を、テンプレートファイルの該当箇所に流し込む、みたいなイメージです。
同じ「投稿ページの型」を使い回しながら、中身の「記事データ」だけを差し替えることで、何百ページあるブログでも効率よく表示できるのがWordPressの最大の強みです。
WordPressの仕組みを語る上で欠かせないのが「ループ」と呼ばれる処理です。
たとえば、ブログ記事の一覧ページを開いたとき、最新の記事が5件や10件ずらりと並びますよね。あれはWordPressが裏側で以下のような「繰り返し作業」を自動で行っているからです。
この「1件ずつ順番に取り出して画面に並べるサイクル」のことを「ループ」と呼びます。
トップページの新着情報一覧、カテゴリー別の一覧、関連記事の表示など、サイト内のあらゆる「記事の一覧」はすべてこのループの仕組みで動いています。
WordPressは、ユーザーが開こうとしているページの種類(トップページ、記事詳細、一覧画面など)に応じて、使うテンプレートファイルを自動的に判断して呼び出します。
Web制作やカスタマイズの現場でよく使われる主なテンプレートファイルの一覧です。
(※WordPressのテーマフォルダ内にあるファイル名です)
| ページ・部位の種類 | ファイル名 | 役割・表示されるページ |
|---|---|---|
| ヘッダー共通部分 | header.php | サイト最上部のロゴやメインナビゲーション |
| フッター共通部分 | footer.php | サイト最下部のコピーライトや共通リンク |
| トップページ | front-page.php | サイトの玄関となるトップページ |
| 個別記事 | single.php | ブログなどの「投稿」の詳細ページ |
| 固定ページ | page.php | 会社概要やお問い合せなどの単独ページ |
| 記事一覧 | archive.php | カテゴリー別や月別の記事一覧ページ |
| 検索結果 | search.php | サイト内検索を実行した時の結果ページ |
| 404エラー | 404.php | 存在しないURLにアクセスした時の案内画面 |
| 最終予備ファイル | index.php | 専用ファイルがない場合に代わりに呼ばれる最優先ファイル |
※WordPressには「テンプレート階層」というルールがあり、たとえば front-page.php が存在しない場合は代わりに home.php や index.php が呼ばれる仕組みになっています。
WordPressの仕組みの基本は、とてもシンプルです。
この大枠(概要)さえ知っておけば、制作会社やエンジニアとやり取りをする際にも「ブログ記事のレイアウトを変えたいから single.php を調整するんだな」「全ページ共通のメニューを変えるなら header.php だな」といった会話がスムーズにできるようになります。
自社サイトの構造を理解するための第一歩として、ぜひ参考にしてみてください!
当社サービスに関するご相談・お見積もりなど、お気軽にお問い合わせください。