为wordpress或DZ安装单篇文章顶部的分享工具条

http://www.itjxue.com  2015-07-19 16:21  来源:未知  点击次数: 

异次元单篇文章顶部的分享工具条做的很美观,集成了新浪微博、腾讯微博、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> 前面,添加下面的代码:

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

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

工具条的所有代码

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

share.css

整个文件包中有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的论坛,由于篇幅限制粗略概括如下:

在模板文件 header.htm 里面的<head></head>之间添加  share.css 样式链接(每个使用的模板不同,请自行注意!)

<link rel="stylesheet" type="text/css" href="{$_G[setting][jspath]}share/share.css" />

然后找到footer.htm 在</body> 里面添加

<script type="text/javascript" src="{$_G[setting][jspath]}share/share_roll.js"></script>

在  viewthread_node.htm里面添加下面代码,具体位置可参考下面这个文件:viewthread_node.rar

<div id="share_toolbar_wrapper" style="position: static; top: auto; z-index: 9999;width:660px ">

<div id="share_toolbar">

<div class="stb_group" id="stb_article_view" title="本文围观次数">

<span id="stb_article_view_icon"></span>

<span id="stb_view_count"> $_G[forum_thread][views] </span>

</div>

<div class="stb_divide"></div>

<div data="{'url':'http://www.ouukuu.com/forum.php?mod=viewthread&tid=$_G[tid]'}" class="bdshare_t bds_tools get-codes-bdshare stb_group stb_share_buttons" id="bdshare">

<a href="javascript:void(0);" id="stb_btn_weibo" class="bds_tsina" title="分享到新浪微博"></a>

<a href="javascript:void(0);" id="stb_btn_tqq" class="bds_tqq" title="分享到腾讯微博"></a>

<a href="javascript:void(0);" id="stb_btn_qzone_small" class="bds_qzone" title="分享到QQ空间"></a>

<a href="javascript:void(0);" id="stb_btn_renren_small" class="bds_renren" title="分享到人人网"></a>

<span id="stb_btn_more" class="bds_more"><span id="stb_sbtn_more_icon"></span></span>

<a href="javascript:void(0);" class="shareCount"></a>

</div>

<!--修改下一行的百度分享ID-->

<script type="text/javascript" id="bdshare_js" data="type=button&uid=12345" ></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>

<div class="stb_divide"></div>

<div class="stb_share_buttons stb_group">

<!-- 前一篇 -->

<a id="stb_btn_prev" href="forum.php?mod=redirect&goto=nextoldset&tid=$_G[tid]" title="/"></a>

<!-- 下一篇 -->

<a id="stb_btn_next" href="forum.php?mod=redirect&goto=nextnewset&tid=$_G[tid]" title="/"></a>

</div>

<div class="stb_group_right">

<div class="stb_like_btn" id="alipay_btn">

<!--修改下一行的链接地址为你的支付宝收款页面-->

<a href="http://me.alipay.com/mayun" target="_blank" title="捐助作者,与您共勉">.</a>

</div>

<div class="bdlikebutton stb_like_btn bdlikebutton-blue bdlikebutton-small bdlikebutton-small-blue">

<div class="bdlikebutton-inner">

<span class="bdlikebutton-add"></span>

<div class="bdlikebutton"></div>

<div class="bdlikebutton-count">

<!-- 处理百度like按钮点击和like数量 -->

<script id="bdlike_shell" type="text/javascript"></script>

<script type="text/javascript">

var bdShare_config = {

"type":"small",

"color":"blue",

"uid":"12345",//修改为你自己的百度分享id

"likeText":"喜欢",

"likedText":"已赞过"

};

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>

解压share出来后 一致放到根目录的/static/js/ 。大功告成,赶紧测试你的简单美观又实用的集分享与捐赠的异次元工具条吧!

(责任编辑:IT教学网)

更多