نحوه افزودن انیمیشن پیش بارگذار به وردپرس (مرحله به مرحله)

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

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

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

Adding a preloader to your WordPress website

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

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

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

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

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

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

در حالی که نوشتن پست وبلاگ در وردپرس.

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

WordPress post preview preloader

با این گفته ، بیایید نگاهی بیندازیم که چگونه می توانید به راحتی یک پیش بارگذار را به وب سایت وردپرس خود اضافه کنید.

روش 1. افزودن پیش بارگذار در وردپرس با استفاده از WP Smart Preloader

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

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

برای پیکربندی تنظیمات افزونه ، باید از صفحه تنظیمات »پیش بارگذار WP هوشمند بازدید کنید.

WP Smart Preloader settings

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

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

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

Set preloader duration and fade out

همچنین می توانید زمان کم شدن لودر را تنظیم کنید. گزینه پیش فرض 2500 ثانیه یا 2.5 ثانیه است.

سرانجام ، فراموش نکنید که برای ذخیره تنظیمات خود بر روی دکمه “ذخیره تغییرات” کلیک کنید.

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

WP Smart Preloader Preview

روش 2. افزودن پیش بارگذار در وردپرس با استفاده از افزونه پیش بارگذار h4>

این روش انعطاف پذیر است اما برای پیاده سازی صحیح آن در سایت وردپرس .

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

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

Preloader settings

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

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

اگر می خواهید از انیمیشن دیگری استفاده کنید ، پیوندی برای بارگیری تصویر پیش بارگذار متحرک از وب سایت شخص ثالث پیدا خواهید کرد. سپس می توانید آن تصویر را در پوشه wp-content خود بارگذاری کرده و URL را در اینجا جای گذاری کنید.

در مرحله بعدی ، باید محل انتخاب مکان پیش بارگیری را انتخاب کنید.

Select preloader locations

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

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

 

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

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

اگر از طرح زمینه کودک ، خوب نیست کد را به پرونده header.php طرح زمینه فرزندتان اضافه کنید.

یک راه حل بهتر حتی افزودن این کد با استفاده از جداگانه است افزونه Code Snippets اضافه کرد ، یا در افزونه خاص سایت .

این کدی است که باید اضافه کنید:

تابع wpb_add_preloader () {
echo '
'؛ } add_action ('wp_body_open'، 'wpb_add_preloader')؛

توجه: این روش افزودن کد فقط در زمینه های WordPress کار می کند که با عملکرد wp_body_open () اضافه شده در وردپرس 5.2 .

این روش افزودن کد باعث می شود که کد شما حتی در صورت بروزرسانی موضوع نیز در آن باقی بماند.

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

Preloader preview

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

اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .

منبع:
https://www.wpbeginner.com/plugins/how-to-add-a-preloader-animation-to-wordpress/.

دیدگاهتان را بنویسید


Fatal error: Uncaught wfWAFStorageFileException: Unable to save temporary file for atomic writing. in /home/wekjriusd1/public_html/wp-content/plugins/wordfence/vendor/wordfence/wf-waf/src/lib/storage/file.php:35 Stack trace: #0 /home/wekjriusd1/public_html/wp-content/plugins/wordfence/vendor/wordfence/wf-waf/src/lib/storage/file.php(659): wfWAFStorageFile::atomicFilePutContents('/home/wekjriusd...', '<?php exit('Acc...') #1 [internal function]: wfWAFStorageFile->saveConfig('livewaf') #2 {main} thrown in /home/wekjriusd1/public_html/wp-content/plugins/wordfence/vendor/wordfence/wf-waf/src/lib/storage/file.php on line 35