• 您好,欢迎访问本站!
  • 登录
  • 公告
  • 地图
  • 标签
  • 链接
  • 留言
  • 主题购买
远方的雪山
  • 首页
  • 博客
    • 原野视听
      • 影片推荐
      • 纪录片
      • 轻音乐
      • 音乐推荐
    • 去野吧
      • 徒步登山
      • 摄影作品
      • 珍藏记忆
      • 远方走走
    • 技术归档
      • BbPress
      • BuddyPress
      • Redux框架
      • WooCommerce
      • WordPress
      • 软件系统
    • 绘画艺术
    • 远方站台
      • 人生故事
      • 南窗随笔
      • 唯美世界
  • 画廊
    • 自然风光
    • 徒步登山
    • 骑行之旅
    • 儿童摄影
    • 古城古迹
    • 植物花卉
  • 视频
    • 纪录片
    • 动画短片
  • 原创主题
  • 公告
  • 关于
    • 联系
    • 萨龙龙
    • 热评文章
    • 置顶文章
    • 最赞的文章

WordPress

首页 - 博客 - 技术归档 - WordPress - 正文

自定义wordpress分享按钮

萨龙龙萨龙龙 WordPress 12年前
3.75W 25 20
LensNews

自定义wordpress分享按钮

不要再说用百度分享就可以,是可以,但我有我的想法和初衷,而说这话的人都没有看到!
远方的雪山建站一年多,刚开始用了JiaThis分享按钮,接触不久,就知道了百度分享,用百度分享一直到现在,所以对JiaThis也没有太多的感觉。

百度分享,为您带来更多流量!我信了,就用了。看重百度强大的中文搜索引擎,能给网站带来流量,但其实与其它分享按钮没有太多的区别,别人不分享,再强大的分享按钮放在那也是个摆设。

自定义分享按钮有几个初衷:

  • 1、分享按钮插件很强大,几乎包括所有的社交网站,但加载的链接多肯定会影响网速,测试了好多次也确是如此。
  • 2、不美观,分享按钮插件的样式不能网站本身的设计很好的融合在一起。
  • 3、能用代码实现的功能就用代码,尽量减少插件的使用。

替换分享链接中的标题与地址:

自定义分享按钮,其实是很简单,首页我们需要获取社交网站分享的链接地址,而这个不用我们操心,可以找百度分享、JiaThis等强大的分享按钮。在任何有百度分享或JiaThis分享按钮的网站中点击社交分享按钮都会弹出一个分享页面,网址就是我们需要的。

一般分享链接获取的都是当前页面的标题和地址,所以我们只需把分享链接中的标题与地址替换为wordpress的函数:
把分享链接中带有&t=、&title=等其它标题样式后面的标题替换为下面的代码:

  1. <?php the_title(''); ?>  

把分享链接中带有?url=、?link=等其它链接样式后面的地址替换为下面的代码:

  1. <?php the_permalink(); ?>  

因为分享链接中的标题与地址基本都是一大串字符,所以很难区分哪些才是标题,这里有个简单的方法,标题为例:

&title=%E5%88%86%E4%BA%AB%E6%8C%89%E9%92%AE&,在“&title=”后面与下一个“&”前面之间红色的字符就是标题了,地址也是这样。

添加分享链接按钮:

下面的代码为分享的链接地址,一些代码是网上有就没有重新编辑,把不需要的删除,需要的一些分享按钮萨龙龙重新编辑添加了进来。代码中的“社交图标链接地址”替换为你自己的图标链接地址,添加到single.php文件的相关位置:

  1. <!--远方的雪山自定义分享按钮-->   
  2. <div class="share"><h3>分享到:</h3>    
  3. <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>   
  4.   
  5. <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>   
  6.   
  7. <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>   
  8.   
  9. <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>   
  10.   
  11. <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>   
  12.   
  13. <a target="_blank" rel="nofollow" href="http://t.163.com/article/user/checkLogin.do?link=<?php the_permalink(); ?>&source=yfdxs.com&info=<?php the_title(''); ?> <?php the_permalink(); ?>" class="netease-share" title="网易微博"><img src="社交图标链接地址"></a>   
  14.   
  15. <a target="_blank" rel="nofollow" href="http://v.t.sina.com.cn/share/share.php?&url=<?php the_permalink(); ?>&title=<?php the_title(''); ?>" class="sina-share" title="新浪微博"><img src="社交图标链接地址"></a>   
  16.   
  17. <a target="_blank" rel="nofollow" href="http://v.t.qq.com/share/share.php?title=<?php the_title(''); ?>&url=<?php the_permalink(); ?>&site=https://yfdxs.com/" class="tencent-share" title="腾讯微博"><img src="社交图标链接地址"></a>   
  18.   
  19. <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>   
  20.   
  21. <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>   
  22.   
  23. <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>   
  24.   
  25. <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>   
  26.   
  27. <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>   
  28.   
  29. <a target="_blank" rel="nofollow" href="http://feed.feedsky.com/salonglong" class="rss-share" title="订阅我们"><img src="社交图标链接地址"></a>   
  30.   
  31. </div>  

或者也可以新一个php文件(custom_share.php),方便以后重复利用,把上面的代码添加到此文件中,再用下面的代码把custom_share.php包括进来:

  1. <!-- 分享 -->   
  2. <?php include('custom_share.php'); ?>   
  3. <!-- 分享end-->   

添加分享按钮样式:

分享按钮的样式,拷贝到主题的样式文件就OK:

  1. /*远方的雪山自定义分享样式*/  
  2. .share{    
  3.     background: #f8f8f8;   
  4.     overflow: hidden;   
  5.     height: 50px;   
  6.     border: 1px solid #ddd;   
  7.     border-radius: 5px;   
  8.     margin: 12px 0;   
  9. }   
  10. .user_avatar{   
  11.     background: #f8f8f8;   
  12.     border: 1px solid #ddd;   
  13.     border-radius: 4px 4px 0 0;   
  14.     margin-bottom: 12px;   
  15. }   
  16. .user_avatar img{   
  17.     margin: 8px 6px 0 8px;   
  18. }   
  19. .share h3{   
  20.     font-size: 14px;   
  21.     float: left;   
  22.     background: url(images/share.png) #3275a8 no-repeat;   
  23.     height: 50px;   
  24.     width: 123px;   
  25.     text-indent: -999px;   
  26. }   
  27. .share img{    
  28.     padding: 0;   
  29.     border: none;   
  30.     margin: 8px 1px;   
  31. }   
  32. .share h3,.share img{   
  33.     background-color: #dedede;   
  34. }   
  35. .share img:hover,.share h3:hover{   
  36.     background-color: #1e8dcc;   
  37. }  

效果可以看远方的雪山文章下面的分享按钮。

自定义分享按钮还是不错,设计成与远方的雪山一样的风格,看着就是舒服。
赞(20)
赏
分享

本文由 远方的雪山 作者:萨龙龙 发表,转载请注明来源!

关键词:WordPress 使用, 分享按钮
萨龙龙

萨龙龙

文章:290 画廊:33 视频:37

一个平平常常的人,热爱生活、旅行和摄影,骑行去过西藏,一直计划再去。14年从江西骑行来到大理,现栖居于洱海边,食人间烟火,过简单生活,做简约设计!

高动态范围成像的简介与欣赏
专业摄影师图像处理软件Lightroom

相关文章

  • WordPress为所有文章自动添加自定义字段

    WordPress为所有文章自动添加自定义字段

    WordPress 8年前 26
  • WOW.js简单实现页面滚动动画效果

    WOW.js简单实现页面滚动动画效果

    WordPress 9年前 5
  • WordPress MU多站点网络共享媒体插件Network Shared Media的使用包括特色图像

    WordPress MU多站点网络共享媒体插件Network Shared Media的使用包括特色图像

    WordPress 10年前
  • WordPress MU多站点从子域名转子目录

    WordPress MU多站点从子域名转子目录

    WordPress 9年前 1
  • 申请Gravatar全球通用头像

    申请Gravatar全球通用头像

    WordPress 13年前 1
  • WordPress相册插件NextGEN Gallery的使用

    WordPress相册插件NextGEN Gallery的使用

    WordPress 12年前 7
LensNews

热评文章

  • 1远方的雪山Salong主题免费分享和使用教程
  • 2WordPress相册插件NextGEN Gallery的使用
  • 3远方的雪山域名更换为yfdxs.com
  • 4自定义wordpress分享按钮
  • 5Concise主题更新至1.40,功能升级提升体验

最赞的文章

  • 1WordPress强大好用的分页插件WP-PageNavi使用
  • 2WordPress循环中判断为每篇文章设计不同的样式
  • 3远方的雪山Salong主题免费分享和使用教程
  • 4WordPress 最简便的边栏调用方法与提示
  • 5WordPress相册插件NextGEN Gallery的使用

评论:

25 条评论,访客:0 条,博主:0 条
  1. 加趣屋
    加趣屋发布于: 2017-10-19 下午 15:10
    回复

    没看到你的站上有分享按钮啊

    • 萨龙龙
      萨龙龙发布于: 2017-10-19 下午 20:55
      回复

      现在使用的是百度分享,而百度分享不支持 https 访问就关闭了。

  2. FlyHan
    FlyHan发布于: 2016-08-06 上午 11:06
    回复

    你好,评论的样式是怎么修改的?搜了好多都不太好用

    • 萨龙龙
      萨龙龙发布于: 2016-08-06 下午 19:57
      回复

      修改样式文件,一般是style.css文件,如果你不会CSS,那就没办法。

  3. 嘉诚
    嘉诚发布于: 2015-10-20 下午 14:03
    回复

    主题很好!

  4. 同盟源
    同盟源发布于: 2015-07-18 下午 21:27
    回复

    根据你的代码自己改了下,非常感谢

  5. 爱分享
    爱分享发布于: 2014-06-11 下午 20:58
    回复

    貌似获取不了标题和网址?制作的分享按钮放在在wordpress侧边栏的。

    • 萨龙龙
      萨龙龙发布于: 2014-06-12 上午 08:26
      回复

      刚每个都点了下,都没有问题

  6. 世界电影博客│最原生态电影-追求原版电影分享-追求导演原版思想
    世界电影博客│最原生态电影-追求原版电影分享-追求导演原版思想发布于: 2013-09-07 下午 22:12
    回复

    恩!!!的确不错!!!比百度的有个性多了!!!

    • 萨龙龙
      萨龙龙发布于: 2013-09-08 上午 08:09
      回复

      谢谢你的支持!我也很喜欢这个自定义的分享按钮!

  7. 艾因
    艾因发布于: 2013-08-02 下午 19:48
    回复

    这个我参考了。。。给力

    • 萨龙龙
      萨龙龙发布于: 2013-08-02 下午 22:18
      回复

      好啊,推荐使用。

  8. 番茄
    番茄发布于: 2013-08-02 下午 12:31
    回复

    的确不错,很给力,我用的是百度分享。

    • 萨龙龙
      萨龙龙发布于: 2013-08-02 下午 12:36
      回复

      之前了是用的百度分享,但能自定义的功能就不用插件。

  9. 沐歌
    沐歌发布于: 2013-08-02 上午 10:51
    回复

    首字的样式挺好看的

    • 萨龙龙
      萨龙龙发布于: 2013-08-02 上午 10:57
      回复

      参照WP logo的样式设置的短代码。

  10. 孙超博客
    孙超博客发布于: 2013-08-01 上午 09:42
    回复

    谢谢博主的分享哈,一般弄个百度分享就O了

    • 萨龙龙
      萨龙龙发布于: 2013-08-01 上午 09:50
      回复

      呵呵,百度分享中有太多社交按钮用不到,加载速度不是很快,设计成自己的风格不是很好吗?用WP我一直相信“能用代码实现的功能,就不用插件”。

  11. 百思不得姐
    百思不得姐发布于: 2013-07-30 下午 12:37
    回复

    怎么你们的头像都是圆的,还可以转??

    • 萨龙龙
      萨龙龙发布于: 2013-07-30 下午 13:40
      回复

      自定义了多说CSS样式。

  12. 间歇性歇斯底里的地盘
    间歇性歇斯底里的地盘发布于: 2013-07-29 下午 23:12
    回复

    正在研究wordpress,博主很多东西都说的很详细。不错不错!看了博主网站感觉很多爱好相同或许能成为朋友哦。喜欢骑行,玩单反!呵呵~~

    • 萨龙龙
      萨龙龙发布于: 2013-07-30 上午 07:02
      回复

      是啊,喜欢骑行,玩不起单反,只是爱好摄影,哈哈。等你的网站上线了,告诉我,关注关注。

发表回复 取消回复

原创主题

  • WordPress 在线教育主题 Slearn 的课程商城活动作品团队扩展插件

    WordPress 在线教育主题 Slearn 的课程商城活动作品团队扩展插件

    原创主题 6年前 4
  • [898]WordPress在线学习教育培训商城企业主题 Slearn

    [898]WordPress在线学习教育培训商城企业主题 Slearn

    原创主题 6年前 2
  • [¥699]WordPress简约高端网址导航类主题  Slhao (书签、工具和书箱)

    [¥699]WordPress简约高端网址导航类主题 Slhao (书签、工具和书箱)

    原创主题 6年前 8
  • [¥1699]WordPress简约高端企业通用产品展示主题  Slcorp

    [¥1699]WordPress简约高端企业通用产品展示主题 Slcorp

    原创主题 7年前 11

热门画廊

  • 大理苍山小花甸坝秋色大理苍山小花甸坝秋色 28
  • 修河河滩烧烤记修河河滩烧烤记 25
  • 雪域高原圣地拉萨雪域高原圣地拉萨 22
  • 大理苍山花甸坝秋色大理苍山花甸坝秋色 15

热门视频

  • BBC鸟瞰地球之欧洲篇

    BBC鸟瞰地球之欧洲篇

    纪录片 9年前 38
  • 皮克斯经典奥斯卡提名动画短片绑架课

    皮克斯经典奥斯卡提名动画短片绑架课

    动画短片 9年前 36
  • BBC鸟瞰地球之非洲篇

    BBC鸟瞰地球之非洲篇

    纪录片 9年前 25
  • 皮克斯经典奥斯卡获奖动画短片鸟鸟鸟

    皮克斯经典奥斯卡获奖动画短片鸟鸟鸟

    动画短片 9年前 22

萨龙网络原创WordPress主题

WordPres个人设计博客主题Guitui

WordPres个人设计博客主题Guitui

原创主题 8年前 24
Guigui 主题为桂桂所设计,萨龙龙开发的一个 WordPress 主题,设计风格简约、大气,看得出设…
WordPress 在线教育主题 Slearn 的课程商城活动作品团队扩展插件

WordPress 在线教育主题 Slearn 的课程商城活动作品团队扩展插件

原创主题 6年前 4
Slearn 主题的课程、商城、活动、作品和团队五个模块都做成了插件的形式,课程是在 LearnPres…
[898]WordPress在线学习教育培训商城企业主题 Slearn

[898]WordPress在线学习教育培训商城企业主题 Slearn

原创主题 6年前 2
Slearn 主题,一套在线学习教育培训商城 WordPress 企业主题,整合了 LearnPress…
[¥699]WordPress简约高端网址导航类主题  Slhao (书签、工具和书箱)

[¥699]WordPress简约高端网址导航类主题 Slhao (书签、工具和书箱)

原创主题 6年前 8
Slhao 主题是一款 WordPress 简约高端集书签、工具和书箱的网址导航类主题,主要就是为了方便…
[¥1699]WordPress简约高端企业通用产品展示主题  Slcorp

[¥1699]WordPress简约高端企业通用产品展示主题 Slcorp

原创主题 7年前 11
Slcorp 主题是一款简约高端企业通用产品展示 WordPress 主题,设计上简约、干净、精致、响应…
[¥998]WordPress 简约新闻自媒体主题  MNews(用户中心、用户关注、商城、付费阅读、点赞收藏、评论评分、站内信、打赏、视频点播)

[¥998]WordPress 简约新闻自媒体主题 MNews(用户中心、用户关注、商城、付费阅读、点赞收藏、评论评分、站内信、打赏、视频点播)

原创主题 8年前 76
MNews 主题是一款简约新闻自媒体类的 WordPress 主题,设计上简约、干净、精致、响应式,功能…
[¥1288]WordPress简约优雅企业 WooCommerce 商城主题 Taji

[¥1288]WordPress简约优雅企业 WooCommerce 商城主题 Taji

原创主题 8年前 63
Taji 主题是一款纯商城类的 WordPress 主题,集成 WooCommerce 强大的商城功能,…
[¥988]WordPress企业产品展示 WooCommerce 商城主题Fruit

[¥988]WordPress企业产品展示 WooCommerce 商城主题Fruit

原创主题 8年前 56
Fruit主题为企业而开发的产品展示商城主题,简约、精致的设计风格,集成自定义登录注册,微信登录,积分商…
WordPres个人设计博客主题Guitui

WordPres个人设计博客主题Guitui

原创主题 8年前 24
Guigui 主题为桂桂所设计,萨龙龙开发的一个 WordPress 主题,设计风格简约、大气,看得出设…
WordPress 在线教育主题 Slearn 的课程商城活动作品团队扩展插件

WordPress 在线教育主题 Slearn 的课程商城活动作品团队扩展插件

原创主题 6年前 4
Slearn 主题的课程、商城、活动、作品和团队五个模块都做成了插件的形式,课程是在 LearnPres…

Copyright © 2012-2016 萨龙网络.保留所有权利 滇ICP备16003941号-7

  网站地图
本站使用萨龙网络原创主题:LensNews  
繁

扫描二维码即刻联系我们

萨龙网络的每款主题都是诚意之作,价格合理。所以朋友,请怀着一颗诚挚的心联系我们,不要来讨价还价,我们也将送上最诚挚的服务!

QQ二维码QQ二维码 微信二维码微信二维码

关注 远方的雪山 微信公众号

远方的雪山微信公众号

按文章类型进行搜索

分享到微信朋友圈

打开微信,点击底部的“发现”
使用“扫一扫”即可将网页分享至朋友圈。

觉得文章有用请给作者打赏!

支付宝收款二维码支付宝扫一扫打赏 微信收款二维码微信扫一扫打赏

觉得文章有用请给作者打赏!

支付宝收款二维码支付宝扫一扫打赏 微信收款二维码微信扫一扫打赏