افزودن لودینگ به سایت وردپرسی - خدمات وردپرس وب نما | خدمات وردپرس وب نما

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

بازگشت

به جایی که از آن میآیید
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.

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

همین حالا عضو میشم

ما در اینستاگرام ...

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

  1. علی گفت:

    مرسی عالی بود

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *