WordPressの記事一覧ページを作る方法｜固定ページ・ブロック・プラグインで初心者でも簡単表示
はじめに
WordPressでブログやオウンドメディアを運営するなら、公開した記事をまとめて見せる「記事一覧ページ」が欠かせません。記事一覧があると、訪問者は新着記事やカテゴリー別の記事を探しやすくなり、サイト内の回遊率向上も期待できます。
WordPressの記事一覧ページは、標準の投稿ページを設定するだけでも作成できます。さらに、クエリーループブロックを使えば、固定ページ内に画像付きのカード型一覧を配置することも可能です。プラグインやテーマのアーカイブ機能、PHPコードを使えば、表示条件やデザインを細かく調整できます。
この記事では、WordPressの記事一覧ページを作る方法を、初心者向けの設定からコードを使ったカスタマイズまで順番に解説します。
1. WordPressの記事一覧ページとは
WordPressの記事一覧ページとは、公開済みの投稿を新着順やカテゴリー別などでまとめて表示するページです。
一般的な記事一覧には、次のような情報が掲載されます。
アイキャッチ画像
記事タイトル
投稿日や更新日
カテゴリー名
抜粋文
「続きを読む」リンク
ページネーション
一覧ページの構成を整えると、訪問者が目的の記事を見つけやすくなります。記事数が増えるほど、カテゴリー分類やページネーションの重要性も高まります。
1-1. 投稿ページ・固定ページ・アーカイブページの違い
WordPressで記事一覧を作る前に、「投稿ページ」「固定ページ」「アーカイブページ」の違いを理解しておきましょう。
投稿ページとは、管理画面の「設定」から指定するブログ記事の一覧ページです。新しい投稿を公開すると、自動的に一覧へ追加されます。
固定ページは、会社概要やお問い合わせ、サービス紹介など、独立した内容を掲載するためのページです。通常は記事が自動表示されませんが、クエリーループブロックやショートコードを追加すれば、固定ページ内に記事一覧を表示できます。
アーカイブページは、WordPressが投稿をカテゴリー、タグ、投稿者、年月などの条件で自動的にまとめるページです。たとえば、「お知らせ」カテゴリーに属する記事だけを表示するページがカテゴリーアーカイブです。
1-2. WordPressで記事一覧が表示される仕組み
WordPressは、URLやページの種類に応じてデータベースから投稿を取得し、テーマのテンプレートを使って画面に表示します。
投稿ページでは、通常、公開された投稿が新しい順に並びます。カテゴリーアーカイブでは指定カテゴリーの記事、タグアーカイブでは指定タグの記事だけが取得されます。
どのテンプレートを使うかは、テーマのテンプレート階層によって決まります。ブロックテーマでは、サイトエディターからアーカイブテンプレートを編集できます。クラシックテーマでは、home.php、archive.php、category.phpなどのPHPファイルが使われるのが一般的です。アーカイブ用の個別テンプレートがない場合は、より汎用的なテンプレートへ順番に切り替わります。WordPress Developer Resources
1-3. 記事一覧ページを作る主な方法と選び方
WordPressの記事一覧ページを作る方法は、主に次の5つです。
標準の投稿ページを設定する
固定ページにクエリーループブロックを追加する
プラグインとショートコードを使う
テーマのアーカイブ機能を利用する
WP_Queryを使って独自テンプレートを作る
初心者には、標準の投稿ページまたはクエリーループブロックがおすすめです。特定カテゴリーだけを表示したい場合や、固定ページの好きな位置に記事一覧を置きたい場合は、クエリーループが適しています。
テーマの機能だけでは実現できないレイアウトが必要なら、プラグインを検討しましょう。表示条件やHTML構造まで細かく制御したい場合は、子テーマとPHPコードを使います。
2. WordPress標準の投稿ページで記事一覧を表示する方法
もっとも簡単なのは、WordPress標準の「投稿ページ」を設定する方法です。固定ページを1つ用意し、管理画面で投稿ページとして指定すると、公開済みの記事が自動表示されます。
2-1. 記事一覧用の固定ページを新規作成する
管理画面から「固定ページ」→「新規固定ページを追加」を開きます。
ページタイトルには、「ブログ」「記事一覧」「お知らせ」など、内容が分かる名前を入力してください。URLも分かりやすくするため、スラッグをblogやnewsなどに設定します。
投稿ページとして使用する固定ページには、基本的に本文を入力する必要はありません。タイトルとURLを設定して公開しましょう。
2-2. 「ホームページの表示」で投稿ページを設定する
固定ページを公開したら、管理画面の「設定」→「表示設定」を開きます。
「ホームページの表示」で「固定ページ」を選び、次のように設定します。
ホームページ：サイトのトップページに使う固定ページ
投稿ページ：先ほど作成した「ブログ」や「記事一覧」の固定ページ
最後に「変更を保存」をクリックしてください。設定した固定ページへアクセスすると、投稿が新着順で表示されます。WordPress公式ドキュメントでも、投稿ページには空の固定ページを指定する方法が案内されています。WordPress.org+1
トップページ自体を記事一覧にしたい場合は、「ホームページの表示」で「最新の投稿」を選びます。
2-3. 作成した記事一覧ページをメニューに追加する
記事一覧ページを作成しただけでは、訪問者がページの存在に気づかない可能性があります。ヘッダーやフッターのメニューにリンクを追加しましょう。
クラシックテーマでは、一般的に「外観」→「メニュー」から設定します。固定ページの一覧から「ブログ」や「記事一覧」を選び、メニューへ追加してください。
ブロックテーマでは、「外観」→「エディター」からヘッダーを開き、ナビゲーションブロックに記事一覧ページを追加します。
テーマによって操作画面が異なるため、「メニュー」が見つからない場合はサイトエディターを確認しましょう。
2-4. 投稿ページに本文が表示されない理由と注意点
投稿ページに指定した固定ページでは、編集画面に入力した本文が表示されないことがあります。これは不具合ではなく、投稿ページが通常の固定ページではなく、テーマの投稿一覧テンプレートによって出力されるためです。
WordPress公式の案内でも、投稿ページとして指定した固定ページでは、タイトル以外の内容が表示されないと説明されています。WordPress.org
記事一覧の上に説明文やバナーを置きたい場合は、次のいずれかの方法を選びましょう。
固定ページにクエリーループブロックを追加する
サイトエディターでホームテンプレートを編集する
テーマ独自のブログページ設定を利用する
子テーマで投稿一覧テンプレートを編集する
投稿ページに指定した固定ページと、クエリーループを配置する固定ページを混同しないことが重要です。
3. 固定ページにブロックで記事一覧を作る方法
ブロックエディターのクエリーループを使うと、コードを書かずに固定ページへ記事一覧を作成できます。
クエリーループは、指定した条件に合う投稿を繰り返し表示するブロックです。カテゴリー、投稿者、キーワードなどで絞り込みながら、画像やタイトル、抜粋を自由に配置できます。WordPress.org
3-1. クエリーループブロックを固定ページに追加する
管理画面から「固定ページ」→「新規固定ページを追加」を開き、ページタイトルを入力します。
本文エリアの「＋」をクリックし、「クエリーループ」と検索してください。クエリーループブロックを選択すると、パターンを選ぶ画面が表示されます。
すでに作成済みの固定ページへ追加することも可能です。導入文やカテゴリー案内の下にクエリーループを置けば、説明付きの記事一覧ページを作れます。
3-2. 記事一覧のレイアウトを選択する
クエリーループを追加すると、複数のレイアウトパターンが表示されます。
代表的なレイアウトは次のとおりです。
タイトルだけを並べるシンプルなリスト
アイキャッチ画像と抜粋を横並びにする一覧
複数列のカード型グリッド
大きな画像を中心にしたビジュアル重視の一覧
情報量が多いブログでは、画像、タイトル、抜粋を組み合わせたカード型が使いやすいでしょう。ニュースや更新情報を簡潔に見せたい場合は、タイトルと日付だけのリスト型が適しています。
最初から細かく作りたい場合は、「空白から始める」を選び、投稿テンプレート内へ必要なブロックを追加します。
3-3. 表示する投稿数・並び順・カテゴリーを設定する
クエリーループ全体を選択し、画面右側の設定パネルを開きます。
「クエリー」や「フィルター」などの項目から、表示条件を設定してください。設定できる内容はWordPressのバージョンやテーマによって異なりますが、一般的には次の条件を指定できます。
投稿タイプ
表示件数
並び順
カテゴリー
タグ
投稿者
キーワード
先頭固定表示の投稿の扱い
固定ページ独自の条件で記事を表示したい場合は、「テンプレートからクエリーを継承」などの設定をオフにします。
新着記事は、並び順を「新しい順」にします。古い記事から並べる場合は「古い順」、タイトル順に整理する場合は「タイトル順」を選びましょう。
3-4. アイキャッチ画像・タイトル・投稿日・抜粋を表示する
クエリーループの中には、「投稿テンプレート」と呼ばれる繰り返し部分があります。投稿テンプレート内に配置したブロックが、取得したすべての記事に適用されます。
追加できる主なブロックは次のとおりです。
アイキャッチ画像
投稿タイトル
投稿日
更新日
投稿カテゴリー
投稿者名
投稿の抜粋
投稿テンプレートは、クエリーループ内でタイトル、本文、抜粋、日付、アイキャッチ画像などを繰り返し表示するためのコンテナです。WordPress.org
アイキャッチ画像と投稿タイトルには、個別記事へのリンクを設定しておきましょう。画像だけをクリックしても記事へ移動できるため、操作性が向上します。
抜粋文が長すぎる場合は、抜粋ブロックの設定で文字数を調整します。各投稿の編集画面で抜粋を個別入力すると、一覧ページ向けの文章を自由に指定できます。
3-5. ページネーションや「続きを読む」を追加する
投稿数が多い場合は、クエリーループ内にページネーションを追加します。
投稿テンプレートの下を選択し、「クエリーページネーション」ブロックを挿入してください。前後ページへのリンクやページ番号を表示できます。クエリーページネーションは、クエリーループ内の記事を複数ページに分けるためのブロックです。WordPress.org
各記事の抜粋の下には、「続きを読む」ブロックを配置できます。リンク文言は、「記事を読む」「詳しく見る」など、サイトの雰囲気に合わせて変更しても構いません。
ただし、すべてのカードに長いボタンを置くと画面が窮屈になることがあります。タイトルや画像にリンクがある場合は、一覧全体の見やすさも考慮して判断しましょう。
3-6. スマートフォン表示を確認して調整する
パソコンで3列や4列のグリッドがきれいに見えても、スマートフォンでは画像や文字が小さくなることがあります。
編集画面のプレビュー機能を使い、デスクトップ、タブレット、モバイルの表示を確認してください。
スマートフォンでは、次のような調整が有効です。
1列または2列に変更する
カード間の余白を狭くする
見出しの文字サイズを下げる
抜粋文を短くする
画像の縦横比を統一する
不要な著者名や日付を非表示にする
テーマ側のレスポンシブ設定が適用されることもあるため、編集画面だけでなく実際のスマートフォンでも確認しましょう。
4. プラグインで記事一覧ページを作る方法
標準ブロックでは実現しにくいデザインや絞り込み機能が必要な場合は、記事一覧用プラグインを利用できます。
ショートコード型のプラグインなら、固定ページへ短いコードを貼り付けるだけで一覧を表示できます。
4-1. プラグインを使うメリット・デメリット
プラグインを使うメリットは、コードを書かずに高度な記事一覧を作れることです。
画像付きカード、複数列のグリッド、カテゴリー絞り込み、並べ替え、ページネーションなどを、管理画面から設定できる製品もあります。
一方、次のようなデメリットがあります。
プラグインの更新停止や配布終了の影響を受ける
テーマやほかのプラグインと競合する可能性がある
CSSやJavaScriptの読み込みによって表示が遅くなることがある
プラグインを停止するとショートコードがそのまま表示されることがある
標準のクエリーループで実現できるなら、無理にプラグインを増やす必要はありません。
4-2. 記事一覧を作成できるプラグインの選び方
プラグインを選ぶときは、見た目だけでなく運用面も確認しましょう。
特に重要なのは、次の項目です。
最終更新日
使用中のWordPressとの互換性
有効インストール数
利用者の評価
サポートフォーラムへの対応状況
日本語対応の有無
レスポンシブ表示への対応
不要なCSSやJavaScriptの読み込み量
ページネーションの有無
無料版と有料版の機能差
短期間のデモサイトではなく、長く運営するメディアで使う場合は、定期的に更新されているプラグインを優先しましょう。
4-3. Display Postsで記事一覧を表示する手順
Display Postsは、ショートコードで投稿を一覧表示できるプラグインです。
導入する場合は、管理画面の「プラグイン」→「新規プラグインを追加」を開き、「Display Posts」で検索します。対象プラグインをインストールし、有効化してください。
記事一覧を表示したい固定ページにショートコードブロックを追加し、次のコードを入力します。
[display-posts]
これだけで、基本的な新着記事一覧を表示できます。
カテゴリーを指定する場合は、次のようにカテゴリーのスラッグを入力します。
[display-posts category="news"]
画像と抜粋を表示する例は次のとおりです。
[display-posts include_excerpt="true" image_size="thumbnail"]
Display Postsの公式プラグインページでも、[display-posts]、カテゴリー指定、画像サイズ、抜粋表示などの使用例が案内されています。WordPress.org
4-4. ショートコードでカテゴリー別の記事一覧を作る方法
カテゴリー別の一覧ページを作る場合は、カテゴリーごとにショートコードを分けます。
たとえば、カテゴリーのスラッグがwordpressの場合は次のように入力します。
[display-posts category="wordpress"]
表示件数を指定する場合は、次のように設定します。
[display-posts category="wordpress" posts_per_page="10"]
複数の見出しとショートコードを組み合わせれば、1つの固定ページ内にカテゴリー別の新着記事を並べることもできます。
## WordPressの記事
[display-posts category="wordpress" posts_per_page="5"]
## SEOの記事
[display-posts category="seo" posts_per_page="5"]
カテゴリー名ではなく、英数字のカテゴリースラッグを指定するのが基本です。スラッグは「投稿」→「カテゴリー」から確認できます。
4-5. 画像付き・カード型・グリッド型にカスタマイズする方法
Display Postsの出力は、テーマのCSSや追加CSSで調整できます。
ショートコードに独自クラスを指定できる場合は、一覧専用のクラス名を付けると管理しやすくなります。
[display-posts wrapper="div" wrapper_class="article-grid" image_size="medium" include_excerpt="true"]
出力されるHTML構造はプラグインの仕様によって異なりますが、次のようなCSSを基にグリッド型へ調整できます。
CSS.article-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.article-grid .listing-item {
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
}
.article-grid img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
}
@media (max-width: 768px) {
.article-grid {
grid-template-columns: 1fr;
}
}
実際のクラス名は、ブラウザの検証機能で確認してください。CSSを追加する前に、テーマが用意しているカードやグリッドの機能も確認しましょう。
4-6. プラグイン利用時に確認したい更新状況と表示速度
記事一覧プラグインを導入したら、公開ページの表示速度を確認します。
記事数や画像数が多い一覧では、データベースへの問い合わせと画像読み込みが増えます。表示件数を必要以上に増やさず、ページネーションを使って分割しましょう。
また、プラグインディレクトリに「最新の主要リリースで未検証」といった注意が表示されている場合は、検証環境で動作を確認してから本番サイトへ導入してください。Display Postsの公式ページにも、確認時点では最新の主要リリースに対する未検証の注意が掲載されています。WordPress.org
更新前にはバックアップを取り、表示崩れやエラーがないか確認することも重要です。
5. テーマのアーカイブ機能で記事一覧を表示する方法
多くのWordPressテーマには、投稿一覧やカテゴリーアーカイブを表示する機能があらかじめ用意されています。
テーマの機能を使えば、サイト全体と統一されたデザインを保ちながら記事一覧を表示できます。
5-1. 投稿・カテゴリー・タグ・月別アーカイブの違い
投稿アーカイブは、公開した投稿全体をまとめた一覧です。通常は新しい記事から順に表示されます。
カテゴリーアーカイブは、同じテーマや分野の記事を分類するための一覧です。「WordPress」「SEO」「Webデザイン」など、読者が探しやすい単位で整理します。
タグアーカイブは、カテゴリーより細かなキーワードで投稿をまとめるページです。ただし、似たタグを大量に作ると、内容の薄い一覧ページが増えるため注意が必要です。
月別アーカイブは、「2026年6月」など、投稿年月ごとに記事を表示します。更新履歴を時系列で確認するサイトでは便利ですが、一般的な情報サイトでは利用頻度が低いこともあります。
5-2. テーマカスタマイザーで記事一覧の表示形式を変更する
クラシックテーマでは、「外観」→「カスタマイズ」にブログやアーカイブの設定が用意されていることがあります。
設定できる項目の例は次のとおりです。
リスト型とカード型の切り替え
1列、2列、3列の変更
アイキャッチ画像の表示
投稿日や更新日の表示
カテゴリー名の表示
抜粋文の表示
「続きを読む」ボタンの文言
変更前にプレビューを確認し、問題がなければ公開してください。
テーマカスタマイザーにブログ設定がない場合は、テーマ独自の設定画面やサイトエディターを確認します。
5-3. サイトエディターでアーカイブテンプレートを編集する
ブロックテーマでは、「外観」→「エディター」からアーカイブテンプレートを編集できます。
「テンプレート」を開き、次のような項目を探してください。
ホーム
アーカイブ
カテゴリーアーカイブ
タグアーカイブ
投稿者アーカイブ
検索結果
テンプレート内のクエリーループを選択すれば、記事一覧の列数、画像、タイトル、抜粋、日付などを変更できます。
ブロックテーマでは、投稿や固定ページの本文だけでなく、アーカイブや404ページなどのテンプレートもブロックで編集できます。WordPress.org+1
変更は同じテンプレートを使用するページ全体へ反映されるため、保存前に影響範囲を確認しましょう。
5-4. テーマによって設定項目が異なる場合の確認方法
WordPressの記事一覧設定は、使用中のテーマによって大きく異なります。
設定項目が見つからない場合は、次の順番で確認してください。
「外観」→「カスタマイズ」
「外観」→「エディター」
テーマ独自の設定メニュー
固定ページのテンプレート設定
テーマ公式マニュアル
テーマ提供元のサポート
テーマを変更すると、記事一覧の列数や画像比率、抜粋の表示方法が変わることがあります。テーマ変更前には、テスト環境で表示を確認しましょう。
6. コードを使って自由な記事一覧を作る方法
標準ブロックやプラグインでは対応できない場合は、WP_Queryを使って記事一覧を作成できます。
PHPコードを使う方法は自由度が高い一方、記述ミスによってエラーが発生する可能性があります。初心者は、クエリーループで実現できないかを先に検討しましょう。
6-1. 固定ページテンプレートを作成する前の準備
コードを編集する前に、次の準備を行います。
子テーマを作成する
ファイルとデータベースをバックアップする
ステージング環境を用意する
FTPまたはサーバーのファイルマネージャーを利用できるようにする
エラー発生時の復旧方法を確認する
本番サイトのテーマファイルを管理画面から直接編集するのは避けましょう。PHPの構文エラーがあると、サイトや管理画面へアクセスできなくなることがあります。
6-2. WP_Queryで記事一覧を取得して表示する
クラシックテーマの子テーマに、固定ページテンプレートを作る例を紹介します。
子テーマ内へpage-article-list.phpなどのファイルを作成し、次のコードを記述します。
PHP<?php
/*
Template Name: 記事一覧
*/
get_header();
$paged = max(
1,
(int) get_query_var( 'paged' ),
(int) get_query_var( 'page' )
);
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 10,
'paged' => $paged,
'ignore_sticky_posts' => true,
);
$posts_query = new WP_Query( $args );
?>
<main class="article-list-page">
<header class="article-list-header">
<h1><?php the_title(); ?></h1>
</header>
<?php if ( $posts_query->have_posts() ) : ?>
<div class="article-list">
<?php while ( $posts_query->have_posts() ) : ?>
<?php $posts_query->the_post(); ?>
<article <?php post_class( 'article-card' ); ?>>
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>" class="article-card__image">
<?php
the_post_thumbnail(
'medium_large',
array(
'loading' => 'lazy',
'alt' => the_title_attribute( array( 'echo' => false ) ),
)
);
?>
</a>
<?php endif; ?>
<div class="article-card__content">
<h2 class="article-card__title">
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h2>
<time datetime="<?php echo esc_attr( get_the_date( DATE_W3C ) ); ?>">
<?php echo esc_html( get_the_date() ); ?>
</time>
<?php the_excerpt(); ?>
</div>
</article>
<?php endwhile; ?>
</div>
<nav class="article-pagination" aria-label="記事一覧のページ送り">
<?php
echo wp_kses_post(
paginate_links(
array(
'current' => $paged,
'total' => $posts_query->max_num_pages,
'type' => 'list',
)
)
);
?>
</nav>
<?php else : ?>
<p>表示できる記事がありません。</p>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
</main>
<?php get_footer(); ?>
ファイルをアップロードしたら、固定ページの編集画面で作成したテンプレートを選択します。
WP_Queryは、指定したクエリー条件を基に投稿を取得し、have_posts()とthe_post()を使ってループ表示できます。独自ループの終了後は、wp_reset_postdata()で投稿データを元に戻します。WordPress Developer Resources+1
6-3. カテゴリー・タグ・投稿数を指定する
カテゴリーを指定する場合は、category_nameにカテゴリースラッグを設定します。
PHP$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 12,
'category_name' => 'wordpress',
'order' => 'DESC',
'orderby' => 'date',
'paged' => $paged,
);
タグを指定する場合は、tagを使用します。
PHP$args = array(
'post_type' => 'post',
'posts_per_page' => 10,
'tag' => 'beginner',
'paged' => $paged,
);
複数カテゴリーを細かく制御する場合は、tax_queryを使います。
PHP$args = array(
'post_type' => 'post',
'posts_per_page' => 10,
'tax_query' => array(
array(
'taxonomy' => 'category',
'field' => 'slug',
'terms' => array( 'wordpress', 'seo' ),
'operator' => 'IN',
),
),
'paged' => $paged,
);
投稿数を無制限にするposts_per_page => -1は、記事数が多いサイトでは負荷が高くなります。通常は10件から20件程度に分割し、ページネーションを設けましょう。
6-4. ページネーションを実装する
独自のWP_Queryでページネーションを使うには、現在のページ番号を取得し、クエリーのpagedへ渡します。
PHP$paged = max(
1,
(int) get_query_var( 'paged' ),
(int) get_query_var( 'page' )
);
一覧の下部では、paginate_links()に現在のページと総ページ数を渡します。
PHPecho wp_kses_post(
paginate_links(
array(
'current' => $paged,
'total' => $posts_query->max_num_pages,
'prev_text' => '前へ',
'next_text' => '次へ',
)
)
);
ページ送りが404エラーになる場合は、パーマリンク設定や固定ページのスラッグ、クエリー変数を確認してください。
6-5. 子テーマを使って安全にカスタマイズする
親テーマのファイルを直接編集すると、テーマ更新時に変更内容が上書きされる可能性があります。
子テーマを使えば、親テーマのデザインや機能を引き継ぎながら、独自のテンプレートやCSSを追加できます。WordPress公式のテーマ開発ドキュメントでも、親テーマを直接編集せず変更を保持する方法として子テーマが案内されています。WordPress Developer Resources
既存テーマに公式子テーマがある場合は、それを使用すると安全です。自作する場合は、親テーマ名や読み込み方法を正しく設定してください。
6-6. PHP編集前にバックアップを取る
PHPファイルを編集する前には、必ずバックアップを取ります。
最低限、次の2種類を保存してください。
WordPressのファイル
データベース
レンタルサーバーの自動バックアップが利用できる場合も、復元方法と保存期間を確認しておきましょう。
WordPress公式ドキュメントでも、更新やファイル変更の前にバックアップを作成することが推奨されています。WordPress.org+1
7. 記事一覧ページを見やすくするカスタマイズ
記事一覧は、情報を増やすほど便利になるとは限りません。訪問者がタイトルを見つけやすく、迷わず記事へ移動できる構成を目指しましょう。
7-1. リスト型・カード型・グリッド型の選び方
リスト型は、タイトルや日付を縦に並べる形式です。ニュース、更新情報、FAQなど、短時間で多くの項目を確認してほしいページに適しています。
カード型は、画像、タイトル、抜粋などを1つの枠にまとめる形式です。ブログ、オウンドメディア、実績紹介など、記事の内容を視覚的に伝えたい場合に向いています。
グリッド型は、カードを複数列に並べる形式です。記事を一覧しやすい反面、タイトルの長さや画像比率が揃っていないと高さが不均一になります。
記事の種類と読者の目的に合わせて選びましょう。
7-2. アイキャッチ画像のサイズと比率を統一する
記事ごとに画像サイズが異なると、一覧ページのレイアウトが崩れて見えます。
アイキャッチ画像は、16対9や4対3など、サイト内で共通の比率を決めるのがおすすめです。
CSSでは、aspect-ratioとobject-fitを組み合わせると表示領域を統一できます。
CSS.article-card img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
元画像の重要な部分が切れる場合は、画像作成時に中央付近へ文字や被写体を置きましょう。
7-3. 抜粋文の文字数を調整する
抜粋文は、記事を読むか判断するための補助情報です。長すぎると一覧性が低下し、短すぎると内容が伝わりません。
一般的なカード型では、2行から4行程度に収めると見やすくなります。
CSSで行数を制限する方法もあります。
CSS.article-card__excerpt {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
自動生成の抜粋では文章が途中で切れることがあります。重要な記事には、投稿編集画面から一覧用の抜粋文を個別に入力しましょう。
7-4. カテゴリー名・投稿日・著者名を表示する
カテゴリー名は、記事のテーマを瞬時に伝えるために役立ちます。複数カテゴリーをすべて表示すると煩雑になるため、主要カテゴリーだけを見せる方法も有効です。
投稿日は、ニュースや制度、ソフトウェアの操作方法など、情報の新しさが重要な記事で表示しましょう。更新日も管理している場合は、投稿日より更新日を目立たせる方法があります。
複数人で運営するメディアでは著者名が有効ですが、個人ブログでは省略しても問題ありません。読者に必要な情報だけを残すことが大切です。
7-5. 新着記事・人気記事・関連記事を分けて表示する
すべての記事を1つの一覧に並べるだけでなく、目的別に分けると回遊しやすくなります。
トップページでは、新着記事と人気記事を分けて表示できます。カテゴリーの案内ページでは、そのカテゴリーの新着記事や代表記事を掲載すると効果的です。
記事本文の下には、同じカテゴリーやタグに属する関連記事を表示すると、次に読むコンテンツを見つけやすくなります。
ただし、同じ記事を複数の一覧に繰り返し表示しすぎると、ページが長くなります。各一覧の役割を明確にし、表示件数を絞りましょう。
7-6. CSSで余白・文字サイズ・列数を整える
カード型の記事一覧では、次のCSSを基準に調整できます。
CSS.article-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px 24px;
}
.article-card {
min-width: 0;
}
.article-card__title {
margin: 12px 0 8px;
font-size: 1.2rem;
line-height: 1.5;
}
.article-card__title a {
color: inherit;
text-decoration: none;
}
.article-card__title a:hover {
text-decoration: underline;
}
@media (max-width: 960px) {
.article-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.article-list {
grid-template-columns: 1fr;
gap: 24px;
}
}
文字サイズを小さくしすぎず、カード同士の間隔を十分に確保してください。リンク部分には、マウスを重ねたときだけでなく、キーボード操作時にも分かる表示を用意すると使いやすくなります。
8. 記事一覧ページのSEOとユーザビリティを改善するポイント
WordPressの記事一覧ページは、記事を並べるだけでなく、サイト構造を伝える役割も持っています。
検索エンジンだけを意識するのではなく、訪問者が目的の記事へ短い手順で移動できるページを作りましょう。
8-1. ページタイトルと見出しを適切に設定する
記事一覧ページのタイトルには、ページの内容が分かる言葉を使用します。
「ブログ」だけでは内容が伝わりにくい場合は、「WordPress初心者向け記事一覧」「Webマーケティングのお役立ち記事」など、テーマを具体的に示しましょう。
ページ内の見出しも、カテゴリーや目的が分かる表現にします。
WordPressの新着記事
SEO対策の記事
初心者におすすめの記事
よく読まれている記事
キーワードを無理に繰り返すのではなく、読者が内容を判断できる自然なタイトルを付けることが重要です。
8-2. 重複コンテンツやインデックス設定を確認する
同じ投稿が、投稿一覧、カテゴリー、タグ、月別アーカイブなど複数のURLに表示されるのは、WordPressでは一般的です。
一覧ページに同じ抜粋が表示されるだけで、直ちに問題になるとは限りません。ただし、内容の薄いタグページや、記事が1件しかないアーカイブを大量に作ると、サイト構造が分かりにくくなります。
インデックスさせるページとさせないページは、サイトの運営方針に合わせて判断しましょう。
カテゴリーアーカイブを検索流入用の案内ページとして活用する場合は、カテゴリーの説明文や独自コンテンツを追加します。タグや月別アーカイブを利用しない場合は、SEOプラグインでインデックス設定を見直す方法があります。
8-3. カテゴリーを整理して目的の記事を探しやすくする
カテゴリーは、読者がサイト内を移動するための主要な分類です。
カテゴリー数が多すぎると、どこを選べばよいか分からなくなります。反対に、すべての記事を1つのカテゴリーに入れると分類の意味がなくなります。
カテゴリーを作るときは、次の点を意識してください。
同じ階層のカテゴリーは同じ基準で分ける
意味が重なるカテゴリーを統合する
記事が増える見込みのないカテゴリーを乱立しない
カテゴリー名を読者が使う言葉にする
必要に応じて親子カテゴリーを使う
1記事に多くのカテゴリーを付けるより、主要カテゴリーを明確にするほうがサイト構造を整理しやすくなります。
8-4. パンくずリストと内部リンクを設置する
パンくずリストは、訪問者が現在地を把握し、上位階層へ戻るためのナビゲーションです。
記事ページでは、次のような階層を示します。
ホーム ＞ WordPress ＞ 記事タイトル
記事一覧ページから個別記事へのリンクだけでなく、個別記事からカテゴリー一覧へ戻るリンクも整備しましょう。
導入文の中から主要カテゴリーへリンクしたり、記事一覧の下に関連カテゴリーを案内したりすると、サイト内を移動しやすくなります。
8-5. 表示速度と画像容量を最適化する
記事一覧では複数のアイキャッチ画像を同時に読み込むため、画像容量が大きいと表示が遅くなります。
次の対策が有効です。
一覧に必要な大きさの画像を使う
WebPなどの軽量な画像形式を利用する
画像を適切に圧縮する
遅延読み込みを利用する
1ページの表示件数を減らす
不要なスライダーやアニメーションを使わない
キャッシュを利用する
大きな元画像をCSSだけで縮小表示するのではなく、WordPressが生成するサムネイルや中サイズの画像を使いましょう。
8-6. パソコンとスマートフォンの両方で表示確認する
記事一覧は画面幅によって見え方が大きく変わります。
パソコンでは、画像とタイトルがバランスよく配置されているか確認します。スマートフォンでは、文字が小さすぎないか、リンク同士が近すぎないか、横スクロールが発生していないかを確認してください。
次の操作も試しましょう。
タイトルをタップして記事へ移動する
画像から記事へ移動する
ページ番号を操作する
カテゴリーリンクを開く
ブラウザの戻る操作を行う
画面を縦向きと横向きに切り替える
管理者としてログインした状態だけでなく、ログアウトした状態でも確認することが大切です。
9. WordPressの記事一覧が表示されないときの対処法
WordPressの記事一覧が表示されない場合は、投稿、表示設定、クエリーループ、キャッシュ、テーマ、プラグインの順に確認します。
複数の設定を一度に変更すると原因が分からなくなるため、1項目ずつ確認しましょう。
9-1. 投稿が公開状態になっているか確認する
最初に、一覧へ表示したい投稿の公開状態を確認します。
下書き、非公開、予約投稿、ゴミ箱にある記事は、通常の訪問者向け一覧には表示されません。
投稿編集画面を開き、ステータスが「公開済み」になっているか確認してください。公開日時が未来に設定されている場合は、予約投稿として扱われます。
パスワード保護した投稿や限定公開を実現するプラグインを使用している場合も、通常とは異なる表示になることがあります。
9-2. 表示設定の「投稿ページ」を確認する
標準の投稿ページを使っている場合は、「設定」→「表示設定」を確認します。
「ホームページの表示」で「固定ページ」が選ばれている場合は、「投稿ページ」に正しい固定ページが指定されているか確認してください。
同じ固定ページを「ホームページ」と「投稿ページ」の両方に指定することはできません。それぞれ別の固定ページを用意します。
設定後は、画面下部の「変更を保存」を忘れずにクリックしてください。
9-3. クエリーループの絞り込み条件を見直す
クエリーループに何も表示されない場合は、カテゴリー、タグ、投稿者、キーワードなどの絞り込み条件を確認します。
存在しないカテゴリーや、投稿が1件も属していないカテゴリーを指定していると、結果は表示されません。
また、「テンプレートからクエリーを継承」が有効になっていると、固定ページで意図しない条件が適用されることがあります。固定ページ独自の一覧を作る場合は、継承設定をオフにして条件を指定し直しましょう。
9-4. キャッシュを削除して再読み込みする
設定を変更しても表示が変わらない場合は、古いページがキャッシュされている可能性があります。
次のキャッシュを順番に削除してください。
ブラウザキャッシュ
キャッシュプラグイン
レンタルサーバーのキャッシュ
CDNのキャッシュ
ブロックやページビルダー独自のキャッシュ
ブラウザのシークレットウィンドウでページを開く方法も有効です。ログイン中だけ正常に見える場合は、訪問者向けキャッシュが残っている可能性があります。
9-5. テーマやプラグインの競合を確認する
記事一覧が突然表示されなくなった場合は、直前に更新または追加したテーマやプラグインを確認します。
検証環境で、記事一覧に関係しそうなプラグインを一時停止してください。問題が解消する場合は、停止したプラグインとの競合が考えられます。
テーマを一時的にWordPress公式の標準テーマへ切り替え、表示を確認する方法もあります。
本番サイトで作業する場合は、事前にバックアップを取り、アクセスの少ない時間帯に実施しましょう。
9-6. パーマリンク設定を保存し直す
記事一覧の2ページ目以降が404エラーになる場合や、アーカイブURLが開かない場合は、パーマリンク設定を保存し直します。
「設定」→「パーマリンク」を開き、設定を変更せずに「変更を保存」をクリックしてください。これにより、URLの書き換えルールが再生成されます。
WordPressのパーマリンク設定は、管理画面から構造を選択し、保存ボタンを押すことで反映されます。WordPress.org+1
改善しない場合は、サーバーの書き換え設定、固定ページとカテゴリーのスラッグ重複、独自コードのページネーション処理を確認しましょう。
10. WordPressの記事一覧ページに関するよくある質問
10-1. トップページとは別に記事一覧ページを作れますか
作れます。
トップページ用の固定ページと記事一覧用の固定ページをそれぞれ作成し、「設定」→「表示設定」で別々に指定してください。
たとえば、ホームページに「トップ」、投稿ページに「ブログ」を指定します。トップページにはサービス紹介や新着記事の一部を掲載し、ブログページにはすべての記事を表示できます。
10-2. 特定カテゴリーの記事だけを一覧表示できますか
クエリーループ、カテゴリーアーカイブ、プラグイン、WP_Queryのいずれかを使えば表示できます。
初心者には、固定ページへクエリーループを追加し、フィルターからカテゴリーを指定する方法がおすすめです。
Display Postsを使う場合は、次のようにカテゴリースラッグを指定します。
[display-posts category="wordpress"]
カテゴリーアーカイブをそのままメニューへ追加する方法もあります。
10-3. 記事一覧の表示件数はどこで変更できますか
標準の投稿ページや一般的なアーカイブの表示件数は、「設定」→「表示設定」にある「1ページに表示する最大投稿数」から変更できます。
クエリーループでは、ブロックの設定パネルから表示件数を変更します。
プラグインでは、管理画面またはショートコードのパラメータで指定します。独自コードでは、WP_Queryのposts_per_pageを変更してください。
10-4. 固定ページに新着記事を自動表示できますか
クエリーループブロックを使えば自動表示できます。
新着順に設定したクエリーループを固定ページへ追加すると、新しい記事を公開するたびに一覧が自動更新されます。手作業で記事リンクを追加する必要はありません。
数件だけ表示して「記事一覧を見る」リンクを付ければ、トップページの新着情報としても利用できます。
10-5. 記事一覧を画像なしで表示できますか
画像なしでも表示できます。
クエリーループ内のアイキャッチ画像ブロックを削除し、タイトル、日付、カテゴリーなど必要な情報だけを残してください。
更新情報やニュース一覧では、次のようなシンプルな構成が適しています。
2026年6月20日 記事タイトル
2026年6月15日 記事タイトル
2026年6月10日 記事タイトル
画像を使わないことで、ページを軽量化できる場合もあります。
10-6. 初心者にはどの作り方がおすすめですか
すべての記事を一般的なブログ形式で表示するだけなら、WordPress標準の投稿ページがおすすめです。
固定ページ内に説明文を入れたい場合や、特定カテゴリーだけをカード型で表示したい場合は、クエリーループブロックが適しています。
選び方の目安は次のとおりです。
簡単に全記事を表示したい：標準の投稿ページ
固定ページ内へ自由に配置したい：クエリーループ
高度なグリッドや絞り込みが必要：プラグイン
テーマ全体の一覧デザインを変えたい：アーカイブテンプレート
表示条件やHTMLを完全に制御したい：子テーマと
WP_Query
最初は標準機能で作り、不足している機能が明確になってからプラグインやコードを追加すると、管理しやすいサイトになります。
まとめ
WordPressの記事一覧ページは、標準の投稿ページを設定するだけでも簡単に作成できます。「固定ページを作成する」「表示設定で投稿ページに指定する」「メニューへ追加する」という手順で、公開済みの記事を自動的に一覧表示できます。
説明文やバナーを配置したい場合、カテゴリー別に記事を見せたい場合、カード型やグリッド型にしたい場合は、固定ページへクエリーループブロックを追加する方法が便利です。コードを使わずに、表示件数、並び順、画像、タイトル、抜粋、ページネーションなどを設定できます。
標準機能で不足する場合はプラグインを利用できますが、更新状況や互換性、表示速度を確認してから導入しましょう。より自由にカスタマイズしたい場合は、子テーマを用意し、WP_Queryで独自の記事一覧テンプレートを作成します。
どの方法を選ぶ場合でも、カテゴリーの整理、画像サイズの統一、スマートフォン表示、ページネーション、表示速度を確認することが重要です。読者が目的の記事をすぐに見つけられる、分かりやすいWordPressの記事一覧ページを目指しましょう。