当前位置:网站首页 > WordPress教程 > 正文
WordPress文章插入下载按钮_自定义按钮样式
作者:98wpeu发布时间:2026-03-13分类:WordPress教程浏览:193
导读:搭建网站后发文章经常会碰到提供下载链接或者演示地址的情况,默认插入超链接的话并不好看,怎么给文章插入一个漂亮的下载按钮呢?分享两种简单的方法给大家。纯代码版本,经典编辑器推荐建站笔...
搭建网站后发文章经常会碰到提供下载链接或者演示地址的情况,默认插入超链接的话并不好看,怎么给文章插入一个漂亮的下载按钮呢?分享两种简单的方法给大家。
纯代码版本,经典编辑器推荐
建站笔记的下载按钮,就是使用的代码实现。
建站笔记
实现方法也简单,就是单独设置一个下载按钮的css样式即可。
使用方法如下:
- 在css样式里面创建一个下载按钮的css样式;
- 发文章的时候插入带有class属性值的a标签即可。

建站笔记网站上的下载按钮使用的css如下:
.theme-demo {
border-radius: 5px;
color: #ffffff!important;
display: inline-block;
margin-right: 10px;
margin-bottom: 10px;
padding: 10px 15px;
background-color: #3bc492;
text-decoration: none!important;
text-indent: 0!important;
}添加到你主题的css样式文件即可,方法:
- WP后台,外观,主题编辑器。
- 复制上面内容添加到style.css最末尾,保存。
如果你还想在下载按钮里面插入下载图标什么的,自己添加对应的css样式就可以了。这个网站上有很多漂亮的按钮样式,可以去copy一些。
可能你会说这样插入代码太麻烦了,每次都要手动加一个class=”theme-demo”到链接里面,或者要手动复制代码。
别慌,看这篇文章:WordPress编辑器增强_快速插入特定代码:AddQuicktag
系统自带按钮,古腾堡编辑器推荐
如果你使用的是古腾堡编辑器,那么就没有这么麻烦了,你可以直接插入按钮就行了。方法如下:
1、发文章时,点击➕按钮,然后搜索按钮,如下图:

2、插入按钮后,在右边区块区域设置按钮的样式、颜色,添加链接,一个漂亮的下载按钮就出来了。

如果古腾堡编辑器里面的版本你不想要按钮这么圆,只需要在右边设置里面,把边框半径调整小或者0就可以了。
如果你搭建的是一个资源下载站,那么可以安装专门的下载插件,也带有漂亮的下载按钮,还方便你对资源管理。
- 6款WordPress资源下载管理插件_轻松搭建软件下载站
相关推荐
- Yii-自定义删除确认弹框(zyd)jquery实现代码 - Web前端
- JQuery 自定义CircleAnimation,Animate方法学习笔记 - Web前端
- jQuery 打造动态渐变按钮 详细图文教程 - Web前端
- jQuery 打造动态渐变按钮 详细图文教程 - Web前端
- 自定义jquery模态窗口插件无法在顶层窗口显示问题 - Web前端
- jquery 按钮状态效果 正常、移上、按下 - Web前端
- 一个分享按钮的插件使用介绍(可扩展,内附开发制作流程) - Web前端
- jquery 交替为表格添加样式的代码 - Web前端
- jQuery修改li下的样式以及li下的img的src的值的方法 - Web前端
- HTML页面弹出居中可拖拽的自定义窗口层 - Web前端
- WordPress教程排行
-
- 1#建站# 免费的VPS管理软件Xshell8/Xftp8中文版下载
- 2不同浏览器书签同步方案:坚果云+Floccus_详细使用教程
- 3KeePass实现Chrome浏览器自动填充密码方法一
- 4LNMP一键包nginx 301强制跳转到https教程
- 5WordPress随机显示特色图片插件:Random Post Thumbnails
- 6KeePass实现Chrome浏览器自动填充密码方法二
- 7SiteGround的CPU Time Usage是什么意思?为什么有感叹号
- 8WordPress关注微信公众号回复可见和阅读更多的方法
- 9自定义WooCommerce库存提示插件,修改Out of stock缺货提示
- 最近发表
-
- WordPress随机显示特色图片插件:Random Post Thumbnails
- KeePass实现Chrome浏览器自动填充密码方法一
- LNMP一键包nginx 301强制跳转到https教程
- KeePass实现Chrome浏览器自动填充密码方法二
- #建站# 免费的VPS管理软件Xshell8/Xftp8中文版下载
- 使用Xshell 8连接VPS教程_电脑登录vps的方法
- WordPress评论界面添加烟花????效果
- 不同浏览器书签同步方案:坚果云+Floccus_详细使用教程
- iOS端KeePassXC客户端APP:Strongbox Password Safe
- 给WordPress评论中的Gravatar头像图片添加ALT属性


