نحوه اضافه کردن یک انیمیشن Preloader در وردپرس (آموزش گام به گام)

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

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

در این مقاله، ما به شما نشان خواهیم داد که چگونه می‌توانید به راحتی یک Preloader را به وردپرس اضافه کنید.

Preloader چیست و چه زمانی باید از آن استفاده کنید؟

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

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

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

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

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

اگر می‌خواهید یک نمونه Preloader را همین الان ببینید بر روی دکمه پیش‌نمایش در هنگام ایجاد یک نوشته در وردپرس خود کلیک کنید تا یک نمونه زنده از Preloader را که با لوگوی وردپرس نمایش داده ‌می‌شود، مشاهده کنید.

وردپرس پیش‌نمایش زنده‌ای از نوشته شما را در یک پنجره جدید باز می‌کند، و قبل از نمایش کامل این پیش‌نمایش زنده، Preloader را به شما نشان می‌دهد.

بیایید باهم ببینیم که چگونه می‌توانیم به‌راحتی یک Preloader را به وب‌سایت وردپرس خود اضافه کنیم.

روش ۱. اضافه کردن Preloader در وردپرس با استفاده از افزونه WP Smart Preloader

ما این روش را به شما توصیه می‌کنیم، زیرا اجرای آن ساده‌تر است و نیازی به اعمال تغییرات در قالب وردپرس شما نیست.

اولین کاری که باید انجام دهید نصب و فعال‌سازی افزونه WP Smart Preloader است.

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

ابتدا باید یک سبک پیش‌بارگذاری (Preloader) یا انیمیشن بارگذاری صفحه را انتخاب کنید. این افزونه دارای شش انیمیشن داخلی است که می‌توانید هرکدام مدنظرتان بود را انتخاب کنید. همچنین می توانید HTML و CSS دلخواه خود را بارگذاری کنید تا یک Preloader سفارشی ایجاد کنید.

در مرحله بعد ، باید به قسمت Duration to show Loader  بروید. باید مدت زمان پیش‌بارگذاری را مشخص کنید. گزینه پیش فرض ۱۵۰۰ میلی ثانیه (۱.۵ ثانیه) است، اما در صورت تمایل می‌توانید آن را تغییر دهید.

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

روش ۲. اضافه کردن Preloader در وردپرس با استفاده از افزونه Preloader

این روشی قابل انعطاف است اما برای اجرای صحیح آن در سایت وردپرس شما به انجام برخی اقدامات اضافی احتیاج دارد.

اولین کاری که باید انجام دهید نصب و فعال‌سازی افزونه Preloader است.

پس از فعال‌سازی، برای اعمال تنظیمات افزونه باید به منوی افزونه ها، قسمت Preloader مراجعه کنید.

ابتدا باید کد رنگی را برای رنگ پس زمینه‌ای که می‌خواهید برای صفحه بارگیری استفاده کنید، وارد کنید. گزینه پیش فرض #FFFFFF (رنگ سفید) است. می‌توانید برای یافتن کد رنگ موردنظر خود، از یک ابزار انتخاب رنگ آنلاین استفاده کنید.

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

می‌توانید آن را در تمام صفحات وب‌سایت خود نمایش دهید، یا می‌توانید یک بخش خاص را برای نمایش  Preloader انتخاب کنید.

در آخر کدی را در اختیار شما قرار می‌دهد که باید درون فایل header.php قالب وردپرس خود قرار دهید.

قبل از ترک صفحه، فراموش نکنید که حتما تنظیمات خود را ذخیره کنید.

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

یک راه‌حل می‌تواند اضافه کردن این کد با استفاده ازیک افزونه Code Snippets یا افزونه site-specific باشد.

اکنون کدی که شما به آن نیاز دارید این است:

function wpb_add_preloader() {
echo '<div id="wptime-plugin-preloader"></div>';
}
add_action( 'wp_body_open', 'wpb_add_preloader' );

توجه داشته باشید که این روش روی قالب‌های وردپرس که از فانکشن () wp_body_open  استفاده کرده‌اند فعال خواهد بود. این قابلیت از وردپرس ۵.۲ به بعد اضافه شد، پس اگر قالب شما با این نسخه وردپرس سازگار نیست احتمالاً کد برای شما کار نخواهد کرد و باید به صورت دستی کد را اضافه کنید.

پس از افزودن کد، می‌توانید به وب سایت خود مراجعه کنید تا نتیجه کار را ببینید.

امیدواریم که این مقاله برای شما در افزودن Preloader به سایت خود مفید و کاربردی بوده باشد.