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


نویسنده:
یکشنبه 24 فروردین 1399
نمایش پست‌های بیشتر با آجاکس

در این مقاله قصد داریم نحوه‌ی نمایش مطالب بیشتر با 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 به صورت لود بی نهایت دریافت کنید!

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

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

اگر می‌خواهید نام، تاریخ عضویت، ایمیل و اطلاعات دیگری از کاربر وارد شده به وب سایت را بدون نیاز به...

آموزش کامل حلقه مطالب وردپرس | آموزش توابع درون حلقه

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

کار با زمینه‌های دلخواه وردپرس | بدون نیاز به افزونه

در این مقاله به ایجاد زمینه‌های دلخواه در وردپرس می‌پردازیم. با استفاده از زمینه دلخواه می‌توان فیلدهای سفارشی برای پست‌ها...

ایجاد صفحه بندی در وردپرس بدون نیاز به افزونه

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

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

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

  1. sunshine گفت:

    سلام. یک سوال . میشه درباره قسمتی که گفتید (در خط 16 کد مربوط به نمایش پست‌های خود را قرار دهید) توضیح بیشتری بدید. متوجه نمیشم چه کدی از قالبم را باید به کجای خط 16 اضاف کنم ؟ خود خط 16 کد داره ایا باید پاک بشه و جایگزین شه

    • سلام دوست عزیز، این بخش برای نمایش پست‌ها هستش. میتونید این خط رو پاک کنید و کد نمایش محتوا رو قرار بدید. یعنی میتونید چند خط html اضافه کنید داخلش عنوان و تصویر پست‌ها رو دریافت کنید و نمایش بدید. این بخش داخل حلقه مدام تکرار میشه و هر بار پست‌های بیشتری لود میشن

  2. sanja گفت:

    همین رو بخوایم به نظرات comments_template تغییر بدیم چیکار کنیم ؟ یعنی نظرات با این اجکس لود شن …

    • سلام تقریبا مراحل همینه اما جزییات کار کمی متفاوته. در قالب یه کامنت نمیشه این موضوع رو توضیح داد سعی می‌کنیم یه آموزش‌ هم برای این موضوع قرار بدیم ولی اگر الان بهش نیاز دارید به انگلیشی سرچ کنید آموزش‌هاش وجود داره.

  3. میلاد گفت:

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

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

  4. Hosein گفت:

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

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

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