【SWELL】固定ページに特定カテゴリの記事一覧を実装する方法(ページネーション対応)

SWELL

WordPressテーマ「SWELL」を使っていると、固定ページに新着記事などを表示したい場面がよくあります。

もちろん、SWELLには「投稿リストブロック」が標準搭載されています。
しかし、

  • 「2ページ目、3ページ目と続く『ページネーション』を表示したい」
  • 「ブロックの自由度を超えた、独自のHTML構造で一覧を作りたい」
  • 「クライアントが編集画面で誤って消さないよう、テンプレート化したい」

といった実務的なニーズには、PHPでのカスタマイズが最適です。
今回は、固定ページを“器”として使い、特定カテゴリの記事一覧をページネーション付きで埋め込む具体的な実装例を解説します。

目次
  • 特設ページやLP
    下部に「関連ニュース」を10件以上並べ、ページ送りも付けたい。
  • カテゴリ別の専用アーカイブ
    標準のカテゴリページではなく、ヘッダーに大きな画像を入れたデザイン重視のページを「記事一覧」にしたい。
  • 企業サイト
    「会社情報ページ」の下に、その部署のブログ更新情報を自動で並べたい。

ポイントはシンプルです。

  • 固定ページ本文: 管理画面から入力するテキストや画像を表示。
  • 記事一覧部分: PHP(WP_Query)で特定の投稿を呼び出して表示。

これにより、「上の説明文は管理画面からいつでも変えられるが、下の記事一覧はシステムで自動更新される」という理想的な運用が可能になります。

全ページに影響が出ないよう、特定のページにだけ適用できる「カスタムテンプレート」方式で行います。

STEP
子テーマにPHPファイルを作成

子テーマのディレクトリに、新しいファイルを作成します。 例:page-news-list.php(名前は任意ですが、page-から始めると分かりやすいです)

STEP
以下のコードを記述

SWELLのパーツ(get_parts)を流用することで、デザインを崩さずに実装できます。

<?php
/**
 * Template Name: ニュース一覧付き固定ページ
 * Description: 固定ページ本文の下に特定カテゴリの記事一覧を表示します。
 */

if ( ! defined( 'ABSPATH' ) ) exit;

get_header();

// ループ開始
while ( have_posts() ) : the_post();
    $the_id = get_the_ID();
    $show_pr_notation = SWELL_Theme::get_pr_notation_size( $the_id, 'show_pr_notation_page' );
?>

<main id="main_content" class="l-mainContent l-article">
    <div class="l-mainContent__inner">

        <?php SWELL_Theme::get_parts( 'parts/page_head' ); ?>

        <?php if ( $show_pr_notation ) : ?>
            <?php SWELL_Theme::pluggable_parts( 'pr_notation' ); ?>
        <?php endif; ?>

        <div class="<?= esc_attr( apply_filters( 'swell_post_content_class', 'post_content' ) ) ?>">
            <?php the_content(); ?>
        </div>

        <div class="p-categoryContent u-mt-60">
            <h2 class="c-secTitle">新着記事一覧</h2>
            <?php
                $paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
                $args = [
                    'paged'               => $paged,
                    'post_type'           => 'post',      // 投稿タイプ
                    'category_name'       => 'news',      // ★表示したいカテゴリースラッグを指定
                    'posts_per_page'      => 10,          // 1ページあたりの表示件数
                    'ignore_sticky_posts' => 1,           // 「先頭に固定」を無視するかどうか
                    'orderby'             => 'date',
                    'order'               => 'DESC',
                ];

                $the_query = new WP_Query( $args );

                // SWELL標準のサブループ用パーツを呼び出し
                SWELL_Theme::get_parts( 'parts/post_list/loop_sub', [
                    'query'     => $the_query,
                    'list_args' => [ 'show_pv' => false ], // PV表示などのオプション
                ]);

                // ページネーションの表示
                SWELL_Theme::get_parts( 'parts/post_list/item/pagination', [
                    'pages' => $the_query->max_num_pages,
                    'paged' => $paged,
                ]);

                wp_reset_postdata(); // クエリのリセットを忘れずに
            ?>
        </div>

        <?php SWELL_Theme::output_content_widget( 'page', 'bottom' ); ?>
    </div>
</main>

<?php
endwhile;
get_footer();
  • category_name
    ここをニュースなら news、イベントなら event など、管理画面で設定した「スラッグ」に書き換えてください。
  • カスタム投稿を表示したい場合
    'post_type' => 'post' の部分を、作成したカスタム投稿名(例:worksなど)に変更すればOKです。
  • 余白の調整
    u-mt-60 はSWELLの共通クラス(上マージン60px)です。デザインに合わせて数字を調整してください。
  • テンプレートが出てこない
    ファイル冒頭の Template Name が正しく書かれているか確認してください。また、保存後にWordPress管理画面の「固定ページ編集」>「ページ属性」>「テンプレート」から、作成した名前を選択する必要があります。
  • 表示が崩れる
    SWELLのアップデートにより、get_parts で呼び出すパスが変わることが稀にあります。もし表示されない場合は、親テーマ内の /parts/post_list/ フォルダを確認してみまてください。
  • 404エラーになる
    テンプレートを適用した直後は、一度 「設定」>「パーマリンク」 を開き、何も変更せずに「変更を保存」ボタンを押してください。これでシステム内のパスが更新され、正しく表示されるようになります。

「固定ページ × 特定カテゴリ一覧」の実装は、Web制作の実務においてリクエストの多いカスタマイズです。

SWELLの標準機能を使用しつつ、今回のようなPHPカスタマイズを組み合わせることで、「運用しやすく、かつ自由度の高いサイト」を構築できます。ぜひ試してみてください。

目次