آموزش های کاربردی وردپرسافزونه های رایگان وردپرسافزونه وردپرساموزش وردپرسپلاگین های رایگان وردپرسپلاگین وردپرس

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

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

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

افزونه ی Progress bar

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

ابتدا افزونه ی progress bar را نصب و فعال میکنیم. نصب این افزونه بسیار راحت و سریع است و ابدا نیاز به هیچگونه تنظیماتی ندارد. پس از فعال سازی در بخش نوشته ها>> افزودن نوشته ی جدید و یا بخش برگه ها>> افزودن برگه بروید و پس از نوشتن مطلب مورد نظر و قرار دادن عکس های خود در متن با قرار دادن چند دستور یا به عبارتی فرمول ساده به راحتی نوار پیشرفت را در سایت به نمایش خواهیم گذاشت.

فرمول های موجود برای نمایش افزونه

با قرار دادن یک شورت کد ساده می توانید یک نوار پیشرفت بدون هیچ گونه آلایشی را در سایت خود نمایش دهید :

[wppb progress=50]

شورت کدی که در بالا میبینید یک نوار پیشرفت ساده را به شما نمایش میدهد که ۵۰ درصد در آن پیشرفت وجود دارد. همانطور که در تصویر زیر میبینید به این شکل دیده خواهد شد:

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

شما میتوانید درصد ۵۰ را به هر درصدی که مد نظرتان است تغییر دهید. حتی اگر قصد دارید نوشته ای را بر روی این نوار قرار دهید می توانید از شورت کد زیر استفاده کنید:

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

که نتیجه به صورت زیر قابل مشاهده است :

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

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

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

که نتیجه به صورت زیر قابل رویت است :

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

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

برای تغییر رنگ نوار پیشرفت ساده از شورت کد [wppb progress=50 option=orange] استفاده کنید. میتوانید به جای رنگ نارنجی ( orange ) نام رنگ دلخواه خود را وارد کنید. البته نام رنگ باید به انگلیسی وارد شود.

برای متحرک ساختن نوار پیمایش از شورت کد [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] استفاده کنید.

نتیجه نهایی مانند تصویر زیر خواهد بود.

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

جمع بندی نهایی

شما می توانید برای ایجاد نوار های پیشرفت در وبسایت خود از طرح های جذاب تری استفاده کنید و با قرار دادن یک شورت کد کوچک امکان زیبایی به صفحه ی سایت خود بیافزایید.

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

با تشکر از همراهیتان

دانلود افزونه
برچسب ها

سید وحید جاویدان

با سلام و عرض ادب اینجانب متولد سال 1365 و دارای کارشناسی ارشد مهندسی فناوری اطلاعات گرایش تجارت الکترونیک علاقه مند به برنامه نویسی و وب هستم و امیدوارم بتوانم در مجموعه وردپرس سیتی مطالب بیشتری جهت استفاده شما دوستان عزیز ارائه بدم . موفق و سر بلند باشید.

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

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

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

بستن