آشنایی با افزونه Ajax Load More برای پیمایش بی پایان در وردپرس

افزونه Ajax Load More برای پیمایش بی پایان در وردپرس

همه مدیران وب سایت ها تمام سعی خود را می کنند تا کارایی سایت خود را بالاتر برده و بازدیدکنندگان را برای بازگشت مجدد به سایت ترغیب کنند. یکی از بهبودهایی که می توانید در سایت خود اعمال کرده و کارایی آن را بالاتر ببرید تکنیک infinite scrolling یا اسکرول کردن بی پایان است. در این مقاله به آموزش افزونه Ajax Load More برای پیمایش نامحدود در وب سایت که منجر به افزایش سرعت وردپرس و تجربه کاربری بهتر می شود، می پردازیم.

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

بسیاری از وبلاگ ها از یک لینک ” نوشته های قدیمی” در انتهای صفحه اصلی، وبلاگ یا دیگر صفحات آرشیو برای تشویق کاربران به خواندن نوشته های دیگر سایت استفاده می کنند. اما سایت های دیگری نیز وجود دارند که از مزایای اسکرول کردن بی پایان (infinite scrolling) یا دکمه “بارگذاری نوشته های بیشتر” بهره می برند. بعضی از سایت هایی که می توانند از این ویژگی استفاده زیادی کنند، عبارتند از: وب سایت های عکاسی، وب سایت های محتواهای لیست شده (listicles) و وب سایت های محتوای ویروسی (وایرال).

در تکنیک infinite scrolling به جای بارگذاری تمام صفحه جدید، دکمه “Load More Posts” کار می کند . و از جاوا اسکریپت برای فچ کردن مجموعه بعدی محتوا استفاده می شود. این کار تجربه کاربری بهتری ایجاد کرده و شانس دیده شدن محتواهای بیشتر سایت را افزایش می دهد.

افزونه Ajax Load More یکی از بهترین افزونه های اسکرول کردن بی پایان وردپرس برای بارگذاری تنبل نوشته ها، پست های تکی، صفحات، کامنت ها و بسیاری موارد دیگر با کوئری های قدرت گرفته از Ajax است. به همین دلیل این افزونه جزء بهترین افزونه های Lazy Load وردپرس است.

آموزش افزونه Ajax Load More و نحوه اسکرول کردن بی پایان (Infinite Scrolling) صفحات در وردپرس

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

بعد از اینکه افزونه نصب شد آن را فعال کنید. پس از فعال سازی افزونه منوی جدیدی به نام Ajax Load More به پیشخوان وردپرس اضافه خواهد شد.

در منوی Ajax Load More زیرمنوهای مختلفی وجود دارد. که هریک بخشی از قابلیت های این افزونه را فعال می کند. در ادامه آموزش به بررسی این زیرمنوها می پردازیم.

آموزش تنظیمات عمومی افزونه Ajax Load More

با کلیک کردن بر روی زیر منوی Settings وارد صفحه تنظیمات عمومی افزونه می شوید. در این صفحه نمی توانید تغییرات زیادی اعمال کنید. تنها می توانید دو ویژگی را بدون اینکه عملکرد هسته افزونه را مختل کنید، تغییر دهید.

✅ Button/Loading Style: در این قسمت می توانید یک استایل برای لود کردن انتخاب کنید. می توانید یک دکمه یا یک اسکرول بی پایان برای این کار در نظر بگیرید. اگر استایل infinite Scroll را انتخاب کنید. محتواها تنها با اسکرول کردن و بدون نیاز به کلیک بر روی دکمه خاصی بارگذاری می شوند.

✅ Editor Button: اگر می خواهید در ویرایشگر نوشته دکمه شورت کد را پنهان کنید باید این گزینه را فعال کنید.

اگر با CSS آشنایی داشته باشید می توانید استایل خود را نیز اضافه کنید.

تمپلیت تکرار کننده

افزونه Ajax Load More از یک سیستم قالب دهی برای مدیریت نمایش فرانت اند و استایل دهی محتوای Ajax loaded استفاده می کند. که به آن Repeater Template گفته می شود و در این بخش به آموزش آن می پردازیم.

روی زیرمنوی Repeater Template کلیک کنید. صفحه ای مشابه شکل زیر مشاهده خواهید کرد.

Repeater Template (قالب تکرار کننده) تمپلیتی برای نحوه نمایش نوشته ها وقتی اسکرول کردن بی پایان برای آنها اعمال می شود، است. ویرایش این صفحه نیاز به دانستن اطلاعات کدنویسی و آشنایی با زبان برنامه نویسی PHP دارد. اما قالب پیش فرض برای اکثر کاربران مناسب است.

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

این کد در حالت عادی در فولدر template-parts قالب شما قرار دارد. در این فولدر می توانید قالب ها را برای نمایش محتواهای مختلف سایت مشاهده کنید.

هنگامی که آن را پیدا کردید باید محتوای داخل این فایل را کپی کرده و در بخش Repeater Template افزونه Ajax Load More همانطور که در قسمت بالای آموزش گفته شد، پیست کنید.

فراموش نکنید که روی دکمه Save Template کلیک کنید تا تنظیمات شما ذخیره شود.

اگر می خواهید از قالب پیش فرض افزونه استفاده کنید، نکته مهمی که باید در نظر بگیرید این است که قالب تکرار کننده پیش فرض تنها نوشته های منتخب را نشان می دهد و شامل تمام نوشته ها نمی شود. اگر می خواهید تمام نوشته ها نشان داده شود باید در خط آخر قبل از تگ بسته </i> عبارت excerpt را با content جایگزین کنید.

اگر با زبان برنامه نویسی PHP آشنایی دارید می توانید این قالب را عوض کنید. در غیر این صورت مقدار پیش فرض نیز می تواند نیازهای شما را کاملاً برطرف کند. نسخه رایگان افزونه اجازه استفاده از بیش از یک repeater template را نمی دهد. شما با خریداری Custom Repeaters Add-on می توانید قالب های مختلفی برای انواع مختلف پست ها نصب و راه اندازی کنید.

برای فعال کردن Ajax Infinite Scrolling در نوشته ها و برگه های سایت خود باید یک شورت کد تولید کرده و آن را در هر صفحه اعمال کنید. این کار در زیرمنوی Shortcode Builder انجام می شود. که در ادامه آموزش افزونه Ajax Load More به بررسی این زیرمنو می پردازیم.

Shortcode Builder

در منوی Ajax Load More پیشخوان وردپرس روی زیرمنوی Shortcode Builder کلیک کنید.

در این صفحه از افزونه Ajax Load More تنظیمات زیادی را می توانید پیکربندی کنید. اما مفیدترین باکس هایی که می توانید تنظیمات آنها را پیکربندی کنید را در ادامه آموزش شرح می دهیم.

✅ Lable

در این قسمت می توانید متنی که هنگام بارگذاری بیشتر نوشته ها روی دکمه بارگذاری نشان داده می شود را تغییر دهید. افزونه به صورت پیش فرض از Older Posts استفاده می کند اما شما می توانید آن را تغییر دهید یا حتی این متن را فارسی کنید.

✅ Post Type

در این باکس به صورت پیش فرض تنها نوشته ها فعال هستند اما بهتر است برگه ها یا دیگر پست های سفارشی را نیز فعال کنید.

✅ Category

در این قسمت می توانید دسته های خاصی را شامل infinite scroll کنید و دسته های خاصی را از آن مستثنی نمایید.

✅ Author

در این باکس می توانید infinite scroll را برای یک نویسنده خاص اضافه کنید.

✅ Posts per Page

در این قسمت می توانید مشخص کنید که افزونه Ajax Load More چند نوشته را در هر بروزرسانی باید بارگذاری کند.

✅ Pause

این قسمت یک ویژگی بسیار مهم است. برای infinite scroll کردن درست باید این قسمت را False انتخاب کنید. اگر True را انتخاب کنید کاربران برای دیدن نوشته های بیشتر باید روی یک دکمه Load More کلیک کنند.

✅ Scrolling

مهم این است که این گزینه فعال باشد به طوری که نوشته ها با اسکرول کردن کاربر به سمت پایین به صورت خودکار بارگذاری شوند. بهتر است جزئیات تکنیکی این قسمت را تغییری ندهید.

هنگامی که همه تنظیمات را پیکربندی کردید، شورت کدی که در سمت راست صفحه در اختیار شما قرار داده شده است را کپی کنید.

تمام کاری که باید انجام دهید این است که این شورت کد را به صفحه ای که می خواهید infinite scroll برای آن ظاهر شود، اضافه کنید. به عنوان مثال می توانید یک صفحه به نام وبلاگ ایجاد کرده و شورت کد را در آن وارد کنید. سپس از این صفحه به عنوان صفحه پیش فرض وبلاگ استفاده کنید. توجه داشته باشید که در ویرایشگر گوتنبرگ وردپرس باید از بلوک کد کوتاه استفاده کنید.

همچنین می توانید شورت کد ایجاد شده را در فایل های قالب وردپرس استفاده کنید. فراموش نکنید که قبل از اعمال هر تغییری در ابتدا از قالب وردپرس خود پشتیبان گیری کنید. این کار را می توانید با استفاده از بهترین افزونه های پشتیبان گیری وردپرس انجام دهید.

شما باید فایل های قالب که می خواهید شورت کد را در آنها قرار دهید را پیدا کنید. بسته به اینکه قالب شما چگونه سازمان دهی شده است، این فایل ها معمولاً index.php، archives.php، categories.php و بسیاری موارد دیگر است. شما باید شورت کدی که کپی کرده اید را درست بعد از تگ endwhile وارد کنید.

اگر شورت کد را در فایل قالب اضافه می کنید باید این کار را از طریق تابع do_shortcode به صورت زیر انجام دهید.

echo do_shortcode('[ajax_load_more container_type="div" post_type="post"]');

سپس تغییرات را ذخیره کرده و سایت خود را مشاهده کنید.

ویژگی infinite scroll برای تمام وب سایت های وردپرسی لازم نیست. اما اگر سایت شما محتواهایی با اهمیت یکسان را منتشر می کند، با پیاده سازی infinite scroll می توانید بونس ریت سایت و تعداد صفحات در هر بازدید را بهبود دهید.

جمع بندی

افزونه Ajax Load More آسان ترین روش برای اضافه کردن infinite scrolling به وردپرس است. اگر شما اسکرول کردن بی پایان پایه را می خواهید، به هیچ Add-on دیگری نیاز نخواهید داشت. نصب و راه اندازی افزونه نیز بسیار ساده است. و بیشتر از 15 الی 30 دقیقه وقت شما را نخواهد گرفت.

این را هم بخوانید :

افزونه های Lazy Load وردپرس

افزونه a3 Lazy Load

افزونه Lazy Load for Videos

افزونه Smush Image Optimization