آیا تا به حال خواسته اید یک نوار پیشرفت در سایت وردپرس خود اضافه کنید؟ شما می توانید از آن برای نشان دادن پیشرفت در یک کمپین جمع آوری کمک مالی ، نقاط عطف پروژه خاصی که در حال کار روی آن هستید و غیره استفاده کنید. اخیراً یکی از خوانندگان ما پرسید که چگونه می توانند نوار پیشرفت را در یک پست وردپرس اضافه کنند در این مقاله ، ما به شما نشان خواهیم داد که چگونه می توانید یک نوار پیشرفت در پست ها ، صفحات و ابزارهای وردپرس خود اضافه کنید.
آموزش فیلم h4>
اگر فیلم را دوست ندارید یا به دستورالعمل های بیشتری احتیاج دارید ، به خواندن ادامه دهید.
اولین کاری که باید انجام دهید نصب و فعال کردن پلاگین Progress Bar . خارج از جعبه کار می کند و هیچ تنظیماتی برای پیکربندی شما وجود ندارد.
به سادگی یک پست یا صفحه را ویرایش کنید و می خواهید نوار پیشرفت را نمایش دهید و کد کوتاه در این قالب:
[wppb progress = 50]
این یک نوار پیشرفت متحرک را نشان می دهد تا 50٪ پیشرفت را با استفاده از رنگ آبی پیش فرض نشان دهد.
خیلی راحت؟
همچنین می توانید کد کوتاه را برای تغییر رنگ ، افزودن متن به نوار پیشرفت ، نشان دادن ارز به جای درصد و موارد دیگر تنظیم کنید. بیایید نگاهی به برخی از این گزینه های سفارشی سازی بیندازیم.
افزودن متن به نوار پیشرفت h4>
در مثال بالا می بینید که در نوار پیشرفت ما در مورد آنچه در مورد آن ذکر شده ذکر نشده است. با افزودن متن مفید در نوار پیشرفت با استفاده از ویژگی متن در کد کوتاه می توانید آن را تغییر دهید.
[wppb progress = 75 text = "پیشرفت تاکنون"]
با این کار متن شما در بالای نوار پیشرفت نمایش داده می شود و به صورت زیر خواهد بود:
نمایش ارز به جای درصد در نوار پیشرفت h4>
به طور پیش فرض ، نوار پیشرفت درصد تکمیل را نشان می دهد ، اما اگر از آن برای یک کار جمع آوری کمک مالی استفاده کنید ، می توانید آن را به ارز تغییر دهید.
در اینجا نحوه استفاده از کد کوتاه برای نمایش ارز و نشان دادن هم مقدار هدف و هم مقدار جمع آوری شده تاکنون وجود دارد.
[wppb progress = "250/1000 $" text = "250 $ / 1000 $ مطرح شده"]
در وب سایت شما اینگونه به نظر می رسد:
اگر می خواهید متن را خارج از نوار پیشرفت نشان دهید ، می توانید کد کوتاه را مانند این تغییر دهید:
[wppb progress = "250/1000 $" text = "$ 250/1000 $ Raised" location = "after"]
تغییر رنگ و ظاهر نوار پیشرفت h4>
افزونه Progress Bar دارای چند رنگ و گزینه ظاهر است که می توانید استفاده کنید. گزینه های داخلی رنگ آبی ، قرمز ، زرد ، نارنجی و سبز است. با این وجود می توانید از هر رنگی که می خواهید استفاده کنید. می توانید یک نوار پیشرفت مسطح یا متحرک اضافه کنید.
در اینجا نحوه استفاده از کد کوتاه برای استفاده از هر گزینه وجود دارد:
نوار پیشرفت نارنجی [wppb progress = 50 option = orange]
نوار پیشرفت نوار آب نبات متحرک با رنگ قرمز [wppb progress = 50 option = "animated-candystripe stripe red"]
نوار پیشرفت نوار آب نبات به رنگ سبز [wppb progress = 50 option = "candystripe green"]
نوار پیش فرض پیشرفت آبی با نوار آب نبات [wppb progress = 50 option = candystripe]
یک نوار پیشرفت مسطح با رنگ بنفش [wppb progress = 50 option = flat flat = بنفش]
نوار پیشرفت نوار تخت آب نبات به رنگ قهوه ای [wppb progress = 50 option = "candystripe" color = brown]
این نوارهای پیشرفت در سایت شما به این شکل است:
افزودن نوار پیشرفت در ابزارک های نوار کناری وردپرس h4>
ابتدا باید کد کوتاه ابزارک های متن را در وردپرس فعال کنید. شما می توانید این کار را با افزودن کد زیر در یا در یک پرونده افزونه اختصاصی سایت .
add_filter ('widget_text'، 'do_shortcode')؛
اکنون می توانید از صفحه Appearance »ابزارک ها بازدید کرده و یک ابزارک نوشتاری به نوار کناری خود اضافه کنید. درست مانند استفاده از آن در یک پست یا صفحه ، از کد کوتاه نوار پیشرفت استفاده کنید. این کدی است که ما در سایت آزمایشی خود از آن استفاده کردیم:
[wppb progress = "$ 2500/4500 $" option = "animated-candystripe red" fullwidth = true] جمع آوری شده: 2500 دلار هدف: 4500 دلار اهدای اینجا
در سایت آزمون ما اینگونه مشاهده شد:
امیدواریم این مقاله به شما کمک کند نوار پیشرفت زیبایی را در پست ها یا صفحات وردپرس خود اضافه کنید. همچنین ممکن است بخواهید راهنمای ما را در نحوه افزودن دکمه اهدای PayPal در وردپرس .
اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube مشترک شوید برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .
منبع:
https://www.wpbeginner.com/plugins/how-to-add-a-progress-bar-in-your-wordpress-posts/.