首页 / WordPress入门 / 替换分享工具自带图标

替换分享工具自带图标

    • 珂李斯

    发布于

    by

    目前常用的社会化分享工具有 百度分享  和 JiaThis，特别是这个JiaThis年代够久远，在百度也加入这…

    替换分享工具自带图标

    目前常用的社会化分享工具有 百度分享  和 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. }
    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入门、

    本文收集自互联网，转载请注明来源。
    如有侵权，请联系 wper_net@163.com 删除。

    【上一篇】:

    【下一篇】:

    猜你喜欢GUESS YOU LIKE

    评论 (0)COMMENT

    登录 账号发表你的看法，还没有账号？立即免费 注册


  • 还没有任何评论，赶紧来占个楼吧！