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"]

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

Programming Helper
Programming Helper

AI代码自动生成器,在AI的帮助下更快地编程

下载

如何在 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

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

豆包大模型
豆包大模型

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

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

更多
counta和count的区别
counta和count的区别

Count函数用于计算指定范围内数字的个数,而CountA函数用于计算指定范围内非空单元格的个数。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

203

2023.11.20

Golang channel原理
Golang channel原理

本专题整合了Golang channel通信相关介绍,阅读专题下面的文章了解更多详细内容。

261

2025.11.14

golang channel相关教程
golang channel相关教程

本专题整合了golang处理channel相关教程,阅读专题下面的文章了解更多详细内容。

351

2025.11.17

default gateway怎么配置
default gateway怎么配置

配置default gateway的步骤:1、了解网络环境;2、获取路由器IP地址;3、登录路由器管理界面;4、找到并配置WAN口设置;5、配置默认网关;6、保存设置并退出;7、检查网络连接是否正常。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

236

2023.12.07

location.assign
location.assign

在前端开发中,我们经常需要使用JavaScript来控制页面的跳转和数据的传递。location.assign就是JavaScript中常用的一个跳转方法。通过location.assign,我们可以在当前窗口或者iframe中加载一个新的URL地址,并且可以保存旧页面的历史记录。php中文网为大家带来了location.assign的相关知识、以及相关文章等内容,供大家免费下载使用。

232

2023.06.27

http与https有哪些区别
http与https有哪些区别

http与https的区别:1、协议安全性;2、连接方式;3、证书管理;4、连接状态;5、端口号;6、资源消耗;7、兼容性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2910

2024.08.16

wordpress seo
wordpress seo

WordPress网站SEO优化方法有:1、选择一个SEO友好的主题,具有清晰的代码结构,快速的加载速度和响应式设计;2、使用SEO插件,优化你的标题标签,元描述,关键字,XML站点地图等;3、优化你的内容,内容是SEO优化的核心;4、优化你的网站速度;5、创建友好的URL;6、使用内部链接;7、优化图像;8、使用社交媒体;9、定期更新你的网站;10、监控和分析你的网站等等。

435

2023.09.18

wordpress下载后怎么安装
wordpress下载后怎么安装

安装前准备:确保服务器满足要求、获取安装文件、创建数据库。上传 wordpress 文件。创建数据库和用户。运行安装程序:选择语言、输入数据库信息、网站标题和管理员信息。安装 wordpress。安装后配置:设置永久链接、安装主题、安装插件、创建内容。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

335

2024.04.15

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

76

2026.03.11

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
大数据(MySQL)视频教程完整版
大数据(MySQL)视频教程完整版

共200课时 | 19.3万人学习

Linux负载均衡视频教程
Linux负载均衡视频教程

共7课时 | 1.7万人学习

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

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