【WordPress】Bootstrap5のページネーションを設置

ベース

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();」と記述してください。

スポンサーリンク

関連記事