نمایش درصد پیشرفت در وردپرس با افزونه 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

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