目前常用的社会化分享工具有 百度分享 和 JiaThis,特别是这个JiaThis年代够久远,在百度也加入这个领域后,居然还坚持为大家提供免费工具,这里点32个赞!
随着时代的变化,这些分享工具自带的小图标却一成不变,已不符合目前流行的扁平化风格,与网站风格极不协调,但有些网站虽用的也上面两款分享工具,但图标却不一样,扁平、大方、简洁,显得高大上。今天就分享一下修改后的代码,起个抛砖引玉的作用,以JiaThis分享工具为例,下面是修改后的效果:
默认的分享按钮
美化后的分享按钮
基本原理就是找到默认分享代码的DIV选择器,然后隐藏背景图片,添加字体图标并重写样式。
一、首先将下面代码添加到当前主题functions.php的最后:
- entry_share() {
- (is_single()) {
- .= \’
- <div =>
- <div =>
- <span =>分享到</span>
- <!– JiaThis Button BEGIN –>
- <div =>
- <a =><i =></i></a>
- <a =><i =></i></a>
- <a =><i =></i></a>
- <a =><i =></i></a>
- <a =><i =></i></a>
- <a =><i =></i></a>
- <a href= = target=><span><i =></i></span></a>
- <a =></a>
- </div>
- </div>
- <script type= src= charset=></script>
- <!– JiaThis Button –>
- </div>\’;
- }
- ;
- }
- add_filter(\’the_content\’,\’entry_share\’);
之后分享代码会自动添加到文章正文的下面。
上面代码只是在原JiaThis分享代码基础上添加了字体图标。
二、再把下面配套的样式添加到当前主题样式文件style.css中即可。
展示代码
- .entry-share {
- : ;
- : ;
- : 0 ;
- }
- .entry-share . {
- : 700;
- : ;
- }
- .entry-share .share-pu {
- : ;
- : ;
- }
- .entry-share div.share-box {
- : -;
- : ;
- }
- .entry-share .jiathis_style_32x32 {
- : !important;
- : ;
- }
- .entry-share .jiathis_style_32x32 a {
- : ;
- : ;
- : ;
- : ;
- : !important;
- : ;
- -radius: ;
- : ;
- : ;
- }
- .entry-share .jiathis_style_32x32 a:hover {
- : ;
- : ;
- }
- .entry-share .jiathis_style_32x32 a span {
- : !important;
- : !important;
- : !important;
- : 0 !important;
- : 0 !important;
- : !important;
- : !important;
- : !important;
- : !important;
- : !important;
- }
- .entry-share .jiathis_style_32x32 a.jtico_jiathis {
- : !important;
- : !important;
- : !important;
- : 0 !important;
- : 0 !important;
- : !important;
- : !important;
- : !important;
- : !important;
- }
- .entry-share .jiathis_style_32x32 a:hover.jtico_jiathis {
- : !important;
- : ;
- }
- .entry-share .jiathis_style_32x32 a.jiathis_counter_style {
- : ;
- : ;
- : 0 ;
- -radius: ;
- : -;
- : ;
- : ;
- : ;
- : !important;
- }
- .entry-share .jiathis_style_32x32 a.jiathis_counter_style:before {
- : ;
- : 0;
- : 0;
- : ;
- : 0;
- : ;
- : ;
- : 100%;
- : 50%;
- : -;
- }
- .entry-share .jiathis_style_32x32 a.jiathis_counter_style span.jiathis_bubble_style {
- : !important;
- : !important;
- : !important;
- }
- .entry-share .jiathis_style_32x32 a:hover.jiathis_button_tsina {
- : ;
- : ;
- }
- .entry-share .jiathis_style_32x32 a:hover.jiathis_button_weixin {
- : ;
- : ;
- }
- .entry-share .jiathis_style_32x32 a:hover.jiathis_button_fb {
- : ;
- : ;
- }
- .entry-share .jiathis_style_32x32 a:hover.jiathis_button_twitter {
- : ;
- : ;
- }
- .entry-share .jiathis_style_32x32 a:hover.jiathis_button_renren {
- : ;
- : ;
- }
- .entry-share .jiathis_style_32x32 a:hover.jiathis_button_qzone {
- : ;
- : ;
- }
鼠标悬停在分享按钮上,背景会变成不同的颜色。
如果你动手能力比较强,也可以同样替换百度分享图标。
暂无评论内容