トップページの考え方
オリジナルテーマでは、トップページを「デザイン性を重視した凝った構成」にすることが多いため、
クライアント側で自由に変更できるようにはせず、PHPで直接作り込むことが一般的です。
ただし、最新投稿などの「動的な情報」はWordPressの機能を活用し、投稿から自動反映させることで、更新の手間を軽減できます。
WordPressにおけるテンプレートの優先順位
WordPressでは、表示するページの種類に応じて、使用されるテンプレートファイルが決まっています。
以下は主なテンプレートファイルの優先順位の高い順リストです
| ページの種類 | 使用されるテンプレート（優先順位の高い順） |
|---|---|
| トップページ | front-page.php → home.php → index.php |
| ブログ一覧（投稿ページ） | home.php → index.php |
| 固定ページ | page-{スラッグ}.php → page-{ID}.php → page.php → singular.php → index.php |
| 投稿ページ（single） | single-{post-type}.php → single.php → singular.php → index.php |
| カテゴリー／タグなど | category.php / tag.php → archive.php → index.php |
| 検索結果 | search.php → index.php |
| 404（エラーページ） | 404.php → index.php |
index.php は最後の保険的な役割で、どのテンプレートにも当てはまらない場合に使用されます。
front-page.php の役割
- トップページ専用テンプレート
固定ページ「HOME」が設定されていなくても、自動的に最優先で使われるfront-page.phpがあると、index.phpやhome.phpは無視される
トップページに最新記事一覧を表示する
フォルダにfront-page.phpを作成し、index.phpの内容をコピーした後、最新記事が表示されているarticle要素などの場所を下記のコードに書き換えます。
front-page.php の例（3件表示）
<article id="news" class="bk-renga p_xl p_sm">
<!-- What's News セクション全体 -->
<div class="container">
<!-- セクションタイトル -->
<header class="title mb-m">
<h1>What's News</h1> <!-- セクション見出し -->
</header>
<!-- 投稿リスト（3件） -->
<ul class="blog_list">
<?php
// ▼ 投稿タイプが「post」の最新記事を3件取得
$news_query = new WP_Query(array(
'post_type' => 'post', // 投稿タイプ（通常の投稿）
'posts_per_page' => 3 // 表示件数
));
if ($news_query->have_posts()) :
while ($news_query->have_posts()) : $news_query->the_post(); ?>
<li class="zoomIn fadeUp"> <!-- アニメーション用クラス（任意） -->
<a href="<?php the_permalink(); ?>"> <!-- 記事の詳細ページへのリンク -->
<figure>
<span class="mask">
<?php if (has_post_thumbnail()) :
the_post_thumbnail('medium'); // アイキャッチがあれば中サイズで表示
else : ?>
<!-- アイキャッチがない場合の代替画像 -->
<img src="<?php echo get_template_directory_uri(); ?>/images/noimage.png" alt="no image">
<?php endif; ?>
</span>
<figcaption>
<h2><?php the_title(); ?></h2> <!-- 記事タイトル -->
<time datetime="<?php echo get_the_date('Y-m-d'); ?>">
<?php echo get_the_date('Y年n月j日'); ?>
</time> <!-- 投稿日 -->
</figcaption>
</figure>
</a>
</li>
<?php endwhile; wp_reset_postdata(); endif; ?>
</ul>
<!-- 「もっと見る」ボタン（投稿一覧ページへのリンク） -->
<a href="<?php echo esc_url(home_url('/blog')); ?>" class="btn_andmore">過去の投稿一覧</a>
</div>
</article>
WP_Query の解説
WordPress では、記事一覧を表示するための仕組みとして「クエリーループ（Loop）」が用意されています。
ブロックエディターでは「クエリーループブロック」を使って最新記事を表示できますが、
オリジナルテーマでは、PHPで WP_Query を使って同じ処理を柔軟にカスタマイズできます。
<?php
$news_query = new WP_Query(array(
'post_type' => 'post', // 投稿タイプを指定（通常の投稿）
'posts_per_page' => 3 // 表示件数を3件に制限
));
if ($news_query->have_posts()) :
while ($news_query->have_posts()) : $news_query->the_post();
?>
<article>
<a href="<?php the_permalink(); ?>">
<h2><?php the_title(); ?></h2>
<time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y年n月j日'); ?></time>
</a>
</article>
<?php
endwhile;
wp_reset_postdata(); // クエリのリセット
endif;
?>
これは WordPress のカスタムクエリと呼ばれる書き方で、特定の条件に合う投稿を取得するために使います。
各パラメータの意味
| パラメータ名 | 意味 |
|---|---|
'post_type' => 'post' | 通常の投稿（ブログ）を対象にする |
'posts_per_page' => 3 | 最新の3件だけ取得する |
have_posts() / the_post() | ループの基本構文（条件がある間、1件ずつ処理） |
the_permalink() | 各記事のリンク先URLを表示 |
the_title() | 記事タイトルを表示 |
the_time() | 投稿日時をフォーマットして表示 |
wp_reset_postdata() | クエリ変更の影響をリセット（重要） |
投稿のループ処理（中身を取り出す）
if ($news_query->have_posts()) :
while ($news_query->have_posts()) : $news_query->the_post();
// 投稿の中身を表示する処理
endwhile;
wp_reset_postdata(); // ← クエリのリセットも忘れずに！
endif;
wp_reset_postdata(); の意味
WP_Queryを使うと「メインのループ」とは別のループが走るので、元の状態に戻す処理が必要です。- これを忘れると、後続のテンプレートタグ（
the_title()など）が正しく動かないことがあります。
よく使う拡張パターン
| 条件 | 追加パラメータ例 |
|---|---|
| カテゴリーを絞る | 'category_name' => 'news' |
| タグで絞る | 'tag' => 'pickup' |
| 並び順を変える | 'orderby' => 'date', 'order' => 'DESC' |
| カスタム投稿取得 | 'post_type' => 'shop-info'（例） |