好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

手工添加WordPress文章分享按钮(无插件)实现步骤

给一篇好的文章添加一些分享按钮分享到一些知名网站,很利于网站的推广。给站点添加分享按钮的方法很多,你可以像本站这样,使用jiathis工具,登陆jiathis.com设置你喜欢的方式获取相应的代码即可。这里再介绍一个手工添加WordPress文章分享按钮的方法。 

先看效果图 : 


方法 :新建一个bookmarke.php文件,复制以下代码到其中,并上传至主题目录。 

<?php   $permalink = urlencode(get_permalink($post->ID));   $title = urlencode($post->post_title);   $title = str_replace( '+' , '%20' ,$title);   ?>   <li id= "xianguo" >   <a href="http: //www.xianguo.com/service/submitdigg/?link=<?php echo $permalink; ?>&amp;    title=<?php echo $title; ?> " target=" _blank " rel=" nofollow">分享到鲜果</a>   </li>   <li id= "douban" >   <a href= "http://www.douban.com/recommend/?url=<?php echo $permalink; ?>&amp;title=<?php echo $title; ?>&amp;sel=&amp;v=1"  target= "_blank"  rel= "nofollow" >分享到豆瓣</a>   </li>   <li id= "zuosa" >   <a href= "javascript:u=location.href;t=document.title;t=t.substr(0,76);c=%22%22+(window.getSelection?window.getSelection():document.getSelection?document.getSelection():document.selection.createRange().text);c=c.substr(0,180);location=%22http://zuosa.com/collect/Collect.aspx?t=%22+encodeURIComponent(t)+%22&u=%22+encodeURIComponent(u);void%200" >分享到做啥</a>   </li>   <li id= "xiaonei" >   <a href= "http://share.xiaonei.com/share/buttonshare.do?link=<?php the_permalink() ?>&title=<?php the_title(); ?>" target= "_blank"  rel= "nofollow"  >分享到人人网</a>   </li>   <li id= "kaixin001" >   <a href= "http://www.kaixin001.com/repaste/share.php?url=<?php the_permalink() ?>&title=<?php the_title(); ?>"  title= "分享到开心网"  target= "_blank"  rel= "nofollow" >分享到开心网</a>   </li>   <li id= "sina" ><a href= "http://v.t.sina.com.cn/share/share.php?url=<?php the_permalink() ?>&title=<?php the_title(); ?>" target= "_blank"  rel= "nofollow"   " title=" 分享到新浪微博 " target=" _blank " rel=" nofollow">分享到新浪微博</a></li>  



然后设置CSS ,在主题的style.css中添加如下代码 

/************************************************    * bookmark *    ************************************************/    #share {    background:none repeat scroll 0 0 #FFF6EE;   -moz-border-radius:5px 5px 5px 5px;   -webkit-border-radius: 5px;   background:none repeat scroll 0 0 #FFF6EE;   border:1px solid #FFF6CC;   width:602px;   float :left;   }   #share li {    background:url( "images/share.gif" ) no-repeat scroll 0 0 transparent;   float :left;   margin:6px 0 0 5px;   padding:4px 0 4px 20px;   list-style-type:none;   }   #share li#fanfou {    background-position:0 -44px;   }   #share li#facebook {    background-position:0 -22px;   }   #share li#friendfeed {    background-position:0 -66px;   }   #share li#douban {    background-position:0 -110px;   }   #share li#xiaonei {    background-position:0 -87px;   }   #share li#zuosa {    background-position:0 -130px;   }   #share li#myspace {    background-position:0 -153px;   }   #share li#kaixin001 {    background-position:0 -176px;   }   #share li#xianguo {    background-position:0 -199px;   }   #share li#sina {    background-position:0 -220px;   }  


然后下载分享按钮图标,并上传至wordpress主题的images目录下。 

最后在文章模板页中添加如下代码(一般是single.php) 

<div id= "share" >   <ul><?php include(TEMPLATEPATH. "/bookmark.php" );?></ul>   </div>  



OK ,已经全部完成,IE8 、FF、GG下测试无误,若出现错位情况,请尝试修改CSS图片控制宽度,如果你不喜欢以上的分享站点,可以自己修改网址和图标即可。

查看更多关于手工添加WordPress文章分享按钮(无插件)实现步骤的详细内容...

  阅读:45次