ODDBRAIN.JP | The splash Ideas

プラグインなしでページネーションをする時の問題と解決

ページネーションをとりあえず置きたい時、どっかからコードをお借りして貼り付けるのが定石かと思いますが、それをやった時2ページ目以降が1ページ目と同じ表示になる問題が発生しました。

プラグインに切り替えて表示させてみましたが、どうもループの書き方の問題のようでした。

CSSはメモし忘れたのですが、どこかからお借りしたものの残りだったかと思います。
phpのコードはここからお借りしました。

基本的なループが書きおわっている前提で見てください。

functions.php

function pagination($pages = '', $range = 4){
  $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=\"pagination\"><span>Page ".$paged." of ".$pages."</span>";
    if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>« First</a>";
    if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>‹ Previous</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)."\">Next ›</a>";
  if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last »</a>";
    echo "</div>\n";
  }
}

index.php

<?php if (function_exists("pagination")) {pagination($additional_loop->max_num_pages);} ?>

style.css

.pagination {
  padding: 20px 0;
  font-size: 1em;
  clear: both;
  line-height: 1em;
  overflow:hidden;
  position: relative;
  text-align: center;
}
.pagination-box {
  display: inline-block;
}
.pagination span, .pagination a {
  display: block;
  float: left;
  margin: 2px 2px 2px 0;
  padding: 10px 15px 10px 15px;
  text-decoration: none;
  width: auto;
  color: #fff; /* 文字色 */
  background: #47BEA0; /* 背景色 */
}
.pagination a:hover{
  color: #47BEA0; /* マウスホバー時の文字色 */
  background: #F9D635; /* マウスホバー時の背景色 */
}
.pagination .current{
  padding: 10px 15px 10px 15px;
  background: #F9D635; /* 現在のページの文字色 */
  color: #47BEA0; /* 現在のページの背景色 */
}
@media only screen and (max-width: 413px) {
  .pagination {
    font-size: 12px;
    line-height: 12px;
  }
  .pagination span, .pagination a {
    padding: 8px 10px 8px 10px;
  }
  .pagination .current{
    padding: 8px 10px 8px 10px;
  }
}

問題は、ループのクエリにページの番号がうまく伝わらない(?)といいますか、2ページ目であることをきちんと処理できていないのが原因なので、WP_Queryにそれを含めます。
この解決法はここから引っ張ってきました。
index.php

<?php
$paged = get_query_var('paged') ? get_query_var('paged') : 1 ;
$query = new WP_Query( array( 'paged' => $paged ) );
?>

色とか形とか丸パクリもいいところですけど、動いたのであとで修正します。このサイトはいろいろなサイトのコードをより合わせて動いておりますのでそのうち全体の調整を行ないます。
デザインはYahoo!の開発しているPureというCSSテンプレートを使っております。残念なことにここ数年開発が止まっているようなのですが…
CSSテンプレートで有名どころと言えばTwitterが公開しているBootstrapですが、あれ重たいって評判なので手を出すのが怖かったのですよね。機能満載なのは魅力的ですけど。