也想出现在这里? 联系我们

WordPress如何使用代码实现文章点赞功能?

作者 : 小编 本文共2483个字,预计阅读时间需要7分钟 发布时间: 2020-11-16 共1.37K人阅读
也想出现在这里? 联系我们

现在很多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。

1. 本站所提供的源码模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: rayer@88.com),我们会及时删除,给您带来的不便,我们深表歉意!
2. 分享目的仅供大家学习和交流,请不要用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布投稿,分享有金币奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务 请大家谅解!
5. 如有链接无法下载、失效或广告,请联系站长,可领回失去的金币,并额外有奖!
6. 如遇到加密压缩包,默认解压密码为"www.zyfx8.cn",如遇到无法解压的请联系管理员!
本站部分文章、资源来自互联网,版权归原作者及网站所有,如果侵犯了您的权利,请及时联系我站删除。免责声明
资源分享吧 » WordPress如何使用代码实现文章点赞功能?

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
织梦模板使用说明
你下载的织梦模板并不包括DedeCMS使用授权,根据DedeCMS授权协议,除个人非盈利站点外,均需购买DedeCMS商业使用授权。购买地址: http://www.desdev.cn/service-dedecms.html

1 条评论

  1. 我是秃头小宝贝

发表评论

Copyright 2015-2020 版权所有 资源分享吧 Rights Reserved. 蜀ICP备14022927号-1
开通VIP 享更多特权,建议使用QQ登录