替换分享工具自带图标

知更鸟
知更鸟
站长
2332
文章
0
粉丝
WordPress235,095阅读模式

替换分享工具自带图标-图片1

目前常用的社会化分享工具有 百度分享  和 JiaThis，特别是这个JiaThis年代够久远，在百度也加入这个领域后，居然还坚持为大家提供免费工具，这里点32个赞！

随着时代的变化，这些分享工具自带的小图标却一成不变，已不符合目前流行的扁平化风格，与网站风格极不协调，但有些网站虽用的也上面两款分享工具，但图标却不一样，扁平、大方、简洁，显得高大上。今天就分享一下修改后的代码，起个抛砖引玉的作用，以JiaThis分享工具为例，下面是修改后的效果：

替换分享工具自带图标-图片2

默认的分享按钮

美化后的分享按钮

基本原理就是找到默认分享代码的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 安装并启用，才能显示替换后的图标。

如果你动手能力比较强，也可以同样替换百度分享图标。

本站文章大部分为原创，用于个人学习记录，可能对您有所帮助，仅供参考！

禁用WordPress更新提示
禁用WordPress更新提示
WordPress前端英文，后台中文实现方法
批量删除WordPress文章中的多余DIV标签
批量删除WordPress文章中的多余DIV标签
显示当前所有已注册的侧边栏和小工具名称
显示当前所有已注册的侧边栏和小工具名称
weinxin
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接，谢谢合作！
获取本主题
598845006
咨询主题请加Q：598845006
多功能主题 Begin
 
知更鸟
  • Wordpress教程
  • WordPress主题
  • functions.php
获取本主题
598845006
咨询主题请加Q：598845006
多功能主题 Begin
评论  23  访客  22  作者  1
    • BanYuner
      BanYuner 5
      江苏省苏州市 1F
      回复

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

      • 生活啊
        生活啊 0
        江苏省苏州市 2F
        回复

        暂时都没有用。

        • Win7en乐园
          Win7en乐园 7
          河南省郑州市 3F
          回复

          相信鸟哥是最棒的。

          • 龙笑天
            龙笑天 5
            湖北省武汉市 4F
            回复

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

            • SmallTown
              SmallTown 2
              河南省郑州市 5F
              回复

              有没有https的

              • boke112导航
                boke112导航 4
                浙江省温州市 6F
                回复

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

                • 墨丶水瓶
                  墨丶水瓶 4
                  北京市 7F
                  回复

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

                  • ＩＮＫ丶ＳＴＡＮＤ
                    ＩＮＫ丶ＳＴＡＮＤ 1
                    浙江省宁波市鄞州区 8F
                    回复

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

                    • 励志语录
                      励志语录 6
                      安徽省合肥市 9F
                      回复

                      不错啊

                      • PC大学
                        PC大学 1
                        浙江省温州市 10F
                        回复

                        不错不错，支持鸟哥

                        • OEASY
                          OEASY 2
                          江苏省常州市 11F
                          回复

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

                            • 知更鸟
                              知更鸟
                              中国 B1
                              回复

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

                            • 墨丶水瓶
                              墨丶水瓶 4
                              陕西省西安市 12F
                              回复

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

                              • 顶尖PPT模板
                                顶尖PPT模板 0
                                河南省郑州市 13F
                                回复

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

                                • 平淡的幸福
                                  平淡的幸福 0
                                  陕西省西安市 14F
                                  回复

                                  不错

                                  • 花卉说
                                    花卉说 1
                                    江苏省苏州市 15F
                                    回复

                                    技术帖子，我的最爱

                                    • mrzhenggang
                                      mrzhenggang 0
                                      陕西省西安市 16F
                                      回复

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

                                      • 955
                                        955 0
                                        湖北省武汉市 17F
                                        回复

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

                                        • 鳄鱼皮钱包
                                          鳄鱼皮钱包 1
                                          湖南省衡阳市 18F
                                          回复

                                          share我们都喜欢，可惜好难

                                          • 福利堆
                                            福利堆 5
                                            江苏省苏州市 19F
                                            回复

                                            现在很少有人分享了

                                            • 燕州闲人
                                              燕州闲人 1
                                              河南省郑州市 20F
                                              回复

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

                                            匿名

                                            发表评论

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

                                            拖动滑块以完成验证