WordPress：ナビゲーションプラグイン「WP-PageNavi」のタグやclassを任意のものに変更する方法

WordPressでナビゲーション（ページ送り）を実装する際によく利用されるプラグイン「WP-PageNavi」のタグやclass名を任意のものに変更する方法です。

デフォルトでは全体を括っているタグに.wp-pagenaviというclassが指定されたdivが使用されていますが、それらを任意のものへそれぞれ変更したり、その他にもページ数表示やカレント表示といった部分のclassを変更するというものです。

紹介している内容は、WordPress Ver 4.6.1とWP-PageNavi Ver 2.91で検証した内容になります。
「WP-PageNavi」についての基本的なインストール・使用方法については割愛しているので、使用したことない場合などはプラグインの詳細も含め「WP-PageNavi」で確認してください。

デフォルトで出力されるタグ

下記は実際に「WP-PageNavi」をインストール・有効化した場合に出力されるHTMLで、このエントリーでは<div class='wp-pagenavi'>を別のタグ・class名に変更したり、前後にページ移動する要素に指定されている.previouspostslinkや.nextpostslinkというclassを変更する方法を紹介していきます。

<div class='wp-pagenavi'>
  <span class='pages'>5 / 10</span>
  <a class="first" href="#">« 先頭</a>
  <a class="previouspostslink" rel="prev" href="#">«</a>
  <span class='extend'>...</span>
  <a class="page smaller" href="#">3</a>
  <a class="page smaller" href="#">4</a>
  <span class='current'>5</span>
  <a class="page larger" href="#">6</a>
  <a class="page larger" href="#">7</a>
  <span class='extend'>...</span>
  <a class="larger page" href="#">10</a>
  <span class='extend'>...</span>
  <a class="nextpostslink" rel="next" href="#">»</a>
  <a class="last" href="#">最後 »</a>
</div>

各要素のclass名を変更する

前後ページへの移動部分・カレント表示・ページ数表示など、各要素に指定されているclassを任意のclassに変更する方法です。
これらの要素についてはそれぞれ下記のようにフィルターが用意されているので、そちらを利用することで任意のclass名に変更できます。

wp_pagenavi_class_pages
wp_pagenavi_class_first
wp_pagenavi_class_previouspostslink
wp_pagenavi_class_extend
wp_pagenavi_class_smaller
wp_pagenavi_class_page
wp_pagenavi_class_current
wp_pagenavi_class_larger
wp_pagenavi_class_nextpostslink
wp_pagenavi_class_last

例1：カレント表示のclassを変更する

サンプルとしてあげたデフォルトコードで<span class='current'>5</span>のように出力されているカレント表示部分のclassを変更したい場合は、wp_pagenavi_class_currentを用いてfunctions.phpへ下記のように記述します。

functions.php

function custom_wp_pagenavi_class_current( $class_name ) {
  return 'is-current';
}
add_filter( 'wp_pagenavi_class_current', 'custom_wp_pagenavi_class_current' );

上記を記述後に表示を確認すると、カレント表示のclassが.currentから.is-currentに変更されているのを確認できます。

例2：前後ページ表示のclassを変更する

サンプルとしてあげたデフォルトコードで<a class="previouspostslink" rel="prev" href="#">«</a>と<a class="nextpostslink" rel="next" href="#">»</a>のように出力されている前後ページへ移動するリンクのclassを変更したい場合は、wp_pagenavi_class_previouspostslinkとwp_pagenavi_class_nextpostslinkをそれぞれ用いてfunctions.phpへ下記のように記述します。

functions.php

// previouspostslink → prev
function custom_wp_pagenavi_class_previouspostslink( $class_name ) {
  return 'prev';
}
add_filter( 'wp_pagenavi_class_previouspostslink', 'custom_wp_pagenavi_class_previouspostslink' );

// nextpostslink → next
function custom_wp_pagenavi_class_nextpostslink( $class_name ) {
  return 'next';
}
add_filter( 'wp_pagenavi_class_nextpostslink', 'custom_wp_pagenavi_class_nextpostslink' );

上記を記述後に表示を確認すると、前ページへのリンク表示のclassが.previouspostslinkから.prevに、次ページへのリンク表示のclassが.nextpostslinkから.nextにそれぞれ変更されているのを確認できます。

例3：まとめてclass変更を指定する

上でカレント表示と前後ページ表示のclassを変更する方法をそれぞれ紹介しましたが、同じように他の要素もすべてclass名を変更したいという場合など、もう少しまとめて指定をしたいという時は下記のように記述することでひとつのコールバック指定で変更することができます。
下記は例としてカレント表示と前後ページ表示のclassを変更するものをまとめて指定してみたもので、同じくfunctions.phpへ記述します。

functions.php

function custom_wp_pagenavi_class( $class_name ) {
  switch( $class_name ) {
    case 'current':
      $class_name = 'is-current';
      break;
    case 'previouspostslink':
      $class_name = 'prev';
      break;
    case 'nextpostslink':
      $class_name = 'next';
      break;
  }
  return $class_name;
}

add_filter( 'wp_pagenavi_class_current', 'custom_wp_pagenavi_class' );
add_filter( 'wp_pagenavi_class_previouspostslink', 'custom_wp_pagenavi_class' );
add_filter( 'wp_pagenavi_class_nextpostslink', 'custom_wp_pagenavi_class' );

全体を括っているタグ・classを変更する

サンプルとしてあげたデフォルトコードにあるように、デフォルトではナビゲーション全体がdiv要素で括られており、そこにclass名として.wp-pagenaviが指定されていますが、それを任意のタグやclass名に変更する方法です。

方法1：テンプレートで呼び出し時に指定

通常「WP-PageNavi」を使用する際は表示させたい箇所に<?php wp_pagenavi(); ?>のように記述しますが、こちらを少し違う形にして呼び出します。
使用したい箇所へ下記のように記述し、wrapper_tagにはdivの代わりに使用したいタグ、wrapper_classには.wp-pagenaviの代わりに指定したいclass名を記述します。

<?php
  $custom_wp_pagenavi = array(
    'wrapper_tag' => 'nav',
    'wrapper_class' => 'pagination'
  );
  wp_pagenavi( $custom_wp_pagenavi );
?>

上記をそのまま記述後に表示を確認すると。<div class='wp-pagenavi'> ... </div>となっていたものが<nav class='pagination'> ... </nav>に変更されているのを確認できます。

注意点としてはこれを行うことでデフォルトで用意されているCSSが効かなくなってしまうので、プラグインで用意されているスタイルを使用していたのであればclass名などを変更したり、別途タグ・class変更後のスタイルとしてテーマ内のCSSに追記したりする必要があります。

ちなみに、これを行うことで通常の<?php wp_pagenavi(); ?>が使えなくなるということではなく、タグ・classがデフォルトなだけでそのまま使用できるので、例えばテンプレートによってはデフォルトのままで良いのであれば通常通り使用すればデフォルトのものが表示されます。

方法2：functions.phpを使う

こちらは上で行った内容をfunctions.phpを使って実装するのもので、場合によってはこちらの方が便利だと思います。
まず、functions.phpへ下記を記述し、先ほどと同様でwrapper_tagにはdivの代わりに使用したいタグ、wrapper_classには.wp-pagenaviの代わりに指定したいclass名を記述します。

functions.php

function custom_wp_pagenavi() {
  $args = array(
    'wrapper_tag' => 'nav',
    'wrapper_class' => 'pagination'
  );
  wp_pagenavi( $args );
}

上記記述後に表示させたい箇所へ<?php wp_pagenavi(); ?>の代わりに下記のように記述して表示を確認すれば、それぞれ変更されているのを確認できます。

<?php custom_wp_pagenavi(); ?>

// or

<?php if ( function_exists( 'custom_wp_pagenavi' ) ) { custom_wp_pagenavi(); } ?>

こちらもデフォルトをそのまま利用することができますし、テンプレート毎に違うものを表示させている時などの管理も直接テンプレートで指定した場合よりは多少楽になると思います。
また、同じく注意点としてはCSSを別途調整する必要があります。

方法3：出力されるタグなどを置換する

個人的には全体を括っているタグ・classを変更する程度であればこの方法はあまり利用しませんが、例えば何らかの理由でさらにタグを入れ子にしたい時などは、下記のようにstr_replace()を用いて出力する内容を置換していくなどして実装できます。
表示させたい部分への記述はデフォルトと同様に<?php wp_pagenavi(); ?>を記述し、次にfunctions.phpへ下記のように記述します。

functions.php

function custom_wp_pagenavi( $html ) {
  $out = '';
  $out = str_replace( "<div", "", $html );
  $out = str_replace( "class='wp-pagenavi'>", "", $out );
  $out = str_replace( "</div>", "", $out );

  return '<nav class="pagination"><div class="pagination-inner">' . $out . '</div></nav>';
}
add_filter( 'wp_pagenavi', 'custom_wp_pagenavi' );

記述後に表示を確認すると、<div class='wp-pagenavi'> ... </div>となっていたものが<nav class="pagination"> ... </nav>に変更され、さらに内側に.pagination-innerというclassが指定されたdiv要素が追加されているのを確認できます。

全体を括っているタグ・classを変更するだけであれば上で紹介した方法のが手っ取り早いですが、このようにさらにタグを入れ子で追加したい時などは使えると思います。

全体的に出力されるタグを変更する

「WP-PageNavi」はデフォルトでは各要素がspanやa要素で構成されていますが、コーダーやフレームワークによってはこういったページネーションをulやli要素を用いている場合もあります。
これは上でも紹介したstr_replace()を用いることで、全体的に出力されるタグを変更することができます。

表示させたい部分への記述はデフォルトと同様に<?php wp_pagenavi(); ?>を記述し、次にfunctions.phpへ下記のように記述します。
今回は先ほど例にも出したように、ulとli要素で括られるような形にしていきます。

functions.php

function custom_wp_pagenavi( $html ) {
  $out = '';
  $out = str_replace( "<div", "", $html );
  $out = str_replace( "class='wp-pagenavi'>", "", $out );
  $out = str_replace( "<a", "<li><a", $out );
  $out = str_replace( "</a>", "</a></li>", $out );
  $out = str_replace( "<span", "<li><span", $out );
  $out = str_replace( "</span>", "</span></li>", $out );
  $out = str_replace( "</div>", "", $out );

  return '<nav class="pagination"><ul>' . $out . '</ul></nav>';
}
add_filter( 'wp_pagenavi', 'custom_wp_pagenavi' );

記述後に表示を確認すると、サンプルとしてあげたデフォルトコードが下記のような形で出力されるのを確認でき、ナビゲーション内がul要素で括られて、さらにspanやaといった各要素もli要素に括られているのを確認できます。
また、全体を括っている<div class='wp-pagenavi'> ... </div>となっていたものも<nav class="pagination"> ... </nav>に変更されています。

<nav class="pagination">
  <ul>
    <li><span class='pages'>5 / 10</span></li>
    <li><a class="first" href="#">« 先頭</a></li>
    <li><a class="previouspostslink" rel="prev" href="#">«</a></li>
    <li><span class='extend'>...</span></li>
    <li><a class="page smaller" href="#">3</a></li>
    <li><a class="page smaller" href="#">4</a></li>
    <li><span class='current'>5</span></li>
    <li><a class="page larger" href="#">6</a></li>
    <li><a class="page larger" href="#">7</a></li>
    <li><span class='extend'>...</span></li>
    <li><a class="larger page" href="#">10</a></li>
    <li><span class='extend'>...</span></li>
    <li><a class="nextpostslink" rel="next" href="#">»</a></li>
    <li><a class="last" href="#">最後 »</a></li>
  </ul>
</nav>

プラグインがデフォルトで出力しているタグやclass名があからさまに変だということはないですが、それに併せてCSSを調整するのが面倒だという時や新たにタグを入れ子で追加したいといった時はこれらの方法を利用することでいろいろ自分好みに変更できると思います。