替换分享工具自带图标

作者知更鸟

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

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

默认的分享按钮
美化后的分享按钮

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

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

  1. function entry_share($content) {
  2. if (is_single()) {
  3. $content .= ‘
  4. <div class=“entry-share”>
  5. <div class=“share-box”>
  6. <span class=“share-pu”>分享到</span>
  7. <!– JiaThis Button BEGIN –>
  8. <div class=“jiathis_style_32x32”>
  9. <a class=“jiathis_button_tsina”><i class=“fa fa-weibo”></i></a>
  10. <a class=“jiathis_button_weixin”><i class=“fa fa-wechat”></i></a>
  11. <a class=“jiathis_button_renren”><i class=“fa fa-renren”></i></a>
  12. <a class=“jiathis_button_qzone”><i class=“fa fa-qq”></i></a>
  13. <a class=“jiathis_button_fb”><i class=“fa fa-facebook”></i></a>
  14. <a class=“jiathis_button_twitter”><i class=“fa fa-twitter”></i></a>
  15. <a href=“http://www.jiathis.com/share” class=“jiathis jiathis_txt jtico jtico_jiathis” target=“_blank”><span><i class=“fa fa-share-alt”></i></span></a>
  16. <a class=“jiathis_counter_style”></a>
  17. </div>
  18. </div>
  19. <script type=“text/javascript” src=“http://v3.jiathis.com/code/jia.js” charset=“utf-8”></script>
  20. <!– JiaThis Button END –>
  21. </div>’;
  22. }
  23. return $content;
  24. }
  25. add_filter(‘the_content’,’entry_share’);

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

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

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

展示代码[s][p]

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

[/p]

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

注：

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

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

类似文章

一条评论

发表回复