WordPress

ページネーション(ページ送り)の設置【プラグイン不要】

更新日:2026-05-06 著者:unigram 読了目安:8分

ブラグインを使わずページネーションを追加する方法。
投稿(post)、カスタム投稿タイプでも動きます。また固定ページに作成した一覧ページでも動きます。

PHP(テンプレートに記載)

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

      $paginate_base = get_pagenum_link(1);
      if(strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()){
         $paginate_format = '';
         $paginate_base = add_query_arg('paged','%#%');
      }
      else{
         $paginate_format = (substr($paginate_base,-1,1) == '/' ? '' : '/') .
         user_trailingslashit('?paged=%#%','paged');;
         $paginate_base .= '%_%';
      }
      
      $pagination_args = array(
         'base'      => $paginate_base,
         'format'    => $paginate_format,
         'current'   => max(1, get_query_var('paged')),
         'total'     => $wp_query->max_num_pages,
         'current' => ($paged ? $paged : 1),
         'prev_text' => 'Prev',
         'next_text' => 'Next',

         'mid_size'  => 2,  // 任意の数値(現在のページ番号の両端にページ番号をいくつ表示させるか)
         'end_size'  => 1,  // 任意の数値(両端に何個のページ番号を表示するか)
      );

      $pagination = paginate_links($pagination_args);

      // 現在のページ番号
      $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
      if ($pagination) {
         // 「最初へ」ボタン ………… 1ページ目以外で表示
         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="?paged=' . $max_page_num . '" class="last">最後へ ></a>';
         }
      }
   ?>
</div>

function.phpに追記

//ページ送り追加設定
add_filter('redirect_canonical','my_disable_redirect_canonical');
function my_disable_redirect_canonical( $redirect_url ) {

    if ( is_archive() ){
        $subject = $redirect_url;
        $pattern = '/\/page\//'; // URLに「/page/」があるかチェック
        preg_match($pattern, $subject, $matches);

        if ($matches){
        //リクエストURLに「/page/」があれば、リダイレクトしない。
        $redirect_url = false;
        return $redirect_url;
        }
    }

}

吐き出されるHTMLは以下

<div class="pagination">
   <a href="" class="first">&lt; 最初へ</a>
   <nav>
      <a class="prev page-numbers" href="">Prev</a>
      <a class="page-numbers" href="">1</a>
      <span class="page-numbers dots">…</span>
      <a class="page-numbers" href="">3</a>
      <a class="page-numbers" href="">4</a>
      <span aria-current="page" class="page-numbers current">5</span>
      <a class="page-numbers" href="">6</a>
      <a class="page-numbers" href="">7</a>
      <span class="page-numbers dots">…</span>
      <a class="page-numbers" href="">19</a>
      <a class="next page-numbers" href="">Next</a>
   </nav>
   <a href="" class="last">最後へ &gt;</a>
</div>

ページネーション用のスタイルシートを参考までに記載します。
お好みで調整してください。ちょっと調整したもらった方が良いかも。

/*ページネーションのスタイル*/
.pagination{
   clear:both;
   text-align: center;
   font-size: 17px;
   line-height: 100%;
}
.pagination a,
.pagination span{
   position: relative;
   display: inline-block;
   text-align: center;
   vertical-align: middle;
   text-decoration: none;
   width: 30px;
   height: 30px;
   margin: 0 10px;
}
/*ページネーション番号*/
.pagination nav{
   display: inline-block;
   vertical-align: middle;
}
.pagination nav a,
.pagination nav span.current{
   margin-top: 0.95em;
   opacity: 1 !important;
   color: #aaa;
}
.pagination nav a::after,
.pagination nav span.current::after{
   content: '';
   width: 30px;
   height: 30px;
   border-radius: 16px;
   position: absolute;
   top: 0.5em;
   left: 50%;
   margin: -1em 0 0 -0.95em;
   z-index: -1;
   transition: 0.3s ease-in-out;
   background-color: #ddd;
   border: solid #ddd 1px;
}
.pagination nav span.dots{
   width: auto;
   margin: 0.5em 0 0 0;
   color: #aaa;
}
/*ホバー時*/
.pagination nav a:hover,
.pagination nav span.current:hover{
   color: #fff;
}
.pagination nav a:hover:after,
.pagination nav span.current:hover::after{
   background-color: #aaa;
   border: solid #aaa 1px;
}
/*現在のページ番号*/
.pagination nav span.current{
   font-weight: 700;
   color: #fff;
}
.pagination nav span.current::after{
   background-color: #333;
   border: solid #333 1px;
}
/*前へ、次へボタン*/
.pagination nav a.prev,
.pagination nav a.next{
   width: 30px;
   height: 30px;
   margin-top: 0;
   text-indent: -99999px;
   border-radius: 16px;
}
.pagination nav a.prev::after,
.pagination nav a.next::after{
   display: none;
}
.pagination nav a.prev{
   background: url(../../images/pagination_arrow_prev.png) center center no-repeat;
   background-size: auto 8px;
   background-color: #fff;
   border: solid #fff 1px;
}
.pagination nav a.next{
   background: url(../../images/pagination_arrow_next.png) center center no-repeat;
   background-size: auto 8px;
   background-color: #fff;
   border: solid #fff 1px;
}
.pagination nav a.prev:hover,
.pagination nav a.next:hover{
   opacity: 0.6 !important;
}
/*最初へ、最後へボタン*/
.pagination a.first,
.pagination a.last{
   display: inline-block;
   width: 30px;
   height: 30px;
   text-indent: -99999px;
   border-radius: 16px;
   margin: 0;
}
.pagination a.first{
   background: url(../../images/pagination_arrow_first.png) center center no-repeat;
   background-size: auto 8px;
   background-color: #fff;
   border: solid #fff 1px;
}
.pagination a.last{
   background: url(../../images/pagination_arrow_last.png) center center no-repeat;
   background-size: auto 8px;
   background-color: #fff;
   border: solid #fff 1px;
}
.pagination a.first:hover,
.pagination a.last:hover{
   opacity: 0.6 !important;
}

1ページに表示する件数は、wordpress管理画面 > 設定 > 表示設定から「1ページに表示する最大投稿数」を変更してください。

この記事を書いた人

unigram
web、印刷、映像などの制作をしています。@京都、フリーランス18年目。 大学で講師もしています。 自身の備忘録も兼ねて、Web制作・WordPress・SEO・GA4・生成AI活用をテーマに情報発信しています。わかりやすく優しい内容で記事作成を心がけています。