چگونه می توان یک نوار پیشرفت را در پست های وردپرس خود اضافه کرد

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

به سادگی یک پست یا صفحه را که می خواهید برای نمایش نوار پیشرفت نمایش داده شود، ویرایش کنید و کد کوتاه را در این فرمت اضافه کنید:

[wppb progress=50]

این یک نوار پیشرفت متحرک برای نشان دادن پیشرفت 50٪ با استفاده از رنگ آبی پیش فرض است.

 
چگونه می توان یک نوار پیشرفت را در پست های وردپرس خود اضافه کرد
 
شما همچنین می توانید  تغییر رنگ، اضافه کردن متن به نوار پیشرفت، نشان دادن عدد به جای درصد و … را انجام دهید . بیایید به برخی از این گزینه های سفارشی نگاهی بیاندازیم.
 

اضافه کردن متن به نوار پیشرفت

در مثال بالا، شما می توانید ببینید که نوار پیشرفت ما در واقع نمی گوید چه چیزی در مورد آن است. شما می توانید آن را با اضافه کردن برخی از متن مفید در نوار پیشرفت با استفاده از ویژگی های شورت کد تغییر دهید.
 
[wppb progress=75 text="Progress so far"]
 
این متن شما را در بالای نوار پیشرفت نمایش می دهد و اینگونه می شود :
 
چگونه می توان یک نوار پیشرفت را در پست های وردپرس خود اضافه کرد
 

نمایش عدد به جای درصد در نوار پیشرفت

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

در اینجا نحوه استفاده از کد کوتاه برای نمایش عدد و قیمت را نشان داده ایم .

[wppb progress = “$ 250/1000” text = “$ 250 / $ 1000 افزایش”]

این در وب سایت شما شبیه به این خواهد بود:

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

[wppb progress="$250/1000" text="$250/$1000 Raised" location="after"]

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

در اینجا نحوه استفاده از کد کوتاه برای استفاده از هر گزینه است:

 
نوار پیشرفت نارنجی
[wppb progress=50 option=orange]

نوار پیشرفت نوار آب نبات متحرک در قرمز
[wppb progress=50 option="animated-candystripe red"]

نوار پیشرفت نوار آب نبات در رنگ سبز
[wppb progress=50 option="candystripe green"]

پیش فرض نوار پیشرفت آبی با نوار آب نبات
[wppb progress=50 option=candystripe]

نوار پیشرفت تخت در رنگ بنفش
[wppb progress=50 option=flat color=purple]

یک نوار پیشرفت نوار طلایی تخت در قهوه ای
[wppb progress=50 option="flat candystripe" color=brown]

این ها در وب سایت شما شبیه به این خواهد بود:

 
چگونه می توان یک نوار پیشرفت را در پست های وردپرس خود اضافه کرد
 

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

ابتدا باید کد های کوتاه برای ویدجت های متن را در وردپرس فعال کنید. شما می توانید این کار را با اضافه کردن خط کد زیر در فایل functions.php قالب  سایت انجام دهید.
 
add_filter('widget_text','do_shortcode');
 
اکنون می توانید صفحه «ظاهر» ابزارک را مشاهده کرده و یک ویجت متن را به نوار کناری خود اضافه کنید.  این کدی است که ما در سایت آزمایشی  استفاده کردیم:
 
1
2
3
4
5
6
[wppb progress="$2500/$4500" option="animated-candystripe red" fullwidth=true]
 
Raised: $2500
Goal: $4500
 
<a href="example.com">Donate here</a>
 
 

دیدگاه‌ خود را بنویسید

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

به بالای صفحه بردن