Wie füge ich Lesezeichen zum WordPress-Blog hinzu? (Anbei mit Implementierungscode)-WordDrücken Sie-php.cn

Wie füge ich Lesezeichen zum WordPress-Blog hinzu? Im folgenden Artikel erfahren Sie, wie Sie Lieblingslesezeichen in WordPress-Blogs hinzufügen und den Implementierungscode anhängen. Ich hoffe, er wird Ihnen hilfreich sein!

Wie füge ich Lesezeichen zum WordPress-Blog hinzu? (Anbei mit Implementierungscode)

In den letzten zwei Tagen habe ich daran herumgebastelt, dem Blog ein „Social Bookmark“ hinzuzufügen, eine Schaltfläche unter dem Artikel, über die Leser Artikel sammeln und teilen können. Es gibt viele WordPress-Plug-Ins im Internet, um die Lesezeichenfunktion zu implementieren, aber die meisten Plug-Ins bieten nur einen Teil des JS-Codes und sonst nichts, und die Anpassung des Codes ist äußerst schlecht.

Die gute Nachricht ist, dass einige Websites Code zur Implementierung der Lesezeichenfunktion bereitstellen, was großartig ist. Also habe ich einige Tests durchgeführt, aber die Ergebnisse waren nicht sehr zufriedenstellend. Einige Codes waren fehlgeschlagen und es wurden zu viele kleine Bilder aufgerufen, was die Anzahl der http-Verbindungen erhöhte und einen gewissen Einfluss auf die Ladegeschwindigkeit der Website hatte. Es ist besser, um Hilfe zu bitten, als selbst um Hilfe zu bitten. Ich habe den neuesten Code von großen Lesezeichen-Websites heruntergeladen und diese kleinen Bilder mithilfe der CSS-Sprites-Technologie zu einem zusammengefügt. Darüber hinaus wurde der Code optimiert und hat die W3C-Verifizierung bestanden.

Das Bild unten zeigt den Effekt eines erfolgreich erstellten Lesezeichens. Vielleicht kann Ihnen das, was Sie unten in diesem Artikel sehen, ein tieferes Erlebnis vermitteln:

Wie füge ich Lesezeichen zum WordPress-Blog hinzu? (Anbei mit Implementierungscode)

Sie können den Prozess nicht für sich behalten um diese Schaltfläche zum Sammeln von Lesezeichen zu erstellen. Ganz einfach.

1. Öffnen Sie single.php in Ihrem WordPress-Theme-Ordner

2. Suchen Sie

<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>

Nach dem Login kopieren

3. Bitte ändern Sie die www.ludou.org-URL im obigen Code in Ihre eigene und fügen Sie dann den folgenden Code zu Ihrer WordPress-Theme-CSS-Datei hinzu:

#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;}

Nach dem Login kopieren

Der obige Code verwendet CSS-Sprites-Technologie , das Hintergrundbild von #soucang li a span kann angepasst werden, legen Sie es einfach in Ihr Website-Verzeichnis und ändern Sie http://example/m.gif in Ihre eigene Bildadresse. Wenn das obige CSS-Layout nicht für Ihr Blog geeignet ist, können Sie es außerdem selbst ändern.

Okay, das ist das Ende der Geschichte. Fühlen Sie sich beim Anblick dieser verschiedenen Lesezeichen-Schaltflächen nicht ganz anders? Tatsächlich tragen diese Lesezeichen auch dazu bei, die Website zu verschönern. Wenn Sie etwas haben, hinterlassen Sie bitte hier eine Nachricht.

Aufgrund der begrenzten Breite der Webseite werden hier nur 16 Mainstream-Lesezeichenschaltflächen bereitgestellt. Weitere Lesezeichencodes und Logo-Downloads werden unten bereitgestellt, die für mich nicht original sind. Nachdem Sie den oben bereitgestellten Code verstanden haben, ist es nicht schwierig, ihn selbst hinzuzufügen.

Empfohlenes Lernen: „WordPress-Tutorial“

Das obige ist der detaillierte Inhalt vonWie füge ich Lesezeichen zum WordPress-Blog hinzu? (Anbei mit Implementierungscode). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!