WordPress プラグインなしでページネーションを配置

WordPress でページネーション（ページナビゲーション）をプラグインなしで配置する方法をふたつ紹介します。 ひとつは WordPress 4.1 より実装された the_posts_pagination() を使用する方法、もうひとつは Bootstrap/Foundation のスタイルに対応したものです。

the_posts_pagination() を使用したページネーション

配置する場所に下記のコードを記述します。

<?php the_posts_pagination( array(
	'prev_text' => '&laquo:',
	'next_text' => '&raquo;'
) ); ?>

CSS はこんな感じでしょうか

.pagination {
	margin: 10px 0;
	text-align: center;
}
.pagination .screen-reader-text {
	display: none;
}
.pagination a {
	display: inline-block;
	padding: 5px 10px;
	background-color: #ffffff;
	color: #333333;
	font-size: 14px;
	text-decoration: none;
	border: solid 1px #cccccc;
}
.pagination a:hover {
	background-color: #eeeeee;
}
.pagination span {
	padding: 5px 10px;
	display: inline-block;
}
.pagination span.current {
	display: inline-block;
	padding: 5px 10px;
	background-color: #eeeeee;
	color: #333333;
	font-size: 14px;
	text-decoration: none;
	border: solid 1px #cccccc;
}

たったこれだけで簡単に配置することができます。

Bootstrap/Foundation のスタイルに対応したページネーション

Bootstrap3、Foundation5/6 のスタイルに対応したページネーションです。 functions.php などに下記コードを記述します。

/**
 * ページネーションを取得します。
 * 
 * @global WP_Rewrite $wp_rewrite
 * @global WP_Query $wp_query
 * @global int $paged
 * @param string $prev_text 前ページのテキスト（デフォルトは '«'）
 * @param string $next_text 次ページのテキスト（デフォルトは '»'）
 */
function my_get_posts_pagination( $prev_text = '«', $next_text = '»' ) {
	global $wp_rewrite;
	global $wp_query;
	global $paged;

	$result = '';
	$paginate_base = get_pagenum_link( 1 );
	if ( ($wp_query->max_num_pages) > 1 ) {
		if ( strpos( $paginate_base, '?' ) || !$wp_rewrite->using_permalinks() ) {
			$paginate_format = '';
			$paginate_base = add_query_arg( 'paged', '%#%' );
		} else {
			$paginate_format = ( substr( $paginate_base, -1, 1 ) == '/' ? '' : '/' ) .
					user_trailingslashit( 'page/%#%/', 'paged' );
			$paginate_base .= '%_%';
		}

		$pages  = paginate_links( array(
			'base' => $paginate_base,
			'format' => $paginate_format,
			'total' => $wp_query->max_num_pages,
			'mid_size' => 5,
			'current' => ( $paged ? $paged : 1 ),
			'type' => 'array',
			'prev_next' => True,
			'prev_text' => $prev_text,
			'next_text' => $next_text,
		) );

		if ( is_array( $pages ) ) {
			$current_page = ( get_query_var( 'paged' ) == 0 ) ? 1 : get_query_var( 'paged' );
			$result .= '<ul class="page-numbers pagination">';
			foreach ( $pages as $i => $page ) {
				if ( $current_page == 1 && $i == 0 ) {
					$result .= "<li class=\"active\">$page</li>";
				} else {
					if ( $current_page != 1 && $current_page == $i ) {
						$result .= "<li class=\"active\">$page</li>";
					} else {
						$result .= "<li>$page</li>";
					}
				}
			}
			$result .= '</ul>';
		}
	}
	return $result;
}

配置したい場所に下記のコードを記述します。

<?php echo my_get_posts_pagination(); ?>