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

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

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

/添加下载按钮
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><!--?php } add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );<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样式中调整出自己满意的样式,以上就是代码版下载按钮!后期会考虑添加图标按钮插入段代码。

温馨提示:本文最后更新于2020-10-24 22:18:27,某些文章具有时效性,若有错误或已失效,请在下方留言或联系六速博主

请协助本站百度一下优化

© 版权声明
THE END
喜欢就支持一下吧
点赞34赞赏
分享
脑洞吐槽 抢沙发

请登录后发表评论