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

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

使用纯代码给自己的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 ?-->
wordpress代码版添加精简好用的下载按钮

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

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

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

历史上的今天
十月
14
阿强爱分享
  • 本文由 发表于 2020年10月14日11:02:06
  • 转载请务必保留本文链接:https://iooqp.cn/2416.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: