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; ?>
基本的にサブループを使って出力した記事に対して、ページネーションをつける場合は、メインクエリを作成してページネーションを出力することで解決します。
メインクエリの作成方法について以下を参考すること。