当前位置:秋硕笔记 > 记录 > 正文

纯代码实现WordPress文章添加下载按钮

本文采用的是直接在文章页中声明按钮的样式,无需安装任何插件及其它的代码配置,只要两步就能搞定,简单易用,轻松上手。

1、新建需要按钮的DIV标签ID,比如说需要一个下载按钮,那我们就声明

[cc]

[/cc]

2、在DIV标签中声明按钮的超链接A标签,具体如下:

[cc]

[/cc]

其中href=”#”的网址可以是你下载文件的地址,替换即可。

具体代码如下:

按钮样式演示:

本文来自:http://www.nfseo.com/
PS:WordPress教程|文章页添加下载按钮纯代码
介绍

在编辑文章时难免会有需要下载的文件等,往往只是插入一个超链接,美化感很差,今天带来一个简单代码实现美化下载按钮教程,可以在编辑文章的时候在文本中调用。

演示
纯代码实现WordPress文章添加下载按钮
代码

在主题的functions.php 中添加如下代码:
[cc]
//添加下载按钮
function appthemes_add_quicktags() {
?> [/cc]
在主题的style.css 中添加 css 代码美化:
[cc]
.btn-download{color:#fff;background:#5fbaac;border-top:0;box-shadow:0 0 0 1px #EEE;border:2px solid #fff;padding:10px 16px;font-size:18px;line-height:1.33;border-radius:5px;opacity:.8;text-indent:0;margin-top:5px;margin-bottom:5px;display:inline-block;font-weight:400;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:before{content:”\f0ed”;display:inline-block;font-style:normal;font-family:FontAwesome;text-align:center;margin-right:8px}.sg-dl{margin:20px 0 10px 0;text-align:center}.sg-dl .sg-dl-span{margin:0 auto}
[/cc]
添加完成后我们就已经实现了美化下载按钮,写文章的时候,将可视化编辑器调整成文本模式即可看到下载按钮,点击一次下载按钮输入链接地址,再次点击下载按钮代码结束,如下图
纯代码实现WordPress文章添加下载按钮
PS:WordPress 自定义下载按钮 纯代码实现
1. 把下面代码复制到 functions.php
[cc]
//添加下载按钮
function appthemes_add_quicktags() {
?>

4. 注意事项
这个功能在博主之前修改过的 DUX 主题中已经集成好了,并且该功能只能在传统编辑器的文本编辑中使用,如果使用的是古腾堡编辑器,就不用添加这个功能了!
PS:WordPress 下载按钮 修改版
1. 重新定义下载按钮短代码

代码很简单,将之前添加的 functions.php 下载按钮代码替换成下面代码:
[cc]
//定义下载按钮短代码
function wzk_down($atts, $content=null){
return ‘

‘;
}
add_shortcode(‘wzk_down’,’wzk_down’);

//添加下载按钮
function appthemes_add_wzk_down() {
? >

感觉很棒!可以赞赏支持我哟~

赞(0) 打赏

评论抢沙发