WordPress文章点赞功能纯代码实现方法

2020-03-24 0 383 WordPress教程 百度已收录
首页 WordPress教程 WordPress文章点赞功能纯代码实现方法

WordPress文章点赞功能现在几乎是每个WordPress博客必不可少的功能之一了。

很多人都不懂这个文章点赞该怎么实现,为了实现功能而去找WordPress文章点赞插件,功能丰富的WordPress点赞插件不少,但是因为这么个小功能使用一个插件,有点不太好,也说不上哪里不好,反正主题君觉得不好。

今天主题君分享一种纯代码实现WordPress文章点赞功能功能。

第一步:添加功能代码

// AJAX点赞
function dotGood()
{
	global $wpdb, $post;
	$id = $_POST["um_id"];
	if ($_POST["um_action"] == 'topTop') {
		$specs_raters = get_post_meta($id, 'dotGood', true);
		$expire = time() + 99999999;
		$domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false; // make cookies work with localhost
		setcookie('dotGood_' . $id, $id, $expire, '/', $domain, false);
		if (!$specs_raters || !is_numeric($specs_raters)) update_post_meta($id, 'dotGood', 1);
		else update_post_meta($id, 'dotGood', ($specs_raters + 1));
		echo get_post_meta($id, 'dotGood', true);
	}
	die;
}

add_action('wp_ajax_nopriv_dotGood', 'dotGood');
add_action('wp_ajax_dotGood', 'dotGood');

首先把上面代码复制到主题的 functions.pnp 文件内。

第二部:添加JS代码

//点赞
$.prototype.postLike = function () {
	if ($(this).hasClass('done')) {
		UIkit.notification({
			message: '<i class="iconfont icon-icon-test30"></i> 您已经点过赞了!!!',
			status: 'warning',
		});
		return false;
	} else {
		$(this).addClass('done');
		var id = $(this).data("id"),
			action = $(this).data('action'),
			rateHolder = $(this).children('.count');
		var ajax_data = {
			action: "dotGood",
			um_id: id,
			um_action: action
		};
		$.post("/wp-admin/admin-ajax.php", ajax_data,
			   function (data) {
			$(rateHolder).html(data);
		});
		return false;
	}
};
$(".dotGood").click(function () {
	$(this).postLike();
});

然后把上面JS脚本代码复制到主题已经引用的JS文件中

第三部:添加文章点赞按钮

<div class="zan ">
<a href="javascript:;" rel="external nofollow"  rel="external nofollow"  data-action="topTop" data-id="<?php the_ID(); ?>" class="dotGood <?php echo isset($_COOKIE['dotGood_' . $post->ID]) ? 'done' : ''; ?>">
<?php echo ($dot_good=get_post_meta($post->ID, 'dotGood', true)) ? $dot_good : '0'; ?>人点赞
</a>
</div>

接下来是添加点赞按钮,把上面代码写进需要添加ajax点赞的文章页面里即可。

第四部:点赞按钮美化

最后是给文章点赞按钮css样式美化,这个看个人需要了,主题君提供一个案例:

.zan {}
.zan a {padding:8px 16px 9px 13px;font-size: 14px;color: #fff;background-color: #fe7f6f;}
.zan a:hover {background-color: #ed1c24}
.zan a:hover {color: #fff}
.zan .count {font-size: 13px;}
.reward {background-color: #f5a754!important}
.zan .done {background-color: #ed1c24!important}

刷新文章页面,看看是不是多了一个点赞的按钮呢? 如果想获取到点赞最多的文章该怎么实现呢?

也不难,下面这篇文章为你详细解答:

WordPress文章点赞量排行文章
WordPress文章点赞功能相信大家已经能够实现了,那么该怎么获取到文章点赞数量、和文章点赞排行文章呢? 这篇WordPress教程为你揭晓...
WordPress文章点赞功能纯代码实现方法

扫码关注wp主题君

精选优质免费WordPress主题模板,分享最新WordPress实用建站教程!

记住我们的网址:ztJun.com

标题:WordPress文章点赞功能纯代码实现方法

分类:WordPress教程

链接:https://www.ztjun.com/1329.html

版权:主题君(ztJun.com)所分享发布内容,部分为网络转载,如有侵权请立即联系我们,我们第一时间删除并致歉!

相关文章

评论 暂无评论
?>