实现方法1
1、定义下载按钮短代码。
将下列代码添加到functions.php文件:
//定义下载按钮短代码
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"><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' );
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"><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' );
2、添加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;}
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;}
3、使用方法
点击传统文本编辑器的下载按钮,将下载链接复制到中间即可:
[wzk_down]下载按钮[/wzk_down]
[wzk_down]下载按钮[/wzk_down]
实现方法2
1、复制下列代码到 functions.php。
//添加下载按钮
function appthemes_add_quicktags() {
?><script type="text/javascript">
QTags.addButton( 'downs', '下载按钮', '<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>' );
</script><?php }
add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );
function appthemes_add_quicktags() {
?><script type="text/javascript">
QTags.addButton( 'downs', '下载按钮', '<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>' );
</script><?php }
add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );
2、添加 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;}
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;}
3、使用方法
在文本编辑器里输入下列代码:
[wzk_down]点击下载[/wzk_down]
[wzk_down]点击下载[/wzk_down]
实现方法3
<div id="download" style="text-align: center;>
<a style="border-radius: 5px; color: #fff; text-decoration:none; background-color: #32a5e7; border: 2px solid #32a5e7; text-indent: 0; padding: 8px 25px 9px;"href="http://www.wparticle.cn">
按钮样式
</a>
</div>
<a style="border-radius: 5px; color: #fff; text-decoration:none; background-color: #32a5e7; border: 2px solid #32a5e7; text-indent: 0; padding: 8px 25px 9px;"href="http://www.wparticle.cn">
按钮样式
</a>
</div>
按钮样式