Loading
0

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

公众号搜索菜鸟站长之家

使用纯代码给自己的wordpress添加一个下载的按钮,支持前后台编辑器段代码添加!

代码版下载按钮截图:

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

/添加下载按钮
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文件中添加):

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

后期会考虑添加图标按钮插入段代码。

已经更新到最新 最新全的段代码:https://www.cnzzzj.com/1252.html
文章声明:
1、本站文章来源于互联网,仅供学习交流使用,严禁用于商业用途,因此造成的一切法律后果自行承担。
2、本站不对文章内容的完整性和安全性负责,请自行辨别,如发现有问题,请及时联系我们进行处理。
3、若文章中有侵权或不适当内容,请留言告知我们,本站会第一时间进行处理。