WordPress部落格怎麼加入收藏書籤？以下這篇文章為大家講解一下在WordPress部落格中加入收藏書籤的方法，並附上實作程式碼，希望對大家有幫助！
這兩天在鼓搗給博客添加"社會性網(wǎng)絡(luò)書籤Social Bookmark"，也就是文章下面提供給讀者收藏分享文章的按鈕。網(wǎng)路上提供了許多WordPress外掛程式來實現(xiàn)書籤的功能，但是大多數(shù)外掛也就是提供一段JS程式碼，其他什麼都沒有提供，程式碼的客製化極差。
可喜的是一些網(wǎng)站提供了程式碼來實現(xiàn)書籤功能，這很不錯。於是做了一番測試，結(jié)果不是很滿意，有些程式碼已經(jīng)失效了，而且呼叫的小圖片太多，增加了http連線數(shù)，對網(wǎng)站的載入速度有一定的影響。求人不如求己，自己從各大書籤網(wǎng)站下載來了最新的代碼，經(jīng)過小小的拼湊，再用上CSS Sprites技術(shù)，把這些小圖片整成一張，速度明顯上來了。另外也對程式碼做了優(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="轉(zhuǎn)貼到開心網(wǎng)" 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網(wǎng)摘" 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="轉(zhuǎn)帖到和訊網(wǎng)摘" 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網(wǎng)址改成你的，接著在你的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技術(shù)，其中#soucang?li?a?span的背景圖片可自訂，只需放到你的網(wǎng)站目錄下，將http:/ /example/m.gif修改成自己的圖片地址就可以了。另外，如果上面的CSS佈局不適合你的博客，可以自己改改啊。
好了，到此就大功造成了?？粗@些各色各樣的書籤按鈕，感覺是不是很不一樣呢？其實這些書籤對網(wǎng)站的美化也有一定的幫助作用哦。有事沒事，在此留個言吧。
因為網(wǎng)頁的寬度有限，這裡只提供了16個主流的書籤按鈕，其他的可以根據(jù)自己的需要自行添加，下面提供其他的書籤代碼及l(fā)ogo下載，並非我原創(chuàng)。把上面提供的程式碼看明白了，自己添加也不是什麼難事了。
推薦學(xué)習(xí)：《WordPress教學(xué)》
以上是WordPress部落格怎麼加入收藏書籤？ （附實現(xiàn)代碼）的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強(qiáng)大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
PHP調(diào)用AI智能語音助手 PHP語音交互系統(tǒng)搭建
Jul 25, 2025 pm 08:45 PM
用戶語音輸入通過前端JavaScript的MediaRecorderAPI捕獲並發(fā)送至PHP後端；2.PHP將音頻保存為臨時文件後調(diào)用STTAPI（如Google或百度語音識別）轉(zhuǎn)換為文本；3.PHP將文本發(fā)送至AI服務(wù)（如OpenAIGPT）獲取智能回復(fù)；4.PHP再調(diào)用TTSAPI（如百度或Google語音合成）將回復(fù)轉(zhuǎn)為語音文件；5.PHP將語音文件流式返回前端播放，完成交互。整個流程由PHP主導(dǎo)數(shù)據(jù)流轉(zhuǎn)與錯誤處理，確保各環(huán)節(jié)無縫銜接。
如何用PHP搭建社交分享功能 PHP分享接口集成實戰(zhàn)
Jul 25, 2025 pm 08:51 PM
在PHP中搭建社交分享功能的核心方法是通過動態(tài)生成符合各平臺要求的分享鏈接。 1.首先獲取當(dāng)前頁面或指定的URL及文章信息；2.使用urlencode對參數(shù)進(jìn)行編碼；3.根據(jù)各平臺協(xié)議拼接生成分享鏈接；4.在前端展示鏈接供用戶點擊分享；5.動態(tài)生成頁面OG標(biāo)籤優(yōu)化分享內(nèi)容展示；6.務(wù)必對用戶輸入進(jìn)行轉(zhuǎn)義以防止XSS攻擊。該方法無需複雜認(rèn)證，維護(hù)成本低，適用於大多數(shù)內(nèi)容分享需求。
如何用PHP結(jié)合AI實現(xiàn)文本糾錯 PHP語法檢測與優(yōu)化
Jul 25, 2025 pm 08:57 PM
要實現(xiàn)PHP結(jié)合AI進(jìn)行文本糾錯與語法優(yōu)化，需按以下步驟操作：1.選擇適合的AI模型或API，如百度、騰訊API或開源NLP庫；2.通過PHP的curl或Guzzle調(diào)用API並處理返回結(jié)果；3.在應(yīng)用中展示糾錯信息並允許用戶選擇是否採納；4.使用php-l和PHP_CodeSniffer進(jìn)行語法檢測與代碼優(yōu)化；5.持續(xù)收集反饋並更新模型或規(guī)則以提升效果。選擇AIAPI時應(yīng)重點評估準(zhǔn)確率、響應(yīng)速度、價格及對PHP的支持。代碼優(yōu)化應(yīng)遵循PSR規(guī)範(fàn)、合理使用緩存、避免循環(huán)查詢、定期審查代碼，並藉助X
PHP打造博客評論系統(tǒng)變現(xiàn) PHP評論審核與防刷策略
Jul 25, 2025 pm 08:27 PM
1.評論系統(tǒng)商業(yè)價值最大化需結(jié)合原生廣告精準(zhǔn)投放、用戶付費增值服務(wù)（如上傳圖片、評論置頂）、基於評論質(zhì)量的影響力激勵機(jī)制及合規(guī)匿名數(shù)據(jù)洞察變現(xiàn)；2.審核策略應(yīng)採用前置審核 動態(tài)關(guān)鍵詞過濾 用戶舉報機(jī)制組合，輔以評論質(zhì)量評分實現(xiàn)內(nèi)容分級曝光；3.防刷需構(gòu)建多層防禦：reCAPTCHAv3無感驗證、Honeypot蜜罐字段識別機(jī)器人、IP與時間戳頻率限制阻止灌水、內(nèi)容模式識別標(biāo)記可疑評論，持續(xù)迭代應(yīng)對攻擊。
PHP實現(xiàn)商品庫存管理變現(xiàn) PHP庫存同步與報警機(jī)制
Jul 25, 2025 pm 08:30 PM
PHP通過數(shù)據(jù)庫事務(wù)與FORUPDATE行鎖確保庫存扣減原子性，防止高並發(fā)超賣；2.多平臺庫存一致性需依賴中心化管理與事件驅(qū)動同步，結(jié)合API/Webhook通知及消息隊列保障數(shù)據(jù)可靠傳遞；3.報警機(jī)制應(yīng)分場景設(shè)置低庫存、零/負(fù)庫存、滯銷、補(bǔ)貨週期和異常波動策略，並按緊急程度選擇釘釘、短信或郵件通知責(zé)任人，且報警信息需完整明確，以實現(xiàn)業(yè)務(wù)適配與快速響應(yīng)。
如何用PHP結(jié)合AI做圖像生成 PHP自動生成藝術(shù)作品
Jul 25, 2025 pm 07:21 PM
PHP不直接進(jìn)行AI圖像處理，而是通過API集成，因為它擅長Web開發(fā)而非計算密集型任務(wù)，API集成能實現(xiàn)專業(yè)分工、降低成本、提升效率；2.整合關(guān)鍵技術(shù)包括使用Guzzle或cURL發(fā)送HTTP請求、JSON數(shù)據(jù)編解碼、API密鑰安全認(rèn)證、異步隊列處理耗時任務(wù)、健壯錯誤處理與重試機(jī)制、圖像存儲與展示；3.常見挑戰(zhàn)有API成本失控、生成結(jié)果不可控、用戶體驗差、安全風(fēng)險和數(shù)據(jù)管理難，應(yīng)對策略分別為設(shè)置用戶配額與緩存、提供prompt指導(dǎo)與多圖選擇、異步通知與進(jìn)度提示、密鑰環(huán)境變量存儲與內(nèi)容審核、雲(yún)存
超越燈堆：PHP在現(xiàn)代企業(yè)體系結(jié)構(gòu)中的作用
Jul 27, 2025 am 04:31 AM
PHPisstillrelevantinmodernenterpriseenvironments.1.ModernPHP(7.xand8.x)offersperformancegains,stricttyping,JITcompilation,andmodernsyntax,makingitsuitableforlarge-scaleapplications.2.PHPintegrateseffectivelyinhybridarchitectures,servingasanAPIgateway
PHP集成AI語音識別與轉(zhuǎn)寫 PHP會議記錄自動生成方案
Jul 25, 2025 pm 07:06 PM
選擇合適AI語音識別服務(wù)並集成PHPSDK；2.用PHP調(diào)用ffmpeg將錄音轉(zhuǎn)為API要求格式（如wav）；3.上傳文件至雲(yún)存儲並調(diào)用API異步識別；4.解析JSON結(jié)果並用NLP技術(shù)整理文本；5.生成Word或Markdown文檔完成會議記錄自動化，全過程需確保數(shù)據(jù)加密、訪問控制與合規(guī)性以保障隱私安全。
