久久乐国产精品亚洲综合,天堂а√在线最新版在线8

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

WordPress博客怎么添加收藏書簽？（附實現代碼）

青燈夜游

發(fā)布： 2023-02-28 20:00:23

轉載

1949人瀏覽過

wordpress博客怎么添加收藏書簽？下面本篇文章給大家講解一下在wordpress博客中添加收藏書簽的方法，并附上實現代碼，希望對大家有所幫助！

WordPress博客怎么添加收藏書簽？（附實現代碼）

這兩天在鼓搗給博客添加"社會性網絡書簽Social Bookmark"，也就是文章下面提供給讀者收藏分享文章的按鈕。網絡上提供了很多WordPress插件來實現書簽的功能，但是大多數插件也就是提供一段JS代碼，其他什么也沒有提供，代碼的定制性極差。

可喜的是一些網站提供了代碼來實現書簽功能，這很不錯。于是做了一番測試，結果不是很滿意，有些代碼已經失效了，而且調用的小圖片太多，增加了http連接數，對網站的加載速度有一定的影響。求人不如求己，自己從各大書簽網站下載來了最新的代碼，經過小小的拼湊，再用上CSS Sprites技術，把這些小圖片整成一張，速度明顯上來了。另外還對代碼做了優(yōu)化，通過W3C驗證。

下圖是制作成功的書簽效果，或許在本文下方看到的能給你更深的體驗：

好東西不能獨享，下面就來分享一下這個書簽收藏按鈕的制作過程。很簡單。

1、打開你的WordPress主題文件夾下single.php

2、找到，在下面加上以下代碼（就是書簽的顯示位置，或者放到你覺得合適的地方）：

<div id="soucang">
<strong>
	<span style="color:#9932CC">收藏</span><span style="color:#57c200"> & </span>
	<span style="color:#9932CC">分享</span>
</strong>

<ul>
<li id="kaixin">
	<a href="http://www.kaixin001.com/repaste/share.php?rtitle=<?php echo urlencode($post->post_title);?>&rurl=<?php echo urlencode(get_permalink($post->ID));?>&rcontent=<?php $desc = strip_tags($post->post_excerpt); echo urlencode($desc); ?>" title="轉貼到開心網" rel="nofollow"><span></span></a>
</li>

<li id="jiudian">
	<a title="推薦到九點" href="http://www.douban.com/recommend/?url=<?php echo urlencode(get_permalink($post->ID));?>&title=<?php echo urlencode($post->post_title);?>" rel="nofollow"><span></span></a>
</li>

<li id="douban">
	<a title="推薦到豆瓣" href="http://www.douban.com/recommend/?url=<?php echo urlencode(get_permalink($post->ID));?>&title=<?php echo urlencode($post->post_title);?>" rel="nofollow"><span></span></a>
</li>

<li id="yahoo">
	<a title="雅虎收藏" href="http://myweb.cn.yahoo.com/popadd.html?url=<?php echo urlencode(get_permalink($post->ID));?>&title=<?php echo urlencode($post->post_title);?>" rel="nofollow"><span></span></a>
</li>

<li id="google">
	<a href="http://www.google.com/bookmarks/mark?op=edit&bkmk=<?php echo urlencode(get_permalink($post->ID));?>&title=<?php echo urlencode($post->post_title);?>" title="Google書簽" rel="nofollow"><span></span></a>
</li>

<li id="baidu">
	<a href="http://cang.baidu.com/do/add?it=<?php echo urlencode($post->post_title);?>&iu=<?php echo urlencode(get_permalink($post->ID));?>" title="百度搜藏" rel="nofollow"><span></span></a>
</li>

<li id="qq">
	<a href="http://shuqian.qq.com/post?from=3&title=<?php echo urlencode($post->post_title);?>&uri=<?php echo urlencode(get_permalink($post->ID));?>" title="收藏到QQ書簽" rel="nofollow"><span></span></a>
</li>

<li id="vivi">
	<a href="javascript:d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(vivi=window.open('http://vivi.sina.com.cn/collect/icollect.php?pid=www.ludou.org&title='+escape(d.title)+'&url='+escape(d.location.href)+'&desc='+escape(t),'vivi','scrollbars=no,width=480,height=480,left=75,top=20,status=no,resizable=yes'));vivi.focus();" title="保存到愛問ViVi收藏夾"><span></span></a>
</li>			

<li id="bolaa">
	<a href="javascript:d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(blog=window.open('http://www5.bolaa.com/CommendBlog/SmallLogin.aspx?title='+escape(d.title)+'&newspath='+escape(d.location.href)+'&subtitle='+escape(t),'bolaa','width=400px,height=400px'));blog.focus();" title="推薦到博拉"><span></span></a>
</li>

<li id="poco">
	<a href="javascript:d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://my.poco.cn/fav/storeIt.php?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t)+'&img=http://www.h-strong.com/blog/logo.gif','keyit','scrollbars=no,width=475,height=575,status=no,resizable=yes'));keyit.focus();" title="收藏到POCO網摘" rel="nofollow"><span></span></a>
</li>

<li id="hexun">
	<a href="javascript:t=document.title;u=location.href;e=document.selection?(document.selection.type!='None'?document.selection.createRange().text:''):(document.getSelection?document.getSelection():'');void(open('http://bookmark.hexun.com/post.aspx?title='+escape(t)+'&url='+escape(u)+'&excerpt='+escape(e),'HexunBookmark','scrollbars=no,width=600,height=450,left=80,top=80,status=no,resizable=yes'));" title="轉帖到和訊網摘" rel="nofollow"><span></span></a>
</li>

<li id="delicious">
	<a href="http://www.delicious.com/post?url=<?php echo urlencode(get_permalink($post->ID));?>&title=<?php echo urlencode($post->post_title);?>" title="deliciou" rel="nofollow"><span></span></a>
</li>

<li id="xianguo">
	<script charset="utf8" type="text/javascript">
	cT="0";nc="#444";nBgc="";nBorder="#F5E5A9";tc="#649B00";tBgc="#FFF4D0";tBorder="#F5E5A9";tDigg="%E6%8E%A8%E8%8D%90";tDugg="%E5%B7%B2%E8%8D%90";defaultItemUrl="WEB_URL";defaultFeedUrl ="http://feed.feedsky.com/ludou";
	</script>
	<script type="text/javascript" charset="utf8" src="http://re.xianguo.com/api/diggthis.js"></script>
</li>
</ul>
</div>

登錄后復制

3、注意將上面代碼中www.ludou.org網址改成你的，接著在你的WordPress主題CSS文件中加入以下代碼:

#soucang {
	margin:15px auto;
}
#soucang ul {
	display:inline;
	position:absolute;
}
#soucang li {
	list-style:none;
	float:left;
	margin-right:10px;
	display:block;
}
#soucang li a span {
	/*請將下面的 http://example/m.gif 改成你自己的圖片鏈接*/
	background:url(http://example/m.gif) no-repeat;
	display:block;
	height:16px;
	width:16px;
}
#soucang li#baidu  a span { background-position: 0 0; }
#soucang li#bolaa a span { background-position: 0 -17px; }
#soucang li#delicious a span { background-position: 0 -34px; }
#soucang li#douban a span { background-position: 0 -85px; }
#soucang li#google a span { background-position: 0 -102px; }
#soucang li#hexun a span { background-position: 0 -119px; }
#soucang li#jiudian a span { background-position: 0 -136px; }
#soucang li#kaixin a span { background-position: 0 -153px; }
#soucang li#poco a span { background-position: 0 -187px; }
#soucang li#qq a span { background-position: 0 -204px; }
#soucang li#vivi a span { background-position: 0 -221px; }
#soucang li#yahoo a span { background-position: 0 -238px; }
#soucang li#xianguo {margin-left:10px; padding-bottom:5px;}

登錄后復制

上面的代碼使用了CSS Sprites技術，其中#soucang?li?a?span的背景圖片可自定義，只需放到你的網站目錄下，將http://example/m.gif修改成你自己的圖片地址就可以了。另外，如果上面的CSS布局不適合你的博客，可以自己改改啊。

好了，到此就大功造成了?？粗@些各色各樣的書簽按鈕，感覺是不是很不一樣呢？其實這些書簽對網站的美化也有一定的幫助作用哦。有事沒事，在此留個言吧。

因為網頁的寬度有限，這里只提供了16個主流的書簽按鈕，其他的可以根據自己的需要自行添加，下面提供其他的書簽代碼及l(fā)ogo下載，并非我原創(chuàng)。把上面提供的代碼看明白了，自己添加也不是什么難事了。