• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

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

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

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


Bootstrap Pagination のデザイン反映

WP-PageNavi のページ送りをBootstrapPagination のデザインに変更するために、テーマファイルの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>';
}



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す