WordPress 블로그에 북마크를 추가하는 방법은 무엇입니까? (구현코드 첨부)

WordPress 블로그에 북마크를 추가하는 방법은 무엇입니까? 다음 글에서는 WordPress 블로그에 즐겨찾는 북마크를 추가하는 방법과 구현 코드를 첨부하는 방법을 설명하겠습니다. 도움이 되길 바랍니다.

지난 이틀 동안 저는 독자들이 기사를 수집하고 공유할 수 있도록 기사 아래에 있는 버튼인 "소셜 북마크"를 블로그에 추가하는 작업을 고민했습니다. 북마크 기능을 구현하기 위해 인터넷에서 사용할 수 있는 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!=&#39;None&#39;?d.selection.createRange().text:&#39;&#39;):(d.getSelection?d.getSelection():&#39;&#39;);void(vivi=window.open(&#39;http://vivi.sina.com.cn/collect/icollect.php?pid=www.ludou.org&title=&#39;+escape(d.title)+&#39;&url=&#39;+escape(d.location.href)+&#39;&desc=&#39;+escape(t),&#39;vivi&#39;,&#39;scrollbars=no,width=480,height=480,left=75,top=20,status=no,resizable=yes&#39;));vivi.focus();" title="保存到爱问ViVi收藏夹"><span></span></a>
</li>			

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

<li id="poco">
	<a href="javascript:d=document;t=d.selection?(d.selection.type!=&#39;None&#39;?d.selection.createRange().text:&#39;&#39;):(d.getSelection?d.getSelection():&#39;&#39;);void(keyit=window.open(&#39;http://my.poco.cn/fav/storeIt.php?t=&#39;+escape(d.title)+&#39;&u=&#39;+escape(d.location.href)+&#39;&c=&#39;+escape(t)+&#39;&img=http://www.h-strong.com/blog/logo.gif&#39;,&#39;keyit&#39;,&#39;scrollbars=no,width=475,height=575,status=no,resizable=yes&#39;));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!=&#39;None&#39;?document.selection.createRange().text:&#39;&#39;):(document.getSelection?document.getSelection():&#39;&#39;);void(open(&#39;http://bookmark.hexun.com/post.aspx?title=&#39;+escape(t)+&#39;&url=&#39;+escape(u)+&#39;&excerpt=&#39;+escape(e),&#39;HexunBookmark&#39;,&#39;scrollbars=no,width=600,height=450,left=80,top=80,status=no,resizable=yes&#39;));" 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 URL을 자신의 URL로 변경한 후 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개의 주요 북마크 버튼만 제공됩니다. 다른 북마크 버튼은 필요에 따라 추가할 수 있으며, 이는 제가 만든 것이 아닙니다. 위에 제공된 코드를 이해하고 나면 직접 추가하는 것은 어렵지 않습니다.

추천 학습: "WordPress Tutorial"

위 내용은 WordPress 블로그에 북마크를 추가하는 방법은 무엇입니까? (구현코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!