WordPress部落格怎麼加入收藏書籤？ （附實現代碼）
WordPress部落格怎麼加入收藏書籤？以下這篇文章為大家講解一下在WordPress部落格中加入收藏書籤的方法，並附上實作程式碼，希望對大家有幫助！
這兩天在鼓搗給博客添加"社會性網絡書籤Social Bookmark"，也就是文章下面提供給讀者收藏分享文章的按鈕。網路上提供了許多WordPress外掛程式來實現書籤的功能，但是大多數外掛也就是提供一段JS程式碼，其他什麼都沒有提供，程式碼的客製化極差。
可喜的是一些網站提供了程式碼來實現書籤功能，這很不錯。於是做了一番測試，結果不是很滿意，有些程式碼已經失效了，而且呼叫的小圖片太多，增加了http連線數，對網站的載入速度有一定的影響。求人不如求己，自己從各大書籤網站下載來了最新的代碼，經過小小的拼湊，再用上CSS Sprites技術，把這些小圖片整成一張，速度明顯上來了。另外也對程式碼做了優化，通過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個主流的書籤按鈕，其他的可以根據自己的需要自行添加，下面提供其他的書籤代碼及logo下載，並非我原創。把上面提供的程式碼看明白了，自己添加也不是什麼難事了。
推薦學習：《WordPress教學》
以上是WordPress部落格怎麼加入收藏書籤？ （附實現代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
wordpress文章列表怎麼調
Apr 20, 2025 am 10:48 AM
有四種方法可以調整 WordPress 文章列表：使用主題選項、使用插件（如 Post Types Order、WP Post List、Boxy Stuff）、使用代碼（在 functions.php 文件中添加設置）或直接修改 WordPress 數據庫。
wordpress屏蔽ip的插件有哪些
Apr 20, 2025 am 08:27 AM
WordPress 屏蔽 IP 的插件選擇至關重要。可考慮以下類型：基於 .htaccess：高效，但操作複雜；數據庫操作：靈活，但效率較低；基於防火牆：安全性能高，但配置複雜；自行編寫：最高控制權，但需要更多技術水平。
wordpress編輯日期怎麼取消
Apr 20, 2025 am 10:54 AM
WordPress 編輯日期可以通過三種方法取消：1. 安裝 Enable Post Date Disable 插件；2. 在 functions.php 文件中添加代碼；3. 手動編輯 wp_posts 表中的 post_modified 列。
IIS和PHP的兼容性：深度潛水
Apr 22, 2025 am 12:01 AM
IIS和PHP可以兼容，通過FastCGI實現。 1.IIS通過配置文件將.php文件請求轉發給FastCGI模塊。 2.FastCGI模塊啟動PHP進程處理請求，提高性能和穩定性。 3.實際應用中需注意配置細節、錯誤調試和性能優化。
wordpress怎麼寫頁頭
Apr 20, 2025 pm 12:09 PM
在WordPress中創建自定義頁頭的步驟如下：編輯主題文件“header.php”。添加您的網站名稱和描述。創建導航菜單。添加搜索欄。保存更改並查看您的自定義頁頭。
wordpress主題頭部圖片如何更換
Apr 20, 2025 am 10:00 AM
更換 WordPress 主題頭部圖片的分步指南：登錄 WordPress 儀錶盤，導航至“外觀”>“主題”。選擇要編輯的主題，然後單擊“自定義”。打開“主題選項”面板並尋找“網站標頭”或“頭部圖片”選項。單擊“選擇圖像”按鈕並上傳新的頭部圖片。裁剪圖像並單擊“保存並裁剪”。單擊“保存並發布”按鈕以更新更改。
wordpress主機怎麼建站
Apr 20, 2025 am 11:12 AM
要使用 WordPress 主機建站，需要：選擇一個可靠的主機提供商。購買一個域名。設置 WordPress 主機帳戶。選擇一個主題。添加頁面和文章。安裝插件。自定義您的網站。發布您的網站。
wordpress出現錯誤怎麼辦
Apr 20, 2025 am 11:57 AM
WordPress 錯誤解決指南：500 內部服務器錯誤：禁用插件或檢查服務器錯誤日誌。 404 未找到頁面：檢查 permalink 並確保頁面鏈接正確。白屏死機：增加服務器 PHP 內存限制。數據庫連接錯誤：檢查數據庫服務器狀態和 WordPress 配置。其他技巧：啟用調試模式、檢查錯誤日誌和尋求支持。預防錯誤：定期更新 WordPress、僅安裝必要插件、定期備份網站和優化網站性能。
