آموزش وردپرس

ساخت نوار پیشرفت در وردپرس با افزونه Progress bar

افزونه ساخت نوار پیشرفت افزونه Progress Bar

در این بخش از آموزش وردپرس در خصوص افزونه profrass bar که برای ساختن نوار پیشرفت در وردپرس میباشد افزونه را آموزش داده ایم.

اغلب اوقات یکی از مواردی که مشتریان میخواهند در مورد شما کسب و کار شما بدانند این است : شما در چه موضوعاتی توانایی و مهارت های لازم را دارید؟ یا اینکه روند پیشبرد پروژه های شما به چه صورت است ؟ و شما هم امکان دارد این پرسش ها را از طریق مشاوره های آنلاین یا مشاوره های تلفنی پاسخ بدهید یا گزارش پیشرفت پروژه را هر هفته به آنها نشان دهید که کار بسیار وقت گیری است و یکی از معایب این روش ها این است که اگر تعداد مشتریانی که این سوالات را مطرح می کنند بیشتر شود ممکن است شما قادر به مدیریت آن نباشید که یک چالش برای کسب و کار شما تلقی می شود .برای این موضوع یک راه حل بسیار مناسب وجود دارد که به شرح آن می پردازیم:

اگر شما یک web developer باشید حتما در میان کد های bootstrap یا css ، کدی مشاهده کردید که این قابلیت را به وبسایت می دهد تا بتوانید به صورت یک نوار رنگی و با استفاده از یک برچسب میزان تسلط خود در یک موضوع یا میزان پیشرفت پروژه یا میزان قیمت یک دوره آموزشی و … را به صورت درصدی و با ذکر نام آن به کاربران وبسایت خود نشان دهید .این کار مزیت های بسیاری دارد : از جمله اینکه کاربران با مشاهده این نوار رنگی اطلاعات کاملی از سطح مهارت شما از موضوعاتی که مربوط به کسب و کارتان است یا قیمت یک دوره اموزشی به صورت خلاصه و مفید پیدا خواهند کرد. و همچنین با رنگ بندی های زیبایی که این نوار ها دارند منجربه زیبایی سایت در عین سادگی خود و جلب کاربران خواهند شد.

حال که از مزیت های این نوار های رنگی برچسب دار آگاه شدید ، دیگر نگران نباشید. چنانچه سایت شما با سیستم مدیریت محتوای معروف وردپرس ایجاد شده باشد و تمایلی به استفاده  از کد های bootstrap ,css ندارید می توانید از افزونه بسیار قدرتمند استفاده کنید.

افزونه ساخت نوار پیشرفت افزونه Progress Bar

افزونه ساخت نوار پیشرفت افزونه Progress Bar

با افزونه Prograss bar بیشتر آشنا شویم:

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

1> نوار پیشرفت ساده
برای استفاده از نوار پیشرفت ساده و بدون افکت خاصی می توانید از کد کوتاه زیر استفاده نمایید :
[wppb progress=70] و این کد فقط یک نوار پیشرفت ساده را در سایت شما نمایش می دهد که میزان عدد آن را می توانید به دلخواه خود تغییر دهید.

2> نوار پیشرفت با نوشته
اگر می خواهید نوار پیشرفت ساده را داشته باشید و همچنین متنی بر روی این نوار نوشته شود ، از کد کوتاه زیر استفاده کنید :
[wppb progress=75 text=”نوار پیشرفت پروژه طراحی سایت”]

3> نوار پیشرفت به همراه هزینه
برای نمایش هزینه در نوار پیشرفت شما لازم است که کد زیر را نوشته و میزان هزینه را در قسمت مورد نظر ثبت نمایید :
[wppb progress=”$250/1000″ text=”$250/$1000 Raised”]

همچنین در مخزن افزونه های وردپرسی می توانید به صفحه افزونه مورد نظر مراجعه کرده و کد ها با فیچر های بیشتری را مورد استفاده قرار دهید. در زیر برخی از آنها را یاد آور میشویم:

4> نوار پیشرفت با رنگ های دلخواه
برای تغییر رنگ نوار پیشرفت از کد زیر استفاده کنید و رنگ مورد نظر خود را در قسمت option درج کنید ، نکته ای که شاید برای بعضی کاربران سوال باشد : در این قسمت می توانید هم از اسامی رنگ ها استفاده کنید و هم از کد هگزادسیمال  :
[wppb progress=50 option=orange]

5> نوار پیشرفت متحرک
برای اینکه بتوانید یک نوار پیشرفت متحرک و جذاب داشته باشید از کد زیر استفاده کرده و رنگ (استفاده از اسم رنگ یا کدهای هگزادسیمال )  و میزان درصد  آن را تغییر دهید :
[wppb progress=50 option=”animated-candystripe red”]
اگر می خواهید نوار پیشرفت به صورت فلت داشته باشید می توانید از کد زیر استفاده کرده و رنگ (استفاده از اسم رنگ یا کدهای هگزادسیمال )  و میزان درصد  آن را تغییر دهید :
[wppb progress=50 option=flat color=purple]

6> نوار پیشرفت فلت طرح دار
حتی شما می توانید نوار پیشرفت فلت خود را طرح دار و جذاب کنید و برای انجام این کار از کد زیر استفاده کرده و رنگ (استفاده از اسم رنگ یا کدهای هگزادسیمال ) و میزان درصد  آن را تغییر دهید :
[wppb progress=50 option=”flat candystripe” color=brown]

7> نوار پیشرفت دارای گرادیانت

با استفاده از کد کوتاه زیر شما می توانید یک نوار پیشرفت با گرادیانت در صفحه مورد نظر خود ایجاد کنید و رنگ (استفاده از اسم رنگ یا کدهای هگزادسیمال ) آن را به دلخواه تغییر دهید:

[wppb progress=22 color=#ff0000 gradient=0.2]

8> نوارپیشرفت با طول تمام صفحه

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

[wppb progress=50 fullwidth=true]

9> ورژن افزونه های وردپرسی

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

ورژن افزونه Prograss bar 

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

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

author-avatar

درباره سحر علیزاده

کارشناسی IT .علاقه مند به وب و چالشهای آن . در زمینه طراحی سایت ، سئو فعالیت می کنم . فی الحال نویسنده وبمستر98 هستم و سعی میکنم مطالب فنی خوبی منتشر کنم.

نوشته های مشابه

دیدگاهتان را بنویسید

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