^ 回到顶部
  • 人生没有定律,每个人都有自己的节奏
  • 本站wordpress建站教程均通过实践后发布,希望对你有帮助,如果有代码出错,请联系站长解决
  • 希望你的坚持,都是因为热爱,而不是因为不甘心
  • 8年wordpress建站经验,5星服务品质
  • 那些不愿意让你吃亏的人,才是真正值得你深交的人,也是值得你付出时间的人
  • 阿里云ECS服务器

WordPress添加下载按钮

今天陌小雨告诉大家如何添加一个下载按钮,可以在编辑文章的时候很方便的调用,部分代码来至网络:

1、同样是在 functions.php 中添加如下代码,不过代码稍微有点不同。

阿里服务器 2核2g仅需86元/年    宝塔用户专属:¥3188礼包

//添加下载按钮
function appthemes_add_quicktags() {
?><script type="text/javascript">// <![CDATA[
 
QTags.addButton( 'xydowns', '下载按钮', '<div class="sg-dl"><span class="sg-dl-span"><a href="','" target=_blank title="文件下载" rel=nofollow><button type="button" class="btn-download">下载</button></a></span></div>' );
// ]]></script><?php } add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );

2、添加 css 代码美化

.btn-download{color:#fff;background:#5fbaac;border-top:0;box-shadow:0 0 0 1px #EEE;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:before{content:"\f0ed";display:inline-block;font-style:normal;font-family:FontAwesome;text-align:center;margin-right:8px}.sg-dl{margin:20px 0 10px 0;text-align:center}.sg-dl .sg-dl-span{margin:0 auto}

css 中使用了 Font Awesome 字体,xiu 主题整合该字体,可点击前往:替换 xiu 主题默认图标字体为 Font Awesome

效果图类似下面的:

WordPress添加下载按钮

让小雨知道,这篇文章帮到了你
扫码关注微信公众号zs40086(微搜片)随时随地微信看片,抢先福利电影等你来

热门推荐

如有疑问,请前往问答中心反馈!

反馈
  1. 小强强
    我已经成功添加代码了,但是怎么调用呢?
    • 陌小雨网站管理员
      @小强强 写文章的时候有个下载按钮哦
  2. 万花坞
    很不错支持
    • 陌小雨网站管理员
      @万花坞 谢谢,文章底部有个赏
  3. 苏檬
    为毛我的XIU不能用表情 :evil:
    • 陌小雨网站管理员
      @苏檬 如果需要,可以选择有偿服务,^_^
    • 路人甲
      @苏檬 仔细研究php文件你会发现惊喜
      • 苏檬
        @路人甲 :grin: 发现什么惊喜?
        • 陌小雨网站管理员
          @苏檬 我也想知道哈
          • 苏檬
            @陌小雨 :sad: 求无偿教程
        • 路人甲
          @苏檬 comments.php文件中的80行
      • 苏檬
        @路人甲 非常感谢 :grin: comments.php文件中的80行 :wink:
  4. 苏檬
    我添加后居然空白了 :shock:
    • 陌小雨网站管理员
      @苏檬 是不是你复制的时候出现了问题?
      • 苏檬
        @陌小雨 木有啊 :???:
        • 陌小雨网站管理员
          @苏檬 我用的很正常呢
  5. 吴先生
    这个方法先mark一下,,等下试试
    • 陌小雨网站管理员
      @吴先生 好用就点个赞,O(∩_∩)O~
  6. Han
    赶紧来评论个
    • moxiaoyu网站管理员
      @Han 为啥我头像都不显示了呢。。 :arrow:
      • Han
        @moxiaoyu 貌似是头像缓存出问题了
        • moxiaoyu网站管理员
          @Han 我给你回复有邮件提示的么? :smile:
          • Han
            @moxiaoyu 没有 :sad:
          • moxiaoyu网站管理员
            @moxiaoyu 看来还需要设置一下哈! :grin:
  7. 小武
    短代码
    • 陌小雨网站管理员
      @小武 是的
  8. 李阳博客
    百度广告多放一下图片的,这样收入比较好一点
    • 陌小雨网站管理员
      @李阳博客 图片广告?过滤掉其他的么?
  9. 李阳博客
    支持一下,帮你点点广告哈哈
  10. Han
    也没个演示么?
    • 陌小雨网站管理员
      @Han 有呀,详见:http://www.dedewp.com/790.html
      • Han
        @陌小雨 太小了。。。。
        • 陌小雨网站管理员
          @Han 可以改的呀,大小随便设置!图片也随意设置。
          • Han
            @陌小雨 你这个有点小了,不显眼,美化下吧