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

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

代码版下载按钮截图:



教程代码(代码放进主题目录中的functions.php中)

//添加下载按钮 https://www.ydxinzuo.cn
function appthemes_add_quicktags() {
?&gt;<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>&nbsp;本地下载</button></a></span></div>
<p>'
);
// ]]></script><!--?php } add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );&lt;br ?-->

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


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样式中调整出自己满意的样式,以上就是代码版下载按钮!

 

非著名均为来自网络,不代表一点新作立场,若为著名原创,转载请注明出处:http://ydxinzuo.cn/archives/518

作者: xinyuan7630

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

在线咨询: QQ交谈

邮箱: 303817524@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部