[WP]WP-PageNaviのページ送りをBootstrapのPaginationのようなデザイン変更する方法

WordPress

2015.07.30

WordPressのWP-PageNaviを使ったページ送りナビゲーションをBootstrapのPaginationのデザインに変更する方法のご紹介です。

WP-PageNaviのインストールとページ送りの設置
Bootstrap Paginationのデザイン反映

WP-PageNaviのインストールとページ送りの設置

管理画面のプラグインの新規追加よりWP-PageNaviを検索して追加するか、以下のページからWP-PageNaviプラグインファイルをダウンロードしてサーバーアップします。
WP-PageNavi

WP-PageNaviプラグインを有効化したら、テーマファイルのarchive.phpなどを開いて、ページ送りを付けたい個所に以下のように記述します。

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

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

Bootstrap Paginationのデザイン反映

WP-PageNaviのページ送りをBootstrapのPaginationのデザインに変更するために、テーマファイルのfunctions.phpを開いて、以下のコード追加します。

add_filter( 'wp_pagenavi', 'bs_pagination', 10, 2 );
function bs_pagination($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">
	<ul class="pagination">'.$out.'</ul>
 	</nav>';
}

add_filter( 'wp_pagenavi', 'bs_pagination', 10, 2 );

function bs_pagination($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">

</nav>';

}

上記コードで見栄えがおかしい場合（Bootstrapのバージョンが違う場合）はこちらのコードも試してみてください。

add_filter( 'wp_pagenavi', 'bs_pagination', 10, 2 );
function bs_pagination($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 pagination-centered">
	<ul>'.$out.'</ul>
 	</div>';
}