0

0

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

冰川箭仙

冰川箭仙

发布时间:2025-05-27 15:38:13

|

681人浏览过

|

来源于php中文网

原创

您是否曾想在 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% 的进度。

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

很容易吧?

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

将文本添加到进度栏

在上面的示例中,您可以看到我们的进度条实际上并没有提及它的含义。您可以通过使用短代码中的文本属性在进度栏中添加一些有用的文本来更改这一点。

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

这将在进度栏顶部显示您的文本,如下所示:

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

显示货币而不是进度条百分比

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

以下是如何使用短代码显示货币并指示目标金额和迄今为止收集的金额。

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

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

Type Studio
Type Studio

一个视频编辑器,提供自动转录、自动生成字幕、视频翻译等功能

下载

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

如果你想在进度条之外显示文本,那么你可以修改短代码,如下所示:

[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 侧边栏小部件中添加进度栏

首先,您需要在 WordPress 中启用文本小部件的短代码。您可以通过在主题的functions.php文件或特定于站点的插件中添加以下代码行来完成此操作。

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

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

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
php文件怎么打开
php文件怎么打开

打开php文件步骤:1、选择文本编辑器;2、在选择的文本编辑器中,创建一个新的文件,并将其保存为.php文件;3、在创建的PHP文件中,编写PHP代码;4、要在本地计算机上运行PHP文件,需要设置一个服务器环境;5、安装服务器环境后,需要将PHP文件放入服务器目录中;6、一旦将PHP文件放入服务器目录中,就可以通过浏览器来运行它。

2911

2023.09.01

php怎么取出数组的前几个元素
php怎么取出数组的前几个元素

取出php数组的前几个元素的方法有使用array_slice()函数、使用array_splice()函数、使用循环遍历、使用array_slice()函数和array_values()函数等。本专题为大家提供php数组相关的文章、下载、课程内容,供大家免费下载体验。

1737

2023.10.11

php反序列化失败怎么办
php反序列化失败怎么办

php反序列化失败的解决办法检查序列化数据。检查类定义、检查错误日志、更新PHP版本和应用安全措施等。本专题为大家提供php反序列化相关的文章、下载、课程内容,供大家免费下载体验。

1568

2023.10.11

php怎么连接mssql数据库
php怎么连接mssql数据库

连接方法:1、通过mssql_系列函数;2、通过sqlsrv_系列函数;3、通过odbc方式连接;4、通过PDO方式;5、通过COM方式连接。想了解php怎么连接mssql数据库的详细内容,可以访问下面的文章。

1120

2023.10.23

php连接mssql数据库的方法
php连接mssql数据库的方法

php连接mssql数据库的方法有使用PHP的MSSQL扩展、使用PDO等。想了解更多php连接mssql数据库相关内容,可以阅读本专题下面的文章。

1566

2023.10.23

html怎么上传
html怎么上传

html通过使用HTML表单、JavaScript和PHP上传。更多关于html的问题详细请看本专题下面的文章。php中文网欢迎大家前来学习。

1297

2023.11.03

PHP出现乱码怎么解决
PHP出现乱码怎么解决

PHP出现乱码可以通过修改PHP文件头部的字符编码设置、检查PHP文件的编码格式、检查数据库连接设置和检查HTML页面的字符编码设置来解决。更多关于php乱码的问题详情请看本专题下面的文章。php中文网欢迎大家前来学习。

1669

2023.11.09

php文件怎么在手机上打开
php文件怎么在手机上打开

php文件在手机上打开需要在手机上搭建一个能够运行php的服务器环境,并将php文件上传到服务器上。再在手机上的浏览器中输入服务器的IP地址或域名,加上php文件的路径,即可打开php文件并查看其内容。更多关于php相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

1310

2023.11.13

拼多多赚钱的5种方法 拼多多赚钱的5种方法
拼多多赚钱的5种方法 拼多多赚钱的5种方法

在拼多多上赚钱主要可以通过无货源模式一件代发、精细化运营特色店铺、参与官方高流量活动、利用拼团机制社交裂变,以及成为多多进宝推广员这5种方法实现。核心策略在于通过低成本、高效率的供应链管理与营销,利用平台社交电商红利实现盈利。

31

2026.01.26

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
最新Python教程 从入门到精通
最新Python教程 从入门到精通

共4课时 | 22.3万人学习

Node.js 教程
Node.js 教程

共57课时 | 9.4万人学习

CSS3 教程
CSS3 教程

共18课时 | 4.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号