WordPress

WordPress文章页实现点赞功能（非插件）

2020-04-21 04:37WordPress

在访问其他WordPress博客的时候，余斗发现不少文章页下面都带有点赞的功能或类似这样的功能：

这个功能虽然对优化意义不大，但是会使博客看起来功能更齐全，以前一直没时间来搞定这个功能，虽然百度一下也能找到不少WordPress的点赞插件，但是余斗最不喜欢加载插件，能自己搞定的都自己搞定，恰好最近一段时间不是很忙，余斗抽空研究了一下这个功能，终于搞定，今天就把教程写出来，希望能帮到有这个需求的用户。

实现点赞功能的原理很简单，就是通过自定义字段来实现保存和调用点赞数量，然后用cookies来禁止重复点赞，具体实现方法为：

一、将以下php代码加入博客当前使用主题的function.php文件中：


	

	add_action('wp_ajax_nopriv_bigfa_like', 'bigfa_like');

	add_action('wp_ajax_bigfa_like', 'bigfa_like');

	function bigfa_like(){

	        global $wpdb,$post;

	        $id = $_POST["um_id"];

	        $action = $_POST["um_action"];

	        if ( $action == 'ding'){

	        $bigfa_raters = get_post_meta($id,'bigfa_ding',true);

	        $expire = time() + 99999999;

	        $domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false; // make cookies work with localhost

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

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

	                update_post_meta($id, 'bigfa_ding', 1);

	        }

	        else {

	                        update_post_meta($id, 'bigfa_ding', ($bigfa_raters + 1));

	                }

	     

	        echo get_post_meta($id,'bigfa_ding',true);

	       

	        }

	       

	        die;

	}

二、将以下js代码放入文章页(single.php)，余斗建议放在底部：


	

	<script type="text/javascript">

	$.fn.postLike = function() {

	    if ($(this).hasClass('done')) {

	        return false;

	    } else {

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

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

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

	        rateHolder = $(this).children('.count');

	        var ajax_data = {

	            action: "bigfa_like",

	            um_id: id,

	            um_action: action

	        };

	        $.post("/wp-admin/admin-ajax.php", ajax_data,

	        function(data) {

	            $(rateHolder).html(data);

	        });

	        return false;

	    }

	};

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

	function() {

	    $(this).postLike();

	});

	</script>

三、在文章页中(single.php )需要显示点赞的地方(一般都是文章正文下面即<?php the_content(); ?>代码下面)加入以下代码：


	

	<div class="post-like">

	                  <a href="javascript:;" data-action="ding" data-id="<?php the_ID(); ?>" class="favorite<?php if(isset($_COOKIE['bigfa_ding_'.$post->ID])) echo ' done';?>">喜欢 <span class="count">

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

	                                        echo get_post_meta($post->ID,'bigfa_ding',true);

	                                  } else {

	                                        echo '0';

	                                  }?></span>

	                </a>

	  </div>

做到这一步其实就实现了WordPress的点赞功能，但是因为没有加样式，是一片空白，余斗稍微做了修饰，把以下代码加入文章页使用的css文件中：


	

	.post-like{text-align:center;padding:10px}

	.post-like a{ background-color:#21759B;border-radius: 3px;color: #FFFFFF;font-size: 12px;padding: 5px 10px;text-decoration: none;outline:none}

	.post-like a.done, .post-like a:hover{background-color:#eee;color:#21759B;}   

	.post-like a.done{cursor:not-allowed}