この記事ではWordPressで

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

をご紹介します。

ケケンタ

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

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

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構造」を設定しています。

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

• get_pagenum_link($big)で「https://ドメイン/page/$big（=999999）」というURLが生成
• esc_url()でURLにエスケープ処理を実行
• str_replace(～)により①の「$big（=999999）」部分が実際のページ番号へ置換される

実際に出力されるURLの例（３ページ目の場合）

https://ドメイン/page/3

一見すると不要なオプションのようにも思えますが、明示的にURL構造を指定することで、例えばデフォルト機能によって意図しないURLが生成されることを防ぐといったメリットが得られます。

current

「現在のページ番号」を設定しています。

このオプションを指定することで、ページネーション上における「現在のページ番号」が基準となり、前後のページネーションリンクが適切に生成されます。

また、「現在のページ番号」にはCSSのcurrentクラスが付与されるため、これを利用することで固有の装飾を設定することが可能です。

total

「ページ総数」を明示的に設定しています。

これにより、ページネーションが確実に正確に機能するようになります。

※totalを設定しないとページネーションが正しく表示されない可能性があるためご注意ください。

mid_size

「現在のページの前後に表示されるページ番号の数」を設定してします。

例えば、今回は「2」を指定しているため、（「現在のページが『６』だとすると」）ページネーションは

< 最初へ　1　…　4　5　[6]　7　8　…　13　最後へ>

のような表示になります。

end_size

「ページネーションの最初と最後に表示されるページ番号の数」を設定しています。

例えば、今回は「1」をしているため、（「現在のページが『６』だとすると」）ページネーションは

< 最初へ　1　…　4　5　[6]　7　8　…　13　最後へ>

のような表示になります。

ケケンタ

WordPressのページネーション作成関数のオプションには、ほかにも様々なものがあります。詳しくは下記公式ページをご覧ください！

■ 公式ページ：WordPress Developer Resources | paginate_links

まとめ

以上がWordPressで「最初へ」「最後へ」ボタン付きのページネーションを自作する方法でした。

WordPressでページネーションを作成するにはプラグインを使用する方法も有名かと思います。

しかし、実案件では、自作ページネーションでないと実現できないカスタマイズ内容に遭遇することもしばしば……。

ケケンタ

今回ご紹介したソースコードが、この記事をご覧になっている方の一助となったなら何よりです！

それでは、最後までご覧いただきありがとうございました。

当ブログではWordPressをはじめ、Web制作やPHPなどに関する情報を発信しています。

ご興味のある方はほかの記事もご覧いただけるとうれしいです！