صفحه بندی مطالب وردپرس بدون افزونه

سلام.

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

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

اول شما باید یه فایل php با نام paginate یا نام دلخواه خود بسازید و کد زیر رو درون اون قرار بدید:

<?php

function kriesi_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 "<a href='".get_pagenum_link(1)."'>&laquo;</a>";
if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo;</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)."'>&rsaquo;</a>";
if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>&raquo;</a>";
echo "</div>\n";
}
}

?>

و فایل رو به پوشه پوسته وردپرستون منتقل کنید.

حالا باید این فایل رو فراخوانی کنید، فایل functions رو باز کنید و کد زیر رو در آن کپی کنید:

include ( 'paginate.php' );

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

<?php kriesi_pagination(); ?>

حالا میرسیم به بحث شیرین استایل دادن :d

برای استایل دادن هم باید از کد های زیر استفاده کنید و در صورت تمایل آن ها رو تغییر بدید:

.pagination{
margin-bottom: 30px;

}

.pagination a{
-webkit-box-shadow: 0 1px #fff, inset 0 1px #fff;
-moz-box-shadow: 0 1px #fff, inset 0 1px #fff;
box-shadow: 0 1px #fff, inset 0 1px #fff;
border: solid 1px #d2d2d2;
background-image: -webkit-linear-gradient(bottom, #f4f4f4, #fafafa);
background-image: -moz-linear-gradient(bottom, #f4f4f4, #fafafa);
background-image: -o-linear-gradient(bottom, #f4f4f4, #fafafa);
background-image: -ms-linear-gradient(bottom, #f4f4f4, #fafafa);
background-image: linear-gradient(to top, #f4f4f4, #fafafa);
display: block;
width:30px;
height: 30px;
line-height: 30px;
text-align: center;
float: right;
margin-right: 10px;
border-radius: 3px;
color: #777;
}

.pagination span{
color: #fff;
-webkit-box-shadow: 0 1px #fff, inset 0 0 7px #2e2e2e;
-moz-box-shadow: 0 1px #fff, inset 0 0 7px #2e2e2e;
box-shadow: 0 1px #fff, inset 0 0 7px #2e2e2e;
background-image: -webkit-linear-gradient(bottom, #585858, #727272);
background-image: -moz-linear-gradient(bottom, #585858, #727272);
background-image: -o-linear-gradient(bottom, #585858, #727272);
background-image: -ms-linear-gradient(bottom, #585858, #727272);
background-image: linear-gradient(to top, #585858, #727272);
display: block;
border: solid 1px #111;
width:30px;
height: 30px;
line-height: 30px;
text-align: center;
float: right;
margin-right: 10px;
border-radius: 3px;
}

خوب تموم شد ! امیدوارم مورد استفاده قرار بگیره.