Unite3.0主题完美移植知更鸟点赞分享样式教程

最近，一直都有博主问到如何将文章页面中的“朕要赏赐”和“真要分享”更改为类似知更鸟Begin主题的点赞分享样式。其实，对于这种需求动手能力强的博主自己就可以解决了，不过为了让不太会动手折腾的博主也能多一个选择，所以今天特意将Unite3.0主题移植知更鸟点赞分享样式的详细过程分享给大家。

一、懒人移植方法（适合未修改过Unite主题的方法）

只需下载【Unite3.0主题移植知更鸟点赞分享样式文件】，解压后按以下要求覆盖更新即可。

下载地址

1、script.js文件直接拷贝到Unite\js\覆盖更新。

2、social.php文件直接拷贝到Unite\inc\覆盖更新。

3、functions.php、header.php和style.css文件直接拷贝到Unite\覆盖更新。

二、自己动手折腾代码（适合修改过Unite主题的方法）

1、打开Unite\js\ script文件，在最后面添加以下代码：

1. // 点赞

2. $.fn.postLike = function() {

3. if (jQuery(this).hasClass('done')) {

4. return false;

5. } else {

6. $(this).addClass('done');

7. var id = $(this).data("id"),

8. action = $(this).data('action'),

9. rateHolder = jQuery(this).children('.count');

10. var ajax_data = {

11. action: "ality_ding",

12. um_id: id,

13. um_action: action

14. };

15. $.post(wpl_ajax_url, ajax_data,

16. function(data) {

17. jQuery(rateHolder).html(data);

18. });

19. return false;

20. }

21. };

22. $(document).on("click", ".favorite",

23. function() {

24. $(this).postLike();

25. });

2、打开主题中的functions.php文件，并在最后一个?>前面添加以下代码：

1. // 点赞

2. add_action('wp_ajax_nopriv_ality_ding', 'ality_ding');

3. add_action('wp_ajax_ality_ding', 'ality_ding');

4. function ality_ding(){

5. global $wpdb,$post;

6. $id = $_POST["um_id"];

7. $action = $_POST["um_action"];

8. if ( $action == 'ding'){

9. $bigfa_raters = get_post_meta($id,'ality_like',true);

10. $expire = time() + 99999999;

11. $domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false;

12. setcookie('ality_like_'.$id,$id,$expire,'/',$domain,false);

13. if (!$bigfa_raters || !is_numeric($bigfa_raters)) {

14. update_post_meta($id, 'ality_like', 1);

15. }

16. else {

17. update_post_meta($id, 'ality_like', ($bigfa_raters + 1));

18. }

19. echo get_post_meta($id,'ality_like',true);

20. }

21. die;

22. }

3、打开主题中的header.php文件，找到以下代码

1. <?php if (is_single() || is_page() ) { ?>

然后在它下面添加以下代码

1. <script type="text/javascript">

2. /* <![CDATA[ */

3. var wpl_ajax_url = "http:\/\/你的域名\/wp-admin\/admin-ajax.php";

4. /* ]]> */

5. </script>

PS：一定要记得更换以上代码中的“你的域名”为真正的域名哦。

4、打开Unite\inc\ social.php文件，把所有代码替换为以下代码：

1. <div id="social">

2. <div class="social-main">

3. <span class="like">

4. <a href="javascript:;" data-action="ding" data-id="<?php the_ID(); ?>" title="好文！一定要点赞！" class="favorite<?php if(isset($_COOKIE['ality_like_'.$post->ID])) echo ' done';?>"><i class="fa fa-thumbs-up"></i>赞<i class="count">

5. <?php if( get_post_meta($post->ID,'ality_like',true) ){

6. echo get_post_meta($post->ID,'ality_like',true);

7. } else {

8. echo '0';

9. }?></i>

10. </a>

11. </span>

12. <span class="shang-p"><a href="#shang" id="shang-main-p" title="好文！一定要打赏！">赏</a></span>

13. <span class="share-s"><a href="#share" id="share-main-s" title="好文！一定要分享！"><i class="fa fa-share-alt"></i>分享</a></span>

14. <div class="clear"></div>

15. </div>

16. </div>

5、打开主题文件中的style.css文件，找到以下代码：

1. .shang-p {

2. position: absolute;

3. left: 102px;

4. top:-3px;

5. background: #7ab951;

6. width: 40px;

7. height: 40px;

8. font-size: 16px;

9. line-height: 30px;

10. border: 4px solid #fff;

11. border-radius: 40px;

12. text-align:center;

13. }

直接替换为以下代码：

1. .shang-p a {

2. position: absolute;

3. left: 102px;

4. top:-3px;

5. color: #111;

6. font-weight:blod;

7. background: #7ab951;

8. width: 40px;

9. height: 40px;

10. font-size: 16px;

11. line-height: 30px;

12. border: 4px solid #fff;

13. border-radius: 40px;

14. text-align:center;

15. }

16. .shang-p a:hover {

17. color: #111;

18. }

即可。

到了这里，Unite 3.0主题已经完美移植了知更鸟主题中的点赞和分享按钮。如果没有安装Font Awesome 4 Menus插件，那么赞和分享前面的个性化图标将无法显示。如果安装有，那么整个点赞分享出来的效果就会跟本站的一模一样的，不需要设置任何东西，如下图所示：

PS：为什么只分享Unite主题的移植而不分享Three主题？那是因为近期有计划更新Three主题，到时候将会直接把它变成这个样式，所以就懒得再分享了。而且这两个主题比较相近，看得懂本文的，一定也可以折腾出Three主题的点赞和分享样式的，我相信你们的能力。

文章来源：http://yigujin.wang/677.html