ベース
・Pagination (ページネーション) · Bootstrap v5.0
・関数リファレンス/paginate links – WordPress Codex 日本語版
paginate_links()で生成されるページャーを、Bootstrap5のページネーションに合うように、構造とクラスを少し変更して実現します。
設置例
こんな感じになります。
実装(ソースコード)
<?php
function tp_pagination( $args = array() ) {
//1ページの時は出力しない
if ( $GLOBALS['wp_query']->max_num_pages <= 1 ) {
return;
}
//現在のページ数
$current =max( 1, get_query_var('paged') );
$args = array(
'prev_text' => __('«'),
'next_text' => __('»'),
'mid_size' =>2,
'type' => "array",
);
$pa = paginate_links($args);
foreach ( $pa as &$p){
$p = str_replace("page-numbers","page-link",$p);
}
unset($p);
?>
<nav aria-label="Page navigation">
<ul class="pager pagination my-4 justify-content-around">
<?php
foreach ( $pa as $p){
$active="";
if(strpos($p,"current") !== false){
$active=" active";
}
echo "<li class=\"page-item{$active}\">{$p}</li>";
}
?>
</ul>
</nav>
<?php
}
?>
・paginate_linksは、’type’ => “array”で、配列として取得しています。
・カレントページに「current」というクラス名が付与されますが、Bootstrap5では「active」なので、変更しています
テーマファイルのfunctions.phpに上記のtp_pagination関数を追加します。ページャーを表示したいところで、「tp_pagination();」と記述してください。
スポンサーリンク