SWELLの人気記事一覧にページ送りを付ける方法｜固定ページ用ショートコード例

2025.03.022026.10.31

SWELLのPVを使った人気記事一覧にページ送りを付ける例です。

通常のアーカイブ用ページ送りと、固定ページの本文内に置く独自一覧を分けて考えます。

以下のショートコード例は、通常の固定ページまたは固定フロントページに、1ページにつき一覧1つを置く構成です。

SWELLのページ送りパーツが使うURL

SWELL 2.19.0にはparts/post_list/item/pagination.phpがあり、pagesとpagedを渡すとページ番号を出力します。

ただし、リンク先は内部でget_pagenum_link()から作ります。

独自一覧の総ページ数を渡すだけで、固定ページのURLやWordPress本体のページ分割と独立するわけではありません。

SWELL_Theme::get_parts( 'parts/post_list/item/pagination', array(
    'pages' => $query->max_num_pages,
    'paged' => $paged,
) );

この呼び出し例は、対象クエリのページ番号とURLが対応するテンプレートで使うためのものです。

pagedと固定フロントページのpageの違いはWordPress公式リファレンスも参照してください。

本文内の一覧では下記の専用パラメーターを使い、通常のページ分割を変更しません。

固定ページ内の人気記事一覧を作る

子テーマのfunctions.phpの既存PHP領域、またはPHPスニペット管理方法のどちらか一方へ追加します。

旧稿のget_popular_postsとpopular_posts_inline_shortcode、および対応するショートコード登録がある場合は、本記事由来の処理だけを取り外して置き換えます。

開始タグを重ねず、変更前のコードを保存してください。

function waza_popular_inline_shortcode( $atts ) {
    if ( ! is_page() ) return '';
    $atts = shortcode_atts( array( 'limit' => 5 ), $atts, 'popular_posts_inline' );
    $limit = max( 1, min( 20, absint( $atts['limit'] ) ) );
    $raw = $_GET['waza_popular_page'] ?? '1';
    $paged = is_string( $raw ) && ctype_digit( $raw )
        ? max( 1, min( 1000, (int) $raw ) ) : 1;
    $meta_key = defined( 'SWELL_CT_KEY' ) ? SWELL_CT_KEY : 'swell_pv_ct';
    $args = array(
        'post_type'           => 'post',
        'post_status'         => 'publish',
        'has_password'        => false,
        'posts_per_page'      => $limit,
        'paged'               => $paged,
        'ignore_sticky_posts' => true,
        'meta_key'            => $meta_key,
        'orderby'             => array( 'meta_value_num' => 'DESC', 'ID' => 'DESC' ),
        'meta_query'          => array( array(
            'key' => $meta_key, 'value' => 0, 'compare' => '>', 'type' => 'NUMERIC',
        ) ),
    );
    $query = new WP_Query( $args );
    $notice = '';
    if ( ! $query->have_posts() && $paged > 1 ) {
        $paged = 1;
        $args['paged'] = 1;
        $query = new WP_Query( $args );
        $notice = '<p>指定した一覧ページがないため、1ページ目を表示します。</p>';
    }
    if ( ! $query->have_posts() ) return '<p>表示できる人気記事がありません。</p>';
    $base_url = get_permalink( get_queried_object_id() );
    $base = str_replace( '987654321', '%#%', add_query_arg( 'waza_popular_page', 987654321, $base_url ) );
    $links = paginate_links( array(
        'base' => $base, 'format' => '',
        'current' => $paged, 'total' => min( 1000, (int) $query->max_num_pages ),
        'type' => 'list', 'prev_text' => '前へ', 'next_text' => '次へ',
        'add_args' => false,
    ) );
    $out = '<div class="waza-popular-list">' . $notice;
    $out .= '<ol start="' . ( ( $paged - 1 ) * $limit + 1 ) . '">';
    foreach ( $query->posts as $item ) {
        $out .= '<li><a href="' . esc_url( get_permalink( $item->ID ) ) . '">'
            . esc_html( get_the_title( $item->ID ) ) . '</a></li>';
    }
    $out .= '</ol>';
    if ( $links ) $out .= '<nav aria-label="人気記事一覧のページ送り">' . $links . '</nav>';
    return $out . '</div>';
}
add_shortcode( 'popular_posts_inline', 'waza_popular_inline_shortcode' );

固定ページのショートコードブロックへ次を入力します。

1ページの表示件数は1～20件、一覧のページ番号は1～1000の範囲へ制限しています。

1000ページを超える規模では、この例を拡張する前に検索や分類による絞り込み、集計方法を設計してください。

[popular_posts_inline limit="5"]

PVの保存キーはSWELL_CT_KEYを優先し、定数がない場合だけswell_pv_ctを使います。

PVが0以下、メタ値がない投稿、パスワード付き投稿は出ません。

何も出ない場合は実際の保存キーとPV設定を確認してください。

この値はサイト内の表示回数による並びで、アクセス解析の利用者数を示すものではありません。

PVが同じ場合は投稿IDの降順で並べます。

ページ移動中にPVが変われば順位も変わるため、固定スナップショットのランキングではありません。

本文一覧はURLのwaza_popular_pageを使い、同じページに複数設置すると番号を共有してしまうため、この例では1つに限定します。

追加CSSは一覧だけへ適用する

旧稿の広範囲な.post_contentセレクターは削除し、次を追加CSSまたは子テーマのstyle.cssへ保存します。

テーマのランキングウィジェット全体は変更しません。

.waza-popular-list > ol { padding-left: 2em; }
.waza-popular-list > ol > li { padding: .5em 0; overflow-wrap: anywhere; }
.waza-popular-list .page-numbers {
    display: flex; flex-wrap: wrap; gap: .5em;
    list-style: none; padding: 0;
}
.waza-popular-list .page-numbers a,
.waza-popular-list .page-numbers span { display: block; padding: .5em .75em; }
.waza-popular-list a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }