WordPress ブログにブックマークを追加するにはどうすればよいですか? (実装コードを添付)-＆＃＆プレス-php.cn

WordPress ブログにブックマークを追加するにはどうすればよいですか? (実装コードを添付)

青灯夜游

リリース： 2023-02-28 20:00:23

転載

1838 人が閲覧しました

WordPress ブログにブックマークを追加するにはどうすればよいですか?以下の記事ではWordPressブログにお気に入りブックマークを追加する方法と、実装コードを添付する方法を解説していますので、ご参考になれば幸いです。

WordPress ブログにブックマークを追加するにはどうすればよいですか? (実装コードを添付)

過去 2 日間、私はブログに「ソーシャルブックマーク」を追加することに取り組んできました。これは、読者が記事を収集して共有するための記事の下にあるボタンです。。インターネット上にはブックマーク機能を実装するための WordPress プラグインが多数ありますが、ほとんどのプラグインは JS コードのみを提供し、それ以外は何も提供せず、コードのカスタマイズ性は非常に貧弱です。

良いニュースとして、一部の Web サイトではブックマーク機能を実装するためのコードが提供されており、これは非常に優れています。そこでいくつかのテストを行ったのですが、結果はあまり満足のいくものではなく、一部のコードが失敗したり、小さな画像が呼び出されすぎたりして、http 接続の数が増加し、Web サイトの読み込み速度に一定の影響を及ぼしました。自分で助けを求めるよりも、助けを求める方が良いです。主要なブックマーク Web サイトから最新のコードをダウンロードしました。少しまとめた後、CSS スプライトテクノロジーを使用して、これらの小さな画像を 1 つに結合しました。明らかに速度が向上しました。さらに、コードは最適化されており、W3C 検証に合格しています。

下の図は、正常に作成されたブックマークの効果です。おそらく、この記事の下に表示されている内容は、より深い体験を提供する可能性があります:

WordPress ブログにブックマークを追加するにはどうすればよいですか? (実装コードを添付)

良いものにはできないこのブックマーク収集ボタンの制作過程を共有しましょう。とてもシンプルです。

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 を自分のものに変更し、次のコードを 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 スプライトテクノロジーを使用しており、#soucang li a spans の背景画像をカスタマイズできます。Web サイトのディレクトリに置き、 http:// を変更するだけです / example/m.gif を独自の画像アドレスに追加します。また、上記の CSS レイアウトがブログに適していない場合は、ご自身で変更することもできます。

さて、話はこれで終わりです。このさまざまなブックマークボタンを見ていると、ずいぶんと違う気がしませんか？実際、これらのブックマークは Web サイトを美しくするのにも役立ちます。何かありましたら、ここにメッセージを残してください。

Web ページの幅が限られているため、ここでは 16 の主流のブックマークボタンのみが提供されています。必要に応じてその他のボタンも追加できます。他のブックマークコードとロゴのダウンロードは以下に提供されていますが、これらはオリジナルのものではありません。自分。上記のコードを理解すれば、自分でコードを追加するのは難しくありません。