HotNews Pro 2.72集成的固定在页面左侧的百度分享按钮,可方便读者分享自己喜欢的文章,本文教你把这个固定的分享按钮添加到其它主题中。
第一步,在你所用主题目录新建一个名称为:share.php的模板文件,将下面的代码复制到进去并保存:
- <div id="share">
- <div class="share">
- <div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">
- <a class="bds_tsina"></a>
- <a class="bds_tqq"></a>
- <a class="bds_qzone"></a>
- <a class="bds_renren"></a>
- <span class="bds_more"></span>
- </div>
- <div style="clear:both;"></div>
- </div>
- </div>
- <script type="text/javascript" id="bdshare_js" data="type=tools&uid=0" ></script>
- <script type="text/javascript" id="bdshell_js"></script>
- <script type="text/javascript">
- document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)
- </script>
- <style type="text/css">
- #share {
- display:block;
- width:35px;
- margin-left:-546px;/* 修改左右位置 */
- position:fixed;
- left:50%;
- top:420px;/* 修改上下位置 */
- _margin-left:-546px;/* IE6修改左右位置 */
- _position:absolute;
- _margin-top:420px;/* IE6修改上下位置 */
- _top:expression(eval(document.documentElement.scrollTop));
- }
- .share {
- background:#fff;
- width:24px;
- border: 1px solid #ccc;
- border-radius:5px 0 0 5px;
- }
- #bdshare_l {
- border-radius: 5px;
- }
- div #bdshare_l_c {
- border: 1px solid #ccc;
- border-radius: 5px;
- }
- #bdshare h6, #bdshare_s h6,#bdshare p, #bdshare_s p {
- display:none;
- }
- </style>
第二步,将调用代码:
- <?php include('share.php'); ?>
添加到主题页脚模板footer.php这句上面:
- <?php wp_footer(); ?>
以上代码在WP默认主题Twenty Twelve中测试通过,针对不同主题的页面宽度,可适当调整固定按钮的位置,代码中有注释。

版权声明
本站原创文章转载请注明文章出处
2013年9月22日 19点57分 1F
这个位置很不错啊
2013年9月23日 13点27分 B1
@ Louis Han ie不是太好使
2016年2月29日 11点25分 B1
@ Louis Han
虽然我所使用的主题已经将百度分享集成到了文章页面里,但是一直来很是希望还能够在首页、分类等页面也出现,按照鸟哥介绍的方法已经添加好来了。效果如何感兴趣的朋友可以去我博客看看,欢迎与雪儿交流WordPress的各种使用心得哦。
2013年9月22日 22点36分 2F
感谢鸟哥分享,非常适用~~~
2013年9月23日 16点55分 3F
你好博主,能否在你博客上投放淘宝广告呢,希望得到你的回复。
2013年9月23日 23点47分 4F
鸟哥,在手机上看两个地方错位,1:我又加了一个关注按钮,有些错位了,2:左侧分享按钮跑左右角了。
能加个判断,如果在手机上显示,分享代码在最下面居中显示吗?
2013年9月24日 11点01分 B1
@ 香水控 主题不适合手机浏览器,请安装移动版主题
2013年9月24日 11点58分 B2
@ 知更鸟 好的,
鸟哥,还有个问题,
由于我们这备案不允许有留言功能,在哪个地方可以把留言板隐藏掉?
2013年9月24日 12点15分 B3
@ 香水控 打开主题comments.php模板文件清空里面的内容,保存并替换原文件
2013年9月28日 10点59分 B4
@ 知更鸟 已解决,谢谢鸟哥
2013年9月24日 15点45分 5F
感谢鸟哥,这东西还真不错。
2013年9月26日 00点18分 6F
这样会不会出现很多代码?
2013年9月26日 16点05分 7F
请问Opera浏览器(电脑版)上分享按钮错位到页面底部了是什么原因?
2013年9月26日 16点35分 8F
谢谢分享,不错。
2013年9月27日 13点27分 9F
这个方法很好,用上了,感谢楼主
2013年9月29日 10点36分 10F
这个方法很好,用上了
2013年9月29日 20点42分 11F
我安装了最新版的知更鸟主题没有左侧固定分享按钮…
2013年9月29日 22点30分 B1
@ 我爱上QQ 主题已多次更新
2013年12月6日 22点24分 B2
@ 知更鸟 百度分享连css都搞定了,很给力。
2013年9月30日 22点13分 12F
很好用~~谢谢了
2013年10月3日 10点42分 13F
主题不适合手机浏览器,请安装移动版主题
2013年10月3日 23点38分 14F
楼主 你的文章里高亮代码用的是什么插件或者其它的什么的
灰常感谢
2013年10月6日 15点30分 15F
鸟哥什么时候出一款宽屏版(或自适应屏幕)的hotnewspro?毕竟现在的主题在Mac上看着已经不爽了……
如果没有此计划,那有没有相关的设置可以自己修改?
2013年10月6日 20点04分 16F
鸟哥,您好。请问,是否可以用相同方法添加“百度喜欢”按钮?新人小白,不懂勿笑。
2013年10月6日 21点06分 17F
添加了,可是为什么要提示代码错误呢?
2013年10月6日 23点30分 18F
测试一下 看成不成
2013年10月8日 16点19分 19F
还是滑动的好,不用考虑固定的样式了
2013年10月10日 23点16分 20F
代码借用了~~~
2013年10月12日 15点38分 21F
这个分享按钮在我的笔记本14寸屏幕上显示有问题,只能显示出小小的一个框,里面没有任何东西。
2013年10月13日 10点28分 B1
@ xinghaixu 分享按钮在我的笔记本13.3寸屏幕上显示一切正常
2014年6月11日 01点03分 B2
@ 知更鸟 我大概知道是什么原因了。开启广告过滤之后,里面没有内容,只有一个框。我也是今晚才发现的。
2014年6月11日 01点03分 B1
@ xinghaixu 我大概知道是什么原因了。开启广告过滤之后,里面没有内容,只有一个框。我也是今晚才发现的。与你分享。
2013年10月13日 15点19分 22F
哇哦,不错,我之前还想问这个怎么实现的,找到了
2013年10月13日 16点49分 23F
鸟哥,那个“将HotNews主题视频模版应用到首页”里面的独立视频模版在哪里啊?我在网站找了半天都没看见
2013年10月21日 20点40分 24F
不错非常实用
2013年11月5日 21点05分 25F
我的博客也搞定这个固定分享按钮了,给力。
2013年11月13日 11点36分 26F
我想问一下,文章内的代码是怎么插入的?用的是什么插件呢?@知更鸟
2014年2月18日 22点02分 27F
集成到主题的分享按钮,怎样修改才能在分享时,带上一张当前分享的文章中的图片呢?
2014年4月10日 08点14分 28F
如何控制贴着某个div的边框滚动啊 如你的。
2014年6月4日 09点25分 29F
鸟哥,我看到你的网站分享链接下面有分享到微信朋友圈啊,但您的主题里面没有,能不能共享下代码啊,谢了啊!
2014年6月4日 09点44分 B1
@ 幻月无名 https://zmingcx.com/hotnews-pro-plus-faq.html
第18条
2014年6月4日 09点50分 B2
@ 知更鸟 鸟哥,你这回复速度也太快了,我提交了留言以后就没刷新页面,然后就自己研究了下,看了看你的网站源码,自己弄好了以后本来想告诉你我弄好了,结果你已经回复了,这速度,太佩服了,万分感谢,就是网站备案还没下来,没法展示啊,只能在本地自己欣赏下了。
2014年6月4日 09点45分 B1
@ 幻月无名 搞定了,鸟哥,谢了,“偷”的你的网站源码和CSS源码,嘻嘻
来自外部的引用: 5