[WP]WP-PageNavi のページ送りをBootstrap のPagination っぽくデザイン変更する方法
スポンサード
以下のページからWP-PageNavi プラグインファイルをダウンロードしてサーバーアップします。
WP-PageNavi プラグインを有効化したら、テーマファイルのarchive.php などを開いて、ページ送りを付けたい個所に以下のように記述します。
上記コードで見栄えがおかしい場合(Bootstrap のバージョンが違う場合)はこちらのコードも試してみてください。
スポンサード
WordPress のWP-PageNavi を使ったページ送りナビゲーションを、Bootstrap の Pagination のデザインに変更する方法のご紹介です。
管理画面のプラグインの新規追加より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>'; }
スポンサード
コメント