grid صفحه بندی عددی در wordpress

wordpress-numeric-pagination

در wordpress به طور پیش فرض صفحه بندی عددی وجود ندارد، راه اول استفاده از افزونه (Plugin) و راه دوم استفاده از کد است.

معمولا افراد برای سریع تر انجام شدن کارها از افزونه استفاده میکنند اما استفاده از افزونه در ساختار قالب، باعث کم شدن انعطاف پذیری آن میشود.

افزونه صفحه بندی عددی در wordpress

همانطور که گفته شد برای برخی از قابلیت ها مانند صفحه بندی عددی در قالب های وردپرس میتوانید از افزونه استفاده کنید که برای آن افزونه wp-pagenavi مناسب است (دانلود wp-pagenavi).

کد صفحه بندی عددی در wordpress

اگر میخواهید قالب شما از انعطاف پذیری بالاتری برخوردار باشد بهتر است بجای افزونه از کد استفاده کنید (توجه داشته باشید که برای برخی از قابلیت ها در وردپرس بهتر است از افزونه استفاده شود).

برای اضافه کردن صفحه بندی عددی در وردپرس باید کد زیر را در functions.php اضافه کنید (اگر قالب شما دارای child theme میباشد کد های زیر را در آن وارد کنید) .

<?php

	function wpt_pagination($args = ''){
		$default_args = [
			'container_class' => 'wpt_pagination',
			'prev_link_text' => 'صفحه بعدی',
			'next_link_text' => 'صفحه قبلی',
		];
		
		if(!is_array($args)){
			$args = [];
		}
		$args += $default_args;
		if(is_singular()){
			return;
		}
		global $wp_query;
		if($wp_query->max_num_pages <= 1){
			return;
		}

		$paged = get_query_var('paged') ? absint(get_query_var('paged')) : 1;
		$max   = intval($wp_query->max_num_pages);
		if ($paged >= 1){
			$links[] = $paged;
		}
		if ($paged >= 3) {
			$links[] = $paged - 1;
			$links[] = $paged - 2;
		}
		if (($paged + 2) <= $max) {
			$links[] = $paged + 2;
			$links[] = $paged + 1;
		}
		echo '<div class="'.$args['container_class'].'"><ul>' . "\n";
		if (get_previous_posts_link()){
			printf('<li>%s</li>', get_previous_posts_link($args['next_link_text']));
		}
		if (! in_array(1, $links)) {
			$class = 1 == $paged ? ' class="active"' : '';

			printf('<li><a%s href="%s">%s</a></li>' . "\n", $class, esc_url(get_pagenum_link(1)), '1');

			if (! in_array(2, $links)){
				echo '<span> ... </span>';
			}
		}
		sort($links);
		foreach ((array) $links as $link) {
			$class = $paged == $link ? ' class="active"' : '';
			$url = $paged == $link ? '#' : esc_url(get_pagenum_link($link));
			printf('<li><a%s href="%s">%s</a></li>' . "\n", $class, $url, $link);
		}
		if (! in_array($max, $links)) {
			if (! in_array($max - 1, $links))
				echo '<span> ... </span>' . "\n";

			$class = $paged == $max ? ' class="active"' : '';
			$url = $paged == $max ? "#" : esc_url(get_pagenum_link($max));
			printf('<li><a%s href="%s">%s</a></li>' . "\n", $class, $url, $max);
		}
		if (get_next_posts_link()){
			printf('<li>%s</li>',get_next_posts_link($args['prev_link_text']));
		}
		echo '</ul></div>' . "\n";
	}

?>

پس از اضافه کردن کد بالا در functions.php، کد زیر را بعد از حلقه ()have_posts اضافه کنید تا صفحه بندی عددی نمایش داده شود.

شما میتوانید برای تغییر متن دکمه صفحه بعدی، قبلی و کلاس بلوک اصلی میتوانید به ترتیب از container_class ،next_link_text  و prev_link_text اسفاده کنید.

<?php

	if(function_exists('wpt_pagination')){
		wpt_pagination(['container_class' => 'pagination',]);
	}

?>

استفاده از css

تا الان کار تموم شده اما برای زیباتر شدن آن کد های css زیر را در آخر style.css اضافه کنید.

.pagination {
	width: 100%;
	padding: 2.5px;
	background: #fff;
	margin: 20px 0;
	border-radius: 5px;
	box-shadow: 0 2px 4px #ccc;
}
.pagination ul {
	list-style: none;
	display: table;
	margin: 0 auto;
}
.pagination ul li {
	display: inline-block;
}
.pagination ul li a {
	display: block;
	color: #000;
	margin: 2.5px;
	padding: 5px 15px;
	border-radius: 4px;
	transiotion: all .4s ease;
}
.pagination ul li a:hover {
	background: #F2F2F2;
}
.pagination ul li a.active {
	color: #fff;
	background: #2979FF;
}

نتیجه:

wordpress pagination style

امیدوارم این مطلب برات مفید واقع شده باشه، اگر از مطلب بدت اومد، خوشت اومد یا سوالی داری در بخش نظرات منتظرتم😊.

author

سید علی طلوع

سید علی طلوع هستم، طراح توسعه دهنده و برنامه نویس وب، از لینک رو به رو میتونید رزومه بنده رو ببینید: مشاهده وب سایت

مطالب تصادفی

نظر شما برایمان با ارزش هست

نام و ایمیلمو ذخیره کن

2 دیدگاه
avatar
Sohail
19 شهریور 1400

دمتگرم خیلی خوب بود 👍

    avatar
    سید علی طلوع
    19 شهریور 1400

    سلام. خوشحالم براتون مفید بوده :))