初心者・独学でもわかる！WordPressテンプレート構造の仕組みと主要ファイルの使い方解説-カスタマイズ入門②
「このページはどのテンプレートファイルで表示されてるんだろう？」 WordPressを触っていると、そんな疑問に直面することはありませんか？ 実は、WordPressではテンプレート階層というルールに従ってPHPファイルが読み込まれ、ページが動的に描画されています。 初心者や独学者の方でも安心して理解できるよう、この記事では「What The File」プラグインの使い方と、主要テーマファイルの役割をやさしく解説します。 index.php、header.php、single.php などのファイル構成を整理しながら、自分でカスタマイズできるようになるステップをご紹介します。
「ぼくら」の失敗談
1.テンプレート階層は知っていても、実際にどのファイルをどう編集すればページが変わるのかが分かりづらかった。⇒single.php は“記事ページ用”だけど、single-○○.php になるとカテゴリーごとにファイル分岐できるなど、WordPressの「専門用語+独自ルール」に慣れないうちは難しい。
2.single.phpとpage.phpの違いがあいまいで、index.phpだけ編集しても表示に反映されなくて困った。⇒テンプレートには階層の優先順位があることや、index.phpがどの専用テンプレートも存在しない時に使われる最後の保険の役割を果たしていることを理解していなかった。
WordPressのテンプレート構造とは？仕組みと出力の流れを理解しよう
通常のHTMLファイルは、基本的に１ページで完結しています。一方、WordPressでは“見た目のHTML”は、PHPによってその都度作り出されています。具体的に言うと、WordPressでは、ページのコンテンツ部分はデータベースに格納されており、ブラウザで該当ページにアクセスした際に、phpを介してデータベースにアクセスし、HTMLで出力するという仕組みになっています。
・HTMLで出力するまでの流れ
1.ユーザーがURLにアクセス（例：https://example.com/blog/post1）
2.WordPressのPHPファイルが起動
3.どのページが見たいのかを判断
4.PHPがデータベースにアクセス
5.「post1」の記事タイトル、本文、画像URLなどを探して取得
6.取得したデータをHTMLに整形して出力
7.h1タグやpタグで構造化
8.ブラウザにHTMLとして表示され、画面に記事が現れる！
WordPressオリジナルテーマのステップ-初心者にもできる８工程
１．基本ページをコーディングする
２．テーマ用に空のphpファイルを作成する
３．2で作成したファイルに1で作成したコードを分割し、phpを追記する
４．完成したテーマをzip形式に圧縮しておく
５．サーバーにWordpressをインストールする
６．管理画面よりテーマ をアップロードする
７．有効化し、実際のサイトに適用する
８．サイトを公開する
WordPressのテーマのディレクトリ(フォルダ)は…
「(ワードプレスをインストールしたディレクトリ)/wp-content/themes/」の中にあります。デフォルトでは「twenty」で始まるテーマディレクトリが3つ備わっています。
その中を見てもらうと、いくつかのディレクトリとファイルが入っていると思いますが、ここではオリジナルテーマを作成する際に最低限の役割は覚えておくべきファイルのみ紹介します。
テンプレートファイルの役割と使い方一覧
以下に、主要なテンプレートファイルの役割を整理しています。
index.phpの役割とは？TOPページを構成する基本ファイル
「index.php」はWordPressで作成したテーマのTOPページを表示させるためのファイルになることが多いです。優先順位は低いのですが、最終的なフォールバック構造です。
「index.php」だけでトップページを構成しているサイトが多いのは、初心者の習慣・テーマの仕様・運用コストの簡略化など、いくつかの要因が重なっているからです。
また、「とりあえず動く」ために使われがちですが、長期的な運用・SEO・保守性なら、「front-page.php」 を使うのが理想です。
header.phpの役割とは？ページ上部の構成と共通情報を効率管理
一般に、ページの「head」部分や「body」の上部までを構成するファイルになります。
index.phpやsingle.phpなどに「head」部分などを直接記述しても良いのですが、解析タグの挿入やメタタグの挿入など各ページごとに挿入すると面倒になります。保守性UPのためheader.phpを作成することで大幅に時間を短縮することができます。
header-top.phpなど別名のファイルを読み込みたい場合は、get_header(‘top’)のように、テンプレートを指定することで読み込み可能です。
footer.phpの役割とは？コピーライトやタグ挿入に最適な下部テンプレート
ページの<body>下部を構成するファイルになります。footer.phpに記載するのは主にcopyrightやfooterなどheader.phpと同様に各ページの違いがほとんどなく、共通しているものになります。
リマーケティングタグ（WEBサイトを訪問したユーザーに対して、個別のcookieを発行するためのタグです。）などは「body」の一番最後に挿入する機会が多いと思いますが、footer.phpさえあれば、一度でほとんどのページに反映させることができるので便利です。
page.phpの役割とは？固定ページのテンプレートと柔軟なレイアウト制御
page.phpを作成すると、自動的に固定ページのテンプレートファイルとして認識されます。
固定ページでも各ページで違うテンプレートを読み込みたいという人は、「page-任意の値.php」というファイルを作成し、冒頭部分に以下の記述をすることにより、WordPressの固定ページを新規作成するときにテンプレートを変更することができます。
SEO的には考慮したい記事の親子関係も固定ページではデフォルトで設定することができるので、更新頻度は高くないけれどSEOもデザインも意識したいページがあれば固定ページを活用しましょう。
ページによっていくつかテンプレートを分けたい場合、冒頭にテンプレート名を指定したファイルを新たに作成することで、記事を投稿する際に、テンプレートとして選択できるようになります。
single.phpの役割とは？投稿ページを表示する基本テンプレート
single.phpは投稿ページのテンプレートです。
WordPressテーマのデフォルトでは一つのテンプレートしかないように思う人が多いのですが、カテゴリーの名前でテンプレートを切り分けることが可能です。「single-カテゴリー名.php」でsingle.phpよりも優先的に読み込むようになるので、カテゴリーごとにテンプレートを分類したい時に便利です。
archive.phpの役割とは？カテゴリ・タグ一覧を表示するアーカイブ用ファイル
カテゴリーページやタグページなど記事を一覧で表示させるページのテンプレートファイルになります。
ブログやコンテンツマーケティングを行うサイトを作成する際のテーマには必須なので、状況に合わせて作成しましょう。
sidebar.phpの役割とは？サイドバーを自由にカスタマイズするための構成ファイル
サイトが2カラムや3カラムある時に表示される本体横のコンテンツです。
1カラムのwebサイトには必要ないかもしれませんが、サイドバーがほしい、様々なコンテンツを見てほしい…場合などに、積極的にテーマに取り入れます。
ブログなどでサイドバーをつけたい場合、サイドバーの中身を記載するテンプレートになります。
404.phpの役割とは？エラーページの表示とSEOエラー対策に必須
「404.php」というファイルは、ユーザーが存在しないURLに飛んでしまった場合などに、設定をしていなくてもソースを自動で吐き出してくれます。
なので、SEO的にはnoindexタグを404.phpに挿入することでクロールエラーを極力抑えることができます。
functions.phpの使い方-便利な関数設定と注意点
WordPressサイトの動作制御や機能追加することができる重要ファイルです。この「functions.php」にWordPressの動作を制御する関数を記述できて、とても便利です。
設定にミスがあると、重大なエラーを起こして、サイト自体が表示されなくなることがあります。
最初は記述することがないかもしれませんが、カスタム投稿タイプを追加したりショートコードを作成したりとWordPressのオリジナルテーマを作成するためにはなくてはならないphpファイルです。
「functions.php」で、できることの例としては…
・テーマ内でよく使う処理の記述
テーマ内で繰り返し使う様々な処理を関数として設定しておくことができます。
・ウィジェットの有効化・設定
フッターなどのウィジェット機能を使う場合、管理画面で表示する名前などを設定できます。
・メニューの設定
ヘッダーなどでメニューを表示する場合の表示場所を設定できます。
・投稿ページなどで使いたいPHPの記述（ショートコード）
投稿や固定ページなどの投稿ではプログラミング言語PHPでの記述はできません。そのため、PHPの処理をfunctions.phpに記述し、ショートコードとして登録しておくことで、投稿中にショートコードを記載することでPHPの処理を行うことができます。
・管理画面の動作制御
管理画面の権限によって表示項目を変更するなど管理画面内の動作を設定できます。
style.cssの使い方-Wordpressの見た目を整える方法
WordPressのテーマ作成だけではなくwebサイトには欠かせないデザインシートです。
どんなwebサイトにするにしてもhtmlに直接styleを書き込むと修正の際に不便だったり、htmlが見づらくなってしまったりするので極力外部ファイル化して、読み込むようにしましょう。
オリジナルテーマをWordPressで使用する方法
アップロードして、有効化すれば使用できます。管理画面から、「外観」＞「 テーマ」をクリックし、オリジナルテーマの「有効化」をクリックします。
「screenshot.png」という画像をテーマフォルダに格納すると、テーマ選択画面でサムネイルが表示でき、分かりやすくなります。サムネイル画像のサイズは880x660pxが推奨です。
