WordPress美化百度分享默认图标

Posted 2021-01-29 xiaobingch

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

下面开始改造：

一、在文章末尾添加分享图标代码

将代码添加到当前主题functions.php的最后：

1. function entry_share($content) {
2. if (is_single()) {
3. $content .= ‘
4. <div class="entry-share">
5. <div class="share-box">
6. <ul class="bdsharebuttonbox">
7. <li class="share-pu">分享到：</li>
8. <li><a title="分享到新浪微博" class="fa fa-weibo" data-cmd="tsina" onclick="return false;" href="#"></a></li>
9. <li><a title="分享到微信" class="fa fa-wechat" data-cmd="weixin" onclick="return false;" href="#"></a></li>
10. <li><a title="分享到人人网" class="fa fa-renren" data-cmd="renren" onclick="return false;" href="#"></a></li>
11. <li><a title="分享到QQ空间" class="fa fa-qq" data-cmd="qzone" onclick="return false;" href="#"></a></li>
12. <li><a title="分享到Facebook" class="fa fa-facebook" data-cmd="fbook" onclick="return false;" href="#"></a></li>
13. <li><a title="分享到Twitter" class="fa fa-twitter" data-cmd="twi" onclick="return false;" href="#"></a></li>
14. <li><a title="更多" class="bds_more fa fa-plus-circle" data-cmd="more" onclick="return false;" href="#"></a></li>
15. </ul>
16. </div>
17. </div>‘;
18. }
19. return $content;
20. }
21. add_filter(‘the_content‘,‘entry_share‘);

二、添加配套的样式

添加到当前主题样式文件style.css中即可。

1. /** 分享样式 **/
2. .entry-share {
3. font-size: 14px;
4. text-align: center;
5. margin: 10px auto;
6. }
7.  
8. .entry-share .share-pu {
9. float: left;
10. color: #4d4d4d;
11. font-weight: 700;
12. line-height: 50px;
13. }
14.  
15. .entry-share ul li {
16. list-style: none;
17. margin: 0;
18. }
19.  
20. .entry-share li {
21. float: left;
22. }
23.  
24. .entry-share .share-box {
25. display: inline-block;
26. overflow: hidden;
27. }
28.  
29. .entry-share a {
30. float: left;
31. color: #666;
32. font-size: 16px !important;
33. border-radius: 40px;
34. margin-right: 10px;
35. border: 1px solid #666;
36. }
37.  
38. .entry-share .bdsharebuttonbox a:hover {
39. text-decoration: none;
40. color: #fff;
41. }
42.  
43. .entry-share .bds_more {
44. color: #666 !important;
45. }
46.  
47. .entry-share .bds_more:hover {
48. color: #fff !important;
49. }
51. /** 图标大小 **/
52. .entry-share a {
53. background: transparent !important;
54. width: 40px !important;
55. height: 40px !important;
56. padding: 0 !important;
57. margin: 5px !important;
58. float: none !important;
59. font-size: 20px !important;
60. display: block !important;
61. text-align: center !important;
62. line-height: 40px !important;
63. }
66. /** 不同图标悬停背景颜色 **/
67. .entry-share a:hover.fa-weibo {
68. background: #e74c3c !important;
69. border-color: #e74c3c;
70. }
71.  
72. .entry-share a:hover.fa-wechat {
73. background: #2ecc71 !important;
74. border-color: #2ecc71;
75. }
76.  
77. .entry-share a:hover.fa-renren {
78. background: #4760a5 !important;
79. border-color: #4760a5;
80. }
81.  
82. .entry-share a:hover.fa-qq {
83. background: #50abf1 !important;
84. border-color: #50abf1;
85. }
86.  
87. .entry-share a:hover.fa-facebook {
88. background: #3777be !important;
89. border-color: #3777be;
90. }
91.  
92. .entry-share a:hover.fa-twitter {
93. background: #2174c3 !important;
94. border-color: #2174c3;
95. }
96.  
97. .bdsharebuttonbox a:hover.fa-plus-circle {
98. background: #2174c3 !important;
99. border-color: #2174c3;
100. }

 

三、在页脚模板中加载百度分享javascript

将下面代码添加到当前主题footer.php，最后的<?php wp_footer(); ?>上面：

1. <script>window._bd_share_config = {"common": {"bdSnsKey": {},"bdText": "","bdMini": "2","bdMiniList": false,"bdPic": "","bdStyle": "1","bdSize": "16"},"share": {"bdSize": 16}};with(document) 0[(getElementsByTagName(‘head‘)[0] || body).appendChild(createElement(‘script‘)).src = ‘http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=‘ + ~ ( - new Date() / 36e5)];</script>‘;