امکان جدید وب نما : نمایش کوپن های تخفیف برای عموم . برای دریافت تخفیف های روزانه کلیک کنید

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

Want create site? Find Free WordPress Themes and plugins.

display-loading-icon-page-loads-completely-710x270

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

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

loading

نکته: این آموزش تست شده و بدون مشکل است.

من در این آموزش از تصویر زیر به عنوان Loader استفاده کردم. البته شما می تونید هر تصویر دیگه ای رو جایگزین کنید:

loader

در آخر آموزش ، فایل های لودینگ بیشتری برای شما آماده کرده ایم

بسیار خب حالا نوبت به ساخت صفحه لودینگ هستش.

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

در پوسته سایتتون فایل 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 آپلود کرده باشید. قدم بعدی برای افزودن لودینگ به سایت وردپرسی قرار دادن جی کوئری می باشد.
در ابتدا باید کتابخانه جی کوئری رو در سایتون فراخوان کنیم.

قبل از تگ </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>

حالا تمامی فایل ها رو ذخیره کنید و سایت خودتونو بارگذاری کنید. اگر تغییری ندیدید از کلید های ctrl+f5 استفاده کنید. می بینید که تصویر لودینگ نشون داده میشه.

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

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

البته اگه هم بخواهید که سایت شما کش نشه کد زیر رو در داخل <head></head> قرار بدید

<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">

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

موفق باشید.

نمونه فایل های لودینگ

Preloader_1 Preloader_2 Preloader_3 Preloader_4 Preloader_5 Preloader_6

دانلود پک آیکون های لودینگ برای سایت

دانلود مجموعه آیکون لودینگ

 

Did you find apk for android? You can find new Free Android Games and apps.

این پست ۲ دیدگاه دارد.

  1. علی

    مرسی عالی بود

    • webnma

      خواهش 🙂

افزودن دیدگاه