レスポンシブなページネーションのCSSデザインサンプルとWordPressへの実装方法【スマホも見やすく】

function my_paginate( $query_name = '' ) {
	$settings = array(
		'side_range' => 3,    // 現在ページの左右の表示数.
		'txt_prev'   => '<',  // 一つ戻るテキスト.
		'txt_next'   => '>',  // 一つ進むテキスト.
		'txt_first'  => '<<', // 最初へ移動テキスト.
		'txt_last'   => '>>', // 最後へ移動テキスト.
	);

	if ( '' !== $query_name ) {
		$query = $query_name;
	} else {
		global $paged, $wp_query;
		$query = $wp_query;
	}
	$paged     = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
	$showitems = ( $settings['side_range'] * 2 ) + 1;
	$pages     = $query->max_num_pages;

	if ( 1 !== $pages ) {
		echo "<div class=\"pagination\">\n";
		echo "  <ul class=\"pagination__list\">\n";
		for ( $i = 1; $i <= $pages; $i++ ) {
			if ( 1 !== $pages && ( ! ( $i >= $paged + $settings['side_range'] + 1 || $i <= $paged - $settings['side_range'] - 1 ) || $pages <= $showitems ) ) {
				echo ( $paged === $i ) ?
				'    <li class="pagination__item--current">' . esc_html( $i ) . "</li>\n" :
				'    <li class="pagination__item"><a href="' . esc_url( get_pagenum_link( $i ) ) . '">' . esc_html( $i ) . "</a></li>\n";
			}
		}
		echo "  </ul>\n";
		echo '  <p class="pagination__pos">Page ' . esc_html( $paged ) . '/' . esc_html( $pages ) . "</p>\n";
		if ( $paged > 2 && $paged > $settings['side_range'] + 1 && $showitems < $pages ) {
			echo '  <a class="pagination__btn--first" href="' . esc_url( get_pagenum_link( 1 ) ) . '">' . esc_html( $settings['txt_first'] ) . "</a>\n";
		}
		if ( $paged > 1 ) {
			echo '  <a class="pagination__btn--prev" href="' . esc_url( get_pagenum_link( $paged - 1 ) ) . '">' . esc_html( $settings['txt_prev'] ) . "</a>\n";
		}
		if ( $paged < $pages ) {
			echo '  <a class="pagination__btn--next" href="' . esc_url( get_pagenum_link( $paged + 1 ) ) . '">' . esc_html( $settings['txt_next'] ) . "</a>\n";
		}
		if ( $paged < $pages - 1 && $paged + $settings['side_range'] - 1 < $pages && $showitems < $pages ) {
			echo '  <a class="pagination__btn--last" href="' . esc_url( get_pagenum_link( $pages ) ) . '">' . esc_html( $settings['txt_last'] ) . "</a>\n";
		}
		echo "</div>\n";
	}
}

my_paginate();

<?php
$my_query = new WP_Query( // ここで命名したインスタンス名を20行目で使用
	array(
		'post_type'      => 'post',
		'paged'          => $paged, // ページ送りを行うために必須
		'posts_per_page' => 10,
	)
);

if ( $my_query->have_posts() ) :
	echo '<ul>';
	while ( $my_query->have_posts() ) :
		$my_query->the_post();
		?>
	<li><a href="<?php the_permalink(); ?>"><?php the_title_attribute(); ?></a></li>
		<?php
	endwhile;
	echo '</ul>';

	my_paginate( $my_query ); // インスタンス名を引数に指定
	wp_reset_postdata();
endif;
?>

<div class="pagination">
	<ul class="pagination__list">
		<li class="pagination__item"><a href="">1</a></li>
		<li class="pagination__item"><a href="">2</a></li>
		<li class="pagination__item--current">3</li>
		<li class="pagination__item"><a href="">4</a></li>
		<li class="pagination__item"><a href="">5</a></li>
		<li class="pagination__item"><a href="">6</a></li>
	</ul>
	<p class="pagination__pos">Page 3/6</p>
	<a class="pagination__btn--first" href=""><<</a>
	<a class="pagination__btn--prev" href=""><</a>
	<a class="pagination__btn--next" href="">></a>
	<a class="pagination__btn--last" href="">>></a>
</div>