替換分享工具自帶圖標

知更鳥
知更鳥
知更鳥
1521
文章
6910
評論
更多
 2017年5月11日21:03:33 23 4.8K

替換分享工具自帶圖標

目前常用的社會化分享工具有 百度分享? 和 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中即可。

展示代碼展開

  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. }

鼠標懸停在分享按鈕上，背景會變成不同的顏色。

注：

因代碼中使用了Font Awesome字體圖標，如果你的主題沒有加載字體圖標，可以到WP后臺--插件--安裝插件頁面搜索：Font Awesome 4 Menus 安裝并啟用，才能顯示替換后的圖標。

如果你動手能力比較強，也可以同樣替換百度分享圖標。

繼續閱讀
歷史上的今天
五月
11
weinxin
關于本站
分享交流WordPress經驗與技巧，關注前端設計與網站制作。僅用于功能演示。
獲取本主題
售前咨詢加Q：598845006
多功能主題 Begin
限制 WordPress 部分用戶角色進入后臺 WordPress

限制 WordPress 部分用戶角色進入后臺

有時我們想限制WordPress 部分用戶角色訪問后臺，可以通過下面的代碼實現。 限制 WordPress 部分用戶角色進入后臺 一、只允許管理員、編輯和作者角色訪問后臺 將下面代碼添加到當前主題函數...
03月17日 518 5
修正 WordPress 密碼設置鏈接錯誤 WordPress

修正 WordPress 密碼設置鏈接錯誤

當用戶注冊或者忘記密碼獲取新密碼時WordPress會自動向用戶郵箱中發送一個驗證鏈接地址，用戶通過打開這個鏈接設置密碼，不過經常發現這個鏈接直接打開后，并不是設置密碼的正確鏈接。 修正 WordPr...
02月23日 802 8
WordPress 主題添加花瓣飄落特效 WordPress

WordPress 主題添加花瓣飄落特效

上篇文章過年啦，掛燈籠！教大家在博客上掛個動畫燈籠，可能大家認為很好玩，那就再分享一個花瓣飄落的特效，可以加到自己博客上再裝點一下節日氛圍。 點擊下圖查看動畫效果 先貼一下代碼，下面有打包的文件下載。...
01月21日 3.3K 12
獲取本主題
售前咨詢加Q：598845006
多功能主題 Begin
匿名

發表評論

匿名網友 填寫信息

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

評論：23   其中：訪客  22   博主  1
    • BanYuner BanYuner 5
      2017年5月11日 22點24分 1F
      回復

      站點一直是二維碼分享，所以沒有使用這類分享

      • 生活啊 生活啊 0
        2017年5月11日 22點46分 2F
        回復

        暫時都沒有用。

        • Win7en樂園 Win7en樂園 7
          2017年5月12日 14點08分 3F
          回復

          相信鳥哥是最棒的。

          • 龍笑天 龍笑天 5
            2017年5月12日 21點38分 4F
            回復

            百度的剛開始看著很丑，但看多了，其實也還好…

            • SmallTown SmallTown 2
              2017年5月14日 14點09分 5F
              回復

              有沒有https的

              • boke112導航 boke112導航 4
                2017年5月15日 09點49分 6F
                回復

                這個方法不錯，一通百通，這樣一來就可以折騰適合自己站點的分享圖標了

                • 墨丶水瓶 墨丶水瓶 4
                  2017年5月15日 14點29分 7F
                  回復

                  鳥哥的分享已經換了… :shock:

                  • ＩＮＫ丶ＳＴＡＮＤ ＩＮＫ丶ＳＴＡＮＤ 1
                    2017年5月15日 16點03分 8F
                    回復

                    呀，鼠標滑過時的背景都不一樣 …

                    • 勵志語錄 勵志語錄 6
                      2017年5月15日 18點47分 9F
                      回復

                      不錯啊

                      • PC大學 PC大學 1
                        2017年5月16日 11點30分 10F
                        回復

                        不錯不錯，支持鳥哥

                        • OEASY OEASY 2
                          2017年5月16日 15點23分 11F
                          回復

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

                            • 知更鳥 知更鳥
                              2017年5月17日 11點15分 B1
                              回復

                              @ OEASY 新浪微博就可以選擇圖片，其它的貌似沒有，應該和社交網站有關吧
                              比如我這篇文章，可以試試

                            • 墨丶水瓶 墨丶水瓶 4
                              2017年5月17日 14點36分 12F
                              回復

                              人人網和騰訊微博現在基本都掛了，分享功能首行圖標中應該把它倆撤了。

                              • 頂尖PPT模板 頂尖PPT模板 0
                                2017年5月19日 16點16分 13F
                                回復

                                這種效果我找很久了，需要用到灰色的，我已經替換大家可以來看看

                                • 平淡的幸福 平淡的幸福 0
                                  2017年5月22日 22點29分 14F
                                  回復

                                  不錯

                                  • 花卉說 花卉說 1
                                    2017年6月8日 16點21分 15F
                                    回復

                                    技術帖子，我的最愛

                                    • mrzhenggang mrzhenggang 0
                                      2017年8月9日 21點23分 16F
                                      回復

                                      這是我找到的教程中最最好用的分享插件設置教程，滿足了我的需求，非常感謝！下一步就是看看贊和打賞功能，謝謝!

                                      • 955 955 0
                                        2017年11月18日 21點13分 17F
                                        回復

                                        為什么我的顯示是豎著的 你這個顯示是橫著的呢??

                                        • 鱷魚皮錢包 鱷魚皮錢包 1
                                          2017年12月29日 14點49分 18F
                                          回復

                                          share我們都喜歡，可惜好難

                                          • 福利堆 福利堆 5
                                            2018年10月4日 08點34分 19F
                                            回復

                                            現在很少有人分享了

                                            • 燕州閑人 燕州閑人 1
                                              2018年10月24日 19點08分 20F
                                              回復

                                              這個功能還是不錯的 :grin: :grin: