استفاده از فناوری‌های جدید مانند React و Angular برای پویایی بیشتر سایت‌ها استفاده می‌شود. مواردی مانند صفحه نمایش موبایل، جستجوی Ajax، نمایش پاپ آپ و غیره. بدون نیاز به بارگذاری مجدد سایت با این فناوری ها امکان پذیر است.
اما سوالی که پیش می آید این است که آیا می توانیم از این فناوری ها در سایت وردپرس استفاده کنیم یا خیر؟ پاسخ به این سوال قطعا بله است و از آنجایی که وردپرس همیشه انعطاف پذیر بوده است، این کار قابل انجام نیست، در زیر در مورد بارگذاری Ajax توضیح می دهیم و نحوه فعال سازی آن را در وب سایت وردپرس یاد می گیریم.
بار آژاکس چیست؟
در حالت عادی، هر لینکی که کلیک می کنید یک درخواست GET از مرورگر شما به سرور سایت هدف ارسال می کند، یعنی. سایتی که در حال حاضر در آن هستید و پس از پردازش درخواست توسط سرور، یک پاسخ HTML به مرورگر شما ارسال می شود و صفحه مرورگر شما به روز می شود.
امروزه سیستم‌های مدرن‌تری برای بارگذاری وب‌سایتی طراحی شده‌اند که برخلاف گذشته، درخواست‌ها را به طور معمول ارسال نمی‌کنند و تکنولوژی آژاکس آنها به بیان ساده از صفحه استفاده می کنند مرورگر شما به روز نمی شود محتوا را نشان می دهد، حتی اگر این سیستم تفاوتی در سرعت بارگذاری صفحات شما ایجاد نکند، باز هم از نظر روانی و به اصطلاح تجربه ی کاربر این حس بهتری به کاربران سایت شما می دهد و حتی در 80 درصد مواقع کاربر احساس می کند سرعت بارگذاری سایت رشد کرد
چرا بارگذاری Ajax مهم است؟
سرعت یک سایت برای کاربران بسیار مهم است و کاربران انتظار ندارند که فاصله بین کلیک روی لینک ها و نمایش عناصر سایت زیاد باشد.نمونه موفق آن سایت دیجی کالا است که در تغییرات اخیر از فریمورک هایی مانند React و Next، از Node استفاده می کند و صفحات آن بسیار سریع بارگذاری می شوند.
با پیشرفت روزافزون فناوری های جدید، کاربران انتظار دارند که با کلیک بر روی لینک ها، محتوای صفحات به سرعت برای آنها نمایش داده شود و به نوعی ذهن و چشم آنها به بارگذاری سریع صفحه عادت کند، با Ajax می توانید این امکان را بر خلاف سیستم های کاربری کلاسیک تجربه ی کاربر از کار با سایت خود لذت ببرید.
با فعال کردن بارگذاری سایت به صورت آژاکس، نیازی به بارگذاری کل سایت نیست و فقط قسمت هایی که محتوای پویا دارند به روز می شوند، یعنی. نیاز به بارگذاری مجدد صفحه را کاهش دهید و بله بهبود عملکرد صفحه کمک می کند و باعث می شود کاهش پهنای باند خواهد بود
چگونه بار Ajax را به وب سایت اضافه کنیم؟
به اضافه کردن می توانید از یکی از روش های بارگذاری Ajax زیر استفاده کنید:
- تغییر کل سایت و سیستم مدیریت آن (CMS) به فناوری های دیگری مانند React و Next
- استفاده از فریم ورک frontity برای توسعه وردپرس (ترکیب WordPress + React)
- استفاده از افزونه های وردپرس
المان 1 و 2 ممکن است به دلیل پیچیدگی و هزینه بالا برای 85 درصد از کاربران و صاحبان مشاغل وردپرس پیشنهادهای خوبی نباشد، اما عنصر سوم را می توان به راحتی و در مدت زمان کوتاهی بدون هزینه و با نصب افزونه رایگان Ajax Loader در زیر پیاده سازی کرد. ما به شما نحوه کار با پلاگین Ajax Loader را آموزش می دهیم.
معرفی پلاگین Ajax Loader
افزونه لودر آژاکس این یک افزونه رایگان است که می توانید با جستجوی ajax loader در مخزن وردپرس یا دانلود آن از لینک زیر آن را نصب و فعال کنید:
افزونه Ajax Loader را دانلود کنید
این افزونه حجم بسیار کمی دارد و تنها با افزودن a فایل جاوا اسکریپت بسیار کوچک و کاملا فشرده، می توانید تمام لینک های داخلی سایت وردپرس خود را به طور کامل فشرده کنید مدرن و آژاکس برای شارژ
ویژگی های پلاگین Ajax Loader
- یک صفحه تنظیمات اختصاصی وجود دارد
- با بارگذاری جلوه های گرافیکی
- امکان افزودن یک افکت بار ویژه
- سازگاری کامل با افزونه های کش وردپرس مانند افزونه Rocket
- سبک و بهینه
- سازگار با تم های وردپرس
- سازگار با فروشگاه ساز ووکامرس
- دارای سیستم کش مرورگر داخلی است
آموزش کار با پلاگین Ajax Loader
پس از نصب افزونه در پیشخوان وردپرس در بخشی از ابزار گزینه لودر آژاکس علاوه بر این، این افزونه با داشتن صفحه تنظیمات اختصاصی و تنظیمات مختلف قابل شخصی سازی است که می توانید تنظیمات زیر را انجام دهید:
1- تعریف لینک های نمایش آژاکس
شما می توانید تعیین کنید که کدام لینک ها در سایت شما با EJEX بارگذاری شوند و کدام لینک ها به صورت عادی و غیر EJEX بارگذاری شوند، برای این کار تگ مورد نظر را به قسمت Exclude Links سایت خود اضافه کنید.
2- بارگذاری جلوه های گرافیکی را تنظیم کنید
این افزونه دارای 8 افکت بارگذاری سایت زیبا و مدرن است که می توانید یکی از موارد زیر را از لیست انتخاب کنید:
- فقط
- شیشه
- فانتزی
- تاریک
- سپیا (گرم)
- سیاه و سفید
- شیشه تیره
- رونتگن
علاوه بر موارد فوق در تنظیمات پلاگین لودر Ajax شما به راحتی می توانید یک کلاس CSS بارگذاری سفارشی برای افزونه تعریف کنید، فقط باید کمی CSS بدانید تا بتوانید از جلوه های بارگذاری سفارشی خود استفاده کنید. در قسمت جلوه های گرافیکی می توانید افکت ذکر شده در نظرات را اضافه کنید.
در تصویر زیر می توانید یک نمونه افکت اضافه شده به وب سایت را مشاهده کنید.
ناگفته نماند زمانی که کاربر صفحات سایت شما را بارگذاری می کند می تواند بهترین زمان برای برندسازی و ثبت شعار تجاری شما در ذهن کاربر باشد! به همین دلیل پیشنهاد می کنیم با استفاده از تگ لاین رشد کسب و کار خود یک افکت بارگذاری برای بیننده و کاربر تهیه و طراحی کنید.
3- سیستم کش داخلی مرورگر
یکی دیگر از قابلیت های این افزونه سیستم کش است که تمامی صفحات سایت شما را در مرورگر کاربر ذخیره می کند و برای دفعات بعدی صفحات با سرعت نمایشگرهای بسیار شگفت انگیز برای کاربر.
نکته: کش داخلی این افزونه به هیچ وجه با سیستم های کش سمت سرور مانند افزونه Rocket یا Varnish Cache ناسازگار است و به خوبی و هماهنگی به کار خود ادامه می دهد، اما اگر وب سایتی بسیار پویا با محتوای پویا زیاد دارید، ما استفاده از این گزینه را توصیه نمی کنید.
فایل های استاتیک و کش موجود در مرورگر کاربران سایت شما پس از مدتی برای همیشه از بین می روند و نوعی فایل موقت هستند و این مدت زمان توسط شما قابل تنظیم است. نشتی فایل هایی که به صورت خودکار در حافظه پنهان در مرورگر کاربر ذخیره می شوند، می توانید یکی از موارد زیر را انتخاب کنید:
- بعد از 30 دقیقه
- بعد از 1 ساعت (منطقی ترین حالت)
- بعد از 2 ساعت
- بعد از 3 ساعت
- در 6 ساعت
- بعد از 10 ساعت
- بعد از 12 ساعت
- در 24 ساعت (یک روز کامل!)
- در 48 ساعت (2 روز کامل!!)
علاوه بر موارد فوق، این افزونه حالت دیگری به نام دارد جلسه اصلاح شده (Session Mode) در این حالت فایل های کش شده در مرورگر کاربر با بسته شدن مرورگر کاربر برای همیشه از بین می روند، استفاده از این حالت نیز ممکن است در برخی موارد کارساز باشد.
استفاده از کش کوتاه مدت و عدم استفاده از زمان های طولانی مانند 24 ساعت به خصوص برای سایت های فروشگاهی توصیه می شود.
نکته: اگر صفحاتی مانند صفحه پنل کاربری یا صفحه سبد خرید با محتوای پویا دارید، می توانید به سادگی با وارد کردن آدرس، صفحات مورد نظر را از فرآیند کش مرورگر حذف کنید:
همیشه احتمال ناسازگاری با افزونه های کش وجود دارد بنابراین توصیه می شود قبل از نصب افزونه از سایت خود بک آپ بگیرید البته افزونه Ajax Loader با افزونه های کش مانند Rocket, Dragonizer, Total Cache, WordPress Fast Cache سازگار است.
همچنین می توانید افزونه Ajax Loader را با کمترین قیمت ممکن نصب کنید سیستم بارگذاری آژاکس مشابه فناوری های امروزی مانند React و Angular.
