添加分享功能:新浪微博、Twitter、人人网、QZone
效果见本篇文章结尾处。
我要介绍的这个方法不光wordpress可以用,任何博客都可以用,说的再大点就是任何网站都可以用,因为这个分享就是html加上css就实现了,不是什么插件,因为本人实在不想装什么插件,虽然现在有几款很好的分享插件,但那玩意一个是分享的网站太多了,有的连听都没听过,还有一个是有点不绿色,不轻便。
此方法需要手动修改主题模板和样式表,不想折腾的朋友请直接搜索分享插件使用之。修改之前请备份文章页面模板(single.php)和样式表(style.css),因为只需要修改这俩文件即可:
一、准备一下图片,并上传到你自己喜欢的目录,我上传到了主题下的img(新建的)目录。因为我只需要分享到四个网站,所以我就准备了4个小图标并合并到一张图片里,点击这里右键另存为。
二、打开文章页面模板(single.php),在你喜欢的地方插入一下代码,我是在文章结尾的地方插入的,因为我喜欢:
<div class="share clearfix"><span class="txt">分享到:</span><span><a class="sina" title="分享到新浪微博" href="javascript:void((function(s,d,e){try{}catch(e){}var f='http://v.t.sina.com.cn/share/share.php?',u=d.location.href,p=['url=',e(u),'&title=',e(d.title),'&appkey=2924220432'].join('');function a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=620,height=450,left=',(s.width-620)/2,',top=',(s.height-450)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent)){setTimeout(a,0)}else{a()}})(screen,document,encodeURIComponent));" target="_blank">分享到新浪微博</a></span><span><a href="http://twitter.com/home?status=<?php the_title(); ?> <?php the_permalink(); ?>"title="分享到Twitter" target="_blank" class="twitter">分享到Twitter</a></span><span><a class="renren" href="javascript:void((function(s,d,e){if(/renren\.com/.test(d.location))return;var f='http://share.renren.com/share/buttonshare?link=',u=d.location,l=d.title,p=[e(u),'&title=',e(l)].join('');function%20a(){if(!window.open([f,p].join(''),'xnshare',['toolbar=0,status=0,resizable=1,width=626,height=436,left=',(s.width-626)/2,',top=',(s.height-436)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent));" title="分享到人人网">分享到人人网</a></span><span><a class="qzone" href="javascript:void(window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+encodeURIComponent(document.location.href)));" title="分享到QQ空间">分享到QQ空间</a></span></div>
这里需要说明一下,里面的类名你随便修改,修改成任意你喜欢的名字都可以,但一会添加css的时候记得也要改成相对应的即可,上面clearfix这个类名是用来清除浮动的,不要问我什么是清除浮动,你不清除也可以,但要给share这个层定义高,不然会很惨。
三、打开样式表(style.css),再最下面添加以下代码:
/* 这是清除浮动的代码 */ .clearfix:after{content:".";clear:both;height:0;visibility:hidden;display:block;} .clearfix{display:inline-block;} * html .clearfix{height:1%;} .clearfix{display:block;} /* 清除浮动代码结束 */ /* 这是分享部分的样式代码 */ .share{padding:15px 0;border-bottom:1px solid #cccccc;} .share span{float:left;margin:0 15px 0 0;} .share span.txt{margin:0;} .share a{background:url("img/icon.gif") no-repeat 0 0;display:block;padding:0 0 0 18px;height:16px;line-height:16px;color:#0066CC;overflow:hidden;margin:2px 0 0;text-decoration:none;} .share a:hover{color:#E05C23;} .share .twitter{background-position:0 -16px;} .share .renren{background-position:0 -32px;} .share .qzone{background-position:0 -48px;} /* 分享部分样式代码结束 */
这里还要说明一下,本人不建议在utf-8编码的样式表中用中文注释,因为这可能造成不为人知的错误,但也可能没问题,所以关于此点还请大家自己斟酌一下。
四、上传文件,Done!
如果要卸载此功能,删除你添加过的代码就可以。
有兴趣的朋友可以试试,搞不定的可以联系我,我帮你搞定,当然是在我不忙的时候,比如像现在!
原来用的是脚本,果然无敌通用
哈哈,必须的。
这个学习了,最近想换主题还不知道换什么呢,到时候把这个功能加上……
分享到前面的图片不显示阿
图片传上去了没?路径对不对?