精彩资源分享
我的公开个人笔记

给WordPress增加自定义下载按钮

在分享一些资源的时候,直接放上网盘链接有点不美观,可以给WordPress加上下载按钮。

把以下代码放在主题的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"><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' );

在把下面的css样式代码添加到main.css,如果是其他主题一般是style.css

/*下载按钮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;}

然后在文本里面就会有一个下载按钮,点两下,在中间的代码里面放上网盘下载地址即可。

预览效果:

历史上的今天
十一月
28
    哇哦~~~,历史上的今天没发表过文章哦
赞(1) 打赏
未经允许不得转载:安小客博客 » 给WordPress增加自定义下载按钮

评论 抢沙发

7 + 1 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏