ceacer 2 已发布 1月28号 分享 已发布 1月28号 最近,一直都有博主问到如何将文章页面中的“朕要赏赐”和“真要分享”更改为类似知更鸟Begin主题的点赞分享样式。其实,对于这种需求动手能力强的博主自己就可以解决了,不过为了让不太会动手折腾的博主也能多一个选择,所以今天特意将Unite3.0主题移植知更鸟点赞分享样式的详细过程分享给大家。 一、懒人移植方法(适合未修改过Unite主题的方法) 只需下载【Unite3.0主题移植知更鸟点赞分享样式文件】,解压后按以下要求覆盖更新即可。 下载地址 1、script.js文件直接拷贝到Unitejs覆盖更新。 2、social.php文件直接拷贝到Uniteinc覆盖更新。 3、functions.php、header.php和style.css文件直接拷贝到Unite覆盖更新。 二、自己动手折腾代码(适合修改过Unite主题的方法) 1、打开Unitejs script文件,在最后面添加以下代码: // 点赞 $.fn.postLike = function() { if (jQuery(this).hasClass(‘done’)) { return false; } else { $(this).addClass(‘done’); var id = $(this).data(“id”), action = $(this).data(‘action’), rateHolder = jQuery(this).children(‘.count’); var ajax_data = { action: “ality_ding”, um_id: id, um_action: action }; $.post(wpl_ajax_url, ajax_data, function(data) { jQuery(rateHolder).html(data); }); return false; } }; $(document).on(“click”, “.favorite”, function() { $(this).postLike(); }); 2、打开主题中的functions.php文件,并在最后一个?>前面添加以下代码: // 点赞 add_action(‘wp_ajax_nopriv_ality_ding’, ‘ality_ding’); add_action(‘wp_ajax_ality_ding’, ‘ality_ding’); function ality_ding(){ global $wpdb,$post; $id = $_POST[“um_id”]; $action = $_POST[“um_action”]; if ( $action == ‘ding’){ $bigfa_raters = get_post_meta($id,’ality_like’,true); $expire = time() + 99999999; $domain = ($_SERVER[‘HTTP_HOST’] != ‘localhost’) ? $_SERVER[‘HTTP_HOST’] : false; setcookie(‘ality_like_’.$id,$id,$expire,’/’,$domain,false); if (!$bigfa_raters || !is_numeric($bigfa_raters)) { update_post_meta($id, ‘ality_like’, 1); } else { update_post_meta($id, ‘ality_like’, ($bigfa_raters + 1)); } echo get_post_meta($id,’ality_like’,true); } die; } 3、打开主题中的header.php文件,找到以下代码 <?php if (is_single() || is_page() ) { ?> 然后在它下面添加以下代码 /* */</p> </li> <li>var wpl_ajax_url = “http://你的域名/wp-admin/admin-ajax.php”;</li> <li contentScore="0"> <p>/* */ PS:一定要记得更换以上代码中的“你的域名”为真正的域名哦。 4、打开Uniteinc social.php文件,把所有代码替换为以下代码: ” title=”好文!一定要点赞!” class=”favorite<?php if(isset($_COOKIE[‘ality_like_’.$post->ID])) echo ‘ done’;?>”>赞 <?php if( get_post_meta($post->ID,’ality_like’,true) ){ echo get_post_meta($post->ID,’ality_like’,true); } else { echo ‘0’; }?> 赏 分享 5、打开主题文件中的style.css文件,找到以下代码: .shang-p { position: absolute; left: 102px; top:-3px; background: #7ab951; width: 40px; height: 40px; font-size: 16px; line-height: 30px; border: 4px solid #fff; border-radius: 40px; text-align:center; } 直接替换为以下代码: .shang-p a { position: absolute; left: 102px; top:-3px; color: #111; font-weight:blod; background: #7ab951; width: 40px; height: 40px; font-size: 16px; line-height: 30px; border: 4px solid #fff; border-radius: 40px; text-align:center; } .shang-p a:hover { color: #111; } 即可。 到了这里,Unite 3.0主题已经完美移植了知更鸟主题中的点赞和分享按钮。如果没有安装Font Awesome 4 Menus插件,那么赞和分享前面的个性化图标将无法显示。如果安装有,那么整个点赞分享出来的效果就会跟本站的一模一样的,不需要设置任何东西,如下图所示: PS:为什么只分享Unite主题的移植而不分享Three主题?那是因为近期有计划更新Three主题,到时候将会直接把它变成这个样式,所以就懒得再分享了。而且这两个主题比较相近,看得懂本文的,一定也可以折腾出Three主题的点赞和分享样式的,我相信你们的能力。 评论链接 在其他网站上分享 更多分享选项...
推荐帖
创建账户或登录以发表评论
您需要成为会员才能发表评论
创建一个帐户
在我们的社区注册一个新账户。很简单!
注册新账户登入
已有账户?在此登录
立即登录