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
へ下記のように記述します。
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
へ下記のように記述します。
// 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
へ記述します。
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名を記述します。
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
へ下記のように記述します。
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
要素で括られるような形にしていきます。
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を調整するのが面倒だという時や新たにタグを入れ子で追加したいといった時はこれらの方法を利用することでいろいろ自分好みに変更できると思います。