看来,知更鸟的点赞、分享、打赏的样式真的好看,由于闲鱼用的就是知更鸟的主题,所以不用眼红这一功能样式,但是很多人并不是用的begin,又想拥有这一功能,这里给大家分享下给主题添加知更鸟的点赞、分享、打赏的样式教程,当然,方法谢谢水冷眸 吧.
PS:由于，水冷眸的Tooltip特效采用的是Jbox的插件,这里不确定该教程中方法是否会与你们本身的主题有冲突。所以动手之前请养成备份的好习惯哦!
废话不多说,直接上教程
插件方式:
这是最简单,适合不熟悉代码主题的人,一撸到底
- ① 上传 wp-solo-share目录 到 /wp-content/plugins/ 目录
- ② 在后台插件菜单激活该插件
- ③进入后台，设置-WP Solo Share设置，填写自己的付款二维码地址，大小自己控制。
- ④ 添加以下代码到自己想要展示的位置
- <?php wp_share();?>
代码方式
下载懒人包:
将压缩包解压,可以看到里面有两个文件，分别是share.css跟jBox.js
将share.css放进你主题的css目录里面，将jBox.js放进你主题的js目录里面
PS:点赞的样式跟jbox插件所需的css样式合并了，文件叫做share.css。点赞的js，百度分享的js，以及jbox的核心js也合并了，文件叫做jBox.js。
将share.css放进你主题的css目录里面，将jBox.js放进你主题的js目录里面
PS:点赞的样式跟jbox插件所需的css样式合并了，文件叫做share.css。点赞的js，百度分享的js，以及jbox的核心js也合并了，文件叫做jBox.js。
代码部署:
①、编辑WordPress主题目录下的functions.php文件，在最后一个?>标签之前，添加如下代码并保存:
- /*点赞函数*/
- function solome_like(){
- global $wpdb,$post;
- $id = $_POST[“um_id”];
- $action = $_POST[“um_action”];
- if ( $action == ‘ding’){
- $bigfa_raters = get_post_meta($id,’solome_ding’,true);
- $expire = time() + 99999999;
- $domain = ($_SERVER[‘HTTP_HOST’] != ‘localhost’) ? $_SERVER[‘HTTP_HOST’] : false;
- setcookie(‘solome_ding_’.$id,$id,$expire,’/’,$domain,false);
- if (!$bigfa_raters || !is_numeric($bigfa_raters)) {
- update_post_meta($id, ‘solome_ding’, 1);
- }
- else {
- update_post_meta($id, ‘solome_ding’, ($bigfa_raters + 1));
- }
- echo get_post_meta($id,’solome_ding’,true);
- }
- die;
- }
- /*注册相关静态文件*/
- function solo_share_scripts(){
- /*判断是否为文章页或者页面*/
- if ( is_single() || is_page()) {
- wp_enqueue_style( ‘slmwp’, get_template_directory_uri() . ‘/css/share.css’);
- wp_enqueue_script( ‘slmwp’, get_template_directory_uri() . ‘/js/jBox.js’ );
- }
- }
- function solo_footer(){
- /*判断是否为文章页或者页面*/
- if ( is_single() || is_page()) {?>
- <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>
- <script>
- $(‘#shang’).jBox(‘Tooltip’, {
- content: ‘<img src=“http://cdn.slmwp.com/slmwp/alipay-qrcode-250.png” />’,
- closeOnMouseleave: true
- });
- $(‘#share’).jBox(‘Modal’, {
- title: ‘分享：’,
- content: $(‘#baidu’)
- });
- </script>
- <?php }
- }
- add_action(‘wp_ajax_nopriv_solome_like’, ‘solome_like’);
- add_action(‘wp_ajax_solome_like’, ‘solome_like’);
- add_action(‘wp_enqueue_scripts’, ‘solo_share_scripts’);
- add_action( ‘wp_footer’, ‘solo_footer’ );
②、前台引用:复制以下代码添加到你想要展示的地方，比如说正文的结尾的后面等.
- <section id=“z_s_s”>
- <div class=“social-main”>
- <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>
- <span class=“shang-p”><a href=“javascript:;” id=“shang”>赏</a></span>
- <span class=“share-s”><a href=“javascript:;” id=“share”><i class=“fa fa-share-alt”></i> 分享</a></span>
- <div class=“clear”></div>
- </div>
- </section>
注意事项:
- 1、如果你的路径不是主题目录/css、主题目录/js，那么对应第二步里面25-26行也需要相应的修改路径，或者你直接在主题根目录里面分别创建一个css与js目录，将文件放置进去；
- 2、代码中有个的代码，这是调用fontawesome图标字体的代码，如果你的主题没有采用fontawesome图标字体的代码，可能需要你另行载入fontawesome字体的文件，或者是替换成你主题所采用的图标字体；
- 3、不要忘了将第二步的35行的二维码图片地址改成你自己的地址;
- 4、如果想减少文件调用，可以将css以及js都复制进你主题的文件里面，然后删除第二部分相关的代码即可。