WordPress

替换分享工具自带图标

官方运营-Sean丶♥

2020年 7月 30日 • 23409 浏览

/** 外部盒子 **/ .entry-share { font-size: 14px; text-align: center; margin: 0 auto 20px; } /********* 分享文字 ********/ .entry-share .share-pu { font-weight: 700; line-height: 40px; } .entry-share .share-pu { float: left; color: #4d4d4d; } /******** 分享样式 ********/ .entry-share div.share-box { display: inline-block; overflow: hidden; } .entry-share .jiathis_style_32x32 { float: left !important; margin-left: 10px; } .entry-share .jiathis_style_32x32 a { float: left; width: 40px; height: 40px; color: #a8a8a8; font-size: 16px !important; display: block; border-radius: 5px; margin-right: 10px; border: 1px solid #999; } .entry-share .jiathis_style_32x32 a:hover { text-decoration: none; color: #fff; } /** 图标大小 **/ .entry-share .jiathis_style_32x32 a span { background: transparent !important; width: 38px !important; height: 38px !important; padding: 0 !important; margin: 0 !important; float: none !important; font-size: 20px !important; display: block !important; text-align: center !important; line-height: 38px !important; } /******** 更多分享 ********/ .entry-share .jiathis_style_32x32 a.jtico_jiathis { background: transparent !important; width: 38px !important; height: 38px !important; padding: 0 !important; margin: 0 !important; font-size: 24px !important; display: block !important; text-align: center !important; line-height: 38px !important; } .entry-share .jiathis_style_32x32 a:hover.jtico_jiathis { background: #666 !important; border-color: #666; } /******** 分享次数 ********/ .entry-share .jiathis_style_32x32 a.jiathis_counter_style { width: auto; margin-left: 10px; padding: 0 15px; border-radius: 5px; display: inline-block; position: relative; background: #e8e8e8; border-color: #e8e8e8; color: #fff !important; } /** 箭头 **/ .entry-share .jiathis_style_32x32 a.jiathis_counter_style:before { ; width: 0; height: 0; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #e8e8e8 transparent transparent; position: absolute; right: 100%; top: 50%; margin-top: -10px; } .entry-share .jiathis_style_32x32 a.jiathis_counter_style span.jiathis_bubble_style { color: #666 !important; font-size: 14px !important; width: auto !important; } /******** 不同图标悬停背景颜色 ********/ .entry-share .jiathis_style_32x32 a:hover.jiathis_button_tsina { background: #e74c3c; border-color: #e74c3c; } .entry-share .jiathis_style_32x32 a:hover.jiathis_button_weixin { background: #2ecc71; border-color: #2ecc71; } .entry-share .jiathis_style_32x32 a:hover.jiathis_button_fb { background: #4760A5; border-color: #4760A5; } .entry-share .jiathis_style_32x32 a:hover.jiathis_button_twitter { background: #50ABF1; border-color: #50ABF1; } .entry-share .jiathis_style_32x32 a:hover.jiathis_button_renren { background: #3777BE; border-color: #3777BE; } .entry-share .jiathis_style_32x32 a:hover.jiathis_button_qzone { background: #2174C3; border-color: #2174C3; }

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

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

默认的分享按钮

美化后的分享按钮

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

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

1. function entry_share($content) {
2. if (is_single()) {
3. class="entry-share">
4. class="share-box">
5. class="share-pu">分享到
7. class="jiathis_style_32x32">
8. class="jiathis_button_tsina">class="fa fa-weibo">
9. class="jiathis_button_weixin">class="fa fa-wechat">
10. class="jiathis_button_renren">class="fa fa-renren">
11. class="jiathis_button_qzone">class="fa fa-qq">
12. class="jiathis_button_fb">class="fa fa-facebook">
13. class="jiathis_button_twitter">class="fa fa-twitter">
14. "http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank">class="fa fa-share-alt">
15. class="jiathis_counter_style">

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

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

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

展示代码展开

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. width: 0;
95. height: 0;
96. border-style: solid;
97. border-width: 10px 10px 10px 0;
98. border-color: transparent #e8e8e8 transparent transparent;
99. position: absolute;
100. right: 100%;
101. top: 50%;
102. margin-top: -10px;
103. }
105. .entry-share .jiathis_style_32x32 a.jiathis_counter_style span.jiathis_bubble_style {
106. color: #666 !important;
107. font-size: 14px !important;
108. width: auto !important;
109. }
111. /******** 不同图标悬停背景颜色 ********/
112. .entry-share .jiathis_style_32x32 a:hover.jiathis_button_tsina {
113. background: #e74c3c;
114. border-color: #e74c3c;
115. }
117. .entry-share .jiathis_style_32x32 a:hover.jiathis_button_weixin {
118. background: #2ecc71;
119. border-color: #2ecc71;
120. }
122. .entry-share .jiathis_style_32x32 a:hover.jiathis_button_fb {
123. background: #4760A5;
124. border-color: #4760A5;
125. }
127. .entry-share .jiathis_style_32x32 a:hover.jiathis_button_twitter {
128. background: #50ABF1;
129. border-color: #50ABF1;
130. }
132. .entry-share .jiathis_style_32x32 a:hover.jiathis_button_renren {
133. background: #3777BE;
134. border-color: #3777BE;
135. }
137. .entry-share .jiathis_style_32x32 a:hover.jiathis_button_qzone {
138. background: #2174C3;
139. border-color: #2174C3;
140. }

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

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

相关推荐

系统推荐

热门关键词