还在为你的文字下载链接丑陋感到烦恼吗,还在为了下载按钮绞尽脑汁吗?走过路过不要错过,来这里看一看瞧一瞧勒!此教程使用存代码,不使用插件。
代码预览
//定义下载按钮短代码 function wzk_down($atts, $content=null){ return '<div class="sg-dl"><span class="sg-dl-span"><a href="'.$content.'" target="_blank" title="文件下载" rel="nofollow noopener noreferrer"><button type="button" class="btn-download"><i class="fa fa-download"></i> 本地下载</button></a></span></div>'; } add_shortcode('wzk_down','wzk_down'); //添加下载按钮 function appthemes_add_wzk_down() { ?> <script type="text/javascript"> if ( typeof QTags != 'undefined' ) { QTags.addButton( 'wzk_down', '下载按钮', '[wzk_down]','[/wzk_down]' ); } </script> <?php } add_action('admin_print_footer_scripts', 'appthemes_add_wzk_down' );
使用方法
将以上代码添加到functions.php之中
接下来添加css样式,会的可以自行修改成自己喜欢的样子。
.btn-download{ color:#fff; background:#169FE6; border-top:0;border:2px solid #fff; padding:10px 16px; font-size:14px; line-height:1.33; border-radius:5px; opacity:.8; text-indent:0; margin-top:5px; margin-bottom:5px; display:inline-block; font-weight:300; 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;}
将css代码复制到style.css文件之中
到这代码部分就完成了,接下来是使用教程。
使用方法
在编辑文章的时候输入
中间输入你的下载地址即可调用下载按钮样式。