WordPress 自定义下载按钮纯代码实现

Elementor

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' );

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. 样式预览

修改版:

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' );

注意:把上面代码中的 【 替换成 [ 。css 样式无需更改,直接使用上述css即可。

2. 使用方法

点击传统文本编辑器的下载按钮,将下载链接复制到中间即可:

【wzk_down]https://www.wenzika.com【/wzk_down]

将上面代码中的 【 替换成 [ 。

实现方法来自文字咖网站:https://www.wenzika.com/1515.html

原创文章,作者:wordus,如若转载,请注明出处:https://wpcourse.cn/95.html

发表评论

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

此站点使用 Akismet 来减少垃圾评论。了解我们如何处理您的评论数据

秋硕笔记重新上线开放。原有数据丢失,请予谅解。