چگونه با استفاده از افزونه ، Preloding Animation رو به وردپرس اضافه کنیم ؟

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

Preloader Animation چیست؟

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

برای رفع این مشکل چاره چیه ؟

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

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

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

افزونه Preloader برای Preloding Animation

افزونه Preloader یکی از کارآمدترین ابزارهایی است که شما می‌توانید از آن برای افزودن Preloding Animation استفاده کنید. بعدازاینکه این افزونه را فعال کردید، یک گزینه به اسم Preloader به پیشخوان» افزونه‌ها اضافه خواهد شد که شما باید بر روی آن کلیک کنید. با انتخاب آن یک صفحه مشابه تصویر زیر برای شما باز خواهد شد:

تنظیمات افزونه

background color:

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

preloader image:

در این قسمت هم شما باید URL تصویر موردنظر خود را وارد کنید. اگر نمی‌خواهید از تصویر محرک پیش‌فرض این افزونه استفاده کنید، باید یک تصویر را در پوشه wp-content سایت خود بارگذاری کرده و URL آن را در این قسمت قرار دهید. Preloader Image Width و Preloader Image Height: در این قسمت باید طول و عرض دلخواه خود را برای تصویر preloader وارد کنید.

display preloader:

تعیین کنید که این تصویر در کدام قسمت از سایت نمایش داده شود.

ذخیره تغییرات تنظیمات

پس‌ازاینکه تمامی تغییرات دلخواه خود را وارد کردید بر روی “Save Changes” کلیک کنید تا تنظیمات بر روی سایت شما اجرا شود.

افزودن کد به فایل header.php

در تنظیمات این افزونه از شما درخواست می‌شود که یک قطعه کد را به قالب وردپرس خود اضافه کنید. ازاین‌رو باید کد زیر را به فایل header.php اضافه کنید.

<div id="wptime-plugin-preloader"></div>

البته این موضوع را هم در نظر بگیرید که با به‌روزرسانی قالب سایت، این کد از بین می‌رود. اگر شما از child theme در سایت وردپرسی خود استفاده می‌کنید، باید این کد را در فایل header.php اضافه کنید. این کد درواقع به شما این اطمینان را می‌دهد که حتی در صورت به‌روزرسانی قالب نیز، کد از بین نرود. حالا به سایت خود بروید و از اضافه شدن انیمیشن به سایت اطمینان حاصل نمایید.

function wpb_add_preloader() {

echo '<div id="wptime-plugin-preloader"></div>';

}

add_action( 'wp_body_open', 'wpb_add_preloader' );