scss WordPress的分页与页码和一个很酷的sass循环。

Posted 2021-05-18

.pagination {
	display: block;
	clear: both;
	padding: 20px 0;
	position: relative;
	font-size: 11px;
	line-height: 13px;
	text-align: center;
}

.pagination span, .pagination a {
	display: inline-block;
	margin: 2px 2px 2px 0;
	padding: 6px 9px 5px 9px;
	text-decoration: none;
	width: auto;
	color: #000;
	background: #c1c1c1;
}

.pagination a:hover, .pagination .current {
	color: #e3e3e3;
	background: #000;
}

<?php if (function_exists("pagination")) { pagination($additional_loop->max_num_pages); } ?>

function pagination($pages = '', $range = 4) {
	$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) {
		echo "<div class=\"pagination\"><span>Page ".$paged." of ".$pages."</span>";
		if ($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo; First</a>";
		if ($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo; Previous</a>";

		for ($i=1; $i <= $pages; $i++) {
			if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )) {
				echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
			}
		}

		if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next &rsaquo;</a>";
		if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last &raquo;</a>";
		echo "</div>\n";
	}
}

$paginationColors: $yellow, $fuschia, $blue, $green;

.pagination {
	display: block;
	clear: both;
	padding: 20px 0;
	position: relative;
	font-size: 11px;
	line-height: 13px;
	text-align: center;

	span, a {
		display: inline-block;
		margin: 2px 2px 2px 0;
		padding: 6px 9px 5px 9px;
		text-decoration: none;
		width: auto;
		color: #000;
		background: #e0d3b1;
	}

	@each $color in $paginationColors {
		$a: length($paginationColors);
		$b: index($paginationColors, $color);
		$c: "#{$a}n+#{$b+1}";
		a:nth-child(#{$c}):hover, .current:nth-child(#{$c}) { background: #{$color}; }
	}
}