سلام دوستان عزیز حالتون چطوره ؟ امیدوارم روز خوبی را شروع کرده باشید . دوستان عزیز امروز می خواهم افزونه ای را برای شما معرفی کنیم که شما با استفاده از این افزونه نوارهای پیشرفت افقی جذاب و رنگی در وب سایت خود داشته باشید . در آموزش نوار پیشرفت در وردپرس با افزونه SKT Skill Bar با ایجاد نوارهای پیشرفت به صورت دایره و نیم دایره ای آشنا شدید و در این آموزش وردپرس می خواهیم افزونه ساخت نوار پیشرفت به صورت افقی را برای شما معرفی کنیم ، پس با ما همراه باشید .
معرفی افزونه Progress Bar در وردپرس
بعضی وقت ها در وب سایت تون برای نشان دادن نظر سنجی و یا میزان پیشرفت پروژه و …. نیاز دارید با استفاده از ایتمی آنها را به صورت درصد بیان کنید تا هم زیبا باشد و هم اینکه کاربران بتوانند بهتر درک کنند و برای این منظور افزونه های وردپرس بسیاری می باشد که در این آموزش شما با افزونه Progress Bar آشنا می شوید که می توانید به صورت افقی میزان پیشرفت پروژه های خود را نشان دهید و با انجام تنظیمات می توانید نوار میله ای جذاب و رنگی در وب سایت خود داشته باشید . در اولین قدم برای استفاده از این نوارهای پیشرفت در وب سایت باید شما این افزونه را از لینک زیر دانلود کنید :
دانلود افزونه Progress Bar
وقتی شما فایل افزونه وردپرس را در وب سایت خود نصب و فعال کردین ،حال برای استفاده از این افزونه در نوشته ها و برگه های خود باید به ویرایش متن مورد نظر خود مراجعه کنید و با استفاده از کدهایی که در ادامه ی آموزش مشاهده می کنید ، نوار پیشرفت را در نوشته های خود قرار دهید . توجه داشته باشید که شما می توانید از این نوار پیشرفت در سایر بخش ها و قسمت های دیگر خود استفاده کنید .
معرفی کدهای نوار پیشرفت برای نمایش در سایت وردپرسی :
نوار پیشرفت ساده
شما می توانید برای استفاده از نوار پیشرفت ساده و بدون هیچ جلوه ای از قطعه کد زیر استفاده کنید :
[wppb progress=70]
و این کد فقط یک نوار پیشرفت ساده و را در سایت شما نمایش می دهد که میزان دردص ان 70 می باشد که شما مقدار آن را به عدد مورد نظر تغییر دهید
نوار پیشرفت با نوشته
اگر شما می خواهید نوار پیشرفت ساده را داشته باشید و فقط متنی بر روی این نوار نوشته شود ، باید از کد زیر استفاده کنید :
[wppb progress=75 text=”نوار پیشرفت پروژه طراحی سایت”]
نوار پیشرفت به همراه هزینه
برای نمایش هزینه در نوار پیشرفت شما لازم است که از کد زیر استفاده کنید و میزان هزینه را در ان درج کنید :
[wppb progress=”$250/1000″ text=”$250/$1000 Raised”]
حال دوستان عزیز شما می توانید به لینک افزونه وردپرس مذکور بروید و کدهایی که در زمینه ی ساخت نوار پیشرفت ساده وجود دارد را مشاهده کنید که به صورت نمونه چند مورد از آنها را در بالا برای شما بیان کردیم ، حال در ادامه می خواهیم به نوارهای پیشرفت افقی با طرح و رنگ های مختلف بپردازیم که چند مورد از آنها به صورت زیر می باشد :
نوار پیشرفت با رنگ های مورد نظر
شما می توانید برای تغییر رنگ نوار پیشرفت از کد زیر استفاده کنید و فقط لازمه که رنگ مورد نظرتون را در داخل کد زیر بنویسید :
[wppb progress=50 option=orange]
نوار پیشرفت متحرک
برای اینکه بتوانید یک نوار پسشرفت متحرک و جذاب داشته باشید از کد زیر استفاده کنید و رنگ های آن را به دلخواه تغییر دهید :
[wppb progress=50 option=”animated-candystripe red”]
نوار پیشرفت به صورت فلت
اگر می خواهید نوار پیشرفت به صورت فلت داشته باشید می توانید از کد زیر استفاده کنید و می توانید متغیرهای آن را تغییر دهید :
[wppb progress=50 option=flat color=purple]
نوار پیشرفت فلت طرح دار
حتی شما می توانید نوار پیشرفت فلت خود را طرح دار و جذاب کنید و برای انجام این کار از کد زیر استفاده کنید و متغیرهای آن را به دلخواه تغییر دهید:
[wppb progress=50 option=”flat candystripe” color=brown]
برای ایجاد تغییرات در حالت نوار پیشرفت از کد کوتاه زیر استفاده کنید :
[wppb progress=50 option=”candystripe green”]
می توانید هر یک از این کدها را در وب سایت خود قرار دهید و جذاب ترین آنها را انتخاب کنید و حتی می توانید به سایت افزونه وردپرس بروید و کدهای بسیار دیگری را مشاهده کنید و در وب سایت خود استفاده نمایید . از همراهی شما هم با این اموزش صمیمانه متشکرم . با معرفی قالب های وردپرس بیگ تم با ما همراه باشید .
با آرزوی موفقیت و سلامتی برای همراهان عزیز
