安严中国SEO博客建站教程 | seo地图 | 博客地图

纯代码给WordPress添加文章点赞功能-安严苏州SEO博客
  • 安严网络!苏州SEO推广团队!
  • 提供seo技术学习教程!百度搜索词推广、seo外包服务。
  • 苏州SEO优化博客,分享网站搭建流程/seo技术教程,
  • 上海seo优化知识,网络营销推广,百度seo快排技术等SEO优化技术。
  • 网站seo服务/企业网站搭建/网站托管seo外包,请点这里网站服务

纯代码给WordPress添加文章点赞功能

wordpross建站教程 安严seo 2017-12-17 17:05:41 412次浏览 已收录 0个评论 扫描二维码

网站seo排名的提升离不开用户互动。点赞是现在我们在朋友圈、微博等社交处经常见到的一个互动功能。你想要你的网站也拥有内容点赞功能吗?这篇文章主要跟大家分享了基于使用ajax+自定义字段功能给WordPress添加文字点赞功能的设置和具体代码。

网站文章点赞功能添加

前言

Git主题的文章喜欢点赞功能不错,有人问这个是怎么实现的。今天把具体的代码整理了一下。希望能帮到大家添加网站功能。

点赞功能实现原理

通过自定义字段保存赞数量,通过cookies来禁止重复赞。

点赞功能的代码部署

将下面代码添加进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;
}

将以下代码扔进footer.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 class="favorite<?php if(isset($_COOKIE['bigfa_ding_'.$post->ID]))
echo ' done';?>" data-action="ding" data-id="<?php the_ID(); ?>">喜欢
<!--?php if( get_post_meta($post->ID,'bigfa_ding',true) ){ echo get_post_meta($post->ID,'bigfa_ding',true); } 
else { echo '0'; }?-->
</a>
</div>

现在是不是就已经设置部署好了喃?还差最后一步。现在的效果还不好看,再添加一段代码就好了,将这段代码扔进style.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}

好了现在返回看看你的网站吧!在各个页面是不是神奇的出现了点赞功能。


苏州SEO博客版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:纯代码给WordPress添加文章点赞功能:https://www.feiheseo.cn/jianzhan/wordpross/769.html
喜欢 (5)
[感谢支持]
分享 (0)
安严seo
关于作者:
2017年入行的一个网站seo优化技术小白。单身也很宅。没有长出倾国倾城的容貌但也迷住万千女人的心;没有拥有富可敌国的财富但也渴望征服世界的经济!

您必须 登录 才能发表评论!