东风不来
三月的柳絮不飞

WordPress 自定义下载按钮 纯代码实现

===== 2019 年 4 月 9 日 更新:=====
由于该文章的自定义下载按钮会显示一长串的 html 代码,看着眼镜不舒服,所以博主又专门写了一篇文章,直接使用短代码调用这个下载按钮,详情请点击 WordPress 下载按钮 修改版

WordPress 下载按钮

前几天写了一篇关于 WordPress 自定义下载按钮 纯代码实现 的文章,有些小伙伴提出这个按钮显示的 html 代码太长了,看的不怎么舒服,希望能够使用短代码替换那一长串的 html 代码! 1....

修改时间:2019/6/2 分类:建站笔记 人气:423 评论:0


最近几天还算是比较清闲,所以能够静下心来看会书,写写文章!

很多小伙伴也像博主一样,想自定义一个下载按钮,当然 WordPress 肯定是有这种插件的,因为博主不是很喜欢使用插件,所以只能自己在网上找一下有没有比较好看的按钮样式的 css 代码!

1. 把下面代码复制到 functions.php

//添加下载按钮
function appthemes_add_quicktags() {
?><script type="text/javascript">
QTags.addButton( 'downs', '下载按钮', '<div class="sg-dl"><span class="sg-dl-span"><a href="','" target=_blank title="文件下载" rel=nofollow><button type="button" class="btn-download"><i class="fa fa-download"></i> 本地下载</button></a></span></div>' );
</script><?php }
add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );

添加完这段代码后,在传统编辑器的文本编辑框会出现一个下载按钮,在 href=" 后面添加你的下载地址即可!

2. 添加 css 样式

如果是使用 DUX 的主题,将下面的代码添加到 main.css 中;如果是使用其他的主题,一般是直接添加到 style.css 文件中!

.btn-download{
color:#fff;
background:#169FE6;
border-top:0;border:2px solid #fff;
padding:10px 16px;
font-size:14px;
line-height:1.33;
border-radius:5px;
opacity:.8;
text-indent:0;
margin-top:5px;
margin-bottom:5px;
display:inline-block;
font-weight:300;
text-align:center;
text-decoration:none;
white-space:nowrap;
vertical-align:middle;
cursor:pointer;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;}

 .btn-download:hover{
color:#169FE6;
background-color:#fff;
border-color:#169FE6;}

.sg-dl{margin:20px 0 10px 0;text-align:center;} 

.sg-dl .sg-dl-span{margin:0 auto;}

3. 样式预览

4. 注意事项

这个功能在博主之前修改过的 DUX 主题中已经集成好了,并且该功能只能在传统编辑器的文本编辑中使用,如果使用的是古腾堡编辑器,就不用添加这个功能了!

赞(4) 打赏
未经允许不得转载:文字咖 » WordPress 自定义下载按钮
分享到:

评论 2

7 + 7 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    是自动广告吗?位置。。。

    VPS驿站 3个月前 (04-08) 来自天朝的朋友 火狐浏览器 Windows 10 回复
    • Wonder Zhou

      @VPS驿站 直接设置的全局自动广告,其他的功能还没有看文档。。。

      Wonder Zhou 3个月前 (04-08) 来自天朝的朋友 谷歌浏览器 Windows 10 回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏