WordPressのファイル構成を理解しよう！テーマを自由にデザインするための基本ルール

WordPressでサイトを運営している方の多くは、CocoonやSWELLといった「テーマ」を利用していると思います。

そして、WordPressサイトを自分好みにデザインしていくには、テーマに合わせてCSSを書いていく必要があります。

そのときに重要になるのが、WordPressのファイル構成。

本記事では、WordPressでサイトデザインを行うために知っておきたい、ファイル構成の基本ルールについてお話しします。

WordPressのファイル構成は知っておいた方がいいの？

これは僕自身の体験談なのですが、ブログサイトを始めてすぐの頃、HTMLとCSSの基礎を学び「さあ、ブログをデザインしよう」と意気込んだものの、どこをCSSで変更すればいいのか分からないという壁にぶつかりました。

その後、WordPress関連の書籍や情報を調べ、ファイル構成を理解することで、ようやく今のように自由にデザインできるようになったのですが、同じような人は多いと思います。

CSSは、正しく書かないと意図しない部分まで変更されてしまいます。

そのため、

どの「ページ」に対して
どの「クラス」を指定しているのか

を意識することがとても重要です。

また、ちょっとしたPHPを追加したい場合も、追加するファイルの場所や名前が分からなければ意味がありません。

そういった点からも、WordPressのファイル構成はぜひ押さえておきたい知識です。

WordPressのテーマの基本ルール

それでは実際にWordPressにおけるテーマファイルの構成ルールについて見ていきましょう。

特定のテーマだけで覚えてしまうと他のテーマを使う際に応用が効きません。

そのため、WordPress全体に共通するルールとして理解しておくと良いでしょう。

■主なページとファイル名のルール（よく使われてるものは赤字）

ページ	優先順位1	優先順位2以降	最低順位
トップページ	front-page.php	page.php(固定ページ) home.php	index.php
固定ページ	page-{slug}.php	page-{ID}.php page.php singular.php	index.php
記事ページ	single-{post_type}-{slug}.php	single.php singular.php	index.php
カテゴリーページ	category-{slug}.php	category-{ID}.php category.php archive.php	index.php
記事一覧ページ	archive-{post-type}.php	archive.php	index.php
404エラーページ	404.php	ー	index.php

より詳しく知りたい方は以下の公式ドキュメントを参考にすると理解が深まります。
WordPressテンプレート階層について

WordPressファイル構成の考え方

上記の表を見ると複雑に感じるかもしれませんが、考え方はシンプルです。

WordPressはページを表示する際、

1. 優先順位の高いテンプレートファイルを探す
2. 見つからなければ次の優先順位のファイルを探す
3. 最終的に「index.php」を使用する

という流れで処理されます。

つまり極端な話、「index.php」さえあればページは表示されるということです。

トップページだけは少し特殊

基本的には先ほどのルールに従いますが、トップページだけはWordPress側の設定によって優先順位が変わるため注意が必要です。

• 最優先は「front-page.php」
• 「ホームページの表示」が「最新の投稿」の場合「home.php」
• 「ホームページの表示」が「固定ページ」の場合「page.php」
• すべて無ければ「index.php」

トップページはサイトの基本ページともいえるので、index.phpをトップページとして設計しているテーマも多く見られます。

WordPressのファイル構成を確認する方法

自分のWordPressサイトで任意のファイルを探す場合は、「外観」→「テーマファイルエディター」から確認できます。

子テーマを使用している場合は、右上のメニューから親テーマを選択して確認しましょう。

テーマファイルの読み方

サイトデザインを変更する際の目的は、どのCSSクラスが使われているかを知ることです。

基本的な流れは以下の通りです。

1. 変更したい「ページ」に対応するPHPファイルを探す
2. 変更したい「パーツ」がどのファイルで読み込まれているか確認する
3. 対象のCSSクラスを見つける
4. 追加CSSや子テーマで上書きする

実際にはGoogle Chromeの「検証」機能を使いながら確認することが多いですが、ファイル構成を理解しておくことで、PHP編集が必要な場面にも対応しやすくなります。

ヘッダーとフッターは共通ファイル

ページとは別に、ヘッダーとフッターは全ページ共通で使われるパーツです。
そのため、多くのテーマでは以下のファイルに分けて管理されています。

• header.php
• footer.php

ヘッダーやフッターを編集したい場合は、これらのファイルを探すとよいでしょう。

まとめ

今回は、WordPressのファイル構成について、テーマをデザインするための基本ルールを解説しました。

ファイル構成の知識と、HTML・CSS、そして少しのPHPの知識があれば、テーマファイルを読み解くことは難しくありません。

今回お話しした内容をキチンと理解して、WordPressサイトを自分好みのデザインにカスタマイズしてみてください。