让代码更简单

WordPress代码实现文章点赞功能

重要:本文最后更新于2020-07-03 13:59:30,某些文章具有时效性,若有错误或已失效,请在下方留言或联系代码狗

这篇是群员定制文章,哈哈哈,开玩笑,正好以前没写,趁群员提起需要我就顺手写了。WordPress的文章点赞功能很多主题都有,我知道的国产售卖的主题几乎都有,也有很多这类的插件,用插件很多“大佬”都说不好,在你没有修改代码能力前提下,使用插件是最快最简单让你拥有文章点赞功能的方式,不过使用插件免不了会给你多增加几个http请求,比如样式、js等等。

WordPress代码实现文章点赞功能

WordPress代码实现文章点赞功能

其实WordPress文章点赞功能很简单,与WordPress文章阅读数量统计功能一样,都是对数据的一种保存读取操作而已。只是相对于WordPress文章阅读数量统计来说,点赞功能的实现稍微复杂一点,因为需要和前端交互,我们一般采用ajax进行无刷新交互操作,按照下面的步骤一起来实现一下,实现代码来自大前端dux主题功能部分修改,大品牌代码质量有保证。

WordPress代码实现文章点赞功能实现步骤

用户需要点击按钮才能实现点赞操作,这里需要准备几个东西。第一个就是点赞用的按钮,按钮的样式大家自己选,注意设置一个class名称,后面ajax交互时需要使用。第二个就是保存点赞数量与读取点赞数量的操作方法了,保存读取这个东西我们可以把它写成接口,方便我们前端ajax调用。这个接口可能有朋友不会写,没关系,我会将大前端DUX主题的接口放在文章末尾,需要的直接下载下来按照本文教程即可实现。

将文章末尾的接口文件放入主题目录下的action目录中,没有的自己建立个文件夹即可。

在主题functions.php文件中写入输出点赞按钮功能代码,如下:

复制
<?php  
//点赞
function hui_get_post_like($class='', $pid='', $text=''){
    $pid = $pid ? $pid : get_the_ID();
    $text = $text ? $text : __('赞', 'haoui');
    $like = get_post_meta( $pid, 'like', true );
    if( hui_is_my_like($pid) ) {
        $class .= ' actived';
    }
    return '<a href="javascript:;" etap="like" class="'.你的css.'" data-pid="'.$pid.'">点赞'.$text.'('.($like ? $like : 0).')</a>';
}
?>

然后在文章结束地方,或者你需要输出点赞数据的地方,写上如下代码

复制
<?php  echo hui_get_post_like($class='post-like action action-like');  ?>

这样就会生成一个带有文章id号的点赞按钮,当然,你也可以不用在functions.php文件中写输出点赞按钮的方法,直接写在文章页模板single.php中也是一样的,然后我们使用jQuery对其进行ajax操作发送post请求,请求接口文件添加点赞数量。jQuery代码如下:

复制
//点赞
	$('.你的点赞按钮class名称').on('click', function(e){
		var _ta=$(this)
		 var pid = _ta.attr('data-pid')
		 var islike=getCookie(pid+'like')//保存cookies防止未登录用户重复点赞
                 var checklike=_ta.hasClass('actived');//样式验证重复点赞
		 if(islike==1) {return alert('你已赞!')}else{
		  $.ajax({
                url: '你的主题路径/action/like.php', //接口文件地址,文末有
                type: 'POST',
                dataType: 'json',
                data: {
                    key: 'like',
                    pid: pid
                },
                success: function(data, textStatus, xhr) {
                    if (data.error) return false;
                    _ta.toggleClass('actived')
                    _ta.find('span').html(data.response)
		    var time=24*60*30;//设置cookies过期时间
		    setCookie(pid+'like',1,time)//设置cookies
					 
                }
            });
		 }
    });

JavaScript操作cookies代码功能方法:

复制
//取cookies
function getCookie(cookieName){  
        var cookieValue="";  
        if (document.cookie && document.cookie != '') {   
            var cookies = document.cookie.split(';');  
            for (var i = 0; i < cookies.length; i++) {   
                 var cookie = cookies[i];  
                 if (cookie.substring(0, cookieName.length + 2).trim() == cookieName.trim() + "=") {  
                       cookieValue = cookie.substring(cookieName.length + 2, cookie.length);   
                       break;  
                 }  
             }  
        }   
        return cookieValue;  
    }
//设置cookies
function setCookie(name, value, liveMinutes) {  
	if (liveMinutes == undefined || liveMinutes == null) {
		liveMinutes = 60 * 2;
	}
	if (typeof (liveMinutes) != 'number') {
		liveMinutes = 60 * 2;//默认120分钟
	}
	var minutes = liveMinutes * 60 * 1000;
	var exp = new Date();
	exp.setTime(exp.getTime() + minutes + 8 * 3600 * 1000);
	//path=/表示全站有效,而不是当前页
	document.cookie = name + "=" + value + ";path=/;expires=" + exp.toUTCString();
}

到此,WordPress文章点赞功能完成了,具体效果如本站的点赞功能,虽然对未登录用户的验证有些薄弱,但也只能做到如此了,反正不是每个用户都知道清理cookies。

WordPress文章点赞接口下载
免费下载提取码:fcu4

感觉很棒!可以赞赏支持我哟~

636 打赏

评论 (6)

登录后评论
不如直接分享你现在网站上的点赞代码呢。。
大bug,可以无限点赞。
额...忘了写样式验证,在cookie无效时会出现无限点赞,比如Safari浏览器中。
刷新后还是可以点赞~
什么浏览器
感谢分享
QQ咨询 邮件咨询 狗哥推荐