2016WordPressWordPressでナビゲーション(ページ送り)を実装する際によく利用されるプラグイン「WP-PageNavi」のタグやclass名を任意のものに変更する方法です。デフォルトでは全体を括っているタグに.wp-pagenaviというclassが指定されたdivが使用されていますが、それらを任意のものへそれぞれ変更したり、その他にもページ数表示やカレント表示といった部分のclassを変更するというものです。検証した内容になります。Plugins」で確認してください。class='wp-pagenavi'>を別のタグ・class名に変更したり、前後にページ移動する要素に指定されているpreviouspostslinkやnextpostslinkというclassを変更する方法を紹介していきます。各要素のclass名を変更する前後ページへの移動部分・カレント表示・ページ数表示など、各要素に指定されているclassを任意のclassに変更する方法で、これらの要素についてはそれぞれ下記のようにフィルターが用意されているので、そちらを利用することで任意のclass名に変更できます。class='current'>5</span>のように出力されているカレント表示部分のclassを変更したい場合は、wp_pagenavi_class_currentを用いてfunctions.phpへ下記のように記述します。'is-current';}上記を記述後に表示を確認すると、カレント表示のclassがclass='current'からclass='is-current'に変更されているのを確認できます。wp_pagenavi_class_nextpostslinkをそれぞれ用いてfunctions.phpへ下記のように記述します。'next';}上記を記述後に表示を確認すると、前ページへのリンク表示のclassがclass="previouspostslink"からclass="prev"に、次ページへのリンク表示のclassがclass="nextpostslink"からclass="next"にそれぞれ変更されているのを確認できます。例:まとめてclass変更を指定する上でカレント表示と前後ページ表示のclassを変更する方法をそれぞれ紹介しましたが、同じように他の要素もすべてclass名を変更したいという場合など、もう少しまとめて指定をしたいという時は下記のように記述することでひとつのコールバック指定で変更することができます。下記は例としてカレント表示と前後ページ表示のclassを変更するものをまとめて指定してみたもので、同じくfunctions.phpへ記述します。$class_name;}このclass変更方法については、プラグイン配布ページのInstallationで紹介されているものになります。全体を括っているタグ・classを変更するサンプルとしてあげたデフォルトコードにあるように、デフォルトではナビゲーション全体がdiv要素で括られており、そこにclass名としてclass="wp-pagenavi"が指定されていますが、それを任意のタグやclass名に変更する方法です。?>のように記述しますが、こちらを少し違う形にして呼び出します。使用したい箇所へ下記のように記述し、それぞれハイライト表示しているwrapper_tagにはdivの代わりに使用したいタグ、wrapper_classにはclass="wp-pagenavi"の代わりに指定したいclass名を記述します。</nav>に変更されているのを確認できます。注意点としてはこれを行うことでデフォルトで用意されているCSSが効かなくなってしまうので、プラグインで用意されているスタイルを使用していたのであればclass名などを変更したり、別途タグ・class変更後のスタイルとしてテーマ内のCSSに追記したりする必要があります。?>が使えなくなるということではなく、タグ・classがデフォルトなだけでそのまま使用できるので、例えばテンプレートによってはデフォルトのままで良いのであれば通常通り使用すればデフォルトのものが表示されます。方法2:functions.phpを使う基本的には「方法1:テンプレートで呼び出し時に指定」と同じですが、以下はfunctions.phpを使って実装するのもので、場合によってはこちらの方が便利だと思います。functions.phpへ下記を記述し、先ほどと同様でそれぞれハイライト表示しているwrapper_tagにはdivの代わりに使用したいタグ、wrapper_classにはclass="wp-pagenavi"の代わりに指定したいclass名を記述します。?>の代わりに下記のように記述して表示を確認すれば、それぞれ変更されているのを確認できます。?>こちらもデフォルトをそのまま利用することができますし、テンプレート毎に違うものを表示させている時などの管理も直接テンプレートで指定した場合よりは多少楽になると思います。注意点としてはCSSを別途調整する必要があります。方法3:出力されるタグなどを置換する個人的には全体を括っているタグ・classを変更する程度であればこの方法はあまり利用しませんが、例えば何らかの理由でさらにタグを入れ子にしたい時などは、下記のようにstr_replaceを用いて出力する内容を置換していくなどして実装できます。?>を記述し、次にfunctions.phpへ下記のように記述します。</nav>に変更され、さらに内側にclass="pagination-inner"というclassが指定されたdiv要素が追加されているのを確認できます。先述したように全体を括っているタグ・classを変更するだけであれば上で紹介した方法のが手っ取り早いですが、このようにさらにタグを入れ子で追加したい時などは使えると思います。全体的に出力されるタグを変更する「WP-PageNavi」はデフォルトでは各要素がspanやa要素で構成されていますが、コーダーやフレームワークによってはこういったページネーションをulやli要素を用いている場合もあります。全体を括っているタグ・classを変更する」で紹介した方法を利用することで、全体的に出力されるタグを変更することができます。?>を記述し、次にfunctions.phpへ下記のように記述します。今回は先ほど例にも出したように、ulとli要素で括られるような形にしていきます。class="pagination"><ul>'.$out.'</ul></nav>';}記述後に表示を確認すると、サンプルとしてあげたデフォルトコードが下記のような形で出力されるのを確認でき、ナビゲーション内がul要素で括られて、さらにspanやaといった各要素もli要素に括られているのを確認できます。</nav>に変更されています。</ul></nav>こちらの方法は下記で紹介されていたものになります。WP-Pagenavi目次へ以上、WordPressで簡単にナビゲーションを実装できるプラグインとして有名な「WP-PageNavi」で、タグやclassを任意のものに変更する方法でした。プラグインがデフォルトで出力しているタグやclass名があからさまに変だということはないですが、それに併せてCSSを調整するのが面倒だという時や新たにタグを入れ子で追加したいといった時はこれらの方法を利用することでいろいろ自分好みに変更できると思います。