no-img

با خرید هر یک از محصولات "همراز وردپرس" یک ماه هاست رایگان با ssl مادام العمر از تیم "همراز دیزاین" هدیه بگیرید

آخرین آپدیت های محصولات سایت همراز وردپرس

گزارش خرابی لینک
اطلاعات را وارد کنید .

شماره صفحات ایجکسی


ابتدا باید گفت، که این مقاله بیشتر جنبه آموزشی داره و برای استفاده از این مقاله نیاز دارید تا کمی با جی کوئری، پی اچ پی و وردپرس آشنایی داشته باشید.

فناوری ایجکس در وب هم باعث کاهش فشار در سرور و هم به اینترنت ضعیف ما کمک می کنه. مثلا توی سایتی اگر در حال خوندن مقالات یه دسته بندی خاص هستید و باید به صفحات دیگر مراجعه کنید، هر موقع شما وارد صفحه دیگری میشید تمام عکس ها و المنت های صفحه از نو بارگذاری می شوند و نیازی به این کار نیستید.
ایجکس کردن قسمت شماره صفحات در وردپرس کار بسیار ساده ای است (البته به لطف جی کوئری) و این کارو حتما در قالب خود انجام دهید.
برای شروع باید گفت که ما این کار رو در قالب دو هزار و دوازده وردپرس انجام می دیم.
قالب ۲۰۱۲ به صورت پیشفرض قابلیت شماره صفحات رو نداره، برای اضافه کردن شماره صفحات به این قالب ابتدا تابع زیر رو در فایل functions.php قرار بدید:
خب حالا توی همین فایل (functions.php) خط ۲۴۹ تا ۲۵۳ را حذف کنید و به جاش کد زیر رو قرار بدید:
حالا اگر صفحه رو یکبار رفرش کنید، به جای لینک های “صفحه بعدی” و “صفحه قبلی” شماره صفحات رو مشاهده می کنید.
نکته: اگر شما از قالبی به جز قالب ۲۰۱۲ استفاده می کنید و خود قالب دارای بخش شماره صفحات است، نیازی به این مرحله نیست، شما فقط نیاز دارید تا بتوانید بخش شماره صفحات رو select کنید، به زبان ساده باید class یا ID تگی که بخش شماره صفحات داخل اون هست رو داشتید باشید.
حالا قالب ما دارای بخش شماره صفحات است که div اون دارای کلاس wp98_page_numbers هست.
مرحله بعد این هست که جی کوئری رو به قالبمون اضافه کنیم. اگر جی کوئری به قالب شما ضمیمه نشده، کد زیر رو در فایل functions.php قرار بدید:
مرحله بعد و آخر هم این هست که چند خط کد ساده جی کوئری رو در هدر قالب قرار بدیم تا بخش شماره صفحات ایجکسی کامل بشه. کد کامل جی کوئری ما به صورت زیر هست:
البته اگر نمی خواهید برای اینکار دوباره فایلی رو به قالبتون اضافه کنید، کدتون رو به صورت زیر در functions.php قرار بدید:
برای توضیح کد جی کوئری باید گفت:
در:
ما ابتدا تمام لینک هایی که داخل کلاس wp98_page_numbers بودند رو به صورت on سلکت کردیم. دلیل این کار (سلکت کردن به صورت on) این هست که وقتی بخش های جدید به صفحه از طریق DOM اضافه میشه، حالت click ساده روی اونها کار نمی کنه.
یعنی نمی تونستیم، از کد زیر برای سلکت تمام لینک های شماره صفحات استفاده کنیم:
همچنین برای اینکار قبلا از تابع live به جای on استفاده میشد، که توی نسخه های جدید جی کوئری تابع live حذف شده است. (در اینجا اگر از قالب خودتون استفاده می کنید و قالبتون دارای شماره صفحات به صورت پیشفرض هست، به جای wp98_page_numbers کلاس تگی که لینک های شماره صفحات در اون هستند رو قرار بدید)
در:
ما آدرس لینکی که کاربر روی اون کلیک کرده رو در متغییر href_ ذخیره می کنیم. (برای کارهای بعدی)
در:
در این خط ما شفافیت div کل (تگی که تمام نوشته های اون صفحه در اون قرار داره) رو کم می کنیم، تا مشخص بشه که عملیاتی در حال انجام هست. (این قسمت رو در شماره صفحات گوگل شاید دیده باشید)
هم چنین شما به جای اینکار می تونید یک div برای preloader درست کنید و وقتی روی لینک کلیک شد، اون div رو نشون بدید. (اگر از قالب خودتون استفاده می کنید، به جای #primary باید کلاس یا ID تگی که تمام نوشته های اون صفحه و شماره صفحات در اون هستند رو قرار بدید)
در:
ابتدا باید گفت توی جی کوئری تابع های دیگری هم برای کار با ajax هست که کامل ترینشون هم تابع .ajax هست ولی در اینجا با همین تابع ساده .load می تونیم کارمون رو انجام بدیم.
در این خط کا اول می گیم که در primary# محتوای جدید بارگذاری (load) شود، که محتوای جدید از لینک صفحه جدیدی که روش کلیک شده خونده میشه.
و در
 

هم گفته ایم که محتوا باید از آدرس صفحه متغیر href_ (لینکی که روش کلیک شده) خونده بشه.
همچنین پارامتر دوم تابع load هم callback تابع هست، یعنی وقتی محتوا از صفحه دیگر با موفقیت دریافت شد، اجرا میشه. (اگر از قالب خودتون استفاده می کنید، به جای #primary باید کلاس یا ID تگی که تمام نوشته های اون صفحه و شماره صفحات در اون هستند رو قرار بدید)
در:
گفته ایم که div محتوا رو که محوش کرده بودیم، نمایان بشه. (اگر از قالب خودتون استفاده می کنید، به جای #primary باید کلاس یا ID تگی که تمام نوشته های اون صفحه و شماره صفحات در اون هستند رو قرار بدید)
در:
 

هم گفته ایم که با انمیشن، اسکرول به بالای صفحه بیاد. (اگر از قالب خودتون استفاده می کنید، به جای #primary باید کلاس یا ID تگی که تمام نوشته های اون صفحه و شماره صفحات در اون هستند رو قرار بدید)
در آخر هم با return false گفته ایم که وقتی روی لینکی کلیک میشه، رفتار پیشفرض مرورگر (که کاربر به صفحه ای که کلیک کرده باید انتقال داده بشه) غیرفعال بشه.
البته هدف از این مقاله بیشتر آموزش بود. امیدوارم استفاده لازم رو کرده باشید.
موفق باشید.
مطلب پیشنهادی ما:  نمایش برچسب ها در منوی بازشونده


ads

درباره نویسنده

مشارکت کننده در توسعه ی وبسایت همراز وردپرس تاریخ شروع فعالیت : 1396/08/28 همکاری با مجموعه ی همراز وردپرس افتخار بزرگیست ،سعی میکنم مقالات مفید و جدید وردپرس رو برای شما دوستان عزیز در همراز وردپرس منتشر کنم

علی زمینی 167 نوشته در همراز وردپرس – در این مسیر کنار شما هستیم دارد . مشاهده تمام نوشته های

چرا شما‌از تخفیفات ویژه ی اعضای کانال‌همراز وردپرس‌استفاده نکنید؟ عضویت در کانال همراز وردپرس

دیدگاه ها


دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *