• HOME
  • Wordpress
  • Wordpressに自作のページネーション(ページャー)を簡単に実装

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;?>

 

もちろんマークアップ、スタイルは別途適宜追加してください。

 

 

まとめ

 

まとめると今回紹介したのは2種類のページネーションとなります。

 

・一覧用のページャー

ページ送りで2ページ目、3ページ目…と一覧表示をページングする為のもの。

 

・個別記事用のページャー

個別記事の最後に「次の記事」「前の記事」と1つずつ書かれているもの。

 

 

以上が一覧用のページ送りと、記事個別ページ用のページ送りの記述例となります。

ページネーションがついていると離脱率にも影響が出ますね。

やはり次の記事を読んでもらえる確率が上がりますので、付けておいて損はないかと思います。

参考になれば幸いです。

 

 

では現場から以上です!

 

1919