در این آموزش به بررسی کد اضافه کردن لودینگ به وردپرس میپردازیم توسط این کد زمانی که هنوز محتویات وب سایت شما هنوز لود نشد یک صفحه ی لودینگ نمایش داده میشود و با لود محتویات این صفحه محو شده و محتویات وب سایت شما را نمایش میدهد کار با این کد بسیار آسان بوده کافیست با ما همراه باشید

۱- وارد داشبورد خود شوید و به مسیر نمایش > ویرایشگر  > header.php بروید و کد زیر را بعد از <body> اضافه و ذخیره کنید

<div class="loader"></div>

۲-  به مسیر نمایش > ویرایشگر  > style.css بروید و کد زیر را اضافه و ذخیره کنید

.loader {
 position: fixed;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 z-index: 9999;
 background: url('images/loader.GIF') center center no-repeat #f8f8f8;
}

۳- در کد بالا به جای images/loader.GIF آدرس عکس لودینگ خود را بگذارید

۴- به مسیر نمایش > ویرایشگر  > header.php بروید و کد زیر را قبل از <head/> اضافه و ذخیره کنید

  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

۵-برای نمایش لودینگ کد زیر را در جای مناسبی از قالب خود اضافه میکنیم

<script type="text/javascript">
$(window).load(function() {
 $(".loader").fadeOut("slow");
})
</script>

به همین راحتی توانستید لودینگ به وردپرس خود اضافه کنید 

امیدوارم مورد استفاده شما این آموزش وردپرس قرار گرفته باشه ? موفق و پیروز باشید

 

نمونه :

پیشنهاد میکنیم بخوانید :   نمایش ID مطالب و نوشته ها در وردپرس