آموزش افزودن Preloading Animation به وردپرس

آیا قصد دارید یک انیمیشن پیش بارگذاری کننده را به وب‌سایت وردپرسی خود اضافه کنید؟ پیش بارگذاری کننده انیمیشنی است که پیشرفت بارگذاری صفحه را در پس‌زمینه نشان می‌دهد. این به بازدیدکنندگان شما کمک می‌کند تا متوجه شوند که صفحه در حال بارگذاری است، که می‌تواند تجربه کاربری را بهبود و نرخ پرش سایت شما را کاهش دهد. اگر شما هم قصد دارید این قابلیت را به سایت خود اضافه کنید، به شما پیشنهاد می‌کنیم که این آموزش را تا انتها مشاهده کنید زیرا قصد داریم چگونگی افزودن Preloading Animation به وردپرس را به صورت کامل به شما عزیزان آموزش دهیم. با ما همراه باشید.

منظور از Preloading Animation چیست؟

قبل از اینکه بخواهیم شما را با نحوه اضافه کردن Preloading Animation به وردپرس آشنا کنیم، بهتر است با این قابلیت بیشتر آشنا شوید.

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

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

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

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

بیشتر بخوانید: سئو محلی چیست و local SEO چگونه کار می کند؟ 

انواع Preloading Animation

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

• پیش بارگذاری کننده‌های اسپینر: اسپینرهای متحرکی که در حین بارگذاری محتوا می‌‌چرخند.
• پیش بارگیری کننده‌های نوار پیشرفت: به صورت بصری پیشرفت بارگیری را با پر کردن نشان می‌دهد.
• پیش بارگذاری کننده‌های درصد: پیشرفت بارگذاری عددی را نمایش می‌دهد.
• پیش بارگذاری کننده‌های تمام صفحه: آن‌ها تمام صفحه را در حین بارگذاری پوشش می‌دهند تا یک تجربه کاربری جذاب را ارائه دهند.
• پیش بارگذاری کننده‌های لوگو: لوگوی وب سایت‌ها را با جلوه‌های چرخشی یا شکل‌دهی برای تقویت هویت برند ترکیب کنید.
• پیش بارگذاری‌های سفارشی: به صورت خلاقانه برای مطابقت با طراحی و سبک هر وب سایت طراحی شده است.
• پیش بارگذاری‌های مینیمالیستی: انیمیشن‌ها یا نمادهایی که بازخورد بارگذاری را بدون جلب توجه بیش از حد ارائه می‌دهند.

نحوه افزودن Preloading Animation به وردپرس

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

1- آموزش افزودن Preloading Animation به وردپرس با افزونه Preloader

یکی از بهترین و ساده‌ترین روش‌ها برای افزودن قابلیت پیش بارگذاری، استفاده از یک افزونه است. خوشبختانه پلاگین‌های مختلفی در این خصوص ارائه شده است که یکی از بهترین آنها افزونه WP Smart Preloader  است. این افزونه بیش از شش انیمیشن پیش بارگذاری داخلی را ارائه می‌دهد که می‌توانید از آن‌ها استفاده کنید یا می‌توانید انیمیشن‌های خود را با استفاده از HTML و CSS سفارشی ایجاد کنید.

در اولین قدم شما باید افزونه را در سایت خود نصب و فعال کنید. اگر با طریقه نصب افزونه آشنایی ندارید به شما پیشنهاد می‌کنیم که مطلب “چگونه در وردپرس افزونه اضافه کنیم؟ راه های نصب پلاگین در وردپرس” را مشاهده کنید.

پس از فعال‌سازی، از بخش تنظیمات روی گزینه WP Smart Preloader کلیک کنید. سپس روی منوی کشویی Smart Preloader کلیک کنید. حال در این قسمت می‌توانید انیمیشن‌های مختلفی را مشاهده کنید که میظتوانید از آنظها استفاده کنید.

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

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

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

پس از انتخاب یک انیمیشن، به بخش “مدت زمان نمایش لودر” مراجعه کنید. در اینجا می‌توانید مدت زمان پخش پیش‌لودر را تغییر دهید. به صورت پیش‌فرض این قسمت روی 1500 میلی ثانیه یا 1.5 ثانیه قرار گرفته است. این می‌تواند برای اکثر سایت‌ها به خوبی کار کند، اما در صورت تمایل می‌توانید آن را تغییر دهید.

در نهایت بعد از اینکه از تنظیم پیش بارگذاری راضی شدید، کافیست روی دکمه “ذخیره تغییرات” کلیک کنید تا تنظیمات برای شما ذخیره شود.

2- طریقه افزودن Preloading Animation به وردپرس با استفاده از LoftLoader

یک راه دیگر برای افزودن انیمیشن پیش بارگذاری به وب‌سایت وردپرس خود، استفاده از LoftLoader است. این افزونه همراه با انیمیشن‌های داخلی در اختیار شما قرار داده می‌شود که به شما این امکان را می‌دهد تا پیش بارگذاری را به روش‌های مختلف سفارشی کنید.

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

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

پس از آن، گزینه دلخواه خود را انتخاب و سپس به صفحه اصلی تنظیمات برگردید. در مرحله بعد، روی گزینه “پس زمینه” کلیک کنید. حال در این قسمت، می‌توانید رنگ پس‌زمینه را با کلیک بر روی کادر “انتخاب رنگ” تغییر دهید. همچنین می‌‌توانید تیرگی پس‌ زمینه را تغییر و یک انیمیشن پایانی را انتخاب کنید.

با ایجاد تغییرات، پیش‌نمایش به‌روزرسانی می‌شود، بنابراین می‌توانید تنظیمات مختلف را امتحان تا در نهایت یک طرح عالی را انتخاب کنید. در مرحله بعد، می‌توانید با کلیک بر روی گزینه “بارگذاری” انیمیشن را تغییر دهید.

می‌توانید با کلیک کردن روی عکس‌های کوچک مختلف در کادر بارگذاری انیمیشن، یک انیمیشن جدید انتخاب کنید. برای تغییر رنگ پیش بارگذاری، به سادگی یک رنگ جدید را در کادر “انتخاب رنگ” انتخاب کنید.

آموزش افزودن Preloading Animation وردپرس

پس از انجام این کار، روی فلش “بازگشت” کلیک کنید.

بعد، روی گزینه منوی “بیشتر” کلیک کنید. حال در این قسمت، می‌توانید مدت زمان پخش انیمیشن را با انتخاب «حداکثر زمان بارگذاری» تغییر دهید.

سپس می‌توانید مدت زمان کارکرد پیش‌لودر را وارد کنید.

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

هنگامی که از نحوه تنظیم دکمه راضی هستید، به سادگی روی دکمه «انتشار» کلیک تا پیش بارگیری کننده شما فعال شود.

سوالات متداول

جمع‌بندی

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

هنگامی که کاربران از یک وب‌سایت بازدید می‌کنند منابع مختلفی مانند تصاویر، اسکریپت‌ها و محتوا باید از سرور بازیابی شوند، بدون پیش بارگذاری، این فرآیند ممکن است کمی طول بکشد که این موضوع می‌تواند باعث شود کاربران سایت شما را ترک کنند. اما با ارائه یک انیمیشن جذاب در این فاصله، می‌توانید کاربران را برای مدت زمان بیشتری در سایت نگه دارید. ما در این مطلب شما را با آموزش افزودن Preloading Animation به وردپرس آشنا کردیم. امیدواریم این آموزش مورد رضایت شما عزیزان قرار گرفته باشد.

منبع: wpbeginner