プラグインを使わずにページネーションを実装する方法

プラグインを使わずにページネーションを実装する方法

WordPressでページネーションを実装する際、プラグンを使用している人もいると思いますが、今回はプラグインを使わずに実装してみたいと思います。

ページネーションを実装する

まず「functions.php」に下記を記述します。

functions.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) //1ページ以上ある時にページネーションを表示
     {
         echo "<div class='pagination'><ul>";
         if($paged > 1 && $showitems < $pages) echo "<li><a href='".get_pagenum_link($paged - 1)."'  class='prev'>&lsaquo;</a><li>";

         for ($i=1; $i <= $pages; $i++)
         {
             if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
             {
                 echo ($paged == $i)? "<li class='current'><span>".$i."</span></li>":"<li><a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a></li>";
             }
         }

         if ($paged < $pages && $showitems < $pages) echo "<li><a href='".get_pagenum_link($paged + 1)."' class='next'>&rsaquo;</a></li>";
         echo "</ul></div>\n";
     }
}

single.php

「single.php」のページネーションを表示させたい箇所に下記を記述し出力させます。

//ページネーションの出力
<?php
  if ( function_exists( "pagination" ) ) {
      pagination( $wp_query->max_num_pages );
  }
?>

出力されたページネーションのHTMLは下記のようになっていると思います。

HTML

<div class="pagenation">
	<ul>
		<li><a href="" class="prev">&lsaquo;</a></li>
		<li><a href="">1</a></li>
		<li><a href="">2</a></li>
		<li><span>3</span></li>
		<li><a href="">4</a></li>
		<li><a href="">5</a></li>
		<li><a href="" class="next">&rsaquo;</a></li>
	</ul>
</div>

因みに、当ブログのページネーションのスタイルは下記のように設定しています。

SCSS

 ul {
    display: table;
    margin: auto;

    li {
      display: inline-block;
      margin: 0 2px;

      span, a {
        display: block;
        padding: 5px 12px;
        background: #523D2F;
        color: #fff;
        border: 2px solid #523D2F;
      }
      a {
        background: #fff;
        color: #523D2F;

        &:hover {
          background: #523D2F;
          color: #fff;
        }
      }
      .next, .prev {
        color: #523D2F;
      }
    }
  }
}


以上、プラグインを使わずにページネーションを実装する方法でした。

Leave a Comment