Bootstrap4デザインのWordPressページネーションを作成する

WordPressのページネーション（投稿一覧をページ送りするボタン）のデザインを、Bootstrap4で表示させる方法です。

注：”次”・”前”の記号として”Font Awesome”を使用、使用する場合は要アカウント登録

<script src="https://kit.fontawesome.com/XXXXX.js" crossorigin="anonymous"></script>

<ul class="pagination">
  <li class="page-item disabled">
    <a class="page-link" href="#"><i class="fas fa-angle-double-left"></i></a>
  </li>
  <li class="page-item active">
    <a class="page-link" href="#">1</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">2</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">3</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">4</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">5</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#"><i class="fas fa-angle-double-right"></i></a>
  </li>
</ul>

なお、本記事の作成にあたり、下記サイトを参考にさせて頂きました。

http://wpcj.net/806

wpcj.net

テーマ

<script src="https://kit.fontawesome.com/XXXXX.js" crossorigin="anonymous"></script>

<?php the_posts_pagination_bootstrap(
  array(
    'prev_next' => true,
    'prev_text' => '<i class="fas fa-angle-double-left"></i>',
    'next_text' => '<i class="fas fa-angle-double-right"></i>',
    'type'      => 'list',
    'screen_reader_text'=>' '
  )
); ?>

SCSS

nav.pagination {
  .screen-reader-text {
    display: none;
  }
}

functions.php

/**
 * ページ区切りナビゲーションをBootstrap形式のタグで出力します。
 * 
 * @param array $args the_posts_paginationと同じ設定が使用できます。ただしtypeは'list'に固定されます。
 * 
 * オリジナル：http://wpcj.net/806
 * Bootstrap v4対応：YUKI (https://wynes.info/techblog/)
 */
function the_posts_pagination_bootstrap( $args = array() ) {
  $navigation = '';
  // 1ページのみの場合は出力しません。
  if ( $GLOBALS['wp_query']->max_num_pages > 1 ) {
    $args = wp_parse_args( $args, array(
      'mid_size'           => 1,
      'prev_text'          => _x( 'Previous', 'previous post' ),
      'next_text'          => _x( 'Next', 'next post' ),
      'screen_reader_text' => __( 'Posts navigation' ),
    ) );
    // typeは必ずlistにします。
    $args['type'] = 'list';

    //  ページ区切りリンクを準備します。
    $links = paginate_links( $args );
    if ( $links ) {
      // リストにBootstrapのクラス(ul.pagination)を付加します。
      $links = preg_replace(
        '#<ul class=\'page-numbers\'>#', 
        '<ul class=\'page-numbers pagination\'>', 
        $links);

      // 現在のページのliタグ
      $links = preg_replace(
        '#<li><span(.*)>(.*)</span></li>#', 
        '<li class="page-item active"><a class="page-link" href="#">$2</a></li>', 
        $links);

      // 他ページのliタグ
      $links = preg_replace(
        '#<li><a class="page-numbers" href="(.*)">(.*)</a></li>#', 
        '<li class="page-item"><a class="page-link" href="$1">$2</a></li>', 
        $links);

      // 次ページ(Next)または前ページ(Prev)のliタグ
      $links = preg_replace(
        '#<li><a class="(next|prev) page-numbers" href="(.*)">(.*)</a></li>#', 
        '<li class="page-item"><a class="page-link" href="$2">$3</a></li>', 
        $links);

      // リンクを囲うタグを準備します。(変更したい場合はここを直接編集するとよいです、無くても良い)
      $template = '
        <nav class="navigation pagination-outer" role="navigation">
        <div class="nav-links">%1$s</div>
        </nav>';
      $navigation = sprintf($template, $links);
    }
  }
  echo $navigation;
}