WordPress総合ポータルSTEP3：デザイン実装
最小構成のテーマができたら、次はheader.php・footer.phpにファイルを分割し、見た目を整えていきます。WordPress特有の「テンプレート階層」の考え方もあわせて理解しましょう。
header.php・footer.phpへの分割
全ページで共通するヘッダー・フッター部分を別ファイルに分割し、get_header()・get_footer()関数で呼び出す形にします。
// index.phpの先頭・末尾 <?php get_header(); ?> <!-- ここにメインコンテンツ --> <?php get_footer(); ?>
header.phpには<head>タグやナビゲーションメニュー、footer.phpにはフッター情報やwp_footer()を記述します。
テンプレート階層の考え方
WordPressは、表示するページの種類（投稿ページ・固定ページ・アーカイブ等）に応じて、優先順位に基づき対応するテンプレートファイルを自動的に探します。これを「テンプレート階層」と呼びます。
| ページの種類 | 優先して探されるファイル |
|---|---|
| 個別の投稿 | single.php → singular.php → index.php |
| 固定ページ | page.php → singular.php → index.php |
| カテゴリー一覧 | category.php → archive.php → index.php |
| トップページ | front-page.php → home.php → index.php |
index.phpは最後の砦該当する専用テンプレートがどれも存在しない場合、最終的にindex.phpが使われます。そのため、最低限index.phpさえあればテーマは動作するのです。
CSSでのレイアウト調整
style.cssにレイアウト用のCSSを追加していきます。近年はFlexboxやGridレイアウトを使うのが一般的です。
.site-header { display: flex; justify-content: space-between; align-items: center; }
.site-content { max-width: 800px; margin: 0 auto; padding: 2rem; }