نمایش نوار پیشرفت در وردپرس

با سلام و عرض ادب خدمت شما دوستان و کاربران محترم سایت نوین وردپرس

ما امروز اینجاییم تا به شما آموزش بدیم که

چگونه میتوانیم استوانه های پیشرفت جذابتری را در وردپرس ایجاد کنیم؟

گاهی اوقات کسانی که سایت وردپرسی دارند نیاز پیدا میکنند که استوانه های پیشرفتی را برای منظور ها و اهداف مختلف مانند نظرسنجی،پیشرفت پروژه و… طراحی کرده و در سایت خود قرار دهند.

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

ولی ممکن است دوستانی که میخواهند این کار را انجام دهند دانش کدنویسی خاصی نداشته باشند و در این راه به مشکل بخورند.ولی ما اینجائیم که بگوییم نگران نباشید ما با شماییم تا بدون دردسر و به صورت مرحله به مرحله انواع این نوارها را ایجاد کنید.

خب بریم سراغ اصل مطلب:

آموزش ایجاد نوارهای پیشرفت با افزونه Progress bar

۱) ابتدا افزونه Progress bar را از این لینک یا انتهای مطلب دریافت و در وردپرس خود نصب و فعال کنید.

۲) هر یک از کد های دستوری و فرمول های زیر که به شما داده میشود را میتوانید در برگ یا نوشته مورد نظر خود کپی و ویرایش کنید و بعد از ذخیره میتوانید نتیجه را مشاهده کنید.

کدهای دستوری ایجاد نوار پیشرفت در افزونه Progress bar

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

[wppb progress=50]
 

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

شما میتوانید به این نوار نوشته هم اضافه کنید.جهت اضافه کردن نوشته روی این نوار پیشرفت میتوانید از کد زیر استفاده کنید.

[wppb progress=50 option=”flat candystripe” color=brown]
 

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

**در صورتی که میخواهید نوشته تغییر کند کافی است عبارت”نوار پیشرفت پروژه” را تغییر دهید.توجه کنید که فقط خود عبارت باید تغییر کند و  ” ” نباید حذف شوند بلکه باید بین این دو قرار گیرد.(نمونه ای از این نوار را میتوانید در قسمت زیر مشاهده کنید.)**

در صورتی که میخواهید نوار پیشرفت شما، هزینه ها را نمایش دهد می توانید از شورت کد زیر استفاده کنید:

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

**شما میتوانید در قسمت progress مقدار وجه را وارد کنید که اینجا ۲۵۰$ از ۱۰۰۰$ است و در قسمت text متنی که میخواهید روی نوار پیشرفت شما نمایش دهد را وارد کنید.(نمونه ای از آن را در زیر مشاهده کنید.)**

خب تا اینجا با کلیات کار آشنا شدید.حالا میریم سراغ اینکه به نوارمون رنگ و استایل و حرکت بدیم و اون رو زیباتر کنیم تا باعث زشتی سایت ما نشه و برای کاربران سایت جذابیت داشته باشه.

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

رنگ ها و استایل ها

جهت تغییر رنگ کد زیر را وارد کنید و با توجه به نیاز خود رنگ پیشفرض (در اینجا نارنجی”orange” است) را ویرایش کنید:

[wppb progress=50 option=orange]
 

برای متحرک ساختن نوار پیمایش می توانید از شورت کد زیر را وارد کنید و طبق تمایل خود آن را تغییر دهید:

[wppb progress=50 option=”animated-candystripe red]
 

برای تغییر حالت نوار پیشرفت از کد زیر استفاده کنید:

[wppb progress=50 option=”candystripe green]

برای نمایش نوار به صورت فلت از کد زیر استفاده کنید و در قسمت color رنگ مورد نظر را تغییر دهید:

[wppb progress=50 option=flat color=purple]

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

خب دوستان اینم از این آموزش،امیدوارم که تونسته باشیم به زیبایی و هدف سایت شما کمک کرده باشیم.

موفق باشید…!

دانلود افزونه با لینک مستقیم