افزودن صفحه لودینگ وردپرس | بهترین افزونه های لودینگ (بارگذاری)
بارگذاری...سرعت بارگذاری صفحه نقش بسیار مهمی در عملکرد وب سایت شما ایجاد می کند. اگر بیش از یک یا دو ثانیه طول بکشد تا یک صفحه به طور کامل بارگذاری شود، این می تواند باعث ناامیدی کاربران شود که همین موضوع باعث می شوند آنها سایت شما را ترک کنند. از طرفی اگر شما برای بارگذاری صفحات خود یک انیمیشن جذاب درج کنید، می توانید تا حدودی به نگه داشتن کاربران کمک کند. صفحه لودینگ وردپرس به بازدیدکنندگان شما کمک می کند که متوجه شوند که صفحه در حال بارگذاری می باشد و احتمال ماندن آنها در سایت را افزایش می دهد. به این ترتیب، لودینگ برای وردپرس می تواند تجربه کاربری (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 جزء بهترین افزونه های لودینگ (بارگذاری) می باشد که یک چرخش معمولی در هنگام بارگذاری سایت ایجاد می کند. این افزونه با تمامی مرورگرهای وب سازگار است و از تمامی صفحه نمایش های مختلف و مدرن پشتیبانی می کند. این پلاگین رابط کاربری بسیار ساده ای دارد به گونه ای که هرکسی با هر میزان توانایی که دارد می تواند از آن جهت بهبود تجربه کاربری استفاده کنید.
بیشتر بخوانید: افزونه WordPress Preloader Unlimited | پلاگین طراحی لودینگ برای سایت های وردپرسی
3- افزونه لودینگ صفحه وردپرس WP Page Transition
افزونه WP Page Transition یکی دیگر از افزونه های لودینگ ممتاز برای وردپرس است که به شما این امکان را می‌دهد پیش بارگذاری های سفارشی پیچیده و جذابی را با گزینه های سفارشی‌سازی فراوان ایجاد نمائید. شما می توانید روی لودینگ خود افکت های خیره کننده ای اعمال کنید تا کاربران با دیدن آنها لذت ببرند. این افزونه دارای بیش از 27 انیمشین برای صفحه لودینگ می باشد. همچنین شما می توانید لوگوی سایت خود را برای پیش بارگذاری انتخاب کنید. علاوه بر آن این افزونه به شما این امکان را می دهد رنگ نامحدود اضافه کنید، عرض، خط چین و غیره را تنظیم نمائید.
بیشتر بخوانید: پکیج محصولات سئو و سرعت در وردپرس ( 18 افزونه مهم و کاربردی در زمینه سئو و بهینه سازی )
4- افزونه لودینگ در وردپرس PageLoader
افزونه PageLoader یکی دیگر از بهترین افزونه های لودینگ (بارگذاری) می باشد که تاکنون ارائه شده است. این افزونه به صورت کامل ریسپانسیو می باشد به گونه ای که کلیه کاربران شما در تمامی صفحه نمایش ها صفحه لودینگ وردپرس را به بهترین شکل مشاهده می کنند. همچنین شما می توانید هرگونه تغییری را در این افزونه اعمال کنید. علاوه بر آن شما می توانید از تصاویر آماده برای صفحه لودینگ استفاده کنید یا اینکه می توانید خودتان به دلخواه یک تصویر اضافه کنید. می توانید حداکثر پنج پیام خوشامدگویی را به آنها نشان دهید. آزادی استفاده از فونت تم و سفارشی کردن تایپوگرافی در دسترس است. همچنین می توانید در حین نمایش صفحه بارگیری، یک پیغام سفارشی در پس زمینه سایت خود اعمال کنید.
بیشتر بخوانید: ساخت صفحه 404 در وردپرس به صورت سفارشی | چگونه صفحه 404 دلخواه خود را بسازیم؟
5- افزونه وردپرس بارگذاری صفحه Flat Preloader
پلاگین Flat Preloader یک افزونه لودینگ وردپرس می باشد که تصاویر گیف متعددی را در اختیار شما قرار می دهد. شما میتوانید پیش بارگذاری را به گونه ای تعریف کنید که فقط برای صفحه اصلی یا همه صفحات نمایش داده شود. این افزونه به صورت کاملاً ریسپانسیو می باشد. همچنین این افزونه سبک وزن است، بنابراین، سرعت بارگذاری سایت شما را کاهش نخواهد داد. یکی از معایب این پلاگین این است که شما قادر نیستید آن را به صورت کامل سفارشی سازی یا تصویری به دلخواه در آن آپلود نمائید.
بیشتر بخوانید: چگونه در ووکامرس محصول جدید اضافه کنیم؟
جمع بندی
ما در این مطلب نحوه افزودن صفحه لودینگ وردپرس را از دو طریق کدنویسی و افزونه در اختیار شما قرار دادیم. امیدوارم از این مطلب رضایت داشته باشید.
منبع: wptablebuilder
مطالب مرتبط
چرا کلیدواژه کانونی در url مقاله وردپرسی دیده نمی‌شود!
ساخت انجمن در وردپرس با افزونه bbPress
آموزش تغییر محتوای ایمیل های ارسالی وردپرس به HTML
آموزش پاکسازی دیتابیس وردپرس برای بارگذاری وعملکرد بهتر سایت
آموزش نمایش لیستی از برگه های فرزند برای برگه والد در وردپرس
آموزش ساخت سایت با گوگل سایت Google Sites در چند گام ساده
نمایش متن رایگان به جای مبلغ صفر در محصولات ووکامرس
فشرده سازی تصاویر Compress JPEG and PNG
اگر دوست دارید در زمینه آموزش ، افزونه ، قالب وردپرس و ووکامرس ، آموزش سئو و… مقالات آموزشی خود را در نوین وردپرس منتشر کنید میتوانید به عنوان نویسنده در نوین وردپرس فعالیت کنید.
نظرات کاربران
ثبت دیدگاه