شماره صفحات ایجکسی
ابتدا باید گفت، که این مقاله بیشتر جنبه آموزشی داره و برای استفاده از این مقاله نیاز دارید تا کمی با جی کوئری، پی اچ پی و وردپرس آشنایی داشته باشید.
فناوری ایجکس در وب هم باعث کاهش فشار در سرور و هم به اینترنت ضعیف ما کمک می کنه. مثلا توی سایتی اگر در حال خوندن مقالات یه دسته بندی خاص هستید و باید به صفحات دیگر مراجعه کنید، هر موقع شما وارد صفحه دیگری میشید تمام عکس ها و المنت های صفحه از نو بارگذاری می شوند و نیازی به این کار نیستید.
ایجکس کردن قسمت شماره صفحات در وردپرس کار بسیار ساده ای است (البته به لطف جی کوئری) و این کارو حتما در قالب خود انجام دهید.
برای شروع باید گفت که ما این کار رو در قالب دو هزار و دوازده وردپرس انجام می دیم.
قالب 2012 به صورت پیشفرض قابلیت شماره صفحات رو نداره، برای اضافه کردن شماره صفحات به این قالب ابتدا تابع زیر رو در فایل functions.php قرار بدید:
function page_numbers($class = "wp98_page_numbers") { global $wp_rewrite,$wp_query,$paged;
$paginate_base = get_pagenum_link(1);
if (strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()) {
$paginate_format = '';
$paginate_base = add_query_arg('paged', '%#%');
} else {
$paginate_format = (substr($paginate_base, -1 ,1) == '/' ? '' : '/') .
user_trailingslashit('page/%#%/', 'paged');;
$paginate_base .= '%_%';
}
echo '
';
echo paginate_links( array(
'base' => $paginate_base,
'format' => $paginate_format,
'total' => $wp_query->max_num_pages,
'mid_size' => 10,
'current' => ($paged ? $paged : 1),
'type' => 'list',
'prev_text' => __('« Previous', 'default'),
'next_text' => __('Next »', 'default'),
));
echo "
"; }
خب حالا توی همین فایل (functions.php) خط 249 تا 253 را حذف کنید و به جاش کد زیر رو قرار بدید:
حالا اگر صفحه رو یکبار رفرش کنید، به جای لینک های “صفحه بعدی” و “صفحه قبلی” شماره صفحات رو مشاهده می کنید.
نکته: اگر شما از قالبی به جز قالب 2012 استفاده می کنید و خود قالب دارای بخش شماره صفحات است، نیازی به این مرحله نیست، شما فقط نیاز دارید تا بتوانید بخش شماره صفحات رو select کنید، به زبان ساده باید class یا ID تگی که بخش شماره صفحات داخل اون هست رو داشتید باشید.
حالا قالب ما دارای بخش شماره صفحات است که div اون دارای کلاس wp98_page_numbers هست.
مرحله بعد این هست که جی کوئری رو به قالبمون اضافه کنیم. اگر جی کوئری به قالب شما ضمیمه نشده، کد زیر رو در فایل functions.php قرار بدید:
add_action('init', 'add_jquery_func'); function add_jquery_func(){
wp_enqueue_script('jquery');
}
مرحله بعد و آخر هم این هست که چند خط کد ساده جی کوئری رو در هدر قالب قرار بدیم تا بخش شماره صفحات ایجکسی کامل بشه. کد کامل جی کوئری ما به صورت زیر هست:
jQuery(document).ready(function($){ $("body").on( "click", ".wp98_page_numbers a", function(){
var _href = $(this).attr("href");
$("#primary").fadeTo("slow",0.4);
$("#primary").load( _href+" #primary",function(){
$("#primary").fadeTo("slow",1);
$("html, body").animate({scrollTop: $("#primary").offset().top-10},"fast");
});
return false;
});
});
البته اگر نمی خواهید برای اینکار دوباره فایلی رو به قالبتون اضافه کنید، کدتون رو به صورت زیر در functions.php قرار بدید:
add_action('wp_head', 'ajax_pagination'); function ajax_pagination() {
echo '';
}
برای توضیح کد جی کوئری باید گفت:
در:
$("body").on( "click", ".wp98_page_numbers a", function(){
ما ابتدا تمام لینک هایی که داخل کلاس wp98_page_numbers بودند رو به صورت on سلکت کردیم. دلیل این کار (سلکت کردن به صورت on) این هست که وقتی بخش های جدید به صفحه از طریق DOM اضافه میشه، حالت click ساده روی اونها کار نمی کنه.
یعنی نمی تونستیم، از کد زیر برای سلکت تمام لینک های شماره صفحات استفاده کنیم:
$('.wp98_page_numbers a').click( function(){...
همچنین برای اینکار قبلا از تابع live به جای on استفاده میشد، که توی نسخه های جدید جی کوئری تابع live حذف شده است. (در اینجا اگر از قالب خودتون استفاده می کنید و قالبتون دارای شماره صفحات به صورت پیشفرض هست، به جای wp98_page_numbers کلاس تگی که لینک های شماره صفحات در اون هستند رو قرار بدید)
در:
var _href = $(this).attr("href");
ما آدرس لینکی که کاربر روی اون کلیک کرده رو در متغییر href_ ذخیره می کنیم. (برای کارهای بعدی)
در:
$("#primary").fadeTo("slow",0.4);
در این خط ما شفافیت div کل (تگی که تمام نوشته های اون صفحه در اون قرار داره) رو کم می کنیم، تا مشخص بشه که عملیاتی در حال انجام هست. (این قسمت رو در شماره صفحات گوگل شاید دیده باشید)
هم چنین شما به جای اینکار می تونید یک div برای preloader درست کنید و وقتی روی لینک کلیک شد، اون div رو نشون بدید. (اگر از قالب خودتون استفاده می کنید، به جای #primary باید کلاس یا ID تگی که تمام نوشته های اون صفحه و شماره صفحات در اون هستند رو قرار بدید)
در:
$("#primary").load( _href+" #primary",function(){
ابتدا باید گفت توی جی کوئری تابع های دیگری هم برای کار با ajax هست که کامل ترینشون هم تابع .ajax هست ولی در اینجا با همین تابع ساده .load می تونیم کارمون رو انجام بدیم.
در این خط کا اول می گیم که در primary# محتوای جدید بارگذاری (load) شود، که محتوای جدید از لینک صفحه جدیدی که روش کلیک شده خونده میشه.
و در
_href+" #primary"
هم گفته ایم که محتوا باید از آدرس صفحه متغیر href_ (لینکی که روش کلیک شده) خونده بشه.
همچنین پارامتر دوم تابع load هم callback تابع هست، یعنی وقتی محتوا از صفحه دیگر با موفقیت دریافت شد، اجرا میشه. (اگر از قالب خودتون استفاده می کنید، به جای #primary باید کلاس یا ID تگی که تمام نوشته های اون صفحه و شماره صفحات در اون هستند رو قرار بدید)
در:
$("#primary").fadeTo("slow",1);
گفته ایم که div محتوا رو که محوش کرده بودیم، نمایان بشه. (اگر از قالب خودتون استفاده می کنید، به جای #primary باید کلاس یا ID تگی که تمام نوشته های اون صفحه و شماره صفحات در اون هستند رو قرار بدید)
در:
$("html, body").animate({scrollTop: $("#primary").offset().top-10},"fast");
هم گفته ایم که با انمیشن، اسکرول به بالای صفحه بیاد. (اگر از قالب خودتون استفاده می کنید، به جای #primary باید کلاس یا ID تگی که تمام نوشته های اون صفحه و شماره صفحات در اون هستند رو قرار بدید)
در آخر هم با return false گفته ایم که وقتی روی لینکی کلیک میشه، رفتار پیشفرض مرورگر (که کاربر به صفحه ای که کلیک کرده باید انتقال داده بشه) غیرفعال بشه.
البته هدف از این مقاله بیشتر آموزش بود. امیدوارم استفاده لازم رو کرده باشید.
مطالب زیر را حتما مطالعه کنید
نمایش آخرین مطالب دسته ای خاص
ما معتقدیم که وردپرس یک سیستم وبلاگ ساده نیست و میتونه خیلی انعطاف پذیر تر...
چگونه با زمینه های دلخواه نام نویسنده ی مهمان را قرار دهیم؟
سلام به همه ی دوستان وردپرسی مخصوصا از نوع نود و هشتی!حتما تا به حال...
درگاه پرداخت در افزونه EDD + آموزش ویدیویی
سلام به همه ی همیار وردپرسی های عزیزدر جلسه پیش در مورد سابقه ی پرداخت در...
پشتیبانی آنلاین در وردپرس با Zopim Live Chat
بروز رسانی و ویرایش کامل در تاریخ 1394/06/24پشتیبانی آنلاین در وردپرس با افزونه ی کاربردی...
ساخت اسلایدر وردپرس slideshow با Cyclone slider
بروزرسانی توسط عباس خلجی در تاریخ 17 بهمن 1395 باسلام خدمت وردپرسی‌های عزیز؛ قرار دادن...
ssl برای وردپرس !!
ssl چیست؟از این پرتکول برای امن کردن پرتکول های غیرامن مانند HTTP ، LDAP ،...