前言

由于做了基础优化过后,叶子的部分功能和插件皆已失效,特别是之前集成的下载功能完全错位,故只好另外寻求办法解决。故有了这篇文章!

正文

很多时候我们写软件分享或者其他需要用到网盘或者下载功能的时候,很多朋友只能选择直接粘贴下载地址在文章当中,但是那样的后果就是丑陋或者说简陋,简直是low爆了。所以叶子给大家带来了不一样的下载功能,且无需插件,仅需几串代码即可轻松实现。

教程

将以下代码放进主题目录中的functions.php中(由于本站采用了全局pjax的原因,请在此页面点击F5进行刷新,方可正常显示代码)

//添加下载按钮
function DownloadUrl($atts, $content = null) {
    extract(shortcode_atts(array(
        "href" => 'http://'
    ) , $atts));
    return '<a class="dl" href="' . $href . '" target="_blank" rel="nofollow"><span calss="dl-icon"><i class="czs-download-l"></i></span>' . $content . '</a>';
}
add_shortcode("dl", "DownloadUrl");

这样我们就已经实现了下载功能,只要你在写文章的时候,将可视化编辑器调整成文本模式即可看到下载按钮,如下图。
然后我们还需要一个css样式,叶子在这里提供给大家叶子所使用的样式。如果你不喜欢这个样式也可以自己进行修改。

.btn-download{color:#fff;background:#169FE6;border-top:0;border:2px solid #fff;padding:10px 16px;font-size:18px;line-height:1.33;border-radius:5px;opacity:.8;text-indent:0;margin-top:5px;margin-bottom:5px;display:inline-block;font-weight:400;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;}

下载按钮效果图

结语

如果本篇文章有帮助到你的话,还请留言支持叶子,莫做那可恶的伸手党。