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

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 — WordPress Plugins」で確認してください。

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

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

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

  1. 各要素のclass名を変更する
  2. 全体を括っているタグ・classを変更する
  3. 全体的に出力されるタグを変更する

1. 各要素の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

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

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

functions.php.php

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

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

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

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

functions.php.php

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

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

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

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

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

functions.php.php

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' );

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;
}

このclass変更方法については、プラグイン配布ページのInstallationで紹介されているものになります。

目次へ

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

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

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

通常「WP-PageNavi」を使用する際は表示させたい箇所に<?php wp_pagenavi(); ?>のように記述しますが、こちらを少し違う形にして呼び出します。
使用したい箇所へ下記のように記述し、それぞれハイライト表示しているwrapper_tagにはdivの代わりに使用したいタグ、wrapper_classには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を使う

基本的には「方法1:テンプレートで呼び出し時に指定」と同じですが、以下はfunctions.phpを使って実装するのもので、場合によってはこちらの方が便利だと思います。
まず、functions.phpへ下記を記述し、先ほどと同様でそれぞれハイライト表示しているwrapper_tagにはdivの代わりに使用したいタグ、wrapper_classにはclass="wp-pagenavi"の代わりに指定したいclass名を記述します。

functions.php.php

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

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

<?php custom_wp_pagenavi(); ?>

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

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

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

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

functions.php.php

add_filter( 'wp_pagenavi', 'custom_wp_pagenavi' );
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>';
}

記述後に表示を確認すると、<div class='wp-pagenavi'> ... </div>となっていたものが<nav class="pagination"> ... </nav>に変更され、さらに内側にclass="pagination-inner"というclassが指定されたdiv要素が追加されているのを確認できます。
先述したように全体を括っているタグ・classを変更するだけであれば上で紹介した方法のが手っ取り早いですが、このようにさらにタグを入れ子で追加したい時などは使えると思います。

目次へ

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

「WP-PageNavi」はデフォルトでは各要素がspana要素で構成されていますが、コーダーやフレームワークによってはこういったページネーションをulli要素を用いている場合もあります。
マークアップやCSSを調整すればいい話ではありますが、それが面倒だという場合は「方法3:出力されるタグなどを置換する - 2. 全体を括っているタグ・classを変更する」で紹介した方法を利用することで、全体的に出力されるタグを変更することができます。

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

functions.php.php

add_filter( 'wp_pagenavi', 'custom_wp_pagenavi' );
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 '<div class="pagination"><ul>'.$out.'</ul></div>';
}

記述後に表示を確認すると、サンプルとしてあげたデフォルトコードが下記のような形で出力されるのを確認でき、ナビゲーション内がul要素で括られて、さらにspanaといった各要素も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>

こちらの方法は下記で紹介されていたものになります。

目次へ


以上、WordPressで簡単にナビゲーションを実装できるプラグインとして有名な「WP-PageNavi」で、タグやclassを任意のものに変更する方法でした。
プラグインがデフォルトで出力しているタグやclass名があからさまに変だということはないですが、それに併せてCSSを調整するのが面倒だという時や新たにタグを入れ子で追加したいといった時はこれらの方法を利用することでいろいろ自分好みに変更できると思います。

Close the search window,
please press close button or esc key.