آموزش ساخت صفحه لودینگ
دسته‌ها : آموزش وردپرس , کد های کاربردی , متفرقه ۱۱ شهریور ۱۳۹۵ - ۹:۳۸ امیر رضائی بدون نظر

loading0

شاید تا حالا به سایت هایی برخورد کردین که قبل از لود کامل سایت صفحه ای با تصویر و متن لودینگ نمایش داده می شود و بعد از لود کامل سایت دیگر نمایش داده نمی شود. امروز روش ساخت این صفحه رو خدمتتون آموزش خواهیم داد

لطفا” تمام مراحل رو به ترتیب پیش برید تا مشکلی پیش نیاد:

مرحله اول : تصویر لودینگ

یک تصویر برای نمایش در صفحه لودینگ همانند نمونه زیر پیدا کنید و در هاست خودتون آپلود کنید (توجه داشته باشید که تصاویر می تواند ثابت هم باشد)
برای پیدا کردن چنین تصویری می توانید در سایت گوگل loading gif را جست و جو نمایید.

loading

قدم دوم : قرار دادن کد در فایل header.php

در پیشخوان وردپرس به بخش  نمایش -> ویرایش رفته و از بین لیست فایل ها فایل header.php را برای ویرایش انتخاب کنید.

تگ <body> را پیدا کرده و کد زیر را به آن اضافه کنید :


&lt;div class="loading"&gt;&lt;/div&gt;

سپس تگ </head> رو پیدا کنید و کدهای زیر را قبل از آن اضافه کنید

 
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type=”text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
});
</script>

قدم سوم : style.css

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

حتما بخوانید  قالب مدرن و زیبا در سبک فلت برای بلاگفا

 

 
.loading{
   position:fixed;
   left:0px;
   top: 0px;
   width: 100%;
   height: 100%;
   z-index: 9999;
   background: url('loading.gif') center center no-repeat #fff;
}

نکته : به جای loading.gif آدرس فایل آپلود شده ی خودتان را بدهید.

البته شما می تونید این صفحه رو به دلخواه خودتون ویرایش کنید

امیر رضائی وبسایت


وردپرس را با تمام وجودم دوست دارم و از این رو چندین سال است در زمینه طراحی سایت های وردپرسی و طراحی پوسته های وردپرسی فعالیت می کنم و اعتقادم بر این است که انسان باید آموخته ها و تجربیات خود را با دیگران به اشتراک بگذارد بلاگ تم مکان اشتراک گذاری تجربیات و آموخته های من است

بهترین و راحت ترین راه برای ارتباط با شما کانال تلگرام بلاگ تم

newslatter

با اشتراک در خبرنامه از آخرین آموزش ها و خدمات مطلع شوید !

از عضویت شما در خبرنامه بلاگ تم متشکریم!
best web design software

امتیاز دهید