WordPressでプラグインを使わずにページネーションを設置する方法

2013年4月17日

プラグイン「WP-PageNavi 」を使わずに、テンプレートタグ「paginate_links()」を使って同等の機能を作成できることを以下のサイトで知り、参考にさせていただき自分用に変更したもの。（と言っても、元の部分はほとんど変更なしというか変更は不要）

Yuriko.Net　｢WP-PageNavi を使わずにナビゲーション表示｣

「前へ」「次へ」の文字の変更、表示件数の指定、その前後に画像などを挿入できるようにパラメータを渡せるようにしたもの。

例：「前へ」「次へ」の文字の前に画像を挿入する場合、以下を表示するテンプレートに記述。

<?php 
$args = array(
'prev_text' => '<img src="'.get_template_directory_uri(). '/images/arrow_left_green.png"> 前へ', 
'next_text' => '次へ <img src="'.get_template_directory_uri(). '/images/arrow_green.png">',
);
pagenavi($args); ?>

以下を functions.php に記述。

function pagenavi($args = array()) {
  //デフォルト値
  $defaults = array(
    'class_name' => 'pagenavi',  //div 要素のクラス名
    'show_all' => false,    //全件表示するかどうか。
    'prev_next' =>  true,    //「前へ」「次へ」のリンクの有無
    'prev_text' => __('&laquo; Previous'),     //「前へ」のテキスト。
    'next_text' => __('Next &raquo;'),   //「次へ」のテキスト
    'end_size' => 1,  //最初のページと最終のページ部の表示件数（1以上）
    'mid_size' => 3,  //現在のページ部分（但し現在のページを含まない）の表示件数（0以上）
  );
  $args = wp_parse_args( $args, $defaults );    //パラメータを解析し、省略されたパレメータにはデフォルト値をセット
  extract( $args, EXTR_SKIP );    //キーを変数名、値を変数の値として処理  
  echo '<div class="' .$class_name. '">'; 
  global $wp_rewrite;
  $paginate_base = get_pagenum_link(1);
  if (strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()) {
    $paginate_format = '';
    $paginate_base = esc_url(add_query_arg('paged', '%#%'));
  } else {
    $paginate_format = (substr($paginate_base, -1 ,1) == '/' ? '' : '/') .
    user_trailingslashit('page/%#%/', 'paged');;
    $paginate_base .= '%_%';
  }
  global $paged;
  global $wp_query;
  echo paginate_links( array(
    'base' => $paginate_base,
    'format' => $paginate_format,
    'total' => $wp_query->max_num_pages,
    'current' => ($paged ? $paged : 1),
    'show_all' => $show_all,    
    'prev_next' =>  $prev_next,  
    'prev_text' => $prev_text ,  
    'next_text' => $next_text ,  
    'end_size' => $end_size,
    'mid_size' => $mid_size,
  )); 
  echo '</div>';  
}

マウスオーバー時に画像を変更するには、jQuery を使って以下のように行う。
arrow_left_green.png を arrow_left_whites.png に
arrow_green.png を arrow_white.png に入れ替える

jQuery(document).ready(function($) { 
$('.pagenavi a.prev, .pagenavi a.next').hover(
    function() {
      $(this).find('img').attr('src', function(index, currentSrc) {
        return currentSrc.replace(/green/, 'white');
      });
    },
    function() {
      $(this).find('img').attr('src', function(index, currentSrc) {
        return currentSrc.replace(/white/, 'green');
      });
  });
});

CSSは以下（参考にさせていただいたものとほぼ同じ。クラス名を変更しているのと若干の変更）

.pagenavi {
  color: #2583ad;
  margin: 1em auto;
  line-height:2em;
  text-align:center;
}

a.page-numbers, .pagenavi .current {
  color: #666666;
  padding: 2px .4em;
  border:solid 1px #ccc;
  text-decoration:none;
  font-size:smaller;
  background:white;
}

a.page-numbers:hover {
  color:white;
  background: #693;
}

.pagenavi .current {
  color: white;
  background:#693;
  border-color:#690;
  font-weight:bold;
}

.pagenavi .next, .pagenavi .prev {
  border:0 none;
  background:transparent;
  font-size:smaller;
}

Web Design Leaves

WordPressでプラグインを使わずにページネーションを設置する方法

参考サイト