WordPressのページ送りを番号付(ページネーション)にする

こんちには、金田です。

秋なのにたまに暑い日がありますね。過ごしやすい日が続くといいのですが、もう少ししたら寒くなるのでしょうか？

さて本日はワードプレスのページ送りを番号付にカスタマイズする方法をご紹介します。

 

使用するテーマによりますが、ページ送りが「次のページ」「前のページ」のケースがあると思います、好みにもよりますが番号付のページ送りの方がガッツリ戻れたり、任意のページを選択出来たりと何かと便利ではないでしょうか？

 

ページャー(カスタマイズ前)

既存テーマのページ送りの例です。(テーマにより異なります。あくまで一例です。)
前へ・次へというバージョンです。これではちょっと使いづらいですね。

<div class="navigation">
  <div class="prev"><?php previous_posts_link(); ?></div>
  <div class="next"><?php next_posts_link(); ?></div>
</div>

 

ページネーションに変更する

番号付のページ送りの例です。
前へ・次へというリンクに加え、ページ番号のリンクがあるタイプに変更します。

現在使用しているテーマから、ページャーの記述部分を下記のコードに置換してください。
直接書く方法と、読み込む方法を例示します。

index.phpなどのループの外に直接書く場合

<?php 
  global $wp_query;
  $bignum = 999999999;
  if ( $wp_query->max_num_pages <= 1 )
    return;
  echo '<nav class="text-center">';
  echo paginate_links( array(
    'base'         => str_replace( $bignum, '%#%', esc_url( get_pagenum_link($bignum) ) ),
    'format'       => '',
    'current'      => max( 1, get_query_var('paged') ),
    'total'        => $wp_query->max_num_pages,
    'prev_text'    => '&larr;',
    'next_text'    => '&rarr;',
    'type'         => 'list',
    'end_size'     => 3,
    'mid_size'     => 3
  ) );
  echo '</nav>';
?>

オプションなど詳しくはWordPress日本語Codexのサイトを参照してください。

関数リファレンス/paginate

functions.phpから読み込む場合

index.phpなどのループの外

<?php example_page_navi(); ?>

functions.php

function example_page_navi() {
  global $wp_query;
  $bignum = 999999999;
  if ( $wp_query->max_num_pages <= 1 )
    return;
  echo '<nav class="text-center">';
  echo paginate_links( array(
    'base'         => str_replace( $bignum, '%#%', esc_url( get_pagenum_link($bignum) ) ),
    'format'       => '',
    'current'      => max( 1, get_query_var('paged') ),
    'total'        => $wp_query->max_num_pages,
    'prev_text'    => '&larr;',
    'next_text'    => '&rarr;',
    'type'         => 'list',
    'end_size'     => 3,
    'mid_size'     => 3
  ) );
  echo '</nav>';
} /* end page navi */

オプションなど詳しくはWordPress日本語Codexのサイトを参照してください。

関数リファレンス/paginate

 

出力されるHTML(現在位置が2ページ目の例)

<nav class="text-center"><ul class="page-numbers">
    <li><a href="http://127.0.0.1/wp/page/1/" class="prev page-numbers">←</a></li>
    <li><a href="http://127.0.0.1/wp/page/1/" class="page-numbers">1</a></li>
    <li><span class="page-numbers current">2</span></li>
    <li><a href="http://127.0.0.1/wp/page/3/" class="page-numbers">3</a></li>
    <li><a href="http://127.0.0.1/wp/page/3/" class="next page-numbers">→</a></li>
</ul>
</nav>

 

CSSでデザインを整えればOKです。下記はBootstrap3をベースにしたCSSのサンプルです。
よろしければベースとしてご利用ください。

.text-center{
  text-align: center;
}

ul.page-numbers {
    border-radius: 4px;
    display: inline-block;
    margin: 20px 0;
    padding-left: 0;
}
ul.page-numbers > li {
    display: inline;
}
ul.page-numbers > li > a ,
ul.page-numbers > li > span {
    background-color: #ffffff;
    border: 1px solid #dddddd;
    color: #428bca;
    float: left;
    line-height: 1.42857;
    margin-left: -1px;
    padding: 6px 12px;
    position: relative;
    text-decoration: none;
}
ul.page-numbers > li:first-child > a {
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    margin-left: 0;
}
ul.page-numbers > li:last-child > a {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}
ul.page-numbers > li > a:hover {
    background-color: #eeeeee;
    border-color: #dddddd;
    color: #2a6496;
}
ul.page-numbers .current{
    background-color: #428bca;
    border-color: #428bca;
    color: #ffffff;
    cursor: default;
    z-index: 2;
}

 

 

まとめ

•  「前へ」「次へ」に加え、「ページ番号」のリンクもあれば便利！
• 既存のテーマをページ番号付のリンクを出力するコードに置き換えれば実現可能

サイトによって、ベストは異なると思います。ユーザービリティーを高めるにはコツコツと改善することが必要だと考えます。