スポンサード

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

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

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

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

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

上記コードで見栄えがおかしい場合（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>';
}

スポンサード