• 欢迎访问毫厘博客,博客上的所有软件及相关资料均为软件商和个人工作总结或网友推荐及网络收集整理而来、仅供学习和研究使用、切勿用做商业用途、如有侵犯版权者、请来信到邮箱 :www_ihli_xyz@163.com 指出、毫厘博客将立即修正、净化网络版权环境、同时毫厘博客也不承担用户因使用这些下载资源对自己和他人造成任何形式的损失或伤害。

「wordpress教程」纯代码添加美观的下载按钮

wordpress教程 hauyf 9个月前 (06-09) 308次浏览 已收录 0个评论 扫描二维码

还在为你的文字下载链接丑陋感到烦恼吗,还在为了下载按钮绞尽脑汁吗?走过路过不要错过,来这里看一看瞧一瞧勒!此教程使用存代码,不使用插件。

代码预览

//定义下载按钮短代码
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之中

「wordpress教程」纯代码添加美观的下载按钮

接下来添加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文件之中

「wordpress教程」纯代码添加美观的下载按钮

到这代码部分就完成了,接下来是使用教程。

使用方法

在编辑文章的时候输入

「wordpress教程」纯代码添加美观的下载按钮

 

中间输入你的下载地址即可调用下载按钮样式。


毫厘博客, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:「wordpress教程」纯代码添加美观的下载按钮
喜欢 (1)
[]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址