افزودن صفحه لودینگ وردپرس

محتوانوشته

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

افزودن صفحه لودینگ وردپرس

بیشتر بخوانید: بهترین پلاگین یا افزونه های فارسی ساز وردپرس

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

بهترین را برای افزودن انیمشین به سایت استفاده از تم کودک است. سپس شما باید فایل header.php را پیدا و کد زیر را بعد از تگ <body> کد زیر را قرار دهید :

<!--CSS Spinner-->
<div class="spinner-wrapper">
<div class="spinner"></div>
</div>

در نهایت فایل را ذخیره کنید.

اکنون باید کد CSS را برای استایل انیمیشن خود اضافه کنید. شما باید در فایل style.css پوسته خود کد زیر را اضافه کنید:

.spinner {
  margin: 100px auto;
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}

.spinner > div {
  background-color: #333;
  height: 100%;
  width: 6px;
  display: inline-block;
  
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

سپس قبل از اینکه تغییرات خود را ذخیره کنید، حال قسمت “margin: 100px auto;” را حذف کنید و جای آن کد زیر را قرار دهید.

position: absolute;
top: 48%;
left: 48%;

در نهایت آن را ذخیره نمائید.

حال برای فعال سازی صفحه لودینگ، باید یک کد جی کوئری هم به فایل قالب خود اضافه کنید. برای انجام این کار، به فایل header.php برگردید و کدهای زیر را قبل از بسته شدن تگ بدنه وارد نمائید:

<script>
$(document).ready(function() {
//Preloader
preloaderFadeOutTime = 500;
function hidePreloader() {
var preloader = $('.spinner-wrapper');
preloader.fadeOut(preloaderFadeOutTime);
}
hidePreloader();
});
</script>

سپس فایل خود را ذخیره کنید.

بیشتر بخوانید: آموزش ساخت و کار با فهرست وردپرس | تغییر و تنظیمات منو در وردپرس

بهترین افزونه های لودینگ (بارگذاری)

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

1- افزونه لودینگ برای وردپرس LoftLoader

صفحه لودینگ وردپرس | لودینگ برای وردپرس |

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

بیشتر بخوانید: رفع خطای لودینگ المنتور در وردپرس

2- افزونه لودینگ برای وردپرس WP Smart Preloader

لودینگ در وردپرس | افزونه لودینگ وردپرس

افزونه WP Smart Preloader جزء بهترین افزونه های لودینگ (بارگذاری) می باشد که یک چرخش معمولی در هنگام بارگذاری سایت ایجاد می کند. این افزونه با تمامی مرورگرهای وب سازگار است و از تمامی صفحه نمایش های مختلف و مدرن پشتیبانی می کند. این پلاگین وردپرس رابط کاربری بسیار ساده ای دارد به گونه ای که هرکسی با هر میزان توانایی که دارد می تواند از آن جهت بهبود تجربه کاربری استفاده کنید.

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

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

بیشتر بخوانید: افزونه WordPress Preloader Unlimited | پلاگین طراحی لودینگ برای سایت های وردپرسی

3- افزونه لودینگ صفحه وردپرس WP Page Transition

افزونه لودینگ صفحه وردپرس | افزونه لودینگ در وردپرس

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

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

بیشتر بخوانید: پکیج محصولات سئو و سرعت در وردپرس ( 18 افزونه مهم و کاربردی در زمینه سئو و بهینه سازی )

4- افزونه لودینگ در وردپرس PageLoader

افزودن صفحه لودینگ وردپرس | بهترین افزونه های لودینگ (بارگذاری)

افزونه PageLoader یکی دیگر از بهترین افزونه های لودینگ (بارگذاری) می باشد که تاکنون ارائه شده است. این افزونه به صورت کامل ریسپانسیو می باشد به گونه ای که کلیه کاربران شما در تمامی صفحه نمایش ها صفحه لودینگ وردپرس را به بهترین شکل مشاهده می کنند. همچنین شما می توانید هرگونه تغییری را در این افزونه اعمال کنید. علاوه بر آن شما می توانید از تصاویر آماده برای صفحه لودینگ استفاده کنید یا اینکه می توانید خودتان به دلخواه یک تصویر اضافه کنید. می توانید حداکثر پنج پیام خوشامدگویی را به آنها نشان دهید. آزادی استفاده از فونت تم و سفارشی کردن تایپوگرافی در دسترس است. همچنین می توانید در حین نمایش صفحه بارگیری، یک پیغام سفارشی در پس زمینه سایت خود اعمال کنید.

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

بیشتر بخوانید: ساخت صفحه 404 در وردپرس به صورت سفارشی | چگونه صفحه 404 دلخواه خود را بسازیم؟

5- افزونه وردپرس بارگذاری صفحه Flat Preloader

افزودن صفحه لودینگ وردپرس | بهترین افزونه های لودینگ (بارگذاری)

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

سفارشی سازی های متنوع: این افزونه از انواع گزینه ها برای سفارشی سازی پشتیبانی می کند.
ریسپانسیو: این افزونه به صورت ریسپانسیو توسعه داده شده است، به این معنی که اندازه و موقعیت آن بر اساس اندازه صفحه نمایش تنظیم می شود.

6- افزونه لودینگ وردپرس Preloader Plus

Preloader Plus یک افزونه ساده است که به راحتی با وب سایت های وردپرس برای ایجاد انتقال بار وب سایت متحرک چشم نواز ادغام می شود. این افزونه به خوبی با وردپرس ادغام می شود که کاربران می توانند هر گزینه تنظیم را تغییر دهند و بلافاصله تغییرات گسترده سایت را مشاهده کنند.

7- افزونه لودینگ برای وردپرس BH Custom Preloader

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

8- افزونه لودینگ صفحه وردپرسMAZ Loader

Maz Loader یکی از قدرتمندترین افزونه های صفحه لودینگ وردپرس در حال حاضر است. این یک افزونه کاربر پسند است که به شما این امکان را می دهد تا به سادگی تغییرات دلخواه را اعمال کنید. همچنین دارای مجموعه ای از ویژگی هایی مانند کنترل دستگاه، تنظیمات زمینه ها و موارد دیگر می باشد.

افزونه ها برای ایجاد صفحه لودینگ وردپرس

9- افزونه لودینگ صفحه وردپرس Custom Preloader

افزونه Custom Preloader یکی دیگر از افزونه های عالی وردپرس است که وقتی وب سایت شما بارگیری می شود و صفحه اول را مخفی می کند، شروع می شود تا اینکه مرورگر بارگیری را به طور کامل بارگیری کند. علاوه بر این، این افزونه دارای یک ویژگی سازنده لودینگ است که از این طریق کاربران می توانند پیش از بارگذاری های خود را با سهولت بسازند و سفارشی سازی کنند.

10- افزونه لودینگ صفحه وردپرس Preloader Unlimited

با استفاده از افزونه Preloader Unlimited کاربران می توانند تصویر گیف سفارشی خود را بارگذاری کنند یا یکی را از کتابخانه از پیش تعیین شده انتخاب کنند. کاربران همچنین می توانند جلوه های مختلف انتقال ایجاد نمایند.

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

آیا افزودن صفحه لودینگ باعث کندی بیشتر سایت می‌شود؟

در صورتی که از یک افزونه باکیفیت و استاندارد در این خصوص استفاده کنید، باعث کندی سرعت سایت شما نخواهد شد.

آیا استفاده از لودینگ در وردپرس بر سرعت سایت تأثیر دارد؟

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

آیا امکان سفارشی‌سازی لودینگ وردپرس وجود دارد؟

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

آیا می‌توان لودینگ وردپرس را فقط برای برخی صفحات فعال کرد؟

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

آیا استفاده از افزونه وردپرس بارگذاری صفحه روی سئو سایت تأثیر دارد؟

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

چگونه می‌توان زمان نمایش لودینگ وردپرس را تنظیم کرد؟

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

بیشتر بخوانید: چگونه در ووکامرس محصول جدید اضافه کنیم؟

جمع بندی

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

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

منبع: wptablebuilder