آموزش ساخت قالب وردپرس – قسمت هفتم

قسمت هفتم آموزش ساخت قالب در وردپرس – کاربرد و آموزش استفاده از Pagination در وردپرس

اگر از ابتدای آموزش ساخت قالب وردپرس را مطالعه  کرده اید، در حال ساخت قالبی هستیم که اکنون شامل فایل های زیر می باشد:

در هر قسمت به طور مفصل در مورد فایل های بالا صحبت کردیم و قسمت هفتم این آموزش را به Pagination یا صفحه بندی اختصاص داده ایم.

در قسمت هفتم آموزش ساخت قالب در وردپرس به بررسی مطالب زیر می پردازیم:

1. معنی و مفهوم Pagination در طراحی وب سایت و وردپرس

2. انواع Pagination در وردپرس

3. افزودن Pagination عددی در وردپرس

4. جمع بندی Pagination در وردپرس

 

1. معنی و مفهوم Pagination در طراحی وب سایت و وردپرس

یک کتاب را در نظر بگیرید. اگر تمام مطالب کتاب به جای نوشته شدن در چندین صفحه در یک صفحه طویل نوشته شده بود چه منظره ی زشتی به وجود می آمد؟ احتمالاً نه کسی آن را می خواند نه حتی نگهداری می کرد چون آن قدر طولانی می شد که اصلاً رغبت نداشتیم سمت آن برویم.

به همین علت کلمه ای به عنوان صفحه بندی اختراع شده است. به جای استفاده از یک صفحه طویل از چندین صفحه کوچک استفاده می کنیم تا هم ظاهر کتاب زیبا باشد و هم خواندن و نگهداری از آن آسان باشد و مطالب کتاب را در این صفحه ها تقسیم می کنیم.

در طراحی وب سایت هم عنوانی به نام صفحه بندی یا Pagination داریم. برای مثال بخش بلاگ سایت کراسنو دارای صفحه بندی یا Pagination می باشد .

به جای آنکه تمام مطالب وب سایت را در یک صفحه طولانی لیست کنیم، از چندین صفحه کوچک زیبا استفاده می کنیم که مزیت های بسیاری دارد و به آن صفحه بندی مطالب وب سایت یا Pagination می گوییم. سپس مطالب سایت را در این صفحه ها تقسیم می کنیم.

همان طور که در صفحه ی اصلی قالبی که در حال ساخت آن هستیم ( index.php ) دیدید , و اکنون نیز اگر آن را بررسی کنید خواهید دید که تمام مطالب وب سایت شما نمایش داده نشده است بلکه فقط 10 پست آخر شما نمایش داده شده است. برای نمایش بقیه ی پست ها باید از Pagination یا صفحه بندی استفاده کنیم.

البته شما می توانید و قادر هستید که خلاصه ای از تمام مطالب وب سایت خود را در صفحه ی اصلی نمایش دهید. اما آیا این یک کار منطقی است؟

البته که منطقی نیست . ما در طراحی سایت از صفحه بندی یا Pagination استفاده می کنیم تا زمان بارگذاری صفحه پایین تر بیاید، کاربر راحت تر باشد، سایت زیبایی داشته باشیم و دلایل دیگر.

در وردپرس تعداد نوشته هایی که در هر صفحه قابل نمایش هست در داشبورد وردپرس در قسمت تنظیمات / خواندن قابل تغییر است ، که پیش فرض آن 10 پست است.

اکنون با تغییر این مقدار به هر عددی، به همان تعداد نوشته در صفحه اصلی خود خواهید دید.

با استفاده از صفحه بندی یا Pagination می توانیم تمام مطالب سایت خود را در یک صفحه لیست کنیم به صورتی که باعث افزایش کارایی سایت ما شود نه کاهش آن. و هدف این قسمت از آموزش ما می باشد.

2. انواع Pagination در وردپرس

به صورت کلی می توان گفت در وردپرس 2 توع Pagination داریم.

1. Pagination عددی
2. Pagination بدون نمایش عدد

Pagination عددی 

مثالی از Pagination عددی را می توانید در تصویر زیر ببینید که منظور از صفحه بندی با Pagination عددی چیست:

در این نوع صفحه بندی یا Pagination لینک صفحه ی اول، لینک صفحه ی آخر (825)، لینک صفحه ی بعد و صفحه ی قبل و لینک تعدادی از صفحات بین این دو نمایش داده خواهند شد.

Pagination بدون نمایش عدد

در این نوع Pagination یا صفحه بندی ، خبری از اعداد نیست و معمولاً از لینک پست های قدیمی یا پست های جدید استفاده می کنند. در تصویر زیر نمونه ای از این نوع Pagination با دو لینک Next و Previous که بیانگر پست های قدیمی و جدید سایت هستند را می بینید:

توصیه ی ما به شما استفاده از Pagination عددی می باشد چرا که زیبا تر است، استفاده ی بیشتری دارد، کاربر پسندتر است و دید جامعی به کاربر می دهد.

در این آموزش ما از صفحه بندی عددی یا Numeric Pagination استفاده می کنیم.

حال فرض کنید در سایتی با بیش از 10000 پست اگر از صفحه بندی با Pagination استفاده نمی کردیم چه شرایطی به وجود می آمد. و این موقعیتی است که به اهمیت Pagination پی می بریم.

3. افزودن Numeric Pagination یا صفحه بندی عددی در وردپرس

در سایت های مختلف روش های مختلفی برای اضافه کردن صفحه بندی عددی یا Numeric Pagination به وردپرس گفته شده است. ما از روشی استفاده می کنیم که در همه ی قالب ها و سایت های وردپرسی قابل اجرا باشد. شما با استفاده از این روش می توانید این راه حل را در همه جا مورد استفاده قرار دهید، یک بار برای همیشه صفحه بندی یا Pagination در وردپرس را یاد بگیرید.

راه حل پیشنهادی ما برای شما ارائه یک تابع می باشد که در هر کجا این تابع را قرار دهید، صفحه بندی عددی یا Numeric Pagination نمایش داده می شود و همچنین به راحتی می توانید استایل های مورد ظر خود را به آن ها اضافه کنید.

ابتدا تابع زیر را در انتهای فایل functions.php قالب خود اضافه کنید:

function kanithemes_pagination($pages = '', $range = 2) {  
				$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'>";
						 if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<span><a href='".get_pagenum_link(1)."'>1 </a></span>";
						 if($paged > 1 && $showitems < $pages) echo "<span><a href='".get_pagenum_link($paged - 1)."'>صفحه قبل  </a></span>";

						 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>":"<span><a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a></span>";
							 }
						 }

						 if ($paged < $pages && $showitems < $pages) echo "<span><a href='".get_pagenum_link($paged + 1)."'>صفحه بعد </a></span>";  
						 if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<span><a href='".get_pagenum_link($pages)."'>".$pages."</a></span>";
						 echo "</div>n";
				}
	}

پس از اضافه کردن تابع بالا به فایل functions.php خود کدهای CSS خود را برای زیبا کردن این صفحه بندی به فایل style.css خود اضافه کنید:

.pagination {
			padding-right: 30%;
			padding-top:5px;
			padding-bottom: 5px; 
                            width:100%;
			background-color: navy;
		}
		.pagination > span {
			float:right;
			padding:7px;
			margin-right:5px;
		}
		.current {
			color:yellow;
			font:15px;
			font-weight: bold;
		}
		.pagination > span > a {
			text-decoration: none;
			color:white;
		}

شکل نهایی این صفحه بندی پس از قراردادن آن در صفحات مانند زیر خواهد بود:

نحوه استفاده از تابع فوق و نمایش صفحه بندی یا Pagination در صفحات وردپرس

پس از قرار دادن تابع و کدهای CSS در جایی که ذکر کردیم، باید تابع را در صفحات گوناگون فراخوانی کنید. برای فراخوانی و استفاده ی کامل از این تابع از کلاس WP_Query استفاده می کنیم. با استفاده از WP_Query می توانیم به صورت کامل به شخصی سازی چرخه یا حلقه یا loop وردپرس بپردازیم که بعداً باید در یک پست جداگانه آن را بررسی می کنیم.

در صفحاتی که قصد دارید همه ی پست های سایت خود را به صورت صفحه بندی نمایش دهید، مثلاً صفحه ی اصلی یا صفحه ی بلاگ کافی است بعد از حلقه ی وردپرس این تابع را به صورت زیر فراخوانی کنید.

نمایش تمام پست های وردپرس به صورت صفحه بندی یا با Pagination

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

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

<?php get_header(); ?>
	<div class="container" >
		<div class="row">
			 <?php
				$query = new WP_Query("posts_per_page=15&paged=$paged");
				if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post();
					?>
						<p style="width:100%" ><?php the_title(); ?> </p>
					<?php
				endwhile;
				endif;
				kanithemes_pagination($query->max_num_pages);
		 	?>
		</div>
	</div>

<?php get_footer(); ?>

برای عوض کردن تعداد پست ها در هر صفحه می توانید مقدار عدد 15 را به تعداد مورد نظر خود تغییر دهید.

نمایش پست های مربوط به یک دسته بندی خاص در وردپرس با Pagination

برای اینکه پست های مربوط به یک دسته ی خاص را نمایش دهید کافی است ID مربوط به آن دسته را داشته باشید که به دست آوردن آن کار ساده ای است. پس از به دست آوردن ID دسته ی مورد نظر کافی است از کد زیر در مکان موردنظر استفاده کنید تا تمام پست های مربوط به آن دسته به صورت صفحه بندی شده به نمایش گذاشته شود:

فرض کنید ID دسته ی موردنظر ما 10 می باشد:

<?php get_header(); ?>
	<div class="container" >
		<div class="row">
			 <?php
				$query = new WP_Query("cat=10posts_per_page=15&paged=$paged");
				if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post();
					?>
						<p style="width:100%" ><?php the_title(); ?> </p>
					<?php
				endwhile;
				endif;
				kanithemes_pagination($query->max_num_pages);
		 	?>
		</div>
	</div>

<?php get_footer(); ?>

می بینید که کد بالا با کد قبلی فرق نمی کند ما فقط مقدار cat=10 که به وردپرس دستور می دهد پست های مربوط به دسته ای با ID شماره ی 10 را نمایش بدهد را اضافه کرده ایم.

کد بالا را در سایت موزیک پایین امتحان کرده ایم، نتیجه را ببینید:

همان طور که ملاحظه می کنید مهم نیست کد بالا را در چه قسمتی وارد کنید، خواه یک سایدبار باشد و خواه صفحه ی اصلی شما، نتایج همیشه دقیق و قابل کنترل می باشد. در تصویر بالا در هر صفحه عنوان 15 پست از دسته ای با ID شماره 10 را به نمایش گذاشته ایم و تعداد کل صفحات 31 صفحه می باشد. که یک مثال واضح از صفحه بندی عددی یا Numeric Pagination در وردپرس می باشد.

جمع بندی Pagination یا صفحه بندی در وردپرس

همان طور که ملاحظه کردید صفحه بندی یک اصل مهم در طراحی وب سایت می باشد که به راحتی نمی توان از آن گذشت و برای طراحی یک سایت کامل حتماً باید با مقوله ی Pagination آشنا باشید.

در وردپرس از دو صفحه بندی استفاده می شود که بهترین نوع آن صفحه بندی عددی می باشد که می توانید با استفاده از تابع بالا و کمی سلیقه در اضافه کردن استایل به آن در همه ی قالب های وردپرس از آن استفاده کنید.

با استفاده از کلاس WP_Query در وردپرس می توان در یک صفحه بی شمار Pagination از دسته های مختلف به نمایش گذاشت، و یا در صفحات مختلف، صفحه بندی های گوناگون به کاربران خود ارائه دهید. در آموزش های آتی از صفحه بندی های متفاوتی در وردپرس استفاده خواهیم کرد.

اگر در این زمینه به مشکلی برخورد کردید با ما در میان بگذارید.

Series Navigation