نمایش مطالب بیشتر با Ajax بدون افزونه در وردپرس


نویسنده:
یکشنبه ۲۴ فروردین ۱۳۹۹
نمایش پست‌های بیشتر با آجاکس

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

چنین مواردی را در جستجوی تصاویر گوگل مشاهده کرده‌اید. در جستجوی تصاویر گوگل هر بار که به انتهای صفحه می‌رسید مجدداً تصاویر جدیدی بارگذاری می‌شوند طوری که انگار صفحه پایانی ندارد!
تمام این موارد بدون رفرش صفحه انجام می‌گیرد که به فناوری آجاکس ارتباط دارد!

Ajax چیست و چه کاربردی دارد؟

برای انجام این کار مراحل زیر را دنبال کنید:

نحوه‌ی نمایش مطالب بیشتر با Ajax (لود بی نهایت)

مرحله‌ی اول) اضافه کردن فایل جی‌کوئری به وردپرس

برای شروع کار در قالب خود یک فایل به نام myloadmore.js بسازید. در این فایل فعلاً کدی قرار نمی‌دهیم. فقط در این مرحله می‌خواهیم به کمک یک تابع وردپرسی فایل myloadmore.js را به قالب خود اضافه کنیم.

بنابراین وارد فایل functions.php قالب سایت خود شوید و کد زیر را در آنجا paste‌ کنید:

این قطعه کد کوچک به ما اجازه می‌دهد پارامترهای مورد نیاز فایل جی‌کوئری را تنظیم و ارسال کنیم. توجه کنید که اگر فایل myloadmore.js را داخل فولدر یا مسیر دیگری ایجاد کرده‌اید این آدرس را در wp_register_script قرار دهید.

 


مرحله دوم) ایجاد فایل myloadmore.js برای ایجاد ajax در اسکرول

در فایل جی‌کوئری که در مرحله‌ی قبل ساخته بودید، کدهای زیر را قرار دهید:

این کد مشخص می‌کند زمانی که اسکرول به ۱۰۰۰ پیکسلی انتهای صفحه رسید درخواست آجاکس ارسال شود. می‌توانید این اندازه را باتوجه به نیاز خود تغییر دهید.

در خط ۲۲ این قطعه کد، آیدی تگی را وارد کنید که قرار است پست‌های جدید به آن اضافه شوند. مثلاً اگر در صفحه‌ی آرشیو خود می‌خواهید پست‌ها به داخل تگ ul اضافه گردنند برای ul یک آیدی در نظر بگیرید و آن را به جای main# بنویسید. به جای کلمه‌ی article هم تگ نگهدارنده‌ی هر پست را وارد کنید. مثل li


مرحله سوم) ایجاد handler برای آجاکس

در این مرحله باید کد آجاکس مخصوص به وردپرس را بنویسیم. کافیست تابع زیر را در فایل functions.php قالب خود قرار دهید:

به کمک این تابع مشخص می‌کنیم که باهر بار لود به صورت آجاکس، چه مطالبی نمایش داده شوند. کافیست در خط ۱۶، کد مربوط به نمایش پست‌های خود را قرار دهید.

دو اکشن وجود در این قطعه کد مشخص می‌کنند که نمایش مطالب بیشتر با Ajax  برای چه کاربرانی باشد! در واقع کاربران لاگین کرده و وارد نشده را می‌توان به کمک این actionها جدا کرد!

حالا بعد از ذخیره سازی فایل‌های بالا صفحه‌ی موردنظر خود را رفرش کنید و پست‌های مدنظر را با ajax به صورت لود بی نهایت دریافت کنید!

مطالب زیر را حتما بخوانید

اینماد چیست؟ از سیر تا پیاز دریافت نماد اعتماد الکترونیک

اینماد یک نماد الکترونیک است که دریافت آن موجب افزایش اعتماد کاربران به و‌بسایت شما خواهد شد. تا دریافت آن...

رپورتاژ آگهی چیست؟ ۵ مزیت انکارناپذیر رپورتاژها

رپورتاژ آگهی نوعی تبلیغ موثر و پربازده است که در این مقاله قصد داریم مفهوم و مزایای آن را بررسی...

فونت آیکون چیست؟ معرفی فونت آیکون‌های محبوب

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

معرفی 1+10 افزونه گوگل کروم برای طراحان و توسعه‌دهندگان وب

بانصب و فعال کردن افزونه های گوگل کروم می‌توانید عملکرد مرورگر خود را بهبود ببخشید و آن را قدرتمندتر سازید!

دوره آموزش افزونه EDD

دوره آموزش افزونه EDD

اگر قصد ساخت یک فروشگاه آنلاین برای فروش انواع فایل‌های قابل دانلود ...

آموزش افزایش سرعت سایت

دوره آموزش افزایش سرعت وب‌سایت

مرورگر را باز می‌کنید و آدرس سایتتان را وارد می‌کنید. مرورگر شروع ...

دوره آموزش وردپرس فارسی

دوره آموزش وردپرس فارسی

در پکیج آموزش وردپرس فارسی یاد می‌گیرید که چطور از صفر و ...

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

4 پاسخ به “نمایش مطالب بیشتر با Ajax بدون افزونه در وردپرس”

  1. Hosein گفت:

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

    • سلام دوست عزیز، خود شما باید یه کاری کنید که برای هر دسته از حلقه‌ی مدنظر شما استفاده کنه! این کار با چند تا شرط و درج if قابل انجام هستش. کافیه نام دسته رو چک کنید و برای هر دسته بگید از چه حلقه‌ای استفاده شه.

  2. میلاد گفت:

    سلام. تشکر بابت مطلبتون.
    اگر بخوایم ایجکس رو داخل یک پلاگین فعال کنیم، بازم باید توابع رو داخل فایل functions.php قرار بدیم؟ اگر جواب منفیه، جای مناسب کجاست؟
    ممنونم

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

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

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