替换分享工具自带图标

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

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

默认的分享按钮

美化后的分享按钮

基本原理就是找到默认分享代码的DIV选择器,然后隐藏背景图片,添加字体图标并重写样式。

一、首先将下面代码添加到当前主题functions.php的最后:

  1.  entry_share() {
  2.  (is_single()) {
  3.      .= \’
  4.     <div =>
  5.         <div =>
  6.             <span =>分享到</span>
  7.             <!– JiaThis Button BEGIN –>
  8.             <div =>
  9.                 <a =><i =></i></a>
  10.                 <a =><i =></i></a>
  11.                 <a =><i =></i></a>
  12.                 <a =><i =></i></a>
  13.                 <a =><i =></i></a>
  14.                 <a =><i =></i></a>
  15.                 <a href= = target=><span><i =></i></span></a>
  16.                 <a =></a>
  17.             </div>
  18.         </div>
  19.         <script type= src= charset=></script>
  20.         <!– JiaThis Button  –>
  21.     </div>\’;
  22. }
  23.  ;
  24. }
  25. add_filter(\’the_content\’,\’entry_share\’);

之后分享代码会自动添加到文章正文的下面。

上面代码只是在原JiaThis分享代码基础上添加了字体图标。

二、再把下面配套的样式添加到当前主题样式文件style.css中即可。

展示代码

  1. .entry-share {
  2.     : ;
  3.     : ;
  4.     : 0  ;
  5. }
  6. .entry-share . {
  7.     : 700;
  8.     : ;
  9. }
  10. .entry-share .share-pu {
  11.     : ;
  12.     : ;
  13. }
  14. .entry-share div.share-box {
  15.     : -;
  16.     : ;
  17. }
  18. .entry-share .jiathis_style_32x32 {
  19.     :  !important;
  20.     : ;
  21. }
  22. .entry-share .jiathis_style_32x32 a {
  23.     : ;
  24.     : ;
  25.     : ;
  26.     : ;
  27.     :  !important;
  28.     : ;
  29.     -radius: ;
  30.     : ;
  31.     :   ;
  32. }
  33. .entry-share .jiathis_style_32x32 a:hover {
  34.     : ;
  35.     : ;
  36. }
  37. .entry-share .jiathis_style_32x32 a span {
  38.     :  !important;
  39.     :  !important;
  40.     :  !important;
  41.     : 0 !important;
  42.     : 0 !important;
  43.     :  !important;
  44.     :  !important;
  45.     :  !important;
  46.     :  !important;
  47.     :  !important;
  48. }
  49. .entry-share .jiathis_style_32x32 a.jtico_jiathis {
  50.     :  !important;
  51.     :  !important;
  52.     :  !important;
  53.     : 0 !important;
  54.     : 0 !important;
  55.     :  !important;
  56.     :  !important;
  57.     :  !important;
  58.     :  !important;
  59. }
  60. .entry-share .jiathis_style_32x32 a:hover.jtico_jiathis {
  61.     :  !important;
  62.     : ;
  63. }
  64. .entry-share .jiathis_style_32x32 a.jiathis_counter_style {
  65.     : ;
  66.     : ;
  67.     : 0 ;
  68.     -radius: ;
  69.     : -;
  70.     : ;
  71.     : ;
  72.     : ;
  73.     :  !important;
  74. }
  75. .entry-share .jiathis_style_32x32 a.jiathis_counter_style:before {
  76.     : ;
  77.     : 0;
  78.     : 0;
  79.     : ;
  80.     :    0;
  81.     :    ;
  82.     : ;
  83.     : 100%;
  84.     : 50%;
  85.     : -;
  86. }
  87. .entry-share .jiathis_style_32x32 a.jiathis_counter_style span.jiathis_bubble_style {
  88.     :  !important;
  89.     :  !important;
  90.     :  !important;
  91. }
  92. .entry-share .jiathis_style_32x32 a:hover.jiathis_button_tsina {
  93.     : ;
  94.     : ;
  95. }
  96. .entry-share .jiathis_style_32x32 a:hover.jiathis_button_weixin {
  97.     : ;
  98.     : ;
  99. }
  100. .entry-share .jiathis_style_32x32 a:hover.jiathis_button_fb {
  101.     : ;
  102.     : ;
  103. }
  104. .entry-share .jiathis_style_32x32 a:hover.jiathis_button_twitter {
  105.     : ;
  106.     : ;
  107. }
  108. .entry-share .jiathis_style_32x32 a:hover.jiathis_button_renren {
  109.     : ;
  110.     : ;
  111. }
  112. .entry-share .jiathis_style_32x32 a:hover.jiathis_button_qzone {
  113.     : ;
  114.     : ;
  115. }

鼠标悬停在分享按钮上,背景会变成不同的颜色。

注:

因代码中使用了Font Awesome字体图标,如果你的主题没有加载字体图标,可以到WP后台–插件–安装插件页面搜索:Font Awesome 4 Menus 安装并启用,才能显示替换后的图标。

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

    © 版权声明
    THE END
    喜欢就支持一下吧
    点赞0 分享
    评论 抢沙发

    请登录后发表评论

      暂无评论内容