2025-04-30

本文目錄1的修改2WordPress主題集成百度分享工具條3工具條的所有代碼

自從 WordPress大學 更換主題以來，不少同學都問，文章頁面的百度分享工具條是如何實現的。其實，我也是在eliteYang  分享仿異次元百度分享工具條 看到，然後修改集成到我自己的主題的，下面將按照我自己的集成方法來說一下，當然瞭，你也可以去按照剛提到的文章那樣去弄。

wpdaxue.com-201301312

的修改

基於 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> 前面，添加下面的引用CSS和JS的代碼：

1
2
3
4
5

<!--隻在文章頁加載js，以免IE在其他頁面找不到對應的ID報錯-->
<?php if ( is_single() ) { ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/share/share.css" />
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/share/share_roll.js"></script>
<?php } ?>

<!–隻在文章頁加載js，以免IE在其他頁面找不到對應的ID報錯–>
<?php if ( is_single() ) { ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo(‘template_url’); ?>/share/share.css" />
<script type="text/javascript" src="<?php bloginfo(‘template_url’); ?>/share/share_roll.js"></script>
<?php } ?>

4.打開 single.php ，在你需要顯示工具條的位置添加下面的代碼：

1

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

<?php include(TEMPLATEPATH . ‘/share/share.php’); ?>

到此，已經將工具條集成到你的主題啦。

註：該工具條的瀏覽次數統計功能，是自己的主題專用的，方法見《WordPress非外掛添加文章瀏覽次數統計功能》，如果你想要正常顯示瀏覽次數，請按照那篇文章說的添加代碼。

@手語視點 測試說，即使安裝 WP-PostViews 外掛，使用<?php if(function_exists(‘the_views’)) {the_views();} ?> 替代 <?php post_views(‘ ‘, ”); ?>，頁面正常，但統計也不會正常工作。不知道什麼原因導致的，也沒時間測試，如果你們測試也一樣不行，就使用剛才說的添加統計代碼吧。

工具條的所有代碼

貼出工具包裡的代碼，感興趣的，可以先預覽

share.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

<div id="share_toolbar_wrapper" style="position: static; top: auto; z-index: 9999;">
	<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"><?php post_views(' ', ''); ?></span>
		</div>
		<div class="stb_divide"></div>
		<div data="{'url':'<?php the_permalink()?>'}" 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">
			<!-- 前一篇 -->
			<?php $prev_post = get_previous_post(); if ($prev_post){ ?>
				<a id="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 { ?>
				<a id="stb_btn_prev" href="" title="<?php echo '當前為最早發佈的文章，木有更早的啦！' ?>"></a>
			<?php } ?>
			<!-- 下一篇 -->
			<?php $next_post = get_next_post(); if ($next_post){ ?>
				<a id="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 { ?>
				<a id="stb_btn_next" href="" title="<?php echo '當前為最新發佈的文章，看看其他文章吧，同樣精彩哦！' ?>"></a>
			<?php } ?>
		</div>
		<div class="stb_group_right">
			<div class="stb_like_btn" id="alipay_btn">
				<!--修改下一行的鏈接地址為你的支付寶收款頁面-->
				<a href="https://me.alipay.com/54321" 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>

<div id="share_toolbar_wrapper" style="position: static; top: auto; z-index: 9999;">
<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"><?php post_views(‘ ‘, ”); ?></span>
</div>
<div class="stb_divide"></div>
<div data="{‘url’:'<?php the_permalink()?>’}" 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">
<!– 前一篇 –>
<?php $prev_post = get_previous_post(); if ($prev_post){ ?>
<a id="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 { ?>
<a id="stb_btn_prev" href="" title="<?php echo ‘當前為最早發佈的文章，木有更早的啦！’ ?>"></a>
<?php } ?>
<!– 下一篇 –>
<?php $next_post = get_next_post(); if ($next_post){ ?>
<a id="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 { ?>
<a id="stb_btn_next" href="" title="<?php echo ‘當前為最新發佈的文章，看看其他文章吧，同樣精彩哦！’ ?>"></a>
<?php } ?>
</div>
<div class="stb_group_right">
<div class="stb_like_btn" id="alipay_btn">
<!–修改下一行的鏈接地址為你的支付寶收款頁面–>
<a href="https://me.alipay.com/54321" 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.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

/*分享工具條*/
#share_toolbar{background:none repeat scroll 0 0 #FCFCFC;border:1px solid #DDDDDD;border-radius:5px 5px 5px 5px;height:33px;line-height:33px;width:auto;_display:none;}
#share_toolbar_wrapper{background:none repeat scroll 0 0 #FFFFFF;padding-top:8px;}
#stb_article_view{width:auto;+max-width:35px;}
#stb_article_view #stb_article_view_icon{background:url(share.png) no-repeat scroll 0 0 transparent;display:block;height:14px;margin:3px auto 1px;width:18px;}
#stb_article_view span{color:#AAAAAA;display:block;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:11px;text-align: center;line-height:12px;margin:0 5px;}
.stb_group,.stb_divide{display:block;float:left;}
.stb_divide{background:url(share.png) no-repeat scroll 1px -19px transparent;height:33px;width:9px;}
.stb_submenu_link{position:relative;}
.stb_submenu_box{-moz-border-bottom-colors:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;background:none repeat scroll 0 0 #FCFCFC;border-color:-moz-use-text-color #DDDDDD #DDDDDD;border-image:none;border-right:1px solid #DDDDDD;border-style:none solid solid;border-width:0 1px 1px;display:none;padding:10px;position:absolute;top:34px;}
.stb_share_buttons a{background:url(share.png) repeat scroll 0 0 transparent !important;display:block;float:left;height:25px !important;margin:4px 0 0 5px;text-indent:-99999px;width:81px;}
#share_toolbar .stb_share_buttons a:hover{margin-top:3px !important;}
#stb_btn_weibo{background-position:0 -57px !important;padding:0;}
#stb_btn_weibo_small{background-position:-83px -57px !important;padding:0;width:27px;}
#stb_btn_tqq{background-position:0 -83px !important;padding:0;}
#stb_btn_tqq_small{background-position:-83px -83px !important;padding:0;width:27px;}
#stb_btn_qzone{background-position:0 -135px !important;padding:0;}
#stb_btn_qzone_small{background-position:-83px -135px !important;padding:0;width:27px;}
#stb_btn_renren{background-position:0 -109px !important;padding:0;}
#stb_btn_renren_small{background-position:-83px -109px !important;padding:0;width:27px;}
.stb_share_buttons_small{left:-30px;width:150px;}
.stb_share_buttons_small a,#stb_sbtn_more_icon{background:url(share.png) repeat scroll 0 0 transparent;display:block;float:left;height:16px;margin:1px 0 0 3px;text-indent:-99999px;width:16px;}
.stb_share_buttons_small a:hover{margin-top:0;}
#stb_btn_more{background:none repeat scroll 0 0 transparent !important;display:block;float:left;height:33px;margin:0 0 0 3px;padding:0;width:25px;}
#stb_sbtn_more_icon{background-position:-20px 0 !important;margin-top:9px;}
#stb_btn_prev,#stb_btn_next{background-position:-9px -24px !important;width:33px;}
#stb_btn_next{background-position:-42px -24px !important;margin-left:0;width:32px !important;}
.stb_group_right{float:right;height:33px;width:205px;overflow:hidden;}
.stb_like_btn{float:left;margin:4px 5px 0 0;}
#stb_like_gplus{margin-right:-20px;margin-top:7px;}
#alipay_btn a{float:left;padding:0;width:107px;background:url(share.png) 0 -165px no-repeat;color:#CBCBCD}
#alipay_btn a:hover{margin-top:-1px;}
.bdlikebutton{float:right;margin:4px 5px 0 0;}
.stb_share_buttons .shareCount{width:1px;}
#bdshare .shareCount{background:none repeat scroll 0 center transparent;color:#5895BE;margin-top:8px;text-indent:0;}
#share_toolbar #bdshare .shareCount:hover{margin-top:8px !important;}
#bdshare{margin-right:5px;}

/*分享工具條*/
#share_toolbar{background:none repeat scroll 0 0 #FCFCFC;border:1px solid #DDDDDD;border-radius:5px 5px 5px 5px;height:33px;line-height:33px;width:auto;_display:none;}
#share_toolbar_wrapper{background:none repeat scroll 0 0 #FFFFFF;padding-top:8px;}
#stb_article_view{width:auto;+max-width:35px;}
#stb_article_view #stb_article_view_icon{background:url(share.png) no-repeat scroll 0 0 transparent;display:block;height:14px;margin:3px auto 1px;width:18px;}
#stb_article_view span{color:#AAAAAA;display:block;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:11px;text-align: center;line-height:12px;margin:0 5px;}
.stb_group,.stb_divide{display:block;float:left;}
.stb_divide{background:url(share.png) no-repeat scroll 1px -19px transparent;height:33px;width:9px;}
.stb_submenu_link{position:relative;}
.stb_submenu_box{-moz-border-bottom-colors:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;background:none repeat scroll 0 0 #FCFCFC;border-color:-moz-use-text-color #DDDDDD #DDDDDD;border-image:none;border-right:1px solid #DDDDDD;border-style:none solid solid;border-width:0 1px 1px;display:none;padding:10px;position:absolute;top:34px;}
.stb_share_buttons a{background:url(share.png) repeat scroll 0 0 transparent !important;display:block;float:left;height:25px !important;margin:4px 0 0 5px;text-indent:-99999px;width:81px;}
#share_toolbar .stb_share_buttons a:hover{margin-top:3px !important;}
#stb_btn_weibo{background-position:0 -57px !important;padding:0;}
#stb_btn_weibo_small{background-position:-83px -57px !important;padding:0;width:27px;}
#stb_btn_tqq{background-position:0 -83px !important;padding:0;}
#stb_btn_tqq_small{background-position:-83px -83px !important;padding:0;width:27px;}
#stb_btn_qzone{background-position:0 -135px !important;padding:0;}
#stb_btn_qzone_small{background-position:-83px -135px !important;padding:0;width:27px;}
#stb_btn_renren{background-position:0 -109px !important;padding:0;}
#stb_btn_renren_small{background-position:-83px -109px !important;padding:0;width:27px;}
.stb_share_buttons_small{left:-30px;width:150px;}
.stb_share_buttons_small a,#stb_sbtn_more_icon{background:url(share.png) repeat scroll 0 0 transparent;display:block;float:left;height:16px;margin:1px 0 0 3px;text-indent:-99999px;width:16px;}
.stb_share_buttons_small a:hover{margin-top:0;}
#stb_btn_more{background:none repeat scroll 0 0 transparent !important;display:block;float:left;height:33px;margin:0 0 0 3px;padding:0;width:25px;}
#stb_sbtn_more_icon{background-position:-20px 0 !important;margin-top:9px;}
#stb_btn_prev,#stb_btn_next{background-position:-9px -24px !important;width:33px;}
#stb_btn_next{background-position:-42px -24px !important;margin-left:0;width:32px !important;}
.stb_group_right{float:right;height:33px;width:205px;overflow:hidden;}
.stb_like_btn{float:left;margin:4px 5px 0 0;}
#stb_like_gplus{margin-right:-20px;margin-top:7px;}
#alipay_btn a{float:left;padding:0;width:107px;background:url(share.png) 0 -165px no-repeat;color:#CBCBCD}
#alipay_btn a:hover{margin-top:-1px;}
.bdlikebutton{float:right;margin:4px 5px 0 0;}
.stb_share_buttons .shareCount{width:1px;}
#bdshare .shareCount{background:none repeat scroll 0 center transparent;color:#5895BE;margin-top:8px;text-indent:0;}
#share_toolbar #bdshare .shareCount:hover{margin-top:8px !important;}
#bdshare{margin-right:5px;}

share_roll.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

/*
 
	author	:	eliteYang
	website	:	http://www.cppfans.org
	desc	:	baidu share tool bar
	date	:	2012/10/20
	Desc	:	百度分享工具條滾動後修改CSS style
	license	:	請尊重原創者,允許轉載和修改,但需要保留鏈接,謝謝合作,祝大傢使用愉快,如有疑問,請至 C++愛好者部落格(www.cppfans.org) 交流討論
 
*/
var IO=document.getElementById('share_toolbar_wrapper'),Y=IO,H=0,IE6;
IE6=window.ActiveXObject&&!window.XMLHttpRequest;
while(Y){H+=Y.offsetTop;Y=Y.offsetParent};
if(IE6)
    IO.style.cssText="position:absolute;top:expression(this.fix?(document"+
        ".documentElement.scrollTop-(this.javascript||"+H+")):0)";
 
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){IO.style.position=IO.fix?"":"fixed";IO.style.top="0px";}        
    IO.fix=!IO.fix;
};
 
try{document.execCommand("BackgroundImageCache",false,true)}catch(e){};
 //]]>

/*
author : eliteYang
website : http://www.cppfans.org
desc : baidu share tool bar
date : 2012/10/20
Desc : 百度分享工具條滾動後修改CSS style
license : 請尊重原創者,允許轉載和修改,但需要保留鏈接,謝謝合作,祝大傢使用愉快,如有疑問,請至 C++愛好者部落格(www.cppfans.org) 交流討論
*/
var IO=document.getElementById(‘share_toolbar_wrapper’),Y=IO,H=0,IE6;
IE6=window.ActiveXObject&&!window.XMLHttpRequest;
while(Y){H+=Y.offsetTop;Y=Y.offsetParent};
if(IE6)
IO.style.cssText="position:absolute;top:expression(this.fix?(document"+
".documentElement.scrollTop-(this.javascript||"+H+")):0)"; 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){IO.style.position=IO.fix?"":"fixed";IO.style.top="0px";}
IO.fix=!IO.fix;
}; try{document.execCommand("BackgroundImageCache",false,true)}catch(e){};
//]]>

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Related News

WordPress添加文章打印和生成PDF的功能

2018-04-30

WordPress低版本瀏覽器檢測和升級提醒

2018-04-30

You may have missed

1736212862_maxresdefault.jpg

怎樣獲得更多自然流量？

2025-01-07
1736183525_maxresdefault.jpg

電子商務的四大挑戰及其解決方法 | SHOPLINE x KeepCount

2025-01-07
1736128619_maxresdefault.jpg

5 พอดแคสต์เติมพลังใจสู่ปีใมมจสู่ปี ส รุปหนังสือ | MM 播客長播

2025-01-06
1736113989_maxresdefault.jpg

แบตสำรองพังแล้วควรทิ้งที่ไหทิ้งที่ไหทน？ | EP.4 EP.4

2025-01-06
1736110339_maxresdefault.jpg

ShuzuraウンジGotchの靴磨き屋靴修理屋あるあるがライブ配信中！

2025-01-06
1736106664_maxresdefault.jpg

เหลือเชื่อ EP.121 รวยไม่หยุดจริง่หยุด งขลังวัดบางจาก

2025-01-06