替换分享工具自带图标

替换分享工具自带图标

目前常用的社会化分享工具有 百度分享  和 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-size14px;
  4.     text-aligncenter;
  5.     margin: 0 auto 20px;
  6. }
  7. /********* 分享文字 ********/
  8. .entry-share .share-pu {
  9.     font-weight: 700;
  10.     line-height40px;
  11. }
  12. .entry-share .share-pu {
  13.     floatleft;
  14.     color#4d4d4d;
  15. }
  16. /******** 分享样式 ********/
  17. .entry-share div.share-box {
  18.     displayinline-block;
  19.     overflowhidden;
  20. }
  21. .entry-share .jiathis_style_32x32 {
  22.     floatleft !important;
  23.     margin-left10px;
  24. }
  25. .entry-share .jiathis_style_32x32 a {
  26.     floatleft;
  27.     width40px;
  28.     height40px;
  29.     color#a8a8a8;
  30.     font-size16px !important;
  31.     displayblock;
  32.     border-radius: 5px;
  33.     margin-right10px;
  34.     border1px solid #999;
  35. }
  36. .entry-share .jiathis_style_32x32 a:hover {
  37.     text-decorationnone;
  38.     color#fff;
  39. }
  40. /** 图标大小 **/
  41. .entry-share .jiathis_style_32x32 a span {
  42.     backgroundtransparent !important;
  43.     width38px !important;
  44.     height38px !important;
  45.     padding: 0 !important;
  46.     margin: 0 !important;
  47.     floatnone !important;
  48.     font-size20px !important;
  49.     displayblock !important;
  50.     text-aligncenter !important;
  51.     line-height38px !important;
  52. }
  53. /******** 更多分享 ********/
  54. .entry-share .jiathis_style_32x32 a.jtico_jiathis {
  55.     backgroundtransparent !important;
  56.     width38px !important;
  57.     height38px !important;
  58.     padding: 0 !important;
  59.     margin: 0 !important;
  60.     font-size24px !important;
  61.     displayblock !important;
  62.     text-aligncenter !important;
  63.     line-height38px !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.     widthauto;
  72.     margin-left10px;
  73.     padding: 0 15px;
  74.     border-radius: 5px;
  75.     displayinline-block;
  76.     positionrelative;
  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-stylesolid;
  87.     border-width10px 10px 10px 0;
  88.     border-colortransparent #e8e8e8 transparent transparent;
  89.     positionabsolute;
  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-size14px !important;
  97.     widthauto !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:

目前评论:17   其中:访客  16   博主  1

    • BanYuner 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省苏州市 电信 5

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

      • 生活啊 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省苏州市 电信 1

        暂时都没有用。

        • Win7en乐园 来自天朝的朋友 谷歌浏览器 Windows 10 河南省郑州市 联通 7

          相信鸟哥是最棒的。

            • 雅兮网 来自天朝的朋友 谷歌浏览器 Windows 7 广东省 电信(绿色上网全省通用) 4

              @Win7en乐园 这次不给力了啊 竟然晚了这么久 板凳都没抢到

            • 龙笑天 来自天朝的朋友 火狐浏览器 Windows 7 湖北省武汉市 联通 4

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

              • SmallTown 来自天朝的朋友 谷歌浏览器 Windows 10 河南省郑州市 联通 1

                有没有https的

                • boke112导航 来自天朝的朋友 火狐浏览器 Windows XP 浙江省温州市 联通 3

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

                  • 墨丶水瓶 来自天朝的朋友 谷歌浏览器 Windows 8 北京市海淀区 学院路四道口宏达四方网吧 4

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

                    • INK丶STAND 来自天朝的朋友 谷歌浏览器 Windows 8 浙江省宁波市鄞州区 联通 0

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

                      • 励志语录 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省 移动 5

                        不错啊

                        • PC大学 来自天朝的朋友 谷歌浏览器 Windows 7 浙江省温州市 联通 0

                          不错不错,支持鸟哥

                          • OEASY 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省常州市 电信 1

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

                              • 知更鸟 Admin 来自天朝的朋友 火狐浏览器 Windows 10 陕西省西安市 电信

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

                              • 墨丶水瓶 来自天朝的朋友 谷歌浏览器 Windows 8 陕西省西安市 电信 4

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

                                • 顶尖PPT模板 来自天朝的朋友 谷歌浏览器 Windows 7 河南省郑州市 联通 0

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

                                  • 平淡的幸福 来自天朝的朋友 谷歌浏览器 Windows 7 陕西省西安市 电信 0

                                    不错