この記事にはプロモーションが含まれています。

【WordPress】自作ページネーション｜「最初へ」「最後へ」ボタンあり

2025-02-192025-02-24

この記事ではWordPressで

「最初へ」「最後へ」ボタン付きのページネーションを自作する方法

をご紹介します。

ケケンタ

実案件でも「最初へ」「最後へ」ボタン付きのページネーションが必要になる場面はあるかと思います。そうしたときのお役に立てば何よりです！

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら

連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

Laravelの教科書バージョン10対応【Laravel11サポートガイドあり】

created by Rinker

WordPressで「最初へ」「最後へ」ボタン付きのページネーションを自作する

以下のコードをページネーションを表示させたい場所に記述します。

<?php
global $wp_query;
$big = 999999; // 非常に大きい数値を設定
$max_page_num = $wp_query->max_num_pages;

$pagination_args = array(
    'base'      => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
    'format'    => '?paged=%#%',
    'current'   => max(1, get_query_var('paged')),
    'total'     => $max_page_num,
    'mid_size'  => 2,  // 任意の数値
    'end_size'  => 1,  // 任意の数値
);

$pagination = paginate_links($pagination_args);

// 現在のページ番号
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
if ($pagination) {
    // 「最初へ」ボタン ………… １ページ目以外で表示
    if ($paged != 1) {
        echo '<a href="' . get_pagenum_link(1) . '" class="first">< 最初へ</a>';
    }

    echo '<nav>' . $pagination . '</nav>';

    // 「最後へ」ボタン ………… 最後のページ以外で表示
    if ($paged != $max_page_num) {
        echo '<a href="' . get_pagenum_link($max_page_num) . '" class="last">最後へ ></a>';
    }
}
?>

ハイライト行が実際にページネーションを出力するためのソースコードです。

現在のページが「最初のページ」もしくは「最後のページ」以外のときにのみ、「最初へ」「最後へ」ボタンを表示するよう制御しています。

補足｜各オプションの説明

ページネーションを作成するときにオプションを設定しています。具体的には下記の箇所です。

$pagination_args = array(
    'base'      => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
    'current'   => max(1, get_query_var('paged')),
    'total'     => $max_page_num,
    'mid_size'  => 2,  // 任意の数値
    'end_size'  => 1,  // 任意の数値
);

ケケンタ

各オプションの意味についてご説明します！

base

「URL構造」を設定しています。

処理の流れは以下のとおりです。