افزونه جی کوئری پروگرس بار Progress Bar – نمایش میزان بارگذاری صفحات وردپرس

توسط افزونه های جی کوئری میتوان امکانات زیادی را در صفحات وب ایجاد کرد. در این مطلب از ایران تمز قصد معرفی و آموزش استفاده از افزونه جی کوئری پروگرس بار nprogress Bar را داریم تا بتوانید از آن در طراحی قالب وردپرس مورد نظرتان برای نمایش میزان پیشرفت بارگذاری صفحات سایت و وردپرس استفاده کنید. از این افزونه جی کوئری در سایتهایی مانند یوتیوب و همیار وردپرس استفاده شده است. تا انتهای آموزش همراه ما باشید.

افزونه جی کوئری پروگرس بار Progress Bar - نمایش میزان بارگذاری صفحات وردپرس

ویژگی های افزونه جی کوئری پروگرس بار nprogress

برخی از امکانات و قابلیتهای پلاگین ان پروگرس عبارتند از:

  1. نمایش ایجکسی میزان لودینگ صفحه وب
  2. سازگار با انواع سیستم های مدیریت محتوا ازجمله وردپرس
  3. حجم کم و سرعت بارگذاری بالای انیمیشن ها
  4. امکان تنظیم سرعت حرکت خط و دایره انیمیشن
  5. قابلیت تغییر رنگ و اندازه خط و دایره
  6. نمایش تدریجی محتوای برگه در زمان بارگذاری سایت
  7. امکان جابه جایی نوار پروگرس بار از بالای صفحه به پایین برگه
  8. نصب و راه اندازی ساده و سریع
  9. و …

آموزش افزونه جی کوئری پروگرس بار nprogress Bar

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

معرفی و آموزش افزونه جی کوئری پروگرس بار nprogress Bar

افزونه جی کوئری پروگرس بار را با مراجعه به صفحه NProgress در گیت هاب و یا از این لینک میتوانید دانلود کنید. پیشنهاد میکنیم فایل اصلی را از گیت هاب دریافت کنید تا در صورت بروز شدن افزونه بتوانید از امکانات نسخه جدید استفاده کنید. پس از دانلود افزونه فایل فشرده را از حالت فشرده خارج و دو فایل اصلی پلاگین با نام های nprogress.js و nprogress.css را مطابق دستورات زیر در برگه بارگذاری کنید، دقت کنید که باید کتابخانه جی کوئری را در برگه فراخوانی کرده باشید. در نهایت برای فراخوانی افزونه قطعه کد مربوطه را در پاورقی footer صفحه وب قرار میدهیم. اکنون با بارگذاری مجدد صفحه سایت انیمیشن های پروگرس بار را مشاهده خواهید کرد.

// کدهای فراخوانی استایل و فایل جاوا افزونه
<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>
// کد فراخوانی افزونه پروگرس بار توسط کد زیر
<script> NProgress.start(); NProgress.done(); </script>
5/5 - (1 امتیاز)
بازدیدکنندگانی که این مطلب را مطالعه کرده اند، از مطالب زیر نیز استقبال کرده اند
دیدگاهی بنویسید
6

  1. Ali
    29 شهریور 1397 ساعت 22:32

    نفهمیدم باید چ کار کنم ):

  2. محمد مهدی
    30 آذر 1396 ساعت 20:20

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

  3. علیرضا
    15 شهریور 1396 ساعت 02:00

    با سلام و خسته نباشید خدمت شما، میشود توضیح کاملتری راجع به راه اندازی این افزونه بدهید؟ من کد زیر رو در page.php قرار دادم.
    کد فراخوانی رو هم در فوتر ولی متاسفانه کار نمیکنه. اگر میشود مشخص کنید که قطعه کدهای بالارو دقیقا در کدوم قسمت کد (تگ) قرار دهیم. ضمنا فایلهای استایل و جاوا اسکریپت رو هم داخل پوشه قالب آپلود کرده ام. ممنون میشم راهنمایی کنید.

    • رضا کیانوش
      15 شهریور 1396 ساعت 06:03

      سلام. کدهای فراخوانی استایل و فایل جاوا رو باید طوری در هدر صفحه قرار بدید که ادرس دهی درست باشه یعنی وقتی تغییرات رو ذخیره کردید در بخش مشاهده کدهای صفحه view source سایت وقتی روی لینک کلیک شد فایلش در مرورگر باز بشه. بعد کد مربوط به اجرای افزونه رو در فوتر قرار بدید. برای توضیحات بیشتر میتونید به صفحه افزونه در گیت هاب مراجعه کنید.

      • علیرضا
        15 شهریور 1396 ساعت 21:49

        با تشکر فراوان مشکلم حل شد.

        • رضا کیانوش
          15 شهریور 1396 ساعت 23:00

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