نمایش درصد پیشرفت در وردپرس با افزونه progress bar

بازدید : 45
نویسنده : خانم نوروزی
1 رای2 رای3 رای4 رای5 رای
تاریخ انتشار : ۱۰ مرداد , ۱۳۹۶
دانلود
نمایش درصد پیشرفت در وردپرس با افزونه progress bar

نمایش پیشرفت پروژه ها در وردپرس و یا به طور کلی در هر وب سایتی به تجربه کاربری و رابط کاربری ختم می شود به طوری که پروسه پروژه و برنامه های در حال ساخت را به کاربران خود نمایش دهید تا آنها نیز احساس صمیمیت بیشتری کنند و این خود یکی از عوامل موثر در موفقیت تجارت الکترونیک می باشد.
افزونه ای که برای شما معرفی میکنیم  progress bar نام دارد ، پلاگینی که در عین سادگی تمام از چندین طرح زیبا و کاربر پسند برای نمایش پروسه پیشرفت پروژه ها استفاده می کند . افزونه progress bar  وردپرس با استفاده از js و css هایی که به صورت پیشفرض موجود دارد ظاهر کاربر پسندی را به نمایش می گذارد با توجه به این موضوع به سادگی و زیبایی هر چه تمام تر پیشرفت ساخت برنامه ها و پروژه ها را به نمایش بگذارید.

افزونه progress bar

افزونه progress bar علاوه بر اینکه میتواند درصد پیشرفت پروژه ها را به نمایش بگذارد علاوه بر آن میتوانید از آن برای نظر سنجی ها نیز استفاده کنید و آراء را به نمایش بگذارید.

روش کار با افزونه progress bar

بعد از نصب افزونه زمانی که طرح مورد نظر خود را پسند کردید کافی است شورت کد (short code) آن را بردارید و در مکان دلخواه قرار دهید و زمانی که رقم های اون تغییر کرد ، در هرزمان که میخواهید میزان پیشرفت را تغییر دهید ، برای تغییر رنگ و سایز یا … در پوشه css > فایل wppb.css را باز کرده وتغییرات مورد نظرتون رو اعمال کنید. اگر بااین توضیح کوتاه نمی توانید با این افزونه کار کنید پس بهتر است همراه ما باشید.

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

[wppb progress=50]

در شورت کد بالا عدد ۵۰ نشان دهنده پیشرفت ۵۰ درصدی است و اگر میخواهید آن را تغییر دهید باید بجای عدد ۵۰ عدد دیگری را قرار دهید.

نمايش درصد نظرسنجي و آرا در وردپرسبرای قرار دادن متن روی نوار پیشرفت باید از کد کوتاه زیر استفاده کنید که مانند تصویر زیر متنی روی آن قرار میگیرد. برای تغییر متن ، متن توی کد کوتاه را به متن مورد نظر تغییر دهید.

[wppb progress=75 text=”نوار پیشرفت پروژه”]

 

 نوار پیشرفت

برای نمایش نوار پیشرفت به همراه هزینه و واحد های مالی شورت کد زیر را در متن خود قرار دهید تا مانند تصویر زیر برای شما به نمایش دراید:

[wppb progress=”$۲۵۰/۱۰۰۰″ text=”$۲۵۰/$۱۰۰۰ Raised”]

نوار پیشرفت به همراه هزینه

تنظیمات ظاهری افزونه progress bar

  1. همانطور که در قسمت بالا متوجه شدید ما فقط توانستیم نوار پیشرفت را ایجاد کنیم و برای تنظیمات ظاهری آن هیچ کاری نکردیم. برای اینکه بتوانیم رنگ نوار پیشرفت را تغییر دهیم باید از شورت کد [wppb progress=50 option=green] استفاده کنیم. در این کد کوتاه کلمه ای با واژه های green  را مشاهده میکنید که به معنی سبز است شما میتوانید رنگ مورد نظر خود را جایگزین کنید به عنوان مثال (red,yellow,blue,…).
  2. محترک ساختن نوار پیمایش نیز شورت کد مخصوص خود را دارد. شورت کد [wppb progress=50 option=”animated-candystripe red”]  برای محترک سازی نوار پیشرفت استفاده میشود.
  3. شورت کد [wppb progress=50 option=”candystripe green”] برای تغییر حالت نوار پیمایش میباشد.
  4. نمایش نوار پیشرفت به صورت فلت با کد کوتاه [wppb progress=50 option=flat color=purple] امکان پذیر میشود.
  5. و برای اینکه نوار پیمایش فلت طرح دار باشد از کد کوتاه [wppb progress=50 option=”flat candystripe” color=brown] استفاده کنید.

با استفاده از تنظیمات بالا میتوانید حالت های مختلفی مانند تصویر زیر را برای نمایش نوار پیشرفت ایجاد کنید.

 

افزونه نمایش درصد پیشرفت

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


مطالب مرتبط

سفارشی‌ سازی ویرایشگر گوتنبرگ با Atomic Blocks

سفارشی‌ سازی ویرایشگر گوتنبرگ با Atomic Blocks

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

مطالعه بیشتر
تیتر ها در محتوای سایت

تیتر ها در محتوای سایت

همانطور که در مطالب قبلی بر روی محتوا و تاثیر آن بر سئو تاکید بسیاری

مطالعه بیشتر
انتخاب آدرس نوشته مناسب برای سئو بهتر در وردپرس

انتخاب آدرس نوشته مناسب برای سئو بهتر در وردپرس

همه ما کلماتی را بعد از url مشاهده کرده ایم که آن را با عنوان

مطالعه بیشتر
رعایت ۵ نکته برای موفقیت در تجارت اینترنتی

رعایت ۵ نکته برای موفقیت در تجارت اینترنتی

امروزه یکی از انواع تجارت، تجارت الکترونیک می باشد که به سرعت رو به پیشرفت

مطالعه بیشتر

دیدگاه بگذارید

avatar
  اشتراک در  
اطلاع از

ایمیلت رو وارد کن ، قالب و افزونه جایزه بگیر