目前常用的社会化分享工具有 百度分享 和 JiaThis，特别是这个JiaThis年代够久远，在百度也加入这个领域后，居然还坚持为大家提供免费工具，这里点32个赞！
随着时代的变化，这些分享工具自带的小图标却一成不变，已不符合目前流行的扁平化风格，与网站风格极不协调，但有些网站虽用的也上面两款分享工具，但图标却不一样，扁平、大方、简洁，显得高大上。今天就分享一下修改后的代码，起个抛砖引玉的作用，以JiaThis分享工具为例，下面是修改后的效果：
默认的分享按钮
美化后的分享按钮
基本原理就是找到默认分享代码的DIV选择器，然后隐藏背景图片，添加字体图标并重写样式。
一、首先将下面代码添加到当前主题functions.php的最后：
- function entry_share($content) {
- if (is_single()) {
- class="entry-share">class="share-box">
- class="share-pu">分享到
class="jiathis_style_32x32">- class="jiathis_button_tsina">class="fa fa-weibo">
- class="jiathis_button_weixin">class="fa fa-wechat">
- class="jiathis_button_renren">class="fa fa-renren">
- class="jiathis_button_qzone">class="fa fa-qq">
- class="jiathis_button_fb">class="fa fa-facebook">
- class="jiathis_button_twitter">class="fa fa-twitter">
- "http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank">class="fa fa-share-alt">
- class="jiathis_counter_style">
- }
- return $content;
- }
之后分享代码会自动添加到文章正文的下面。
上面代码只是在原JiaThis分享代码基础上添加了字体图标。
二、再把下面配套的样式添加到当前主题样式文件style.css中即可。
展示代码展开
- /** 外部盒子 **/
- .entry-share {
- font-size: 14px;
- text-align: center;
- margin: 0 auto 20px;
- }
- /********* 分享文字 ********/
- .entry-share .share-pu {
- font-weight: 700;
- line-height: 40px;
- }
- .entry-share .share-pu {
- float: left;
- color: #4d4d4d;
- }
- /******** 分享样式 ********/
- .entry-share div.share-box {
- display: inline-block;
- overflow: hidden;
- }
- .entry-share .jiathis_style_32x32 {
- float: left !important;
- margin-left: 10px;
- }
- .entry-share .jiathis_style_32x32 a {
- float: left;
- width: 40px;
- height: 40px;
- color: #a8a8a8;
- font-size: 16px !important;
- display: block;
- border-radius: 5px;
- margin-right: 10px;
- border: 1px solid #999;
- }
- .entry-share .jiathis_style_32x32 a:hover {
- text-decoration: none;
- color: #fff;
- }
- /** 图标大小 **/
- .entry-share .jiathis_style_32x32 a span {
- background: transparent !important;
- width: 38px !important;
- height: 38px !important;
- padding: 0 !important;
- margin: 0 !important;
- float: none !important;
- font-size: 20px !important;
- display: block !important;
- text-align: center !important;
- line-height: 38px !important;
- }
- /******** 更多分享 ********/
- .entry-share .jiathis_style_32x32 a.jtico_jiathis {
- background: transparent !important;
- width: 38px !important;
- height: 38px !important;
- padding: 0 !important;
- margin: 0 !important;
- font-size: 24px !important;
- display: block !important;
- text-align: center !important;
- line-height: 38px !important;
- }
- .entry-share .jiathis_style_32x32 a:hover.jtico_jiathis {
- background: #666 !important;
- border-color: #666;
- }
- /******** 分享次数 ********/
- .entry-share .jiathis_style_32x32 a.jiathis_counter_style {
- width: auto;
- margin-left: 10px;
- padding: 0 15px;
- border-radius: 5px;
- display: inline-block;
- position: relative;
- background: #e8e8e8;
- border-color: #e8e8e8;
- color: #fff !important;
- }
- /** 箭头 **/
- .entry-share .jiathis_style_32x32 a.jiathis_counter_style:before { ;
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 10px 10px 10px 0;
- border-color: transparent #e8e8e8 transparent transparent;
- position: absolute;
- right: 100%;
- top: 50%;
- margin-top: -10px;
- }
- .entry-share .jiathis_style_32x32 a.jiathis_counter_style span.jiathis_bubble_style {
- color: #666 !important;
- font-size: 14px !important;
- width: auto !important;
- }
- /******** 不同图标悬停背景颜色 ********/
- .entry-share .jiathis_style_32x32 a:hover.jiathis_button_tsina {
- background: #e74c3c;
- border-color: #e74c3c;
- }
- .entry-share .jiathis_style_32x32 a:hover.jiathis_button_weixin {
- background: #2ecc71;
- border-color: #2ecc71;
- }
- .entry-share .jiathis_style_32x32 a:hover.jiathis_button_fb {
- background: #4760A5;
- border-color: #4760A5;
- }
- .entry-share .jiathis_style_32x32 a:hover.jiathis_button_twitter {
- background: #50ABF1;
- border-color: #50ABF1;
- }
- .entry-share .jiathis_style_32x32 a:hover.jiathis_button_renren {
- background: #3777BE;
- border-color: #3777BE;
- }
- .entry-share .jiathis_style_32x32 a:hover.jiathis_button_qzone {
- background: #2174C3;
- border-color: #2174C3;
- }
鼠标悬停在分享按钮上，背景会变成不同的颜色。
如果你动手能力比较强，也可以同样替换百度分享图标。
相关推荐
- Google回归中国对SEO们意味着什么？
- seo是什么职业？seo日常工作内容介绍
- seo是什么意思？小白通俗易懂篇
- seo技巧（百试百灵的seo关键词排名优化2点技巧）
- 网站排名提高（如何让网站关键词排名快速提高）
系统推荐
- wp怎么去掉小工具功能栏下面的wordpress网站链接
- wordpress怎么添加相关文章
- WordPress主题制作教程
- WordPress 最新版本下载
- wordpress后台无法登录解决办法
热门关键词
，seo，流量，优化，排名，百度，权重，优化，整站，keyword，百度
官方运营-Sean丶♥
5234 SEO文章
评论
