WordPressのファイル構成を知って好きなデザインに変えよう！【Webデザイン】

WordPressでサイトを運営している方は、CocoonやSwellなどの「テーマ」を利用していると思います。

そしてそんなWordPressのサイトをデザインしていくにはテーマに合わせてCSSを記述していく必要があります。

そこで、今回はサイトをデザインするためのWordPressのファイル構成のルールについてお話しします。

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

僕自身の体験談ですが、HTMLとCSSの基本的な勉強をして「さあブログをデザインするぞ！」と意気込んだもののCSSで変えるべきポイントが分かりませんでした。

そこでWordPressに関する書籍などを読み漁り、やっとのことで今のサイトのように好きにデザインできるようになりました。

CSSはちゃんと書かないと予期せぬ部分まで変更されてしまうので、ファイル構成を知り「どのページの」「どのクラスなのか」を理解して書くようにしましょう。

また、サイトにちょっとしたPHPを追加したいときは内容はコピペでも追加する場所が分からないと意味がないのでやはりファイル構成は知っておきましょう。

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のファイルを検索（以降順次検索）
• 「index.php」を使用

という順番でファイルを探していきます。
簡単な話、「index.php」さえあればページは表示されるということです。

ちょっと特殊なトップページのルール

基本的には上記のルールで決まるテンプレートファイルですが、トップページは設定によって優先順位が変わるので注意しておきましょう。

• 最優先は「front-page.php」
• 「設定」→「表示設定」の「ホームページの表示」が「最新の投稿」であれば「home.php」
• 「設定」→「表示設定」の「ホームページの表示」が「固定ページ」であれば「page.php」
• 全部なければ「index.php」

トップページはサイトの基本のページでもあるので、「index.php」をトップページとして作成しているテーマが多いのではないでしょうか。

WordPressのファイル確認方法と読み方

実際に自分のWordPressでファイルを探す場合は
「外観」→「テーマファイルエディター」から確認することができます。

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

テーマファイルの読み方

サイトをデザインする場合、各パーツのCSSクラスを知ることがテーマファイルを読む目的です。

• 変えたい「ページ」のPHPファイルを探し、変えたい「パーツ」のファイル名を確認
• 変えたい「パーツ」のPHPファイルを探し、そのCSSクラスを確認
• 使われていたCSSクラスを追加CSSや子テーマで上書き

という手順を踏めば自分好みのデザインに変えることができます。

実際はGoogle Chromeの「検証」機能で見ながらリアルタイムで検討していくことが多いですが、詳しく知りたいときやPHPを追加したいときのために覚えておくとよいでしょう。

ヘッダーとフッターは別ファイルなのが基本

ページではないですが、ヘッダーとフッターは全てのページで使われるパーツなので別ファイルで作成して各ページはPHPでファイルを読み込むのが基本です。

なので、ヘッダーとフッターのファイルが見たいのであれば「header.php」と「footer.php」を探しましょう。

まとめ

サイトをデザインするためのWordPressファイル構成のルールについてお話ししました。
今回お話しした内容とHTML＆CSSの知識（あとちょっとしたPHPの知識？）さえあればテーマファイルを読み取るのは簡単だと思います。

ぜひWordPressサイトを自分好みのデザインにしてみてください。