快乐十分开奖结果天津:替换分享工具自带图标

2017年5月11日21:03:33 23 4,187

11选五开奖结果走势图 www.pnej.net 替换分享工具自带图标

目前常用的社会化分享工具有 百度分享? 和 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="//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="//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经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

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

目前评论:23   其中:访客  22   博主  1

    • BanYuner 5

      站点一直是二维码分享,所以没有使用这类分享

      • 生活啊 0

        暂时都没有用。

        • Win7en乐园 7

          相信鸟哥是最棒的。

          • 龙笑天 4

            百度的刚开始看着很丑,但看多了,其实也还好…

            • SmallTown 2

              有没有https的

              • boke112导航 4

                这个方法不错,一通百通,这样一来就可以折腾适合自己站点的分享图标了

                • 墨丶水瓶 4

                  鸟哥的分享已经换了… :shock:

                  • INK丶STAND 1

                    呀,鼠标滑过时的背景都不一样 …

                    • 励志语录 6

                      不错啊

                      • PC大学 1

                        不错不错,支持鸟哥

                        • OEASY 2

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

                            • 知更鸟 Admin

                              @OEASY 新浪微博就可以选择图片,其它的貌似没有,应该和社交网站有关吧
                              比如我这篇文章,可以试试

                            • 墨丶水瓶 4

                              人人网和腾讯微博现在基本都挂了,分享功能首行图标中应该把它俩撤了。

                              • 顶尖PPT模板 0

                                这种效果我找很久了,需要用到灰色的,我已经替换大家可以来看看

                                • 平淡的幸福 0

                                  不错

                                  • 花卉说 1

                                    技术帖子,我的最爱

                                    • mrzhenggang 0

                                      这是我找到的教程中最最好用的分享插件设置教程,满足了我的需求,非常感谢!下一步就是看看赞和打赏功能,谢谢!

                                      • 955 0

                                        为什么我的显示是竖着的 你这个显示是横着的呢??

                                        • 鳄鱼皮钱包 1

                                          share我们都喜欢,可惜好难

                                          • 福利堆 6

                                            现在很少有人分享了

                                            • 燕州闲人 1

                                              这个功能还是不错的 :grin: :grin: