【WordPress】プラグインなしでページ送り(ページネーション)を設置する方法

ページネーションはプラグインなしでも簡単に設置できるので、その方法をご紹介します。

まずは、functions.phpに以下をコピペ。

最初の行の$rangeの値(0,1,2…)は、大きくすればするほど、より遠くのページまで表示してくれます。

<?php
function pagination($pages = '', $range = 2) { // $rangeの値は適宜変更
	$showitems = ($range * 2)+1;

	global $paged;
	if (empty($paged)) $paged = 1;

	if ($pages == '') {
		global $wp_query;
		$pages = $wp_query->max_num_pages;
		if (!$pages) $pages = 1;
	}

	if (1 != $pages): ?>
		<div class="pagination">
			<?php if ($paged > 2 && $paged > $range && $showitems < $pages): ?>
				<a href="<?php echo get_pagenum_link(1); ?>">&laquo;</a>
			<?php endif;
			if ($paged > 1 && $showitems < $pages): ?>
				<a href="<?php echo get_pagenum_link($paged - 1); ?>">&lsaquo;</a>
			<?php endif;
			for ($i=1; $i <= $pages; $i++):
				if (1 != $pages && ( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )):
					if ($paged == $i): ?>
						<span class="current"><?php echo $i; ?></span>
					<?php else: ?>
						<a href="<?php echo get_pagenum_link($i); ?>" class="inactive"><?php echo $i; ?></a>
					<?php endif;
				endif;
			endfor;
			if ($paged < $pages && $showitems < $pages): ?>
				<a href="<?php echo get_pagenum_link($paged + 1); ?>">&rsaquo;</a>
			<?php endif;
			if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages): ?>
				<a href="<?php echo get_pagenum_link($pages); ?>">&raquo;</a>
			<?php endif; ?>
		</div>
	<?php endif;
}

index.php、archive.phpなどの、表示したい部分に下のコードをコピペ。

<?php if (function_exists("pagination")) pagination(); ?>

デザインのサンプル↓

.pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.pagination span {
	display: inline-block;
	padding: 10px 13px;
	color: #2E2E2E;
	font-weight: bold;
	margin: 0 1px;
}

.pagination a {
	display: inline-block;
	padding: 10px 13px;
	border-bottom: 1px solid #2E2E2E;
	color: #2E2E2E;
	font-weight: bold;
	transition: .5s;
	margin: 0 1px;
}

.pagination a:hover {
	background-color: #2E2E2E;
	color: white;
}

以上!