固定ページに記事一覧を表示する方法【WordPress初心者向け・コピペOK】

運用・更新のコツ
2025.10.15

はじめに

WordPressでホームページを作っていると、
「固定ページにブログ記事の一覧を出したいな〜」と思うこと、ありますよね。

たとえば、トップページを固定ページにしている人なら、
下のほうに「最新記事」をズラッと並べたい…なんてケースも多いと思います。

でも実際にやってみると、
「固定ページってブログ一覧出ないんだけど!?」とつまずく人がたくさんいます。

実はこれ、WordPressの仕組みが原因なんです。
投稿ページ（ブログ）は“記事一覧を自動で出す”ようにできていますが、
固定ページは“自分で中身を作るページ”なので、最初から一覧は表示されないんです。

そこで今回は、固定ページにブログ記事の一覧を表示する3つの方法を、
初心者さん向けにわかりやすくご紹介します。

  • プラグインで簡単に出す方法
  • ブロックエディタ（クエリループ）で出す方法
  • PHPコードでしっかり作る方法

それぞれメリット・デメリットも紹介しながら、
「どれを選べばいいか」がわかるように解説していきます。

「固定ページに記事一覧を出したい！」という悩みは、
これでスッキリ解決できるはずです！✨

固定ページと投稿ページの違いをざっくり整理

まず、なんで固定ページに記事一覧が出ないのか？
その理由を知るには、「固定ページ」と「投稿ページ」の違いをちょっとだけ整理しておくとわかりやすいです。

固定ページ（ページ）は、会社概要・サービス紹介・お問い合わせなど、
「ずっと変わらない内容」を載せるためのページです。
自分で自由にデザインできる反面、記事一覧などの“自動機能”はついていません。

一方、**投稿ページ（ブログ）**は、日付順に記事が並ぶ仕組みになっています。
WordPressが自動で「最新記事一覧」を作ってくれるので、特に設定しなくても一覧ページが完成します。

つまり──
固定ページは「手作りのページ」、
投稿ページは「自動で一覧ができるページ」。

だからこそ、固定ページで記事一覧を出したい場合は、
自分で“記事を読み込む仕組み”を追加する必要があるんです。

難しそうに聞こえるかもしれませんが、大丈夫！
これから紹介する方法を使えば、コピペで簡単にできます。

次の章では、まず一番かんたんな「プラグインで出す方法」から見ていきましょう！

プラグインで簡単に記事一覧を出す方法

「コードはちょっと怖い…💦」という人におすすめなのが、
プラグインを使って記事一覧を表示する方法です。

プラグインを入れるだけで、固定ページでも投稿一覧を出せるようになります。
代表的なものをいくつかご紹介しますね。

🧩おすすめプラグイン①：WP Show Posts

シンプルで人気の高いプラグインです。
指定したカテゴリーの記事を一覧表示でき、デザインも整っています。

使い方の流れ

  1. 「WP Show Posts」をインストールして有効化
  2. 管理画面の「WP Show Posts」→「Add New」で新規作成
  3. 表示したい条件（投稿数・カテゴリなど）を設定
  4. 表示されたショートコードを固定ページに貼り付けるだけ！

コードが苦手な人でも、この方法ならあっという間に完成します✨

🧩おすすめプラグイン②：Ultimate Blocks（ブロックエディタ派向け）

「Ultimate Blocks」を使うと、ブロックエディタ内で記事一覧を出せる「Post Grid」ブロックが追加されます。
デザインをプレビューしながら調整できるので、初心者でも扱いやすいです。

🧩おすすめプラグイン③：Recent Posts Widget Extended

サイドバーだけでなく、本文中にもショートコードで記事一覧を設置できます。
細かくカスタマイズしたい人におすすめです。

💡プラグインを使うメリットと注意点

メリット

  • コード不要！初心者でも簡単
  • ショートコードを貼るだけでOK
  • カテゴリ別の一覧もすぐ作れる

注意点

  • プラグインを入れすぎるとサイトが重くなる
  • デザインの自由度は限られる
  • 長期的にメンテナンスされないプラグインもある

「とりあえず一覧を出したい！」という方には、
プラグインがいちばん早くて安心な方法です。

ただし、サイトのデザインや構造にこだわりたい人は、
次に紹介する**「クエリループ」ブロック**の方が柔軟に作れますよ。

ブロックエディタ（クエリループ）で出す方法

もしあなたがWordPressの「ブロックエディタ（Gutenberg）」を使っているなら、
プラグインを使わなくても記事一覧を出すことができます。

使うのは「クエリループ（Query Loop）」というブロックです。
名前はちょっと難しそうですが、要するに「どんな記事をどんな形で出すか」を決められる便利なブロックなんです。

🪄 クエリループの使い方

  1. 固定ページを開き、「ブロックを追加」ボタンをクリック
  2. 「クエリループ」と検索して追加
  3. 「パターンを選択」から好みのレイアウトを選ぶ（カード型など）
  4. 右側の設定欄で、
    　- 投稿タイプ（投稿・カスタム投稿など）
    　- 表示件数
    　- 並び順（新しい順など）
    　- カテゴリーの絞り込み
    　を設定する

これだけで、固定ページ上に最新記事の一覧が表示されます✨

🖋 デザインも調整できる！

クエリループは、見出しやサムネイル、抜粋などをブロック単位で編集できます。
たとえば「タイトルだけ出す」「画像＋タイトルにする」など、
ドラッグ＆ドロップ感覚で自由に調整できるのが魅力です。

💡クエリループのメリットと注意点

メリット

  • WordPress標準機能だからプラグイン不要
  • レイアウトや表示内容を自由にカスタマイズできる
  • 見た目を確認しながら作れる

注意点

  • ブロックエディタに慣れていないと、最初は少し迷う
  • テーマによってデザインが崩れる場合もある

最近のWordPressではこの「クエリループ」で十分なケースが多いです。
プラグインを増やしたくない人や、デザインを整えたい人にぴったりの方法です。

次は、**「もっと自由に一覧を作りたい」**人向けに、
コードを使う方法（テンプレートファイルを編集するやり方）を紹介します！

⑤ functions.php + カスタムテンプレートで出す方法（中級だけどやってみると簡単）

「プラグインは増やしたくない」「カード型で自由に並べたい」なら、固定ページ用のテンプレートファイルを作るのがいちばん自由度が高いです。
子テーマを使えば、親テーマのアップデートで消える心配もありません。

手順の全体像

  1. 子テーマを用意する（まだなら先につくるのがおすすめ）
  2. 子テーマのフォルダに page-blog.php を作成
  3. 中にコピペ用テンプレートコードを貼る
  4. WordPress管理画面で固定ページを開き、テンプレートに「ブログ一覧」を選ぶ
  5. 必要なら CSS を足してカードを整える

1）子テーマの準備（まだの人だけ）

  • wp-content/themes/親テーマ名-child/ を作成
  • style.css と functions.php を用意
  • style.css の先頭だけ用意すればOK
/*
 Theme Name: 親テーマ名 Child
 Template: 親テーマのディレクトリ名
*/

2）固定ページ用テンプレートを作る

子テーマ直下に page-blog.php というファイルを作って、下のコードを丸ごとコピペしてください。
保存したら、管理画面の固定ページ編集画面の「テンプレート」でブログ一覧が選べるようになります。

<?php
/* 
Template Name: ブログ一覧
*/
get_header(); ?>

<main class="l-main">
  <div class="inner">
    <h1 class="page-title"><?php the_title(); ?></h1>

    <?php
    // ここで記事一覧を取得
    $paged = get_query_var('paged') ? get_query_var('paged') : 1;
    $args = array(
      'post_type'      => 'post',
      'posts_per_page' => 10,
      'paged'          => $paged,
      'ignore_sticky_posts' => true,
    );
    $the_query = new WP_Query($args);
    ?>

    <?php if ( $the_query->have_posts() ) : ?>
      <div class="post-grid">
        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
          <article id="post-<?php the_ID(); ?>" <?php post_class('post-card'); ?>>
            <a class="post-card__link" href="<?php the_permalink(); ?>">
              <?php if ( has_post_thumbnail() ) : ?>
                <div class="post-card__thumb">
                  <?php the_post_thumbnail('medium'); ?>
                </div>
              <?php endif; ?>
              <div class="post-card__body">
                <h2 class="post-card__title"><?php the_title(); ?></h2>
                <time class="post-card__date" datetime="<?php echo esc_attr( get_the_date('c') ); ?>">
                  <?php echo esc_html( get_the_date() ); ?>
                </time>
                <p class="post-card__excerpt">
                  <?php echo esc_html( wp_strip_all_tags( get_the_excerpt(), true ) ); ?>
                </p>
              </div>
            </a>
          </article>
        <?php endwhile; ?>
      </div>

      <nav class="pagination">
        <?php
          echo paginate_links( array(
            'total'   => $the_query->max_num_pages,
            'current' => $paged,
          ) );
        ?>
      </nav>

      <?php wp_reset_postdata(); ?>
    <?php else : ?>
      <p>記事がまだありません。</p>
    <?php endif; ?>

  </div>
</main>

<?php get_footer(); ?>

ポイント

  • Template Name があるから固定ページのテンプレートに選べます
  • WP_Query を使って安全に記事を取得
  • ページャーもつけて、10件ずつ表示にしています

3）かんたんカード用のミニCSS（任意）

テーマの追加CSSや子テーマの style.css に貼るだけで、カードがそれっぽく整います。

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 24px;
}
.post-card {
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  background: #fff;
}
.post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}
.post-card__thumb img {
  width: 100%;
  height: auto;
  display: block;
}
.post-card__body {
  padding: 16px;
}
.post-card__title {
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 0 0 .25rem;
}
.post-card__date {
  display: inline-block;
  font-size: .85rem;
  opacity: .7;
  margin-bottom: .5rem;
}
.post-card__excerpt {
  margin: 0;
  font-size: .95rem;
  line-height: 1.7;
}
.post-card__link {
  color: inherit;
  text-decoration: none;
  display: block;
  height: 100%;
}

4）よくあるつまずき

  • テンプレートが出てこない
    → page-blog.php の先頭コメント Template Name: を確認。ファイルは子テーマに置く。
  • サムネイルが出ない
    → 記事にアイキャッチ画像を設定。テーマで add_theme_support('post-thumbnails') が有効か確認。
  • ページャーが動かない
    → 固定ページのパーマリンクを保存し直す。$paged の取得コードをそのまま使う。
  • カテゴリ別にしたい
    → $args に 'cat' => 3 や 'category_name' => 'news' を追加。

5）functions.php でできる小ワザ（任意）

抜粋の長さや省略記号を調整したいときは、子テーマの functions.php に追加します。

// 抜粋の長さを調整（単語数ベース。日本語テーマによっては文字数として扱われます）
add_filter('excerpt_length', function($length){ return 60; }, 999);

// 省略記号を変更
add_filter('excerpt_more', function(){ return '...'; });

⑥ カードデザインを整えるCSS例

テンプレートで記事一覧を出せたら、次はデザインを整えましょう。
シンプルでも**“整って見えるカードデザイン”**を作るだけで、ぐっとサイト全体の完成度が上がります✨

以下のCSSを「外観 → カスタマイズ → 追加CSS」にコピペすればOKです。
（もちろん子テーマのstyle.cssに書いてもOK）

💅 ベーシックなカードデザイン（どんなテーマにも合う）

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 2rem;
}

.post-card {
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  background-color: #fff;
  overflow: hidden;
  transition: all 0.3s ease;
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}

.post-card__thumb img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.post-card__body {
  padding: 1.2rem;
}

.post-card__title {
  font-size: 1.1rem;
  margin-bottom: .5rem;
  line-height: 1.5;
  color: #333;
}

.post-card__date {
  font-size: 0.85rem;
  color: #888;
  display: block;
  margin-bottom: .75rem;
}

.post-card__excerpt {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.7;
}

.post-card__link {
  text-decoration: none;
  color: inherit;
  display: block;
}

🎨 おしゃれに見せるポイント

  • 画像サイズを統一：object-fit: cover;で切り抜き調整
  • 影をうっすら：box-shadowを弱めに入れると上品
  • 角丸：border-radius: 12pxでやさしい印象に
  • 動きをつける：transform: translateY(-4px)でホバー時にふわっと

📱 スマホ表示もきれいにするには

@media (max-width: 600px) {
  .post-grid {
    grid-template-columns: 1fr;
  }
  .post-card__thumb img {
    height: 200px;
  }
}

カードを1列にすれば、スマホでも見やすくなります。
WordPressのテーマによってはこれを調整しなくてもOKな場合もあります。

✨ ちょっと上級編：ホバーで画像をズームするアニメ

.post-card__thumb {
  overflow: hidden;
}
.post-card__thumb img {
  transition: transform .4s ease;
}
.post-card:hover .post-card__thumb img {
  transform: scale(1.05);
}

ほんの少し動くだけでも印象がアップします。
「サイトに動きが欲しいけどアニメーションは苦手」という方にもおすすめです！

ここまでできたら、見た目も機能もバッチリな“固定ページの記事一覧”が完成です🎉

⑦ 子テーマを使うべき？

結論から言うと、コードでカスタマイズするなら子テーマは使うのがおすすめです。
理由はシンプルで、親テーマのアップデートで上書きされないからです。せっかく作ったpage-blog.phpやCSSが消えたら悲しすぎますよね。

子テーマを使うメリット

  • 更新で消えない
    親テーマを更新しても、子テーマの中身はそのままです。
  • 安心して試せる
    もし崩れても子テーマ側だけ直せばOKです。
  • 管理がわかりやすい
    自分で追加したファイルが子テーマにまとまって見つけやすいです。

逆に、子テーマなしでもよいケース

  • プラグインだけで完結し、テーマファイルを一切触らないとき
  • 「追加CSS」だけで見た目を整える程度のとき
    （ただし将来テンプレートを作る予定があるなら、最初から子テーマにしておくと後がラクです）

かんたん作り方（おさらい）

  1. wp-content/themes/親テーマ名-child/ を作成
  2. style.css を置く
/*
 Theme Name: 親テーマ名 Child
 Template: 親テーマのディレクトリ名
*/
  1. functions.php を置く（親のCSSを読み込むため）
<?php
add_action('wp_enqueue_scripts', function(){
  // 親テーマのスタイルを先に読み込み
  $parent = get_template_directory_uri() . '/style.css';
  wp_enqueue_style('parent-style', $parent);
});
  1. 有効化する
    外観 → テーマ で「親テーマ名 Child」を有効化します。

どのファイルを子テーマに置けばいい？

  • テンプレート系：page-blog.php、single.php などは子テーマ側に作成
  • CSS：子テーマの style.css または「追加CSS」に記載
  • functions.php：小ワザやフィルターは子テーマ側に追記

ポイント

  • 親にあるファイル名と同じ名前で子に置くと、子が優先されます。
  • 親のテンプレートを直接編集しないほうが安全です。

よくあるつまずき

  • テンプレートが選べない
    → 先頭コメント Template Name: が正しく書けているか、ファイルを子テーマに置いているかを確認します。
  • 子テーマが表示されない
    → style.css の Template: に親テーマのフォルダ名を正確に書きます。テーマ名ではなくフォルダ名です。
  • デザインが崩れた
    → 親のCSSが読み込めているか、enqueueの記述を見直します。

小さく始めるなら

  • まずはクエリループやプラグインで一覧を出す
  • その後、デザインにこだわりたくなったら子テーマを作る
    この順番でもぜんぜんOKです。焦らなくて大丈夫です！

⑧ よくあるエラー・うまく表示されない時の対処法

「コードもコピペしたのに、なぜか表示されない…！」
そんなときも焦らなくて大丈夫です。
よくある原因と、かんたんな解決方法を順番に見ていきましょう💡

① 固定ページでテンプレートを選んでいない

テンプレートを作っただけでは、まだWordPressはそれを使いません。
固定ページの編集画面を開いて、右側の「テンプレート」から
**「ブログ一覧」**を選択してください。

これを忘れる人が一番多いです！

② Template Name の表記が間違っている

テンプレートファイルの先頭にあるコメント部分が、実はとても大事です。

/* Template Name: ブログ一覧 */

これがない、もしくは半角スペースや日本語の全角記号がおかしいと、
テンプレート選択欄に出てきません。
迷ったら上の1行をそのままコピペしてOKです。

③ 子テーマに置いていない

テンプレートファイル（page-blog.phpなど）は子テーマ内に置きましょう。
親テーマに置くと、アップデートで消えたり、上書きされたりします。

場所の目安：
wp-content/themes/親テーマ名-child/page-blog.php

④ サムネイルが表示されない

アイキャッチ画像を設定していないか、テーマで対応していない可能性があります。

チェックポイント

  • 投稿の「アイキャッチ画像」に画像を設定したか？
  • 親テーマにこの記述があるか？
add_theme_support('post-thumbnails');

もしなければ、子テーマのfunctions.phpにこの1行を追加してください。

⑤ ページ送り（ページネーション）が動かない

paginate_links()を使っても次のページに進まない場合、
パーマリンクの更新で直るケースが多いです。

やり方：
管理画面の「設定 → パーマリンク設定」で、何も変更せずに「保存」。
これでWordPressが内部リンクを再設定してくれます。

⑥ 一覧が空っぽになる

  • 投稿が「下書き」のままになっていないか？
  • $args の条件で絞りすぎていないか？（カテゴリ指定など）
  • クエリ部分のスペルミスがないか？

特に 'post_type' => 'post' は正しく書かれているか確認しましょう。

⑦ CSSが反映されない

CSSを追加しても反映されない場合は、
キャッシュの影響か、読み込み順が原因です。

チェック方法

  • ブラウザの更新ボタンを「Shiftキー＋クリック」してリロード
  • キャッシュ系プラグインを使っている場合は一度削除
  • 子テーマの style.css に書いているなら、enqueue処理が正しいか確認

💡困ったときの最終手段

表示が崩れたり、真っ白になったらびっくりしますよね。
そんなときは、

  1. FTPで子テーマのファイルを一時的に削除
  2. 管理画面に戻ってテーマを確認
  3. 再度コピペし直す

「バックアップをとっておく」だけでも安心感が全然違います。

ここまでで「動かない…！」問題はほぼ解決できるはずです！✨

⑨ さらに発展！カテゴリ別・カスタム投稿タイプも一覧化できる

「記事一覧が出せた！🎉」という方、おめでとうございます！
ここまでできたら、もう一歩進んでカテゴリ別一覧やカスタム投稿タイプの一覧にも挑戦してみましょう。

やり方はとっても簡単。
先ほど紹介した $args（記事を取得する設定部分）を、ちょこっと変えるだけです。

🗂 カテゴリ別の記事一覧を出したいとき

「お知らせだけ出したい」「ブログだけ出したい」など、カテゴリで絞り込みたい場合は、
このように $args を変更します。

$args = array(
  'post_type' => 'post',
  'category_name' => 'news', // ← カテゴリのスラッグを指定
  'posts_per_page' => 10,
);

スラッグは「投稿 → カテゴリー」で確認できます。
（例：URLが /category/news/ ならスラッグは news）

🪴 カスタム投稿タイプを一覧表示したいとき

もし「制作実績」「お客様の声」などのカスタム投稿タイプを作っているなら、
post_type を変えるだけでOKです！

$args = array(
  'post_type' => 'works', // ← カスタム投稿タイプのスラッグ
  'posts_per_page' => 8,
);

この方法を使えば、固定ページで「制作実績」一覧ページを作ることもできます。
投稿タイプごとにテンプレートを分けておくと、後から管理しやすくなりますよ。

🧩 複数のカテゴリをまとめて出すこともできる

$args = array(
  'category__in' => array(3, 5, 7), // ← IDで指定（複数カテゴリOK）
);

カテゴリの「ID」は管理画面のURLバーから確認できます（tag_ID=3 の数字部分）。

💡 応用のアイデア

  • カテゴリ別ページ：
    「お知らせ」「ブログ」「コラム」などをそれぞれ別の固定ページで出す
  • トップページ下部に最新3件だけ：
    'posts_per_page' => 3 にしてコンパクトに表示
  • 特定のタグで絞る：
    'tag' => 'pickup' を追加すれば「ピックアップ記事」一覧も簡単に

📘 コツ：テンプレートを分けて整理しよう

たとえばこんな感じで作ると、後から見返したときにわかりやすいです。

page-blog.php        → 通常のブログ一覧
page-news.php        → お知らせ一覧
page-works.php       → 制作実績一覧（カスタム投稿タイプ）

それぞれに Template Name: を書いておけば、固定ページで自由に使い分けできます。

まとめ

  • カテゴリや投稿タイプを変えるだけで、応用がどんどんできる
  • サイトを大きくしていくほど、一覧ページはSEO的にも重要
  • 最初は1つのテンプレートから始めて、徐々に派生させていけばOK！

⑩ まとめ：自分のサイト構成に合った方法を選ぼう

固定ページに記事一覧を入れる方法は、慣れるととてもシンプルです。
ただし、**「どんなサイトを作りたいか」**によって、ぴったりなやり方は少し変わります。

💡 目的別おすすめルート

目的方法難易度メリット
とにかく簡単に出したいプラグイン（WP Show Postsなど）★☆☆コード不要で早い
見た目を整えたいクエリループブロック★★☆デザイン自由度が高い
しっかり作り込みたいテンプレート＋CSS★★★カスタマイズ自在・SEOにも強い

✨ カスタマイズの流れ（おすすめの順番）

  1. まずはクエリループで一覧を出してみる
  2. 「もう少し自由にデザインしたい」と思ったら、テンプレートを作成
  3. 安定してきたら、子テーマで管理して安全に運用

このステップで進めると、WordPressの仕組みが自然に理解できるようになります。

🚀 そして、ここからがスタート！

固定ページで記事一覧を出せるようになると、
トップページや「制作実績」「お知らせ」なども統一感のあるデザインで並べられるようになります。

サイトの見た目が整うと、訪問者の滞在時間が伸びたり、回遊率（いろんなページを見てもらえる率）が上がったりと、SEO的にも良いことづくしです。

🌸 さいごに

今回紹介した方法はどれも、「WordPressの基本構造を知る」きっかけになります。
最初はプラグインでも、慣れてきたらぜひ自分のコードで動かしてみてください。

「固定ページに記事一覧を出したい！」という悩みは、
これでしっかり解決できるはずです✨

コメント

タイトルとURLをコピーしました