WordPress 自定义下载按钮代码

1、自定义下载按钮短代码。将下列代码添加到functions.php文件: //定义下载按钮短代码 functionwzk_down($atts,$content=null){ return'本地下载'; } add_shortcode('wzk_down','wzk_down'); //添加下载按钮 functionappthemes_add_wzk_down(){ ?> if(typeofQT…

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 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\’ );

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;}

3、使用方法:

[wzk_down]按钮[/wzk_down]

4、按钮演示:

本博客 [ 秋硕笔记 ] 内带有 原创 标签文章,均为秋硕独立创作。

撰文不易,转载请注明文章来源并保留原文链接:本文转载自 秋硕笔记。

本文链接:https://www.cuikaiyun.cn/wp-pure-code-add-article-download-button.html

按钮样式添加

原创文章,作者:秋硕笔记,如若转载,请注明出处:https://www.davidwu.net/archives/1379

发表评论

电子邮件地址不会被公开。 必填项已用*标注