您是否曾想在 wordpress 網站中添加進度條？您可以使用它來顯示籌款活動的進度、您正在從事的特定項目的里程碑等。最近我們的一位讀者詢問如何在 wordpress 帖子中添加進度條。在本文中，我們將向您展示如何在 wordpress 帖子、頁面和小部件中添加進度條。

視頻教程

https://www.youtube.com/embed/dueB4544Yrs?version=3&rel=0&fs=1&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent訂閱 WPBeginner

https://www.youtube.com/subscribe_embed?usegapi=1&channel=wpbeginner&layout=default&count=default&origin=https%3A%2F%2Fwpbeginner.com&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-Static%2F_%2Fjs%2Fk%3Doz.gapi.en.vQiXRrxCe40.O%2Fam%3DAQ%2Fd%3D1%2Frs%3DAGLTcCMBxIGVyXSdvvcs43a64yHt_P7dfg%2Fm%3D__features__#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I0_1448178294715&parent=https%3A%2F%2Fwpbeginner.com

如果您不喜歡該視頻或需要更多說明，請繼續閱讀。

您需要做的第一件事是安裝并激活進度欄插件。它開箱即用，無需您配置任何設置。

只需編輯要顯示進度條的帖子或頁面并添加以下格式的短代碼：

[wppb progress=50]

這將顯示一個動畫進度條，使用默認的藍色指示 50% 的進度。

很容易吧？

您還可以自定義短代碼以更改顏色、向進度條添加文本、顯示貨幣而不是百分比等等。讓我們看一下其中一些自定義選項。

將文本添加到進度欄

在上面的示例中，您可以看到我們的進度條實際上并沒有提及它的含義。您可以通過使用短代碼中的文本屬性在進度欄中添加一些有用的文本來更改這一點。

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

這將在進度欄頂部顯示您的文本，如下所示：

顯示貨幣而不是進度條百分比

默認情況下，進度條顯示完成百分比，但如果您將其用于籌款活動，則可以將其更改為貨幣。

以下是如何使用短代碼顯示貨幣并指示目標金額和迄今為止收集的金額。

[wppb progress=”$250/1000″ text=”$250/$1000 Raised”]

它在您的網站上看起來像這樣：

如果你想在進度條之外顯示文本，那么你可以修改短代碼，如下所示：

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

更改進度條顏色和外觀

進度欄插件附帶了一些您可以使用的顏色和外觀選項。內置顏色選項有藍色、紅色、黃色、橙色和綠色。但是，您可以使用任何您想要的顏色。您可以添加平面或動畫進度條。

以下是如何使用短代碼來使用每個選項：

橙色進度條
[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]

這些進度條在您網站上的外觀如下：

在 wordpress 側邊欄小部件中添加進度欄

首先，您需要在 WordPress 中啟用文本小部件的短代碼。您可以通過在主題的functions.php文件或特定于站點的插件中添加以下代碼行來完成此操作。

我們希望這篇文章可以幫助您在 WordPress 帖子或頁面中添加漂亮的進度條。您可能還想查看有關如何在 WordPress 中添加 PayPal 捐贈按鈕的指南。