Bagaimana untuk menambah penanda halaman ke blog WordPress? (Dilampirkan dengan kod pelaksanaan)

Bagaimana untuk menambah penanda halaman pada blog WordPress? Artikel berikut akan menerangkan kepada anda cara menambah penanda halaman kegemaran dalam blog WordPress, dan melampirkan kod pelaksanaan saya harap ia akan membantu anda!

Dalam dua hari yang lalu, saya telah bermain-main dengan menambah "Social Bookmark" pada blog, iaitu butang di bawah artikel untuk pembaca menyimpan dan berkongsi artikel . Terdapat banyak pemalam WordPress yang tersedia di Internet untuk melaksanakan fungsi penanda halaman, tetapi kebanyakan pemalam hanya menyediakan sekeping kod JS dan tiada apa-apa lagi, dan penyesuaian kod itu amat lemah.

Berita baiknya ialah sesetengah tapak web menyediakan kod untuk melaksanakan fungsi penanda halaman, yang sangat bagus. Jadi saya melakukan beberapa ujian, tetapi hasilnya tidak begitu memuaskan Beberapa kod telah gagal, dan terlalu banyak gambar kecil dipanggil, yang meningkatkan bilangan sambungan http dan mempunyai kesan tertentu pada kelajuan pemuatan tapak web. Lebih baik meminta bantuan daripada meminta bantuan sendiri Saya memuat turun kod terbaharu daripada laman web penanda buku utama. Selain itu, kod tersebut telah dioptimumkan dan lulus pengesahan W3C.

Gambar di bawah adalah hasil penanda halaman yang berjaya dibuat Mungkin perkara yang anda lihat di bahagian bawah artikel ini boleh memberi anda pengalaman yang lebih mendalam:

Anda tidak boleh menyimpan perkara yang baik untuk diri sendiri. Mari kongsikan proses membuat butang pengumpulan penanda halaman ini. Sangat mudah.

1. Buka single.php dalam folder tema WordPress anda

2 Cari , atau letakkan di tempat yang anda fikir sesuai):

<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. Sila tukar URL www.ludou.org dalam kod di atas kepada anda, dan kemudian tambahkannya pada fail CSS tema WordPress anda Perkara berikut kod:

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

Kod di atas menggunakan teknologi CSS Sprites Imej latar belakang #soucang li a span boleh disesuaikan Hanya letakkan dalam direktori tapak web anda dan tukar http://example/m Hanya tukar . gif ke alamat imej anda sendiri. Selain itu, jika layout CSS di atas tidak sesuai untuk blog anda, anda boleh mengubahnya sendiri.

Baiklah, ini adalah pengakhiran cerita. Melihat pelbagai butang penanda halaman ini, adakah anda tidak berasa sangat berbeza? Malah, penanda halaman ini juga membantu untuk mencantikkan laman web. Jika anda mempunyai apa-apa, sila tinggalkan mesej di sini.

Disebabkan lebar halaman web yang terhad, hanya 16 butang penanda halaman arus perdana yang disediakan di sini, yang lain boleh ditambah mengikut keperluan anda sendiri saya. Selepas memahami kod yang disediakan di atas, tidak sukar untuk menambahnya sendiri.

Pembelajaran yang disyorkan: "Tutorial WordPress"

Atas ialah kandungan terperinci Bagaimana untuk menambah penanda halaman ke blog WordPress? (Dilampirkan dengan kod pelaksanaan). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!