• 最終更新日:

WordPressでページネーションの出力方法

wordpressでページャーをリスト形式に出力して、かつ自分の好きなクラス名につける方法

/**
 * ページネーションの実装(クラス名を独自のものに変換)
 *
*/

function custom_pagination( $args = array() ) {
  $navigation = '';

  // 1ページのみの場合は出力しない
  if ( $GLOBALS['wp_query']->max_num_pages > 1 ) {
    $args = wp_parse_args(
      $args,
      array(
        'mid_size'           => 2,
        'prev_next'    => false,
        'prev_text'          => __( '' ),
        'next_text'          => __( '' ),
        'screen_reader_text' => __( 'Posts navigation' ),
        'type' => 'list',  //リストとしてマークアップ
      )
    );

    // type に list 以外が指定されていたら list に強制
    $args['type'] = 'list';

    // paginate_links() を使ってリンクを生成
    $links = paginate_links( $args );

    if ( $links ) {

      $patterns = array(
        '#<ul class=([\'\"]([^\'\"]*)[\'\"])\s?([^>]*>[^<]*)#',
        '#<li><a class=([\'\"]([^\'\"]*)[\'\"]) ([^>]*>[^<]*)</a></li>#',
        '#<li><span class=([\'\"]([^\'\"]*)[\'\"])\s?([^>]*>[^<]*)</span></li>#',
        '#<li><span (aria-current=[\'\"]([^\'\"]*)[\'\"]) class=([\'\"]([^\'\"]*)[\'\"])\s?([^>]*>[^<]*)</span></li>#',
      );

      $replacements = array(
        '<ul class="p-pagenation__list">',
        '<li class="p-pagenation__item"><a class="$2 p-pagenation__link" $3</a></li>',
        '<li class="p-pagenation__item p-pagenation__item--disabled"><span class="$2 p-pagenation__link" $3</span></li>',
        '<li class="p-pagenation__item p-pagenation__item--active"><span $1 class="$4 p-pagenation__link" $5</span></li>',
      );

      ksort($patterns);
      ksort($replacements);
      $links = preg_replace($patterns, $replacements, $links);

      //_navigation_markup() は使わずに nav 要素でマークアップ
      $navigation = '
      <nav class="p-pagenation %s" role="navigation" aria-label="%s">
        %s
      </nav>';
      //nav 要素の aria-label の値には screen_reader_text の値を設定
      $navigation = sprintf( $navigation, 'pagination', esc_html( $args['screen_reader_text'] ), $links );
    }
  }
  echo $navigation;
}

出力するときはテンプレートに以下を書く。

<?php
   if ( function_exists( 'custom_pagination' ) ) :
      custom_pagination();
endif; ?>

ただ、これだとサブループでは使うことができない。以下の旧式の書き方であればサブループでも使えるがクラス名の変更ができない。

/**
 * ページネーションの実装
*/
<?php
function pagination( $max_num_pages=0 ) {
    // Don't print empty markup if there's only one page.
    $max_num_pages = $max_num_pages ? (int)$max_num_pages : $GLOBALS['wp_query']->max_num_pages;
    if ( $max_num_pages < 2 ) {
        return;
    }
     $paged        = get_query_var( 'paged' ) ? intval( get_query_var( 'paged' ) ) : 1;
    $pagenum_link = html_entity_decode( get_pagenum_link() );
    $query_args   = array();
    $url_parts    = explode( '?', $pagenum_link );
     if ( isset( $url_parts[1] ) ) {
        wp_parse_str( $url_parts[1], $query_args );
    }
     $pagenum_link = remove_query_arg( array_keys( $query_args ), $pagenum_link );
    $pagenum_link = trailingslashit( $pagenum_link ) . '%_%';
     $format  = $GLOBALS['wp_rewrite']->using_index_permalinks() && ! strpos( $pagenum_link, 'index.php' ) ? 'index.php/' : '';
    $format .= $GLOBALS['wp_rewrite']->using_permalinks() ? user_trailingslashit( 'page/%#%', 'paged' ) : '?paged=%#%';
     // Set up paginated links.
    $links = paginate_links( array(
        'base'     => $pagenum_link,
        'format'   => $format,
        'total'    => $max_num_pages,
        'current'  => $paged,
        'type'         => 'list',
        'mid_size' => 2,
        'add_args' => array_map( 'urlencode', $query_args ),
        'prev_next'    => false,
        'prev_text' => __( '' ),
        'next_text' => __( '' ),
    ) );
if ( $links ) :
     ?>
    <nav class="p-pagenavi__inner" role="navigation">
        <div class="p-pagenavi__block">
            <?php echo $links; ?>
        </div><!-- .pagination -->
    </nav><!-- .navigation -->
    <?php
    endif;
}

出力する場合は以下。

 <?php
    if ( function_exists( 'pagination' ) ) :
       pagination( $the_query->max_num_pages, $paged );  //$wp_query ではなく $the_query ないことに注意!
 endif; ?>

基本的にサブループを使って出力した記事に対して、ページネーションをつける場合は、メインクエリを作成してページネーションを出力することで解決します。

メインクエリの作成方法について以下を参考すること。