如何在您的WordPress帖子中添加进度栏

Have you ever wanted to add a progress bar in your WordPress site? You can use it to show progress on a fundraising campaign, milestones for specific project that you are working on, etc. Recently one of our readers asked how they can add a progress bar in a WordPress post. In this article, we will show you how to add a progress bar in your WordPress posts, pages, and widgets.

您是否曾经想在WordPress网站中添加进度栏？ 您可以使用它显示筹款活动的进度，您正在从事的特定项目的里程碑等。最近，我们的一位读者问他们如何在WordPress帖子中添加进度栏。 在本文中，我们将向您展示如何在WordPress帖子，页面和小部件中添加进度条。

影片教学 (Video Tutorial)

演示地址

If you don’t like the video or need more instructions, then continue reading.

如果您不喜欢该视频或需要更多说明，请继续阅读。

First thing you need to do is install and activate the Progress Bar plugin. It works out of the box, and there are no settings for you to configure.

您需要做的第一件事是安装并激活进度栏插件。 它开箱即用，没有可供您配置的设置。

Simply edit a post or page where you want to display the progress bar and add the shortcode in this format:

只需编辑要显示进度条的帖子或页面，然后以这种格式添加简码 ：

[wppb progress=50]

[wppb progress=50]

This will show an animated progress bar to indicate 50% progress using the default blue color.

这将显示一个动画进度条，使用默认的蓝色指示进度为50％。

Pretty easy right?

很容易吧？

You can also customize the shortcode to change colors, add text to the progress bar, show currency instead of percentage, and more. Let’s take a look at some of these customization options.

您还可以自定义简码以更改颜色，将文本添加到进度条，显示货币而不是百分比等等。 让我们看一下其中的一些自定义选项。

向进度栏添加文本 (Adding Text to the Progress Bar)

In the example above, you can see that our progress bar does not actually mention what it is about. You can change that by adding some helpful text within the progress bar using the text attribute in the shortcode.

在上面的示例中，您可以看到我们的进度条实际上并未提及其含义。 您可以通过使用简码中的text属性在进度栏中添加一些有用的文本来进行更改。

[wppb progress=75 text="Progress so far"]

[wppb progress=75 text="Progress so far"]

This will display your text on top of the progress bar, and it will look like this:

这将在进度条顶部显示您的文本，如下所示：

在进度栏中显示货币而不是百分比 (Showing Currency Instead of Percentage in Progress Bar)

By default, the progress bar shows completion percentage, but you can change that to a currency if you’re using it for a fundraising campaign.

默认情况下，进度条会显示完成百分比，但是如果您将其用于筹款活动，则可以将其更改为一种货币。

Here is how you would use the shortcode to display the currency and indicate both the target amount and the amount collected so far.

这是您使用短码显示货币并指示目标金额和到目前为止收款金额的方式。

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

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

It will look like this on your website:

在您的网站上看起来像这样：

If you want to show the text outside the progress bar, then you can modify the shortcode like this:

如果要在进度栏外显示文本，则可以像这样修改简码：

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

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

更改进度条的颜色和外观 (Changing Progress Bar Colors and Appearance)

Progress Bar plugin comes with a few colors and appearance options that you can use. The built-in color options are blue, red, yellow, orange, and green. However, you can use any color that you want. You can add a flat or animated progress bar.

Progress Bar插件附带了一些您可以使用的颜色和外观选项。 内置的颜色选项是蓝色，红色，黄色，橙色和绿色。 但是，您可以使用任何所需的颜色。 您可以添加平面或动画进度条。

Here is how you will use the shortcode to use each option:

这是您将使用简码使用每个选项的方式：

Orange progress bar[wppb progress=50 option=orange]

橙色进度栏 [wppb progress=50 option=orange]

Animated candy stripe progress bar in red[wppb progress=50 option="animated-candystripe red"]

红色动画糖果条纹进度条 [wppb progress=50 option="animated-candystripe red"]

Candy stripe progress bar in green color[wppb progress=50 option="candystripe green"]

糖果条纹进度条，绿色 [wppb progress=50 option="candystripe green"]

A default blue progress bar with candy stripe[wppb progress=50 option=candystripe]

默认的蓝色进度条带有糖果条纹 [wppb progress=50 option=candystripe]

A flat progress bar in purple color[wppb progress=50 option=flat color=purple]

扁平的紫色进度条 [wppb progress=50 option=flat color=purple]

A flat candy stripe progress bar in brown[wppb progress=50 option="flat candystripe" color=brown]

棕色扁平糖果条纹进度条 [wppb progress=50 option="flat candystripe" color=brown]

This is how these progress bars will look on your site:

这些进度条将在您的网站上显示如下：

在WordPress侧边栏小部件中添加进度栏 (Adding Progress Bar in WordPress Sidebar Widgets)

First you will need to enable shortcodes for text widgets in WordPress. You can do this by adding the following line of code in your theme’s functions.php file or in a site-specific plugin.

首先，您将需要为WordPress中的文本小部件启用简码。 您可以通过在主题的functions.php文件或特定于站点的插件中添加以下代码行来实现。

add_filter('widget_text','do_shortcode');

You can now visit Appearance » Widgets page and add a text widget to your sidebar. Use the progress bar shortcode in the text widget just like you would use it in a post or page. Here is a code we used on our demo site:

您现在可以访问外观»小部件页面，并将文本小部件添加到侧边栏中。 就像在帖子或页面中使用进度条一样，在文本小部件中使用进度条短代码。 这是我们在演示站点上使用的代码：

[wppb progress="$2500/$4500" option="animated-candystripe red" fullwidth=true]

Raised: $2500
Goal: $4500

<a href="example.com">Donate here</a>

This is how it looked on our test site:

这是在我们的测试站点上的外观：

We hope this article helped you add beautiful progress bar in your WordPress posts or pages. You may also want to see our guide on How to Add a PayPal Donate Button in WordPress.

我们希望本文能帮助您在WordPress帖子或页面中添加漂亮的进度条。 您可能还想查看有关如何在WordPress中添加PayPal捐赠按钮的指南。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。

翻译自: https://www.wpbeginner.com/plugins/how-to-add-a-progress-bar-in-your-wordpress-posts/