wordpress代码版添加精简好用的下载按钮

Webmaster · 浏览 1039 · 点赞 0 · 评论 0 · 5年前 (2018-05-28)

我们写博客的初衷就是分享，必不可免的就是分享一些需要下载的文件，然而在wordpress中也有相关的下载插件，但是有些博主会觉得使用太多的插件，站点就太过繁重，于是就有简短的代码版出现了。原理很简单，就是通过a标签的超链接来实现，简约而不简单。这里我以DUX主题为例，使用纯代码给自己的wordpress添加一个下载的按钮，支持前后台同步哦！

代码版下载按钮截图：

教程代码（代码放进主题目录中的functions.php中）

//添加下载按钮 https://www.ydxinzuo.cn
function appthemes_add_quicktags() {
?><script type="text/javascript">// <![CDATA[
QTags.addButton( 'downs', '下载按钮', '</p>
<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>
<p>' );
// ]]></script>

上面代码添加完成，后台下载添加按钮，就如图所示：

css样式代码（在main.css文件中添加）：

/*--下载按钮-代码版--ttps://www.ydxinzuo.cn*/
.btn-download{color:#fff;background:#169FE6;border-top:0;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: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;}
/*下载按钮结束*/

有html代码基础的，可以自己在css样式中调整出自己满意的样式，以上就是代码版下载按钮！