لود سایت وردپرس به صورت ایجکس

استفاده از تکنولوژی های جدید مانند React و Angular باعت شده تا سایت های حالت پویاتری داشته باشند مواردی مانند نمایش موبایلی، جستجوی ایجکس، نمایش پاپ آپ و… بدون نیاز به لود مجدد سایت با این تکنولوژی‌ها امکان پذیر است.

اما سوالی که مطرح می شود این است که می‌توانیم از این تکنولوژی ها در سایت وردپرس هم استفاده کنیم یا خیر؟ پاسخ این سوال قطعا مثبت است و از آنجایی که وردپرس همیشه انعطاف پذیر بوده این کار هم نشد ندارد در ادامه در مورد لود ایجکس توضیح می دهیم و نحوه فعال کردن در وب سایت وردپرس را آموزش می دهیم.

لود ایجکسی چیست؟

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

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

چرا لود ایجکسی مهم است؟

سرعت یک سایت برای کاربران از اهمیت بلایی برخوردار است و کاربران انتظار ندارند که فاصله کلیک بر روی لینک ها تا نمایش المان ها در سایت طولانی شود، یک نمونه موفق سایت دیجی کالا است که در آخرین تغییرات از فریم‌ورک هایی مانند React و Next ،Node استفاده کرده و لود صفحات اش بسیار سریع شده‌اند.

با گسترش روز افزون تکنولوژی های جدید کاربران انتظار دارند با کلیک بر روی لینک ها به سرعت محتوای صفحات برای آن ها نمایش داده شود و به نوعی ذهن و چشم آن ها به لود سریع صفحات عادت کرده، با ایجکس می‌توانید این امکان را فراهم کنید تا برخلاف سیستم های کلاسیک کاربران تجربه کاربری بهتری در هنگام کار کردن با سایت شما داشته باشند.

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

چگونه لود ایجکس را به وب سایت اضافه کنیم؟

برای اضافه کردن لود ایجکس می توانید از یکی از روش های زیر استفاده کنید:

1. تغییر کل سایت و سیستم مدیریتی (CMS) آن به تکنولوژی های دیگر مانند React و Next
2. استفاده از فریمورک frontity برای توسعه وردپرس (ترکیب وردپرس + ری اکت)
3. استفاده از افزونه های وردپرس

موارد 1 و 2 به دلیل پیچیدگی بسیار و هزینه بالا، شاید برای 85 درصد کاربران وردپرس و صاحبان کسب و کارها پیشنهادات خوبی نباشند، اما مورد سوم را می‌توانید بدون هزینه و با نصب رایگان افزونه Ajax Loader به راحتی و در زمان کوتاهی پیاده سازی کنید که در ادامه آموزش کار با افزونه Ajax Loader را آموزش می دهیم.

معرفی افزونه Ajax Loader

پلاگین ایجکس لودر یک افزونه رایگان است که در مخزن وردپرس می توانید با سرچ ajax loader همانند تصویر افزونه را نصب و فعال کنید و یا از لینک زیر دانلود کنید:

 دانلود افزونه Ajax Loader

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

ویژگی های افزونه ایجکس لودر

• دارای صفحه تنظیمات اختصاصی
• دارای افکت های گرافیگی لودینگ
• قابلیت اضافه کردن افکت لود اختصاصی
• کاملا سازگار با افزونه‌های کش وردپرسی همانند افزونه راکت
• سبک و بهینه
• سازگار با قالب‌های وردپرسی
• سازگار با فروشگاه‌ساز ووکامرس
• دارای سیستم کش داخلی مرورگر

آموزش کار با افزونه Ajax Loader

بعد از نصب افزونه در پیشخوان وردپرس در قسمت ابزارها گزینه ایجکس لودر اضافه می شود این افزونه با داشتن صفحه تنظیمات اختصاصی و تنظیمات مختلف قابل سفارشی سازی است که می توانید تنظیمات زیر را انجام دهید:

1- تعیین لینک ها برای نمایش ایجکس

می توانید تعیین کنید که چه لینک هایی در سایتتان ایجکسی لود شوند و چه لینک هایی به صورت معمولی و غیر ایجکسی بارگذاری شوند برای این کار تگ a مورد نظر را در قسمت مستثنی کردن لینک های سایتتان اضافه کنید.

2- تنظیم افکت های گرافیگی لودینگ

این افزونه دارای 8 افکت لودینگ زیبا و مدرن برای سایت است که می توانید یکی از موارد زیر را از لیست انتخاب کنید:

• ساده
• شیشه ای
• فانتزی
• تیره
• سپیا (گرم)
• سیاه و سفید
• شیشه تیره
• اشعه ایکس

علاوه بر موارد بالا در تنظیمات افزونه ایجکس لودر می توانید به سادگی کلاس CSS افکت لودینگ اختصاصی را برای افزونه تعریف کنید، تنها نیاز است که کمی CSS بلد باشید تا بتوانید از افکت های لودینگ اختصاصی خودتان بهره ببرید. در قسمت افکت های گرافیکی می توانید افکت مورد نظرات را اضافه کنید.

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

ناگفته نماند مدت زمانی که کاربر در حال لود صفحات سایت شماست، می تواند بهترین زمان برای برند سازی و ثبت شعار کسب و کار شما در ذهن کاربر باشد! به همین دلیل پیشنهاد می کنیم یک افکت لودینگ با استفاده از شعار کسب و کار خود برای بیننده و کاربر فراهم و طراحی کنید.

3- سیستم کش داخلی مرورگر

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

نکته: کش داخلی این افزونه به هیچ عنوان ناسازگار با سیستم های کش سمت سرور مثل افزونه راکت و یا کش وارنیش (Varnish Cache) ندارد و به خوبی و هماهنگ شده به کار خود ادامه می دهد، اما اگر وبسایت بسیار پویا و با محتوای داینامیک زیادی دارید ما استفاده از این آپشن را به هیچ عنوان به شما پیشنهاد نمی کنیم.

فایل های استاتیک و کش شده داخل مروگر کاربران سایت شما بعد از گذشت یک مدت زمان معین برای همیشه از بین خواهند رفت و نوعی فایل موقت می باشند و  این مدت زمان توسط شخص شما قابل تنظیم است برای منقضی شدن اتوماتیک فایل های کش شده داخل مرورگر کاربران می توانید یکی از موارد زیر انتخاب کنید:

• بعد از 30 دقیقه
• بعد از 1 ساعت (منطقی ترین حالت)
• پس از 2 ساعت
• بعد از 3 ساعت
• پس از 6 ساعت
• بعد از 10 ساعت
• بعد از 12 ساعت
• پس از 24 ساعت (یک روز کامل!)
• بعد از 48 ساعت (2 روز کامل!!)

علاوه بر موارد بالا این افزونه یک حالت دیگر هم دارد به نام سشن مود (Session Mode) در این حالت فایل های کش شده درون مرورگر کاربران، با بسته شدن مرورگر کاربر برای همیشه از بین خواهند رفت، استفاده از این حالت هم می تواند در مواردی کارساز باشد.

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

نکته: اگر صفحاتی مثل صفحه پنل کاربری و یا صفحه سبد خرید دارید که محتوایی کاملا داینامیک و پویا دارند می توانید به سادگی و با وارد کردن آدرس صفحات مورد نظر را از روند کش مروگر مستثنی کنید:

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

شما هم با نصب افزونه Ajax Loader با کمترین هزینه ممکن می توانید یک سیستم لودینگ ایجکس شبیه به تکنولوژی های روز مانند ری اکت و انگولار داشته باشید.

نکته: اگر علاقه مند به ری اکت هستید حتما سری به دوره ری اکت راست چین اکادمی بزنید.