بازیار ورکبازیار ورکبازیار ورکبازیار ورک
  • اخبار تکنولوژی
  • طراحی وب
    • وردپرس
    • آموزش HTML
  • آموزش آفیس
    • word
    • Excel
    • Powerpoint
  • آموزش گرافیک
    • فتوشاپ
    • آموزش عکاسی
    • ویرایش فیلم
    • ویرایش عکس
    • سه بعدی و انیمیشن
  • سئو
  • معرفی نرم افزار
  • مجله موفقیت
  • مجله کسب و کار
  • ترفندها
Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
کامنت هاى اسپم در وردپرس
راهکارهای مقابله با کامنت هاى اسپم در وردپرس
آگوست 28, 2022
آموزش اصلاح لینک های شکسته در وردپرس
آموزش اصلاح لینک های شکسته در وردپرس
آگوست 28, 2022

آموزش preloader در وردپرس

آموزش preloader

نحوه اضافه کردن یک انیمیشن 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 مراجعه کنید.

wpsmartloader-settings

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

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

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

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

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

بیشتر بخوانید  آموزش نصب گوگل آنالیتیکس در وردپرس

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

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

افزونه preloader در وردپرس

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

در مرحله بعد، شما باید لینک تصویر Preloader مورد نظر خود را وارد کنید. این افزونه با یک تصویر متحرک پیش‌فرض همراه است. پس از آن باید اندازه عرض و ارتفاع 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 به سایت خود مفید و کاربردی بوده باشد.

تعداد بازدید: 339
اشتراک گذاری
1
سر دبیر
سر دبیر

پستهای مرتبط

سئو سایت وردپرس
نوامبر 15, 2022

سئو سایت وردپرس


ادامه مطلب
Plugin Organizer
اکتبر 9, 2022

افزایش سرعت سایت وردپرس با Plugin Organizer


ادامه مطلب
cURL error 28
اکتبر 3, 2022

چگونه ارور cURL error 28: Connection timed out را در وردپرس رفع کنیم؟


ادامه مطلب

دیدگاهتان را بنویسید لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مطالب پربازدید

  • آموزش preloader آموزش preloader در وردپرس (339)
  • یادگیری برنامه نویسی بهترین بازی‌ها برای یادگیری برنامه نویسی را بشناسید (281)
  • آموزش ایجاد و مدیریت فهرست مطالب در Word (252)
  • ویندوز ۱۲ تصویر رابط کاربری ویندوز ۱۲ به‌طور اتفاقی لو رفت (245)
  • بازیابی فایل از دست رفته ورد بازیابی فایل از دست رفته ورد (تمامی نسخه های آفیس) (238)
  • آموزش ایجاد کتاب در Word آموزش ایجاد کتاب در Word (237)
  • محیط نرم افزار Word 2016 آشنایی با محیط نرم افزار Word 2016 (222)
  • ایموجی ها در فتوشاپ ایموجی ها در فتوشاپ (204)
  • ۵ تا بهترین افزونه کروم برای وردپرس ۵ تا بهترین افزونه کروم برای وردپرس (189)
  • رمز ورود وب سایت وردپرس چگونه رمز ورود وب سایت وردپرس خود را تغییر دهیم ؟ (178)
© 2022 bazyarwork by آورنگ | All Rights Reserved | Powered by WordPress