当前位置:首页>WordPress建站>用户交互>为WordPress添加侧边跟随百度分享按钮(含划词分享、图片分享效果)

为WordPress添加侧边跟随百度分享按钮(含划词分享、图片分享效果)

什么是侧边跟随百度分享按钮?三好公民先用一个预览图表达一下想要实现的效果:

2014-10-21_223758

正如你所看到的,侧边跟随百度分享按钮指的就是上图中的 ①,这个百度分享按钮能够固定悬浮在页面左侧,跟随页面滚动一直显示;② 就是划词分享效果;③ 就是图片分享效果。

下面三好公民详解一下实现方法,参考了鸟哥在HotNews Pro Plus主题中的代码,原代码没有划词分享和图片分享效果,三好公民做了一点修改,能够实现划词分享和图片分享效果,并且能够在任何WordPress主题上添加侧边跟随百度分享按钮。

1.新建一个文件 share.php,然后把如下代码粘贴到其中:

  1. <div id="share">
  2. <div class="share_top">
  3. <i class="lt"></i>
  4. </div>
  5. <div class="share">
  6. <div class="bdsharebuttonbox">
  7. <a href="#" class="bds_more" data-cmd="more"></a>
  8. <a title="分享到QQ空间" href="#" class="bds_qzone" data-cmd="qzone"></a>
  9. <a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina"></a>
  10. <a title="分享到腾讯微博" href="#" class="bds_tqq" data-cmd="tqq"></a>
  11. <a title="分享到人人网" href="#" class="bds_renren" data-cmd="renren"></a>
  12. <a title="分享到微信" href="#" class="bds_weixin" data-cmd="weixin"></a>
  13. </div>
  14. <div class="clear"></div>
  15. </div>
  16. <div class="share_bottom">
  17. <i class="lb"></i>
  18. </div>
  19. </div>
  20. <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdPic":"","bdStyle":"0","bdSize":"16"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到:","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>

将这个 share.php 文件上传到当前主题的根目录。

2.在主题的style.css中添加如下样式代码:

  1. #share {
  2. display:block;
  3. width:35px;
  4. margin-left:-517px;
  5. position:fixed;
  6. left:50%;
  7. top:420px;
  8. _margin-left:-515px;
  9. _position:absolute;
  10. _margin-top:420px;
  11. _top:expression(eval(document.documentElement.scrollTop));
  12. }
  13. .share {
  14. background:#fff;
  15. width:24px;
  16. border-left: 1px solid #ccc;
  17. border-right: 1px solid #ccc;
  18. }
  19. .share_top {
  20. position:relative;
  21. background:#fff;
  22. width:24px;
  23. height:8px;
  24. border-top:1px solid #ccc;
  25. border-left: 1px solid #ccc;
  26. border-right: 1px solid #ccc;
  27. }
  28. .share_bottom {
  29. position:relative;
  30. background:#fff;
  31. width:24px;
  32. height:8px;
  33. margin:0 0 10px 0;
  34. border-left: 1px solid #ccc;
  35. border-right: 1px solid #ccc;
  36. border-bottom:1px solid #ccc;
  37. }
  38. .bdsharebuttonbox {
  39. padding:0 0 0 4px !important;
  40. }
  41. .bdsharebuttonbox a {
  42. width:16px !important;
  43. padding:0 !important;
  44. margin:3px 0 !important;
  45. }

3.在主题的 footer.php 中 </body> 的前面添加调用 share.php 文件的代码即可:

  1. <?php get_template_part( 'share' ) ?>
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
欢迎关注WordPress大学公众号 WPDAXUE
用户交互

WordPress 连接微博专业版(一键登录、同步分享文章、评论)

2014-10-14 8:13:00

用户交互

WordPress 邮件通知系统美化版

2014-11-11 9:34:32

12 条回复 A文章作者 M管理员
欢迎您,新朋友,感谢参与互动!
  1. 如果要分享到国外的facebook之类的网站呢?

    • 那就“翻墙”之后,再分享出去……(记到先到脸书上面登陆一下)

  2. 图片上并没有分享按钮啊

  3. ”分享到“三个字乱码

    • 保存文件为 utf-8 无bom格式即可

  4. 分享功能不错

  5. 为何不直接用百度分享提供的代码…

    • 直接用百度分享提供的代码是没有侧边跟随效果的。

  6. 可以试试

  7. 板凳

  8. 那么问题来了,新浪微博抓不到图。。

    • 只有点击图片上的分享按钮才会抓图的,点击侧边跟随的分享按钮是不会抓图的。

个人中心
购物车
优惠劵
今日签到
私信列表
搜索