SWELL│ページネーション機能を簡単に実装する方法

SWELLの投稿リストは便利ですが、記事が大量にある場合はページネーションをつけたいですよね。

そういった場合はコードを書いて自作するのですが、

実はSWELLにはページネーション用の関数があるので、それを使うと簡単にページネーションをつけたカスタマイズができます。

その備忘録です。

サンプル

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社

カスタマイズの依頼・相談

SWELLのページネーション機能の実装ポイント

ページネーションの実装のポイントを2点書いておきます。

paged の取得と適用

• get_query_var('paged') を使って、現在のページ番号を取得
• paged が取得できない場合は 1 をデフォルト値とする
• これにより、ページネーションをクリックした際に、適切なページが読み込まれます
• フロントページに設定した固定ページでは paged ではなく page を使います（WordPress公式リファレンス）。常に1ページ目になる場合はここを確認します

$paged = get_query_var( 'paged' ) ?: 1; // 現在のページ番号を取得

ページネーションの表示

• SWELL_Theme::get_parts( 'parts/post_list/item/pagination', [...] ) を使い、ページネーションを適用
• 'pages' => $query->max_num_pages：総ページ数を取得し、ページネーションに適用。
• 'paged' => $paged：現在のページ番号を適用し、正しいページリンクを生成。

SWELL_Theme::get_parts( 'parts/post_list/item/pagination', [
    'pages' => $query->max_num_pages, // 総ページ数
    'paged' => $paged, // 現在のページ
] );

SWELLでページネーション機能を簡単に実装する方法

冒頭に書いた人気記事のページネーションの実装コードを書いておきます。

実装は基本、functions.phpで完結します。

// 人気記事を取得する関数（ページネーション対応）
function get_popular_posts( $limit = 10, $paged = 1 ) {
    $meta_key = defined( 'SWELL_CT_KEY' ) ? SWELL_CT_KEY : 'swell_pv_ct';

    $args = array(
        'posts_per_page'      => $limit,
        'paged'               => $paged, // ページネーション用の現在のページ番号
        'meta_key'            => $meta_key,
        'orderby'             => 'meta_value_num',
        'order'               => 'DESC',
        'post_status'         => 'publish',
        'ignore_sticky_posts' => 1,
        'meta_query'          => array(
            array(
                'key'     => $meta_key,
                'value'   => 0,
                'compare' => '>',
                'type'    => 'NUMERIC'
            ),
        ),
    );

    return new WP_Query( $args );
}

SWELLのPVはSWELL_CT_KEYから取得します。この定数が使えない環境では swell_pv_ct を使うようにしてありますが、保存先のキーが違うと一覧が空になります。何も表示されないときは、実際に投稿へ保存されているキー名を先に確認してください。

続いて記事一覧のコードです。

次のサンプルコードを参考にすれば、いろいろページネーションの実装が応用できます。

確認した環境と範囲: 掲載コードの記述内容と、冒頭のサンプルページでの表示を確認しました（WordPress 7.1 / SWELL 2.19 時点）。未確認の点: 導入先での総ページ数の計算、キャッシュ製品との組み合わせ、記事数が多い場合の処理時間は検証していません。元に戻すときは、追加した関数とテンプレートの呼び出しを外します。

カテゴリーやタグも含めたランキングにする場合はカテゴリーページも含めた人気記事ランキングの作り方、ページ送りの代わりにボタンで読み足す場合は「もっと見る」ボタン付き無限スクロール、他のカスタマイズはSWELLカスタマイズまとめにあります。