替換分享工具自帶圖標

知更鳥
知更鳥
知更鳥
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. }
  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-share?div.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_32x32?a?{
  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:?1px?solid?#999;
  35. }
  36. .entry-share?.jiathis_style_32x32?a:hover?{
  37. ????text-decoration:?none;
  38. ????color:?#fff;
  39. }
  40. /**?圖標大小?**/
  41. .entry-share?.jiathis_style_32x32?a?span?{
  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_32x32?a.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_32x32?a:hover.jtico_jiathis?{
  66. ????background:?#666?!important;
  67. ????border-color:?#666;
  68. }
  69. /********?分享次數?********/
  70. .entry-share?.jiathis_style_32x32?a.jiathis_counter_style?{
  71. ????width:?auto;
  72. ????margin-left:?10px;
  73. ????padding:?0?15px;
  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_32x32?a.jiathis_counter_style:before?{
  83. ????content:?'';
  84. ????width:?0;
  85. ????height:?0;
  86. ????border-style:?solid;
  87. ????border-width:?10px?10px?10px?0;
  88. ????border-color:?transparent?#e8e8e8?transparent?transparent;
  89. ????position:?absolute;
  90. ????right:?100%;
  91. ????top:?50%;
  92. ????margin-top:?-10px;
  93. }
  94. .entry-share?.jiathis_style_32x32?a.jiathis_counter_style?span.jiathis_bubble_style?{
  95. ????color:?#666?!important;
  96. ????font-size:?14px?!important;
  97. ????width:?auto?!important;
  98. }
  99. /********?不同圖標懸停背景顏色?********/
  100. .entry-share?.jiathis_style_32x32?a:hover.jiathis_button_tsina?{
  101. ????background:?#e74c3c;
  102. ????border-color:?#e74c3c;
  103. }
  104. .entry-share?.jiathis_style_32x32?a:hover.jiathis_button_weixin?{
  105. ????background:?#2ecc71;
  106. ????border-color:?#2ecc71;
  107. }
  108. .entry-share?.jiathis_style_32x32?a:hover.jiathis_button_fb?{
  109. ????background:?#4760A5;
  110. ????border-color:?#4760A5;
  111. }
  112. .entry-share?.jiathis_style_32x32?a:hover.jiathis_button_twitter?{
  113. ????background:?#50ABF1;
  114. ????border-color:?#50ABF1;
  115. }
  116. .entry-share?.jiathis_style_32x32?a:hover.jiathis_button_renren?{
  117. ????background:?#3777BE;
  118. ????border-color:?#3777BE;
  119. }
  120. .entry-share?.jiathis_style_32x32?a:hover.jiathis_button_qzone?{
  121. ????background:?#2174C3;
  122. ????border-color:?#2174C3;
  123. }

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

注:

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

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

繼續閱讀
weinxin
關于本站
分享交流WordPress經驗與技巧,關注前端設計與網站制作。僅用于功能演示。
限制 WordPress 部分用戶角色進入后臺 WordPress

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

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

修正 WordPress 密碼設置鏈接錯誤

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

WordPress 主題添加花瓣飄落特效

上篇文章過年啦,掛燈籠!教大家在博客上掛個動畫燈籠,可能大家認為很好玩,那就再分享一個花瓣飄落的特效,可以加到自己博客上再裝點一下節日氛圍。 點擊下圖查看動畫效果 先貼一下代碼,下面有打包的文件下載。...
匿名

發表評論

匿名網友 填寫信息

:?: :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

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

      • 生活啊 生活啊 0

        暫時都沒有用。

        • Win7en樂園 Win7en樂園 7

          相信鳥哥是最棒的。

          • 龍笑天 龍笑天 5

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

            • SmallTown SmallTown 2

              有沒有https的

              • boke112導航 boke112導航 4

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

                • 墨丶水瓶 墨丶水瓶 4

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

                  • INK丶STAND INK丶STAND 1

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

                    • 勵志語錄 勵志語錄 6

                      不錯啊

                      • PC大學 PC大學 1

                        不錯不錯,支持鳥哥

                        • OEASY OEASY 2

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

                            • 知更鳥 知更鳥

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

                            • 墨丶水瓶 墨丶水瓶 4

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

                              • 頂尖PPT模板 頂尖PPT模板 0

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

                                • 平淡的幸福 平淡的幸福 0

                                  不錯

                                  • 花卉說 花卉說 1

                                    技術帖子,我的最愛

                                    • mrzhenggang mrzhenggang 0

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

                                      • 955 955 0

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

                                        • 鱷魚皮錢包 鱷魚皮錢包 1

                                          share我們都喜歡,可惜好難

                                          • 福利堆 福利堆 5

                                            現在很少有人分享了

                                            • 燕州閑人 燕州閑人 1

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