WordPress代码实现文章点赞功能

tengxunyun cera

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

其实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防止未登录用户重复点赞
		 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。

cera aliyun tengxunyun cloudiplc

相关推荐

WordPress建站常用的文字广告|图片广告和联盟广告代码的使用方法汇总

现在大部分国内#wordpress##主题#都有带有#广告位#的功能,而且也有相关的说明,但是还是有部分#站长#用户不明白怎么使用,下面一起来看看如何自定义自己的文字广告、图片广告和联盟广告等。 文字广告 下面的是最常见的文字广告代码: <a href=”链接地址”>显示的文字</a> 文字链接在新窗口打开的代码: <a href=”链接地址” target=”_blank”>显示的文字</a> 链接添加nofollow的代码: <a href=”链接地址” target=”_blank” rel=”nofollow”>显示的文字</a> 图片广告 下面的是最常见的图片广告代码: <a href=”链接地址”><img src=”图片地址”></a> 图片链接在新窗口打开的代码: <a href=”链接地址” target=”_blank”><img src=”图片地址”></a> 链接添加nofollow的代码: <a href=”链接地址” target=”_blank” rel=”nofollow”><img src=”图片地址”></a> 只显示图片,不加链接的代码: <img src=”图片地址”> 另外大部分联盟广告的代码都是JS代码,包括常见的#百度联盟#、#阿里妈妈#、#谷歌广告#联盟、#京东联盟#、#携程联盟#等等,你只要复制这些联盟广告代码到广告位的输入框中即可。 说明:以上内容收集整理于网络!

WordPress代码实现统计阅读数

经常看到有WordPress站长在到处找统计文章阅读数量的插件,其实一般国内的主题都自带阅读数量统计,国外的就不知道了,我想应该很少有的,毕竟国外的WordPress主题大部分都是非常精简的,比如WordPress官方给的主题。那么想要给自己用的WordPress主题增加一个统计文章阅读数量的功能很困难吗?答案肯定是十分简单,仅仅只需3步即可拥有这个功能。 不过在实现这个功能之前,代码狗必须提醒各位,统计文章阅读数量的功能函数不会被WordPress的对象缓存机制识别,也就是说不会被缓存,加了这个功能会导致页面的sql查询数量增加1次,如果你对查询数量有所要求,还对这个数量的准确性有要求的话,还是建议不要使用了。当然如果你必须要这个功能,但对数量准确性要求不是特别高,那么可以参考memcached缓存将这个数据存在内存中,等它累计10次、20次再写入数据库中,这样如果memcached服务被重启、刷新都将丢失一些阅读量。具体如何选择看诸位自己,这里提供方法,不包括优化。 实现原理 通过WordPress官方提供的add_post_meta方法,将用户自定义字段存储在wp_postmeta表中,在用户需要的时候通过get_post_meta方法获取,需要修改时使用update_post_meta方法修改更新。详细使用方法见:WordPress函数add_post_meta详解 实现方法 在你的主题functions.php文件中插入如下代码:   \\记录文章阅读数量 function _post_views_record() { if (is_singular()) { global $post; $post_ID = $post->ID; if ($post_ID) { $post_views = (int) get_post_meta($post_ID, ‘views’, true); if (!update_post_meta($post_ID, ‘views’, ($post_views + 1))) { add_post_meta($post_ID, ‘views’, 1, true); } } } } 获取文章阅读数量 \\获取文章阅读数量 function _get_post_views($before = ‘阅读(‘, $after = ‘)’) { global $post; …

Yoast SEO|WordPress SEO|优化插件推荐|帮助网站|进行SEO优化

如果你建站使用的是 #WordPress#,比如老唐就是用的 WordPress 建站,并且想要对网站进行#SEO# 优化,那么可以使用一些 WordPress SEO 优化插件。目前老唐也尝试过一些 WordPress SEO 插件,感觉比较好的还是 Yoast SEO 这个插件。设置起来比较方便,而且选项也比较多,但是如果不会设置的话默认设置也已经足够使用,所以推荐我们新手刚接触 SEO 的时候使用。 下载后在后台上传安装,或者直接在后台搜索安装也可以。 Yoast SEO 插件简单设置 其实基本上没有改什么设置,基本都用的#默认#设置。 不过有些设置可以看一下确认一下,比如搜索外观里,标题是否需要强制重写,我们可以重写为自己想要的网站标题,后期更换#主题#也不会影响。 此外,我们主要可能会修改的是搜索外观中的 SEO title 和 Meta description,包括每个文章页和每个独立页面的,一般来说默认也可以,我们有需求可以根据自己的需求进行修改。 如果有需要,我们也可以付费升级高级版,但是一般来说免费版够用了。  

大前端wordpress主题618限时6.8折促销|其中xiu主题218元|热门的dux主题544元

大前端wordpress主题提供还是有多年时间了,同时也是维护时间较长的主题商家,比如14年发布的XIU主题现在还在维护、更新之中,而更早之前的热门wordpress主机D8也是维护之中,只是维护的频率不如DUX等更加热门的主题。在2020年618来临之际,大前端推送了最新的旗下wordpress主题限时6.8折,优惠之后DUX主题544元,XIU主题218元,D8主题168元,TOB主机266元等,相对于平时来说还是比较不错的,有打算需求的用户可以关注一下。 大前端主题不限制域名个人,只要是同一注册信息下的域名均可以使用,可以满足科技博客、个人站、各类图片、摄影展示站、企业站、淘宝客和各种展示站点!目前小七博客使用的就是XIU主题,也是使用期限最长久的一款主题,期间更换几次,最终还是使用这一款,便宜、实惠,可以满足自己的个人需求。 活动地址:大前端官网 活动时间:2020年6月11日-2020年6月18日; 活动内容: 旗下公开发行的wordpress主题6.8折折扣!

微信扫一扫,分享到朋友圈

WordPress代码实现文章点赞功能