给主题添加知更鸟的点赞、分享、打赏的样式

在闲鱼看来,知更鸟的点赞、分享、打赏的样式真的好看,由于闲鱼用的就是知更鸟的主题,所以不用眼红这一功能样式,但是很多人并不是用的begin,又想拥有这一功能,这里给大家分享下给主题添加知更鸟的点赞、分享、打赏的样式教程,当然,方法谢谢水冷眸 吧.

PS:由于,水冷眸的Tooltip特效采用的是Jbox的插件,这里不确定该教程中方法是否会与你们本身的主题有冲突。所以动手之前请养成备份的好习惯哦!
废话不多说,直接上教程

插件方式:

这是最简单,适合不熟悉代码主题的人,一撸到底

  • ① 上传 wp-solo-share目录 到 /wp-content/plugins/ 目录
  • ② 在后台插件菜单激活该插件
  • ③进入后台,设置-WP Solo Share设置,填写自己的付款二维码地址,大小自己控制。
  • ④ 添加以下代码到自己想要展示的位置
    1. <?php wp_share();?>  

    代码方式

    下载懒人包:


    将压缩包解压,可以看到里面有两个文件,分别是share.css跟jBox.js
    将share.css放进你主题的css目录里面,将jBox.js放进你主题的js目录里面
    PS:点赞的样式跟jbox插件所需的css样式合并了,文件叫做share.css。点赞的js,百度分享的js,以及jbox的核心js也合并了,文件叫做jBox.js。

    代码部署:

    ①、编辑WordPress主题目录下的functions.php文件,在最后一个?>标签之前,添加如下代码并保存:

    1. /*点赞函数*/  
    2. function solome_like(){  
    3.     global $wpdb,$post;  
    4.     $id = $_POST["um_id"];  
    5.     $action = $_POST["um_action"];  
    6.     if ( $action == 'ding'){  
    7.     $bigfa_raters = get_post_meta($id,'solome_ding',true);  
    8.     $expire = time() + 99999999;  
    9.     $domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false;   
    10.     setcookie('solome_ding_'.$id,$id,$expire,'/',$domain,false);  
    11.     if (!$bigfa_raters || !is_numeric($bigfa_raters)) {  
    12.         update_post_meta($id, 'solome_ding', 1);  
    13.     }   
    14.     else {  
    15.             update_post_meta($id, 'solome_ding', ($bigfa_raters + 1));  
    16.         }  
    17.     echo get_post_meta($id,'solome_ding',true);  
    18.     }   
    19.     die;  
    20. }  
    21. /*注册相关静态文件*/  
    22. function solo_share_scripts(){  
    23.     /*判断是否为文章页或者页面*/      
    24.     if ( is_single() || is_page()) {  
    25.         wp_enqueue_style( 'slmwp', get_template_directory_uri() . '/css/share.css');  
    26.         wp_enqueue_script( 'slmwp', get_template_directory_uri() . '/js/jBox.js' );  
    27.     }  
    28. }  
    29. function solo_footer(){  
    30.     /*判断是否为文章页或者页面*/  
    31.     if ( is_single() || is_page()) {?>  
    32. <div style="display: none" id="baidu"><div class="bdsharebuttonbox"><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a><a href="#" class="bds_bdhome" data-cmd="bdhome" title="分享到百度新首页"></a><a href="#" class="bds_mail" data-cmd="mail" title="分享到邮件分享"></a><a href="#" class="bds_copy" data-cmd="copy" title="分享到复制网址"></a></div></div>  
    33. <script>  
    34. $('#shang').jBox('Tooltip', {  
    35.     content: '<img src="http://cdn.slmwp.com/slmwp/alipay-qrcode-250.png" />',  
    36.     closeOnMouseleave: true  
    37. });  
    38. $('#share').jBox('Modal', {  
    39.     title: '分享:',  
    40.     content: $('#baidu')  
    41. });  
    42. </script>  
    43. <?php }  
    44. }  
    45. add_action('wp_ajax_nopriv_solome_like', 'solome_like');  
    46. add_action('wp_ajax_solome_like', 'solome_like');  
    47. add_action('wp_enqueue_scripts', 'solo_share_scripts');  
    48. add_action( 'wp_footer', 'solo_footer' );  

    ②、前台引用:复制以下代码添加到你想要展示的地方,比如说正文的结尾的后面等.

    1. <section id="z_s_s">  
    2.    <div class="social-main">  
    3.        <span class="like"><a href="javascript:;" data-action="ding" data-id="<?php the_ID()?>" class="favorite <?php if(isset($_COOKIE['solome_ding_'.$post->ID])) echo 'done';?>"><i class="fa fa-thumbs-up"></i>赞  <span class="count"><?php if( get_post_meta($post->ID,'solome_ding',true) ){ echo get_post_meta($post->ID,'solome_ding',true);} else {echo '0';}?></span></a> </span>  
    4.        <span class="shang-p"><a href="javascript:;" id="shang">赏</a></span>  
    5.  <span class="share-s"><a href="javascript:;" id="share"><i class="fa fa-share-alt"></i> 分享</a></span>  
    6.        <div class="clear"></div>  
    7.    </div>  
    8. </section>  

    注意事项:

  • 1、如果你的路径不是主题目录/css、主题目录/js,那么对应第二步里面25-26行也需要相应的修改路径,或者你直接在主题根目录里面分别创建一个css与js目录,将文件放置进去;
  • 2、代码中有个的代码,这是调用fontawesome图标字体的代码,如果你的主题没有采用fontawesome图标字体的代码,可能需要你另行载入fontawesome字体的文件,或者是替换成你主题所采用的图标字体;
  • 3、不要忘了将第二步的35行的二维码图片地址改成你自己的地址;
  • 4、如果想减少文件调用,可以将css以及js都复制进你主题的文件里面,然后删除第二部分相关的代码即可。
  • 发表评论

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

    目前评论:24   其中:访客  15   博主  9

      • 雨小睡 雨小睡 来自天朝的朋友 谷歌浏览器 Windows XP 贵州省黔东南州 电信

        按照教程一步步来,可是到头来发现,错位。不好用。

        • 自留地 自留地 来自天朝的朋友 谷歌浏览器 Windows 7 安徽省 移动

          博主,你自己在用的样式要比知更鸟Begin主题自带的好看,包括右侧的返还顶部,能把美化教程弄出来吗

            • 闲鱼 闲鱼 【博主】 来自天朝的朋友 QQ浏览器 Windows 7 湖南省常德市 电信

              @自留地 自己扒吧,已经有不少人扒过……

                • 自留地 自留地 来自天朝的朋友 谷歌浏览器 Windows 7 安徽省淮北市 移动

                  @闲鱼 这个弄出来了,就是右侧的向上向下实在扒不出来了 :razz:

              • 兆兆 兆兆 来自天朝的朋友 谷歌浏览器 Windows 10 浙江省绍兴市 移动

                这玩意儿我整了半年了 :?: 从来没成功过、、、打赏、点赞、分享总有一个功能不能实现、、博主居然搞定了、、、、厉害厉害

                  • 闲鱼 闲鱼 【博主】 来自天朝的朋友 QQ浏览器 Windows 7 湖南省长沙市 电信

                    @兆兆 :smile: 其实这是别人整理的

                      • zhao兆 zhao兆 来自天朝的朋友 谷歌浏览器 Windows 10 浙江省绍兴市 移动

                        @闲鱼 是照水冷眸的方法?我按他的做,一直没成功。博主可以帮我试试不?

                          • 闲鱼 闲鱼 【博主】 来自天朝的朋友 QQ浏览器 Windows 7 湖南省长沙市 电信

                            @zhao兆 过年太忙了,真的没什么时间折腾

                      • 成航先森 成航先森 来自天朝的朋友 谷歌浏览器 Windows 7 四川省成都市 电信

                        以前找了好久,找不到,现在不想动了。。。。

                        • 朱曙明博客 朱曙明博客 来自天朝的朋友 谷歌浏览器 Windows 7 广东省东莞市 电信

                          来看看

                          • 森云 森云 来自天朝的朋友 谷歌浏览器 Windows 7 山东省 电信

                            不会php就怕折腾坏了

                              • 闲鱼 闲鱼 【博主】 来自天朝的朋友 QQ浏览器 Windows 7 广东省东莞市 电信

                                @森云 备份好,再随便折腾

                              • 淡淡大帅比 淡淡大帅比 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省苏州市 电信

                                虽然我看不懂 还是给你点个赞

                                  • 闲鱼 闲鱼 【博主】 来自天朝的朋友 QQ浏览器 iPhone iPhone OS 9_1 like Mac OS X) AppleWebKit 湖北省武汉市 联通

                                    @淡淡大帅比 你还是好好读书吧,纱布

                                  • BanYuner BanYuner 来自天朝的朋友 谷歌浏览器 Windows 10 陕西省西安市 电信

                                    对于百度的分享我个人觉得并不是很喜欢 至于打赏这个还是比较喜欢的 值不够不知道添加到哪里比较合适

                                      • 闲鱼 闲鱼 【博主】 来自天朝的朋友 QQ浏览器 iPhone iPhone OS 9_1 like Mac OS X) AppleWebKit 湖北省武汉市 联通

                                        @BanYuner 分享有时候用得着,打赏这个我也喜欢 :lol:

                                      • 成航先森 成航先森 这家伙可能用了美佬的代理 谷歌浏览器 Windows 8.1 世界 美国加州三藩CloudFlare公司AS13335任播网络CDN全球节点(CLOUDFLARENET)(WorldAnyCast)

                                        这个确实很多人想要,昨天还看到WordPress吧里有人问怎么实现呢

                                        • 好书推荐 好书推荐 来自天朝的朋友 谷歌浏览器 Windows 10 河南省洛阳市 联通

                                          进来看看、支持一下

                                            • 闲鱼 闲鱼 【博主】 来自天朝的朋友 谷歌浏览器 Windows 7 河南省洛阳市 联通

                                              @好书推荐 欢迎

                                            • 玩赚薅羊毛 玩赚薅羊毛 来自天朝的朋友 谷歌浏览器 Windows 10 四川省成都市 电信

                                              他们的返回顶部,我给盗过来了! :grin: :grin: :grin:

                                                • 闲鱼 闲鱼 【博主】 来自天朝的朋友 谷歌浏览器 Windows 7 山东省济南市 联通数据中心

                                                  @玩赚薅羊毛 不错不错 :mrgreen: 样式都可以借鉴

                                                    • 玩赚薅羊毛 玩赚薅羊毛 来自天朝的朋友 谷歌浏览器 Windows 10 四川省成都市 电信

                                                      @闲鱼 你现在用的评论框 我也想偷过来!!!看看可以不? :oops:

                                                        • 闲鱼 闲鱼 【博主】 来自天朝的朋友 谷歌浏览器 Windows 7 河南省洛阳市 联通

                                                          @玩赚薅羊毛 随你啊,你这是CreeKoo主题,它的评论框也不错,不喜欢用多说

                                                            • 玩赚薅羊毛 玩赚薅羊毛 来自天朝的朋友 谷歌浏览器 Windows 10 四川省成都市 电信

                                                              @闲鱼 嗯 他的评论框带了多说的头像的!