WordPressで固定ページにカテゴリー別記事一覧をグリッド表示する方法

WordPressでサイトを運営していると、「特定のカテゴリーだけの記事一覧を見やすく表示したい」「サムネイル画像付きでおしゃれなレイアウトを作りたい」といった要望が出てくることが多いですよね。
そんなときに役立つのが、ショートコードとカスタムCSSを組み合わせた方法です。今回は、プラグイン「Display Posts」を使いながら、固定ページでカテゴリー別の記事一覧をグリッド形式で表示する具体的な手順を解説します。

実現したいこと

固定ページ（トップページとして設定もできます）に以下の条件で記事一覧を表示します

特定のカテゴリーの記事を表示。
サムネイル画像付きの記事のみを対象に。
グリッド形式で整然とレイアウト。
カスタマイズ可能なデザインを追加。

これらを、「Display Posts」プラグインとカスタムCSSを使って実現しました。
※下記のような感じです。

手順まとめ

1. 「Display Posts」プラグインのインストール

まずは、ショートコードで記事一覧を簡単に呼び出せるプラグイン「Display Posts」をインストールします。

WordPress管理画面で「プラグイン」→「新規追加」をクリック。
検索バーに「Display Posts」と入力し、表示されたプラグインをインストールして有効化。

2. 固定ページにショートコードを挿入

次に、固定ページを作成し、以下のショートコードを挿入します

[display-posts category="表示したいカテゴリーのスラッグを記入" image_size="medium" wrapper="div" wrapper_class="display-posts-listing grid" meta_key="_thumbnail_id"]

このショートコードの説明

category="表示したいカテゴリーのスラッグを記入"：表示したいカテゴリー（スラッグ）を指定。
image_size="medium"：画像のサイズを指定（中サイズ）。
wrapper="div"：記事リスト全体を <div> タグで囲む。
wrapper_class="display-posts-listing grid"：グリッド形式のデザインを適用するためのクラス名。
meta_key="_thumbnail_id"：サムネイル画像が設定されている記事のみを対象。

3. 固定ページのカスタムCSSにスタイルを追加

固定ページの編集画面下部にある「カスタムCSS」欄に、以下のコードを記述します。
※全ページに同じ設定を使いたい場合は管理画面の「外観」→「カスタマイズ」→「追加CSS」に下記コードを記述。

.display-posts-listing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.display-posts-listing .listing-item {
    text-align: center;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
}

.display-posts-listing img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

.display-posts-listing a {
    font-size: 16px;
    font-weight: bold;
    color: #0073aa;
    text-decoration: none;
}

.display-posts-listing a:hover {
    color: #005177;
}

このCSSの機能

グリッドレイアウト：記事を横並びで表示し、レスポンシブ対応も可能に。
デザイン調整：サムネイル画像、タイトル、リンクのスタイルを設定。
見た目の統一感：枠線や余白を追加してデザインを洗練。

実現したレイアウトのイメージ

これらの設定を適用すると、以下のようなグリッド形式のカテゴリー別記事一覧が完成します。

サムネイル画像が均等に並び、きれいなレイアウト。
各記事にマウスオーバーした際のデザインも設定可能。
レスポンシブ対応でスマホでも整然と表示。

応用のポイント

複数のカテゴリーを同時に表示

複数のカテゴリーの記事をまとめて表示したい場合は、カテゴリーのスラッグをカンマ区切りで指定します。

例:

[display-posts category="python-programming,web-development" posts_per_page="6" image_size="medium"]

応用例:

「Python」と「Web開発」の投稿をまとめて一覧表示。
特定のテーマに関連した記事だけを集めた特集ページを作成。

特定のタグで絞り込む

カテゴリーではなく、タグで記事を絞り込みたい場合も便利です。

例:

[display-posts tag="beginner" posts_per_page="5" image_size="medium"]

応用例:

「初心者向け」タグのついた記事を集めてリスト化。
特定のトピックを深掘りした記事だけをまとめる。

表示順序をカスタマイズ

記事の並び順を「新しい順」以外に変更する場合、orderby パラメータを使用します。

オプション例:

公開日順（デフォルト）: orderby="date"
タイトル順: orderby="title"
ランダム順: orderby="rand"

例:

[display-posts category="python-programming" orderby="title" order="ASC" posts_per_page="10"]

応用例:

タイトル順でアルファベット順のリストを作成。
新しい記事が少ない場合はランダム表示で目新しさを演出。

抜粋付きで表

投稿の抜粋を一緒に表示したい場合は、include_excerpt="true" を追加します。

例:

[display-posts category="python-programming" include_excerpt="true" posts_per_page="5"]

応用例:

各記事の概要を表示して、読者が興味を持ちやすい一覧を作成。
ニュースページや特集ページでの利用。

5. サムネイル画像の設定

投稿にサムネイル画像を表示する場合、画像サイズを指定することでデザインを調整できます。

オプション例:

image_size="thumbnail": 小サイズ（サムネイル用）。
image_size="medium": 中サイズ。
image_size="large": 大サイズ。

例:

[display-posts category="web-design" image_size="large" posts_per_page="3"]

応用例:

サムネイル画像のサイズを調整して、ページ全体のデザインに統一感を出す。
ギャラリーのようなビジュアル重視のページを作成。

6. 投稿タイプを指定

post_type パラメータを使うと、通常の投稿（post）以外にも、固定ページ（page）やカスタム投稿タイプを指定できます。

例:

[display-posts post_type="page" posts_per_page="5"]

応用例:

固定ページの一覧を表示。
イベント情報や製品情報など、カスタム投稿タイプを活用した一覧を作成。

サムネイルがない投稿を除外

meta_key="_thumbnail_id" を使うことで、サムネイル画像が設定されている投稿だけを表示できます。

例:

[display-posts category="news" meta_key="_thumbnail_id"]

応用例:

画像付きの記事だけを表示して、ビジュアルに優れたページを作成。
サムネイル画像がない投稿は非表示にすることでデザインを統一。

表示件数を変更

posts_per_page パラメータで、一覧に表示する記事の件数を変更できます。

例:

[display-posts category="python-programming" posts_per_page="10"]

応用例:

ページの読み込み速度を考慮して適切な件数を設定。
記事数が多い場合はページネーションを併用。

特定の条件でカスタム表示

カスタムフィールドの値を条件に、特定の投稿を表示することも可能です。

例:

特定のカスタムフィールド（例: イベント日）を持つ投稿だけを表示。

[display-posts meta_key="event_date" orderby="meta_value"]

応用例:

カスタムフィールドを利用した高度な一覧表示。
イベントカレンダーや製品カタログページの作成。

これらの応用方法を活用することで、「Display Posts」プラグインの可能性を最大限に引き出し、柔軟で洗練された記事一覧の作成が可能です。ぜひ、自分のサイトに合った方法を試してみてください！

今回の学び

ショートコードとカスタムCSSを組み合わせることで、柔軟かつ美しい記事一覧を作成可能。
特定のページだけにCSSを適用する場合、固定ページの「カスタムCSS」欄が便利。
プラグインを活用することで、コーディングなしでも直感的に機能を拡張できる。

まとめ

WordPressの固定ページにカテゴリー別記事一覧を表示する方法は、非常に汎用性が高く、多くの場面で役立つスキルです。今回の方法を参考に、ぜひ自分のサイトでも実践してみてください！