WordPressの表示の仕組みを理解する｜テーマ構造とテンプレート階層の基礎

WordPressは、ただ記事を書くだけのツールではありません。
「どのファイルが、どのページを、どの順番で表示しているのか」という仕組みを理解することで、テーマカスタマイズやオリジナルテーマ制作の理解度が一気に深まります。

本記事では、WordPressの表示の流れを基礎から体系的に解説します。テンプレート階層、メインクエリ、ループ、テーマファイルの役割まで、Web制作の土台となる知識を整理します。

WordPressは「動的にページを組み立てる」仕組み

WordPressは、静的なHTMLファイルをそのまま表示しているわけではありません。

大まかな流れは次のとおりです。

1. URLにアクセスする
2. WordPressがデータベースから情報を取得する
3. テーマファイルを読み込む
4. PHPで処理し、最終的にHTMLとして出力する

つまり、データベース × PHP × テーマファイルによってページが動的に生成されています。

WordPressの全体像を整理したい場合は、
👉「Web制作の全体像」を先に確認すると理解がスムーズです。

テーマの基本構造

WordPressの表示は、テーマフォルダ内のファイルによって制御されています。

代表的なテーマファイルは次のとおりです。

style.css

テーマ情報を定義するファイルです。テーマとして認識されるために必須です。

index.php

最終的なフォールバック（代替）ファイルです。
他に該当するテンプレートがない場合に使用されます。

header.php / footer.php

サイト共通部分（ヘッダー・フッター）を分離するためのファイルです。
get_header() や get_footer() で呼び出します。

functions.php

テーマの機能を追加するファイルです。
フックやサポート機能の追加などを行います。

詳しくは
👉「functions.phpの使い方｜テーマ機能追加の基礎」
も参考になります。

テンプレート階層（Template Hierarchy）とは

WordPress最大の特徴の一つが「テンプレート階層」です。

これは、

表示するページの種類に応じて、WordPressが自動で適切なテンプレートを選ぶ仕組み

です。

例：投稿ページの場合

WordPressは次の順でファイルを探します。

1. single-{posttype}.php
2. single.php
3. singular.php
4. index.php

より具体的なファイルが優先され、なければ汎用ファイルへとフォールバックします。

例：固定ページの場合

1. page-{slug}.php
2. page-{id}.php
3. page.php
4. singular.php
5. index.php

このルールを理解しておくと、
「なぜこのファイルが使われているのか？」が明確になります。

メインクエリとWordPressループ

WordPressは、データベースから投稿情報を取得する際に「メインクエリ」を使用します。

メインクエリとは

URLに応じて、WordPressが自動で生成するデータ取得処理です。

例えば：

• 投稿一覧ページ → 最新投稿を取得
• カテゴリーページ → 特定カテゴリの投稿を取得
• 個別投稿ページ → その投稿のみ取得

この取得結果を表示するのが「ループ」です。

WordPressループの基本構造

<?php if ( have_posts() ) : ?>
  <?php while ( have_posts() ) : the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <?php the_content(); ?>
  <?php endwhile; ?>
<?php endif; ?>

このループが、投稿タイトルや本文を表示しています。

ループの理解は、
👉「WordPressテーマ開発の基礎」
とあわせて学ぶとより深まります。

共通パーツの読み込み構造

WordPressでは、ページ全体をパーツごとに分割します。

一般的な構造は次のとおりです。

• header.php
• index.php / single.php / page.php
• sidebar.php
• footer.php

これらを組み合わせて1ページが完成します。

例えば single.php では次のように記述します。

<?php get_header(); ?>

<?php if ( have_posts() ) : ?>
  <?php while ( have_posts() ) : the_post(); ?>
    <?php the_content(); ?>
  <?php endwhile; ?>
<?php endif; ?>

<?php get_footer(); ?>

これにより、共通部分と個別コンテンツを分離できます。

条件分岐タグの役割

WordPressでは、ページの種類によって表示内容を変えられます。

例：

<?php if ( is_home() ) : ?>
  <h1>トップページ</h1>
<?php endif; ?>

代表的な条件分岐タグ：

• is_home()
• is_single()
• is_page()
• is_category()
• is_archive()

表示ロジックを細かく制御できるため、テーマ制作では必須知識です。

フック（Hooks）の仕組み

WordPressの拡張性を支えているのが「フック」です。

• add_action()
• add_filter()

これらを利用すると、コアファイルを直接変更せずに機能を追加できます。

詳しくは
👉「add_action / add_filter徹底解説」
を参照すると理解が深まります。

WordPress表示の全体フローまとめ

最終的な流れを整理すると、次のようになります。

1. URLへアクセス
2. WordPressがメインクエリを生成
3. テンプレート階層に従ってファイル選択
4. ループで投稿データを取得
5. header / footer などを組み合わせてHTML出力

この流れを理解することで、

• なぜそのページがその見た目になるのか
• どこを編集すれば変更できるのか
• なぜindex.phpが重要なのか

が明確になります。

よくある混乱ポイント

index.phpが常に使われるわけではない

index.phpは「最後の砦」です。
より具体的なテンプレートがあれば、そちらが優先されます。

style.cssは見た目だけではない

テーマ情報を記述する役割もあるため必須ファイルです。

functions.phpは表示ファイルではない

functions.phpは「機能追加用ファイル」です。
HTMLを直接出力するためのものではありません。

まとめ

WordPressの表示は、次の4つで構成されています。

• テンプレート階層
• メインクエリ
• WordPressループ
• テーマファイル構造

この仕組みを理解すると、テーマカスタマイズや独自テーマ制作が格段に楽になります。

見た目だけを変更する段階から一歩進み、
「なぜそう表示されるのか」を理解することが、WordPressを使いこなす第一歩です。

関連記事

• functions.phpの使い方｜テーマ機能追加の基礎
• add_action / add_filter徹底解説
• WordPressテーマ開発の始め方
• Web制作の全体像を理解する

これらをあわせて読むことで、WordPressの内部構造が体系的に理解できます。