WordPressでBootstrap3のpaginationを使う方法

目次

Bootstrap3のpaginationを使う方法

WordPressでBootstrapのページネーション機能 pagination を使う方法をご紹介します。

1. functions.phpにコードの追加

まずfunctions.phpに以下のコードを追加する。
8行目の$range = 2; //表示件数の指定
ここで表示件数を変更できます。
前後何ページ分表示するか指定できます。
あまり出すとスマホで崩れるので2ぐらいがベスト!?

function bootstrap_pagination(){
  global $wp_query;
  $paged = $wp_query->get( 'paged' );
  $posts_per_page = get_option('posts_per_page');
  if ( ( ! $paged || $paged < 2 ) && $wp_query->found_posts < $posts_per_page )
      return; 
   
  $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 '<ul class="pagination">';
    if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<li><a href='".get_pagenum_link(1)."'>«</a></li>";
    if($paged > 1 && $showitems < $pages) echo "<li><a href='".get_pagenum_link($paged - 1)."'>‹</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='active'><span class='current'>".$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)."'>›</a></li>";
    if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<li><a href='".get_pagenum_link($pages)."'>»</a></li>";
    echo "</ul>\n";
  }
}

2. コンテンツ側(single.php)で呼び出し

表示させたいコンテンツ側でbootstrap_pagination();を呼び出す。
以下はtext-centerでセンター表示にしてあります。

<div class="text-center">
<?php bootstrap_pagination(); ?>
</div>
  • URLをコピーしました!
目次