عرض سلام خدمت همراهان گرامی مکانیک وردپرس ؛
به تصویر زیر توجه کنید:
همه شما عزیزان در انواع سایت ها و شبکه های اجتماعی، با این آیتم های استوانه ایی شکل برخورد داشته اید که آنها به استوانه درصد پیشرفت یا همان Progress Bar معروفند.
در این نوشته از آموزش وردپرس به شما نشان خواهیم که چگونه میتوانید استوانه درصد پیشرفت در وردپرس را به نمایش در آورید.
با ما همراه باشید…
استفاده از Progress Bar در وردپرس
گاهی اوقات برای نظرسنجی ها و آراء یا پیشرفت برخی پروژه ها و از این قبیل مسائل احتیاج به آیتمی داریم که منظور ما را به صورت درصد بیان کند و زیبا و جذاب تر نیز به نظر برسد.
برای ایجاد چنین آیتمی در وردپرس میتوانیم از افزونه Progress Bar وردپرس استفاده کنیم.
افزونه Progress Bar وردپرس
این افزونه وردپرس بیش از ۴٫۰۰۰ نصب موفق و فعال در مخزن وردپرس به ثبت رسانده است.
آموزش کار با افزونه Progress Bar وردپرس
پس از دانلود، نصب و فعالسازی این پلاگین وردپرس، نیاز به اعمال هیچ گونه تنظیمات خاصی نیست.
اکنون کافیست به بخش نوشته ها>> افزودن نوشته ی جدید و یا بخش برگه ها>> افزودن برگه بروید و بعد از وارد کردم متن و تصویر مورد نظر خود با قرار دادن چند کد کوتاه به راحتی نوار پیشرفت را در سایت به نمایش خواهیم گذاشت.
کدهای کوتاه افزونه Progress Bar وردپرس
با قرار دادن کد کوتاه زیر در یک برگه یا نوشته می توانید یک نوار پیشرفت بدون هیچ گونه آلایشی را در سایت خود نمایش دهید.
ابتدا کد کوتاه زیر را کپی کنید:
1 | [wppb progress=50] |
سپس مانند تصویر زیر در یک نوشته یا برگه آن را قرار دهید.
نتیجه مانند تصویر زیر خواهد بود:
نکته: با تغییر عدد ۵۰ می توانید درصد های مورد نظر خود را مشخص نمایید.
حال اگر قصد دارید نوشته ای را بر روی این نوار درصد پیشرفت قرار دهید می توانید از شورت کد زیر استفاده نمایید:
1 | [wppb progress=75 text=”نوار”] |
بنابراین اگر این کد را مانند همان کد قبلی در یک نوشته یا برگه جایگذاری کنیم:
نتیجه به شکل زیر خواهد بود:
تمامی کدهای کوتاه افزونه Progress Bar وردپرس
برای اینکه بتوانید تمامی شورت کدهای این افزونه وردپرس را مشاهده کنید و از انها در صورت تمایل استفاده کنید، به آیتم افزونه های نصب شده در وردپرس بروید و بر روی گزینه نمایش جزییات در مقابل افزونه Progress Bar کلیک کنید. مانند تصویر زیر:
پس از کلیک بر روی این گزینه، شاهد صفحه زیر خواهید بود که تمامی ShortCode های مربوط به این افزونه برای حالت های مختلف در آن مشاهده میشود.
موفق و پاینده باشید…
