异次元单篇文章顶部的分享工具条做的很美观,集成了新浪微博、腾讯微博、QQ空间、人人网等分享按钮,页面浏览数以及支付宝捐赠等功能。可惜的是没有分享出来,黑苹果博客分享高仿版,具体方法:

基于 eliteYang 的 Version 0.5 进行修改

1.修改“上一篇”和“下一篇”的调用顺序:我的理解是“上一篇”应该是 get_previous_post(),“下一篇”是 get_next_post()

2. 添加一个支付宝捐助按钮

3.简单精简和修改CSS和share.php代码

WordPress主题集成百度分享工具条

1.下载share工具包,解压出来。修改里面的 share.php 的 17、40、53 行(内有提示)。

2.把 share文件夹(含里面的文件)一起复制到 现用主题的根目录

3.在主题的 header.php 的</head> 前面 或者 footer.php 的 </body> 前面,添加下面的代码:

1
2
<!--只在文章页加载js,以免IE在其他页面找不到对应的ID报错--><?php if ( is_single()){ ?><linkrel="stylesheet"type="text/css"href="<?php bloginfo('template_url'); ?>/share/share.css" />
<scripttype="text/javascript"src="<?php bloginfo('template_url'); ?>/share/share_roll.js"></script><?php } ?>

4.打开 single.php ,在你需要显示工具条的位置添加下面的代码:

1
<?phpinclude(TEMPLATEPATH .'/share/share.php');?>

到此,已经将工具条集成到你的主题啦。

工具条的所有代码

贴出工具包里的代码share.php

  1. <dividdivid="share_toolbar_wrapper"style="position: static; top: auto; z-index: 9999;"><dividdivid="share_toolbar"><divclassdivclass="stb_group"id="stb_article_view"title="本文围观次数"><spanidspanid="stb_article_view_icon"></span><spanidspanid="stb_view_count"><?php post_views(' ', ''); ?></span></div><divclassdivclass="stb_divide"></div><divdatadivdata="{'url':'<?php the_permalink()?>'}" class="bdshare_t bds_tools get-codes-bdshare stb_group stb_share_buttons" id="bdshare">
  2. <ahrefahref="vo< /span>id(0);"id="stb_btn_weibo"class="bds_tsina"title="分享到新浪微博"></a><ahrefahref="vo< /span>id(0);"id="stb_btn_tqq"class="bds_tqq"title="分享到腾讯微博"></a><ahrefahref="vo< /span>id(0);"id="stb_btn_qzone_small"class="bds_qzone"title="分享到QQ空间"></a><ahrefahref="vo< /span>id(0);"id="stb_btn_renren_small"class="bds_renren"title="分享到人人网"></a><spanidspanid="stb_btn_more"class="bds_more"><spanidspanid="stb_sbtn_more_icon"></span></span><ahrefahref="void(0);"< /span>class="shareCount"></a></div><!--修改下一行的百度分享ID--><scripttypescripttype="text/javascript"id="bdshare_js"data="type=button&uid=12345" ></script><scripttypescripttype="text/javascript"id="bdshell_js"></script><scripttypescripttype="text/javascript">
  3. document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000);
  4. </script><divclassdivclass="stb_divide"></div><divclassdivclass="stb_share_buttons stb_group"><!-- 前一篇 --><?php $prev_post = get_previous_post(); if ($prev_post){ ?><aidaid="stb_btn_prev"href="<?php echo get_permalink( $prev_post->ID ); ?>" title="<?php echo '上一篇: ' ?><?php echo get_the_title( $prev_post->ID ); ?>"></a><?php } else { ?><aidaid="stb_btn_prev"href=""title="<?php echo '当前为最早发布的文章,木有更早的啦!' ?>"></a><?php } ?><!-- 下一篇 --><?php $next_post = get_next_post(); if ($next_post){ ?><aidaid="stb_btn_next"href="<?php echo get_permalink( $next_post->ID ); ?>" title="<?php echo '下一篇: ' ?><?php echo get_the_title( $next_post->ID ); ?>"></a><?php } else { ?><aidaid="stb_btn_next"href=""title="<?php echo '当前为最新发布的文章,看看其他文章吧,同样精彩哦!' ?>"></a><?php } ?></div><divclassdivclass="stb_group_right"><divclassdivclass="stb_like_btn"id="alipay_btn"><!--修改下一行的链接地址为你的支付宝收款页面--><ahrefahref="https://me.alipay.com/54321"target="_blank"title="捐助作者,与您共勉">.</a></div><divclassdivclass="bdlikebutton stb_like_btn bdlikebutton-blue bdlikebutton-small bdlikebutton-small-blue"><divclassdivclass="bdlikebutton-inner"><spanclassspanclass="bdlikebutton-add"></span><divclassdivclass="bdlikebutton"></div><divclassdivclass="bdlikebutton-count"><!-- 处理百度like按钮点击和like数量 --><scriptidscriptid="bdlike_shell"type="text/javascript"></script><scripttypescripttype="text/javascript">
  5. var bdShare_config = {
  6. "type":"small",
  7. "color":"blue",
  8. "uid":"12345",//修改为你自己的百度分享id
  9. "likeText":"喜欢",
  10. "likedText":"已赞过"
  11. };
  12. document.getElementById("bdlike_shell").src="http://bdimg.share.baidu.com/static/js/like_shell.js?t=" + new Date().getHours();                      </script></div></div></div></div></div></div>
  1. /* author:eliteYangwebsite:http://www.zhangchenghui.com  desc:baidu share tool bardate:2013/05/07Desc:百度分享工具条滚动后修改CSS stylelicense:请尊重原创者,允许转载和修改,但需要保留链接,如有疑问,请至 黑苹果博客(www.zhangchenghui.com) 交流讨论 */
  2. var IO=document.getElementById('share_toolbar_wrapper'),Y=IO,H=0,IE6;
  3. IE6=window.ActiveXObject&&!window.XMLHttpRequest;while(Y){H+=Y.offsetTop;YY=Y.offsetParent};if(IE6)IO.style.cssText="position:absolute;top:this.fix?(document"< /span>+".documentElement.scrollTop-(this.javascript||"+H+")):0)";
  4. window.onscroll=function (){var d=document,s=Math.max(d.documentElement.scrollTop,document.body.scrollTop);if(s>H&&IO.fix||s<=H&&!IO.fix)return;if(!IE6){IOIO.style.position=IO.fix?"":"fixed";IO.style.top="0px";}
  5. IO.fix=!IO.fix;};
  6. try{document.execCommand("BackgroundImageCache",false,true)}catch(e){};//]]>

整个文件包中有5个文件,share.css, share.php ,share.png, share_roll.js 。按照上面的方案安装如果顺利就会看到如下图的效果了。

下面是安装过程中可能遇到的问题以及解决方法,希望对大家有用。

1、访问统计

必须安装WP-PostViews插件或者WP-PostViews Plus插件,我使用的是后者。 postview参数调用问题好像很多人都遇到,在share.php第五行<?php post_views(‘ ‘, ”); ?>替换为<?php if(function_exists(‘the_views’)) {the_views();} ?>即可解决,很多主题中并没有将postviews参数定义进去,所以很多同学出现无法显示的问题。代码这样写也更加严谨一些,不会导致页面无法显示。

2、宽度为690

如果不是这个宽度需要调整按钮的样式和多少来满足你主题的需要,我在使用中由于主题宽度不够就调整了几个按钮,但是发现有点小瑕疵,就是在跟随滚动时显示的宽度会缩小,css定义的宽度都是width: auto,将其定义为固定值就可解决这个问题。

3、跟随滚动

如果无法跟随滚动,那说明在js调用时于你使用的主题有冲突,请讲js调用的那段代码放到foot.php或者页面的结尾所有js后面,但要保证在</body>之前。我的做法是将

<?php if ( is_single() ) { ?>

<link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘template_url’); ?>/share/share.css” />

<?php } ?>

放在</head>前面,而将

<script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/share/share_roll.js”></script>

放在foot.php文件的</body>之前。

此为wordpress博客添加异次元分享工具条的方法,至于discuz的论坛,由于篇幅限制想知道的话请到我的黑苹果博客查看,地址是:http://www.zhangchenghui.com/apple/1848.html

转载于:https://blog.51cto.com/heipingguoboke/1194429

Wordpress博客安装异次元分享工具条的方法相关推荐

  1. Wordpress或discuz安装异次元分享工具条

    异次元单篇文章顶部的分享工具条做的很美观,集成了新浪微博.腾讯微博.QQ空间.人人网等分享按钮,页面浏览数以及支付宝捐赠等功能.可惜的是没有分享出来,黑苹果博客分享高仿版,具体方法: 基于 elite ...

  2. 解决WordPress博客安装插件时提示输入FTP用户名和密码的问题

    http://www.lajiz.cn/1310.html 自从垃圾站博客从电信通搬家到万网虚拟主机后,总是出现问题,刚开始是万网M3主机禁用mail()函数导致WordPress博客无法发送评论回复 ...

  3. WordPress博客系统搜索引擎优化seo全攻略方法

    WordPress的文章.评论等很多数据都是存放在数据库的,所以搭建wordpress网站的时间,网站的空间不需要多大,而数据库一定要充足,而在WordPress数据库中主要使用 wp_posts 表 ...

  4. Hexo博客安装卡在“INFO install dependencies”解决方法

    问题描述 win10安装hexo框架,在执行到 hexo init命令,即初始化阶段时,在clone完hexo初始化仓库后,卡在安装依赖的界面,如下所示: $ hexo init INFO Cloni ...

  5. WordPress博客网站搬家和换域名方法

    WordPress博客网站搬家和换域名方法 方案一 开设个人博客的朋友使用WordPress不在少数,那么也难免不了更换空间和域名的情况,由于笔者亲历了一次更换空间和域名的情况,将博客从AAA.com ...

  6. 教你WordPress博客网站搬家和换域名、批量换图片地址方法

    如果,你还在愁网站搬家和换域名不会的话,这篇文章你一定要看,最关键的是,可以一键解决批量换网站图片地址的问题! 管理员数据库wordpress 方案一 开设个人博客的朋友使用WordPress不在少数 ...

  7. 搭建LNMP平台加NFS文件共享部署wordpress博客

    搭建LNMP平台部署wordpress博客 安装LNMP平台 安装nginx 安装PHP 搭建mysql数据 搭建NFS 安装LNMP平台 安装nginx 1)下载官方源 [root@Web ~]# ...

  8. WordPress博客里面放谷歌广告代码

    申请谷歌广告很久了,但一直都没怎么管理,也没有啥收入,今天想放一个google adsense广告代码在文章单页的右上角,由于不太懂代码,自己搞了半天,最后还是按照网上说的方法才放上来. 这里是分享的 ...

  9. 腾讯云搭建WordPress个人博客小白版流程分享

    前言:现在云时代,搭建自己个人网站的成本越来越低了,特别是学生(ps:大四狗也算哦).不管你是否从事IT行业,趁腾讯云还有学生优惠,赶紧上车玩玩吧,搭建属于独立域名的私人博客,做个高大上的分享客.下面 ...

最新文章

  1. 苹果和Siri的七年之痒:Siri的落寞之路
  2. CentOS7关闭防火墙
  3. 站长之家html视频播放,HTML5视频发展状况
  4. 又快又简单的sql2005分页存储过程
  5. SQL语言基础:常用的数据查询语句
  6. [ZJOI2014] 璀璨光华(bfs建图 + dfs搜索)
  7. Spring Data MongoDB级联保存在DBRef对象上
  8. 能干的产品经理比不上能说的产品经理
  9. 广告清除:Adware Zap Browser Cleaner for mac
  10. SQLyog 安装过程
  11. stm32f407 spi3 mosi没有输出_入门篇 | STM32F407寄存器开发点灯
  12. Oracle 数据库升级
  13. iOS 改变UITextField中光标颜色
  14. c3p0 mysql 连接池配置文件_使用XML配置c3p0数据库连接池
  15. mysql游标少循环_掌握更少的后卫和循环
  16. AppStore技术支持
  17. 计算机控制专业的就业前景,计算机控制管理专业就业前景和就业方向分析
  18. 【信号去噪】基于改进的阈值高斯脉冲信号去噪含Matlab源码
  19. python_爬虫 12 多线程爬虫
  20. AutoDesk 3DS Max2010 官方简体中文版

热门文章

  1. # java学习笔记 2020 2/8(十二)慕课网 构造方法
  2. JAVA-JDBC原理
  3. MySQL内部临时表的具体使用
  4. 熊猫卫士因特网安全2007铂金版
  5. 买卖股票收益最大问题
  6. 浙大研修笔记(五):国学智慧与领导者修炼
  7. ubuntu 配置网络重启 使用/etc/init.d/networking restart 命令无效
  8. 和平精英体验服显示服务器维护中,和平精英体验服关服维护要多久
  9. 算法实验二 【八皇后问题】(回溯算法)
  10. 【点云处理之论文狂读前沿版11】—— Unsupervised Point Cloud Pre-training via Occlusion Completion