替换分享工具自带图标

2017年05月11日21:03:33 21 3,588

替换分享工具自带图标

目前常用的社会化分享工具有 百度分享JiaThis,特别是这个JiaThis年代够久远,在百度也加入这个领域后,居然还坚持为大家提供免费工具,这里点32个赞!

随着时代的变化,这些分享工具自带的小图标却一成不变,已不符合目前流行的扁平化风格,与网站风格极不协调,但有些网站虽用的也上面两款分享工具,但图标却不一样,扁平、大方、简洁,显得高大上。今天就分享一下修改后的代码,起个抛砖引玉的作用,以JiaThis分享工具为例,下面是修改后的效果:

替换分享工具自带图标

默认的分享按钮

替换分享工具自带图标

美化后的分享按钮

基本原理就是找到默认分享代码的DIV选择器,然后隐藏背景图片,添加字体图标并重写样式。

一、首先将下面代码添加到当前主题functions.php的最后:

  1. functionentry_share($content){
  2. if(is_single()){
  3. $content.='
  4. <divclass="entry-share">
  5. <divclass="share-box">
  6. <spanclass="share-pu">分享到</span>
  7. <!--JiaThisButtonBEGIN-->
  8. <divclass="jiathis_style_32x32">
  9. <aclass="jiathis_button_tsina"><iclass="fafa-weibo"></i></a>
  10. <aclass="jiathis_button_weixin"><iclass="fafa-wechat"></i></a>
  11. <aclass="jiathis_button_renren"><iclass="fafa-renren"></i></a>
  12. <aclass="jiathis_button_qzone"><iclass="fafa-qq"></i></a>
  13. <aclass="jiathis_button_fb"><iclass="fafa-facebook"></i></a>
  14. <aclass="jiathis_button_twitter"><iclass="fafa-twitter"></i></a>
  15. <ahref="http://www.jiathis.com/share"class="jiathisjiathis_txtjticojtico_jiathis"target="_blank"><span><iclass="fafa-share-alt"></i></span></a>
  16. <aclass="jiathis_counter_style"></a>
  17. </div>
  18. </div>
  19. <scripttype="text/javascript"src="http://v3.jiathis.com/code/jia.js"charset="utf-8"></script>
  20. <!--JiaThisButtonEND-->
  21. </div>';
  22. }
  23. return$content;
  24. }
  25. add_filter('the_content','entry_share');

之后分享代码会自动添加到文章正文的下面。

上面代码只是在原JiaThis分享代码基础上添加了字体图标。

二、再把下面配套的样式添加到当前主题样式文件style.css中即可。

展示代码展开

  1. /**外部盒子**/
  2. .entry-share{
  3. font-size:14px;
  4. text-align:center;
  5. margin:0auto20px;
  6. }
  7. /*********分享文字********/
  8. .entry-share.share-pu {
  9. font-weight:700;
  10. line-height:40px;
  11. }
  12. .entry-share.share-pu{
  13. float:left;
  14. color:#4d4d4d;
  15. }
  16. /********分享样式********/
  17. .entry-sharediv.share-box{
  18. display:inline-block;
  19. overflow:hidden;
  20. }
  21. .entry-share.jiathis_style_32x32{
  22. float:left!important;
  23. margin-left:10px;
  24. }
  25. .entry-share.jiathis_style_32x32a{
  26. float:left;
  27. width:40px;
  28. height:40px;
  29. color:#a8a8a8;
  30. font-size:16px!important;
  31. display:block;
  32. border-radius:5px;
  33. margin-right:10px;
  34. border:1pxsolid#999;
  35. }
  36. .entry-share.jiathis_style_32x32a:hover{
  37. text-decoration:none;
  38. color:#fff;
  39. }
  40. /**图标大小**/
  41. .entry-share.jiathis_style_32x32aspan{
  42. background:transparent!important;
  43. width:38px!important;
  44. height:38px!important;
  45. padding:0!important;
  46. margin:0!important;
  47. float:none!important;
  48. font-size:20px!important;
  49. display:block!important;
  50. text-align:center!important;
  51. line-height:38px!important;
  52. }
  53. /********更多分享********/
  54. .entry-share.jiathis_style_32x32a.jtico_jiathis{
  55. background:transparent!important;
  56. width:38px!important;
  57. height:38px!important;
  58. padding:0!important;
  59. margin:0!important;
  60. font-size:24px!important;
  61. display:block!important;
  62. text-align:center!important;
  63. line-height:38px!important;
  64. }
  65. .entry-share.jiathis_style_32x32a:hover.jtico_jiathis{
  66. background:#666!important;
  67. border-color:#666;
  68. }
  69. /********分享次数********/
  70. .entry-share.jiathis_style_32x32a.jiathis_counter_style{
  71. width:auto;
  72. margin-left:10px;
  73. padding:015px;
  74. border-radius:5px;
  75. display:inline-block;
  76. position:relative;
  77. background:#e8e8e8;
  78. border-color:#e8e8e8;
  79. color:#fff!important;
  80. }
  81. /**箭头**/
  82. .entry-share.jiathis_style_32x32a.jiathis_counter_style:before{
  83. content:'';
  84. width:0;
  85. height:0;
  86. border-style:solid;
  87. border-width:10px10px10px0;
  88. border-color:transparent#e8e8e8transparenttransparent;
  89. position:absolute;
  90. right:100%;
  91. top:50%;
  92. margin-top:-10px;
  93. }
  94. .entry-share.jiathis_style_32x32a.jiathis_counter_stylespan.jiathis_bubble_style{
  95. color:#666!important;
  96. font-size:14px!important;
  97. width:auto!important;
  98. }
  99. /********不同图标悬停背景颜色********/
  100. .entry-share.jiathis_style_32x32a:hover.jiathis_button_tsina{
  101. background:#e74c3c;
  102. border-color:#e74c3c;
  103. }
  104. .entry-share.jiathis_style_32x32a:hover.jiathis_button_weixin{
  105. background:#2ecc71;
  106. border-color:#2ecc71;
  107. }
  108. .entry-share.jiathis_style_32x32a:hover.jiathis_button_fb{
  109. background:#4760A5;
  110. border-color:#4760A5;
  111. }
  112. .entry-share.jiathis_style_32x32a:hover.jiathis_button_twitter{
  113. background:#50ABF1;
  114. border-color:#50ABF1;
  115. }
  116. .entry-share.jiathis_style_32x32a:hover.jiathis_button_renren{
  117. background:#3777BE;
  118. border-color:#3777BE;
  119. }
  120. .entry-share.jiathis_style_32x32a:hover.jiathis_button_qzone{
  121. background:#2174C3;
  122. border-color:#2174C3;
  123. }

鼠标悬停在分享按钮上,背景会变成不同的颜色。

注:

因代码中使用了Font Awesome字体图标,如果你的主题没有加载字体图标,可以到WP后台--插件--安装插件页面搜索:Font Awesome 4 Menus 安装并启用,才能显示替换后的图标。

如果你动手能力比较强,也可以同样替换百度分享图标。

weinxin
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:21   其中:访客  20   博主  1

    • BanYuner 5

      站点一直是二维码分享,所以没有使用这类分享

      • 生活啊 0

        暂时都没有用。

        • Win7en乐园 7

          相信鸟哥是最棒的。

          • 龙笑天 4

            百度的刚开始看着很丑,但看多了,其实也还好…

            • SmallTown 2

              有没有https的

              • boke112导航 4

                这个方法不错,一通百通,这样一来就可以折腾适合自己站点的分享图标了

                • 墨丶水瓶 4

                  鸟哥的分享已经换了… :shock:

                  • INK丶STAND 1

                    呀,鼠标滑过时的背景都不一样 …

                    • 励志语录 6

                      不错啊

                      • PC大学 1

                        不错不错,支持鸟哥

                        • OEASY 2

                          分享文章到社交网站怎么把文章的图片也分享出去呀

                            • 知更鸟 Admin

                              @OEASY 新浪微博就可以选择图片,其它的貌似没有,应该和社交网站有关吧
                              比如我这篇文章,可以试试

                            • 墨丶水瓶 4

                              人人网和腾讯微博现在基本都挂了,分享功能首行图标中应该把它俩撤了。

                              • 顶尖PPT模板 0

                                这种效果我找很久了,需要用到灰色的,我已经替换大家可以来看看

                                • 平淡的幸福 0

                                  不错

                                  • 花卉说 1

                                    技术帖子,我的最爱

                                    • mrzhenggang 0

                                      这是我找到的教程中最最好用的分享插件设置教程,满足了我的需求,非常感谢!下一步就是看看赞和打赏功能,谢谢!

                                      • 955 0

                                        为什么我的显示是竖着的 你这个显示是横着的呢??

                                        • 鳄鱼皮钱包 1

                                          share我们都喜欢,可惜好难