自定义wordpress分享按钮
远方的雪山建站一年多,刚开始用了JiaThis分享按钮,接触不久,就知道了百度分享,用百度分享一直到现在,所以对JiaThis也没有太多的感觉。
百度分享,为您带来更多流量!我信了,就用了。看重百度强大的中文搜索引擎,能给网站带来流量,但其实与其它分享按钮没有太多的区别,别人不分享,再强大的分享按钮放在那也是个摆设。
自定义分享按钮有几个初衷:
1、分享按钮插件很强大,几乎包括所有的社交网站,但加载的链接多肯定会影响网速,测试了好多次也确是如此。
2、不美观,分享按钮插件的样式不能网站本身的设计很好的融合在一起。
3、能用代码实现的功能就用代码,尽量减少插件的使用。
替换分享链接中的标题与地址:
自定义分享按钮,其实是很简单,首页我们需要获取社交网站分享的链接地址,而这个不用我们操心,可以找百度分享、JiaThis等强大的分享按钮。在任何有百度分享或JiaThis分享按钮的网站中点击社交分享按钮都会弹出一个分享页面,网址就是我们需要的。
一般分享链接获取的都是当前页面的标题和地址,所以我们只需把分享链接中的标题与地址替换为wordpress的函数:
把分享链接中带有&t=、&title=等其它标题样式后面的标题替换为下面的代码:
<?php the_title(''); ?>
把分享链接中带有?url=、?link=等其它链接样式后面的地址替换为下面的代码:
<?php the_permalink(); ?>
因为分享链接中的标题与地址基本都是一大串字符,所以很难区分哪些才是标题,这里有个简单的方法,标题为例:
&title=%E5%88%86%E4%BA%AB%E6%8C%89%E9%92%AE&,在“&title=”后面与下一个“&”前面之间红色的字符就是标题了,地址也是这样。
添加分享链接按钮:
下面的代码为分享的链接地址,一些代码是网上有就没有重新编辑,把不需要的删除,需要的一些分享按钮萨龙龙重新编辑添加了进来。代码中的“社交图标链接地址”替换为你自己的图标链接地址,添加到single.php文件的相关位置:
<!--远方的雪山自定义分享按钮-->
<div class="share"><h3>分享到:</h3>
<a target="_blank" rel="nofollow" href="http://twitter.com/home/?status=<?php the_title(''); ?>:<?php the_permalink(); ?>" class="twitter-share" title="Twitter"><img src="社交图标链接地址"></a>
<a target="_blank" rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(''); ?>" class="facebook-share" title="Facebook"><img src="社交图标链接地址" /></a>
<a target="_blank" rel="nofollow" href="http://www.douban.com/recommend/?url=<?php the_permalink(); ?>&title=<?php the_title(''); ?>" class="douban-share" title="豆瓣"><img src="社交图标链接地址"></a>
<a target="_blank" rel="nofollow" href="http://www.diandian.com/share?lo=<?php the_permalink(); ?>&ti=<?php the_title(''); ?>&type=link" class="diandian-share" title="点点"><img src="社交图标链接地址"></a>
<a target="_blank" rel="nofollow" href="http://t.sohu.com/third/post.jsp?&url=<?php the_permalink(); ?>&title=<?php the_title(''); ?>&content=UTF-8" class="sohu-share" title="搜狐微博"><img src="社交图标链接地址"></a>
<a target="_blank" rel="nofollow" href="http://t.163.com/article/user/checkLogin.do?link=<?php the_permalink(); ?>&source=salonglong.com&info=<?php the_title(''); ?> <?php the_permalink(); ?>" class="netease-share" title="网易微博"><img src="社交图标链接地址"></a>
<a target="_blank" rel="nofollow" href="http://v.t.sina.com.cn/share/share.php?appkey=3408168656&url=<?php the_permalink(); ?>&title=<?php the_title(''); ?>" class="sina-share" title="新浪微博"><img src="社交图标链接地址"></a>
<a target="_blank" rel="nofollow" href="http://v.t.qq.com/share/share.php?title=<?php the_title(''); ?>&url=<?php the_permalink(); ?>&appkey=3e87c17cc8ca4726b13a3167115dd13c&site=http://salonglong.com/" class="tencent-share" title="腾讯微博"><img src="社交图标链接地址"></a>
<a target="_blank" rel="nofollow" href="http://www.kaixin001.com/rest/records.php?url=<?php the_permalink(); ?>&style=11&content=<?php the_title(''); ?>&stime=&sig=" class="kaixin-share" title="开心网"><img src="社交图标链接地址"></a>
<a target="_blank" rel="nofollow" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=<?php the_permalink(); ?>&title=<?php the_title(''); ?>&desc=&summary=&site=" class="qq-share" title="QQ空间"><img src="社交图标链接地址"></a>
<a target="_blank" rel="nofollow" href="http://share.renren.com/share/buttonshare?link=<?php the_permalink(); ?>&title=<?php the_title(''); ?>" class="renren-share" title="人人网"><img src="社交图标链接地址"></a>
<a target="_blank" rel="nofollow" href="http://shuqian.qq.com/post?from=3&title=<?php the_title(''); ?>&uri=<?php the_permalink(); ?>" class="qqsq-share" title="QQ书签"><img src="社交图标链接地址"></a>
<a target="_blank" rel="nofollow" href="http://cang.baidu.com/do/add?iu=<?php the_permalink(); ?>&it=<?php the_title(''); ?>&linkid=hjm6y313aqz" class="baidu-share" title="百度云收藏"><img src="社交图标链接地址"></a>
<a target="_blank" rel="nofollow" href="http://feed.feedsky.com/salonglong" class="rss-share" title="订阅我们"><img src="社交图标链接地址"></a>
</div>
或者也可以新一个php文件(custom_share.php),方便以后重复利用,把上面的代码添加到此文件中,再用下面的代码把custom_share.php包括进来:
<!-- 分享 -->
<?php include('custom_share.php'); ?>
<!-- 分享end-->
添加分享按钮样式:
分享按钮的样式,拷贝到主题的样式文件就OK:
/*远方的雪山自定义分享样式*/
.share{
background: #f8f8f8;
overflow: hidden;
height: 50px;
border: 1px solid #ddd;
border-radius: 5px;
margin: 12px 0;
}
.user_avatar{
background: #f8f8f8;
border: 1px solid #ddd;
border-radius: 4px 4px 0 0;
margin-bottom: 12px;
}
.user_avatar img{
margin: 8px 6px 0 8px;
}
.share h3{
font-size: 14px;
float: left;
background: url(images/share.png) #3275a8 no-repeat;
height: 50px;
width: 123px;
text-indent: -999px;
}
.share img{
padding: 0;
border: none;
margin: 8px 1px;
}
.share h3,.share img{
background-color: #dedede;
}
.share img:hover,.share h3:hover{
background-color: #1e8dcc;
}
效果可以看远方的雪山文章下面的分享按钮。
自定义分享按钮还是不错,设计成与远方的雪山一样的风格,看着就是舒服。
原文链接:http://salonglong.com/wordpress-share.html
百度分享,为您带来更多流量!我信了,就用了。看重百度强大的中文搜索引擎,能给网站带来流量,但其实与其它分享按钮没有太多的区别,别人不分享,再强大的分享按钮放在那也是个摆设。
自定义分享按钮有几个初衷:
1、分享按钮插件很强大,几乎包括所有的社交网站,但加载的链接多肯定会影响网速,测试了好多次也确是如此。
2、不美观,分享按钮插件的样式不能网站本身的设计很好的融合在一起。
3、能用代码实现的功能就用代码,尽量减少插件的使用。
替换分享链接中的标题与地址:
自定义分享按钮,其实是很简单,首页我们需要获取社交网站分享的链接地址,而这个不用我们操心,可以找百度分享、JiaThis等强大的分享按钮。在任何有百度分享或JiaThis分享按钮的网站中点击社交分享按钮都会弹出一个分享页面,网址就是我们需要的。
一般分享链接获取的都是当前页面的标题和地址,所以我们只需把分享链接中的标题与地址替换为wordpress的函数:
把分享链接中带有&t=、&title=等其它标题样式后面的标题替换为下面的代码:
<?php the_title(''); ?>
把分享链接中带有?url=、?link=等其它链接样式后面的地址替换为下面的代码:
<?php the_permalink(); ?>
因为分享链接中的标题与地址基本都是一大串字符,所以很难区分哪些才是标题,这里有个简单的方法,标题为例:
&title=%E5%88%86%E4%BA%AB%E6%8C%89%E9%92%AE&,在“&title=”后面与下一个“&”前面之间红色的字符就是标题了,地址也是这样。
添加分享链接按钮:
下面的代码为分享的链接地址,一些代码是网上有就没有重新编辑,把不需要的删除,需要的一些分享按钮萨龙龙重新编辑添加了进来。代码中的“社交图标链接地址”替换为你自己的图标链接地址,添加到single.php文件的相关位置:
<!--远方的雪山自定义分享按钮-->
<div class="share"><h3>分享到:</h3>
<a target="_blank" rel="nofollow" href="http://twitter.com/home/?status=<?php the_title(''); ?>:<?php the_permalink(); ?>" class="twitter-share" title="Twitter"><img src="社交图标链接地址"></a>
<a target="_blank" rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(''); ?>" class="facebook-share" title="Facebook"><img src="社交图标链接地址" /></a>
<a target="_blank" rel="nofollow" href="http://www.douban.com/recommend/?url=<?php the_permalink(); ?>&title=<?php the_title(''); ?>" class="douban-share" title="豆瓣"><img src="社交图标链接地址"></a>
<a target="_blank" rel="nofollow" href="http://www.diandian.com/share?lo=<?php the_permalink(); ?>&ti=<?php the_title(''); ?>&type=link" class="diandian-share" title="点点"><img src="社交图标链接地址"></a>
<a target="_blank" rel="nofollow" href="http://t.sohu.com/third/post.jsp?&url=<?php the_permalink(); ?>&title=<?php the_title(''); ?>&content=UTF-8" class="sohu-share" title="搜狐微博"><img src="社交图标链接地址"></a>
<a target="_blank" rel="nofollow" href="http://t.163.com/article/user/checkLogin.do?link=<?php the_permalink(); ?>&source=salonglong.com&info=<?php the_title(''); ?> <?php the_permalink(); ?>" class="netease-share" title="网易微博"><img src="社交图标链接地址"></a>
<a target="_blank" rel="nofollow" href="http://v.t.sina.com.cn/share/share.php?appkey=3408168656&url=<?php the_permalink(); ?>&title=<?php the_title(''); ?>" class="sina-share" title="新浪微博"><img src="社交图标链接地址"></a>
<a target="_blank" rel="nofollow" href="http://v.t.qq.com/share/share.php?title=<?php the_title(''); ?>&url=<?php the_permalink(); ?>&appkey=3e87c17cc8ca4726b13a3167115dd13c&site=http://salonglong.com/" class="tencent-share" title="腾讯微博"><img src="社交图标链接地址"></a>
<a target="_blank" rel="nofollow" href="http://www.kaixin001.com/rest/records.php?url=<?php the_permalink(); ?>&style=11&content=<?php the_title(''); ?>&stime=&sig=" class="kaixin-share" title="开心网"><img src="社交图标链接地址"></a>
<a target="_blank" rel="nofollow" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=<?php the_permalink(); ?>&title=<?php the_title(''); ?>&desc=&summary=&site=" class="qq-share" title="QQ空间"><img src="社交图标链接地址"></a>
<a target="_blank" rel="nofollow" href="http://share.renren.com/share/buttonshare?link=<?php the_permalink(); ?>&title=<?php the_title(''); ?>" class="renren-share" title="人人网"><img src="社交图标链接地址"></a>
<a target="_blank" rel="nofollow" href="http://shuqian.qq.com/post?from=3&title=<?php the_title(''); ?>&uri=<?php the_permalink(); ?>" class="qqsq-share" title="QQ书签"><img src="社交图标链接地址"></a>
<a target="_blank" rel="nofollow" href="http://cang.baidu.com/do/add?iu=<?php the_permalink(); ?>&it=<?php the_title(''); ?>&linkid=hjm6y313aqz" class="baidu-share" title="百度云收藏"><img src="社交图标链接地址"></a>
<a target="_blank" rel="nofollow" href="http://feed.feedsky.com/salonglong" class="rss-share" title="订阅我们"><img src="社交图标链接地址"></a>
</div>
或者也可以新一个php文件(custom_share.php),方便以后重复利用,把上面的代码添加到此文件中,再用下面的代码把custom_share.php包括进来:
<!-- 分享 -->
<?php include('custom_share.php'); ?>
<!-- 分享end-->
添加分享按钮样式:
分享按钮的样式,拷贝到主题的样式文件就OK:
/*远方的雪山自定义分享样式*/
.share{
background: #f8f8f8;
overflow: hidden;
height: 50px;
border: 1px solid #ddd;
border-radius: 5px;
margin: 12px 0;
}
.user_avatar{
background: #f8f8f8;
border: 1px solid #ddd;
border-radius: 4px 4px 0 0;
margin-bottom: 12px;
}
.user_avatar img{
margin: 8px 6px 0 8px;
}
.share h3{
font-size: 14px;
float: left;
background: url(images/share.png) #3275a8 no-repeat;
height: 50px;
width: 123px;
text-indent: -999px;
}
.share img{
padding: 0;
border: none;
margin: 8px 1px;
}
.share h3,.share img{
background-color: #dedede;
}
.share img:hover,.share h3:hover{
background-color: #1e8dcc;
}
效果可以看远方的雪山文章下面的分享按钮。
自定义分享按钮还是不错,设计成与远方的雪山一样的风格,看着就是舒服。
原文链接:http://salonglong.com/wordpress-share.html
> 我来回应
萨龙龙的最新日记 · · · · · · ( 全部 )
热门话题 · · · · · · ( 去话题广场 )
- 夏日限定的绿色美学1134篇内容 · 30.4万次浏览
- 分享你夏天珍藏的一抹绿202篇内容 · 6.5万次浏览
- 抬头看看,这个刚诞生的夏天305篇内容 · 62.5万次浏览
- 锦绣芳华追剧手记449篇内容 · 27.8万次浏览
- 想做的事,别等“以后”1.0万+篇内容 · 716.6万次浏览
- 我生活着,就是为了这些瞬间186篇内容 · 34.1万次浏览
- 重新养一遍自己,可真好啊3122篇内容 · 456.4万次浏览
- 中年人感悟特别多1451篇内容 · 696.9万次浏览