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

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

این امکان لودینک سایت با استفاده از کد می باشد که باید در فایل های قالب خود قرار دهید با ما همراه باشید ….

ابتدا باید وارد فایل های قالب وردپرس خود شوید و فایل header.php را به حالت ویرایش در آورید و کد زیر را در آن جای دهید.

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

بعد از اضافه کردن کد بالا در فایل گفته شده آن را ذخیره سازی کنید و در مرحله بعدی فایل stily.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;
}

اگر به کد  css بالا توجه کنید باید تصویر لودینگ که در وبسایت نمایش داده خواهد شد را در پوشه images قالب خود قرار دهید.

در مرحله سوم قرار دادن فایل اجرایی لودینک در سایت با استفاده از جی کوئری است که باید به شکل زیر عمل کنید.

ابتدا باید جی کوئری را سایت خود فراخوانی کنید برای این کار کد زیر را کتابخانه جی کوئری قرار دهید.

<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>
<div class="line number1 index0 alt2"></div>

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

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

منبع: آپ تم  مرجع: آموزش وردپرس