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

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

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

من در این آموزش از تصویر زیر به عنوان 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">

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

موفق باشید

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

  • آذر
    - ۱۶ مهر , ۱۳۹۳

    با سلام
    آخرین مطالب رو در سایت به نمایش بزارم همرا با عکس باشه مثل سایت های تفریحی —
    کلیک بر روی هر تب به دسته مورد نظر هدایت شود بدون بارگذاری مجدد صفحه
    عکس :http://s5.picofile.com/file/8144884242/help.jpg
    ——————–
    مدیریت محتوا وردپرس است-
    کدهای مورد نیاز رو لازم دارم-
    با تشکر

    • الناز بیک زاده
      - ۱۹ مهر , ۱۳۹۳

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

  • مهدی
    - ۱۹ مهر , ۱۳۹۳

    ممنون بابت پستها و مطالب مفیدتون در این وب سایت .

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

    ممنون میشم بابت این مطلب که خیلی مهم هستش برای اکثر سایت ها مقاله ای تهیه کنید و در وبسایت قرار بدهید /

    • الناز بیک زاده
      - ۲۰ مهر , ۱۳۹۳

      سلام مهدی جان. بله چشم به زودی مقاله ای در این خصوص در سایت قرار میدم

      • مهدی
        - ۲۱ مهر , ۱۳۹۳

        منتظرم و ممنونم .

  • ArYanPour
    - ۲۱ مهر , ۱۳۹۳

    ممنون از مطلب خوبتون : )

  • علیرضا
    - ۲۱ مهر , ۱۳۹۳

    سلام
    آموزش ساخت بخش ارسال نمونه کار رو هم وقت کردید قرار بدید
    شبیه قالب classipress که بخش آگهی ها داره و از اونا میشه آگهی ارسال کرد و نوشته هایی که از قسمت ارسال نوشته پست میشن توی وبلاگ قرار می گیره
    ببخشید خیلی بد توضیح میدم. اگر متوجه شدید آموزششُ بذارید 🙁

  • علیرضا
    - ۲۱ مهر , ۱۳۹۳

    خدا شاهده کامنت آقا مهدی رو ندیده بودم. چقد نیازامون شبیه همه 😀

  • َAbolfazl
    - ۲۶ مهر , ۱۳۹۳

    سلام خسته نباشید .. ببخشید اگه امکانش هست یه افزونه واسه ثبت نام و وردو کاربر معرفی کنید که یه سری دسترسی های خاص به کاربرای ثبت نام کرده بده .. ینی اونایی که ثبت نام کردن امکانات بیشتر داشته باشن |) خیلی ممنون میشم

    • الناز بیک زاده
      - ۲۷ مهر , ۱۳۹۳

      سلام دوست عزیز. منظورتون چه امکاناتی است؟ افزونه ها براساس درخواست شما عملکرد متفاوتی دارند

    • الناز بیک زاده
      - ۲۷ مهر , ۱۳۹۳

      سلام دوست عزیز. منظورتون از دسترسی و امکانات بیشتر چیه؟ افزونه های زیادی برای این کار وجود دارند و البته بسته به امکانی که شما می خواهید

  • رضا
    - ۲۷ مهر , ۱۳۹۳

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

    • الناز بیک زاده
      - ۲۷ مهر , ۱۳۹۳

      سلام رضا جان. کافیه به div مربوطه استایل هارو بدی

      • رضا
        - ۲۷ مهر , ۱۳۹۳

        منظور من رو نفهمیدد : وقتی سایت بالا می یاد قبل از اون از یک فایل index دیگه می خونه که توی روت هاست وجود داره این فایل index همیشه سفید هست می خوام بدونم چطوری می تونم برای این فایل لودینگ بزارم

        • الناز بیک زاده
          - ۲۷ مهر , ۱۳۹۳

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

  • یونس سعیدی
    - ۲۳ خرداد , ۱۳۹۴

    ممنون خیلی خوب بود

  • محمد حمیدی راد
    - ۶ مرداد , ۱۳۹۷

    سلام.
    با همین روشی که گفتید میتونم یک ویدئو رو توی سایتم به عنوان لودینگ قرار بدم؟

    • الناز
      - ۶ مرداد , ۱۳۹۷

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

دیدگاه خود را بیان کنید

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

-- بارگیری کد امنیتی --