2020/05/10 22:22

Wordpressに自作のページネーション（ページャー）を簡単に実装

WordPressを使ってるとブログ記事がどんどん溜まってくので、いずれはページネーション（ページ送りボタン）が必要になってきますよね。

しかも投稿記事のシングルページ内の「次の記事へ」というものと、一覧での「次ページへ」みたいなものの2種類必要です。

今回は自作でテーマ作成している方向けにそのページャー2種をご紹介します。

一覧用の記述例

では最初に「投稿記事一覧」を表示させる場合のページネーション実装方法です。

参考画像としてこんな感じ。

まずは「functions.php」へ下記を追加しておきましょう。

【functions.php】


<?php
function pagination($pages = '', $range = 2){
  $showitems = ($range * 2)+1;
  global $paged;
  if(empty($paged)) $paged = 1;
  if($pages == '') {
    global $wp_query;
    $pages = $wp_query->max_num_pages;
    if(!$pages) {
      $pages = 1;
    }
  }
 
  if(1 != $pages) {
    echo "<div class=\"c-pagination\"><span>Page ".$paged."/".$pages."</span>";
    if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo;</a>";
    if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo;</a>";
    for ($i=1; $i <= $pages; $i++) {
      if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )) {
        echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
      }
    }
 
    if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">&rsaquo;</a>";
    if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>&raquo;</a>";
    echo "</div>\n";
  }
}
?>

上記functions.phpに記述したら、今度は記事の一覧ページへ下記を。

記事の一覧を表示させるページになるので下記の例ではループで6件を出力し、残りはページ送りで、という形になってます。

【記事一覧画面】


<?php $paged = get_query_var('paged') ? get_query_var('paged') : 1 ; ?>
<?php
  $args = array(
    'post_type' => 'post',
    'order' => 'DESC',
    'showposts'   => 6, //6件表示させて続きはページ送りさせる場合
    'paged' => $paged
  );
?>
 
<?php $posts = new WP_Query($args); ?>
<?php if ($posts -> have_posts()) : ?>
  <?php while($posts -> have_posts()) : $posts -> the_post(); ?>
    【ここはループ内の内容】
  <?php endwhile; ?>
  <?php $max_num_pages = $posts->max_num_pages; ?>
  <?php if (function_exists('pagination')) { pagination($max_num_pages); } ;?>
<?php endif; wp_reset_postdata(); ?>

【style例】


<style>
  .c-pagination {
    width: 100%;
    text-align: center;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 0;
    margin: 40px auto;
  }
  .c-pagination span, .c-pagination a {
    display: block;
    font-size: 1.4rem;
    letter-spacing: 1px;
    line-height: 1.1;
    margin: 0 1.4px;
    padding: 5px 10px;
    text-decoration: none;
    width: auto;
    color: #fff;
    background: #444;
  }
  .c-pagination a:hover {
    color: #fff;
    background: #ccc;
  }
  .c-pagination .current {
    font-size: 1.4rem;
    background: #000;
    color: #fff;
  }
</style>

あくまで一例なのでスタイル等は自由に変更してください。

個別記事用の記述例

続いて投稿記事の個別ページ（シングルページ）内で「次の記事」「前の記事」のページ送りを実装する場合の記述例です。

【single.php】


<?php
  $current_post = get_post();
  if( !empty( $current_post ) ) {
    $current_url = get_permalink( $current_post->ID );
  }
  $prev_post = get_previous_post();
  if( !empty( $prev_post ) ) {
    $prev_url = get_permalink( $prev_post->ID );
    $prev_title = apply_filters( 'the_title', $prev_post->post_title );
  }
  $next_post = get_next_post();
  if( !empty( $next_post ) ) {
    $next_url = get_permalink( $next_post->ID );
    $next_title = apply_filters( 'the_title', $next_post->post_title );
  }
?>
 
<?php if(empty( $prev_post)):?>
  【記事が存在しないときの処理】
<?php else:?>
  <div>
    <a href="<?php echo $prev_url;?>">
      <?php echo $prev_title;?>
    </a>
  </div>
<?php endif;?>
<?php if(empty( $next_post)):?>
  【記事が存在しないときの処理】
<?php else:?>
  <div>
    <a href="<?php echo $next_url;?>">
      <?php echo $next_title;?>
    </a>
  </div>
<?php endif;?>