- 0 تومان
- سبد خرید شما خالی است.
سلام دوستان عزیز. حتما در خیلی از سایت ها دیدید که قبل از نمایش سایت ابتدا یک صفحه لودینگ نمایش داده می شود و بعد از بارگذاری کامل سایت، لودینگ پنهان شده و سایت نمایش داده می شود.
خب آموزش امروز وب نما درباره نحوه افزودن لودینگ به سایت وردپرسی است.
نکته: این آموزش تست شده و بدون مشکل است.
من در این آموزش از تصویر زیر به عنوان 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">
مقاله امروز وب نما درباره افزودن لودینگ به سایت وردپرسی به پایان رسید. امیدوارم که به دردتون خورده باشه
موفق باشید.
نمونه فایل های لودینگ
دانلود پک آیکون های لودینگ برای سایت
این پست ۲ دیدگاه دارد.
مرسی عالی بود
خواهش 🙂