纯代码实现wordpress顶踩功能

很多网站文章页底部都有顶踩按钮，这是用于对文章的评价，这个功能对网站的活跃有很大的帮助，有很多插件可以实现这个功能，但很多人不喜欢用插件，那怎么用代码手工添加这个功能呢？下面歪主题就把方法告诉大家吧！

声明：代码上从某主题分离下载的，非自创

效果演示

功能实现方法

首先还上先将一下代码放入主题函数文件最后的?>前 , 函数文件一般为functions.php文件

//拍砖
 add_action('wp_ajax_nopriv_junke_pz', 'junke_pz');
 add_action('wp_ajax_junke_pz', 'junke_pz');
 function junke_pz() {
 global $wpdb, $post;
 $id = $_POST["um_id"];
 $action = $_POST["um_action"];
 if ($action == 'cai') {
 $bigfa_raters = get_post_meta($id, 'junke_cai', true);
 $expire = time() + 3600;
 $domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false;
 setcookie('junke_cai_' . $id, $id, $expire, '/', $domain, false);
 if (!$bigfa_raters || !is_numeric($bigfa_raters)) {
 update_post_meta($id, 'junke_cai', 1);
 } else {
 update_post_meta($id, 'junke_cai', ($bigfa_raters + 1));
 }
 echo get_post_meta($id, 'junke_cai', true);
 }
 die;
 }
 //点赞
 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() + 3600;
 $domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false;
 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;
 }

前端调用

接着，在需要调用的文件里加入以下代码

<div class="post-like">
 <a href="javascript:;" data-action="ding" data-id="<?php the_ID(); ?>" class="favorite<?php if(isset($_COOKIE['bigfa_ding_'.$post->ID])) echo ' done';?>" <?php if(isset($_COOKIE['bigfa_ding_'.$post->ID])){echo 'title="请勿重复点赞，每个小时内只能点赞一次！"';} else {echo 'title="感谢您的点赞！"';}?>><i class="fa fa-heart"></i>点赞 (<span class="count"><?php if( get_post_meta($post->ID,'bigfa_ding',true) ){
 echo get_post_meta($post->ID,'bigfa_ding',true);
 } else {
 echo '0';
 }?></span>)</a><span class="or">or</span><a class="paizhuan" href="javascript:;" data-action="cai" data-id="<?php the_ID(); ?>" class="paizhuan post-paizhuan<?php if(isset($_COOKIE['junke_cai_'.$post->ID])) echo ' done';?>" <?php if(isset($_COOKIE['junke_cai_'.$post->ID])){echo 'title="您已经拍过砖了！"';} else {echo 'title="你不满意？ 我K你！"';}?>><i class="fa fa-heart-o"></i>拍砖 (<span class="count"><?php if( get_post_meta($post->ID,'junke_cai',true) ){
 echo get_post_meta($post->ID,'junke_cai',true);
 } else {
 echo '0';
 }?></span>)</a>
 </div>

js

在接下来就上强大的js了，在全局js文件中 加入一下代码

$.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();
});

$.fn.postcai = 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: "junke_pz",
um_id: id,
um_action: action
};
$.post("/wp-admin/admin-ajax.php", ajax_data,
function(data) {
$(rateHolder).html(data);
});
return false;
}
};
$(document).on("click", ".paizhuan",
function() {
$(this).postcai();
});

if( $('.paizhuan').length ){
$('.paizhuan').on('click', function(){
var _this = $(this)
if( !$('#paizhuan').length ){
$('body').append('
<div class="modal fade" id="paizhuan" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" style="margin-top:200px;width:340px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">'+ _this.attr('title') +'</h4>
</div>
<div class="modal-body" style="text-align:center">
<img style="max-width:100%" src="/logo.png">
</div>
</div>
</div>
</div>
')
}
$('#paizhuan').modal()
})
}

if( $('.favorite').length ){
$('.favorite').on('click', function(){
var _this = $(this)
if( !$('#favorite').length ){
$('body').append('
<div class="modal fade" id="favorite" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" style="margin-top:200px;width:340px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">'+ _this.attr('title') +'</h4>
</div>
<div class="modal-body" style="text-align:center">
<img style="max-width:100%" src="/logo.png">
</div>
</div>
</div>
</div>
')
}
$('#favorite').modal()
})
}
if( $('.dengxiang').length ){
$('.dengxiang').on('click', function(){
$('#dengxiang').remove();
var imgReady = (function () {
var list = [], intervalId = null,

// 用来执行队列
tick = function () {
var i = 0;
for (; i < list.length; i++) {
list[i].end ? list.splice(i--, 1) : list[i]();
};
!list.length && stop();
},

// 停止所有定时器队列
stop = function () {
clearInterval(intervalId);
intervalId = null;
};

return function (url, ready, load, error) {
var onready, width, height, newWidth, newHeight,
img = new Image();

img.src = url;

// 如果图片被缓存，则直接返回缓存数据
if (img.complete) {
ready.call(img);
load && load.call(img);
return;
};

width = img.width;
height = img.height;

// 加载错误后的事件
img.onerror = function () {
error && error.call(img);
onready.end = true;
img = img.onload = img.onerror = null;
};

// 图片尺寸就绪
onready = function () {
newWidth = img.width;
newHeight = img.height;
if (newWidth !== width || newHeight !== height ||
// 如果图片已经在其他地方加载可使用面积检测
newWidth * newHeight > 1024
) {
ready.call(img);
onready.end = true;
};
};
onready();

// 完全加载完毕的事件
img.onload = function () {
// onload在定时器时间差范围内可能比onready快
// 这里进行检查并保证onready优先执行
!onready.end && onready();

load && load.call(img);

// IE gif动画会循环执行onload，置空onload即可
img = img.onload = img.onerror = null;
};

// 加入队列中定期执行
if (!onready.end) {
list.push(onready);
// 无论何时只允许出现一个定时器，减少浏览器性能损耗
if (intervalId === null) intervalId = setInterval(tick, 40);
};
};
})();
var _this = $(this)
var _w = parseInt($(window).width());
imgReady(''+%20_this.data('scr')%20+'', function () {
if(this.width >=_w){
this.width = _w;
}
if( !$('#dengxiang').length ){
$('body').append('
<div class="modal fade" id="dengxiang" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" style="margin-top:200px;width:' + this.width + 'px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">'+ _this.attr('title') +'</h4>
</div>
<div class="modal-body" style="text-align:center">
<img style="max-width:100%" src="'+%20_this.data('scr')%20+'">
</div>
</div>
</div>
</div>
')
}
$('#dengxiang').modal()
})
});
}

代码中红色部分可以设置你的logo，页可以加入一点广告哈！自己看着放吧

css

都有了，最后把css样式放入你的全局css中

/*点赞*/

.post-like {
 margin-bottom:30px;
 padding-top: 40px;
 text-align: center;
 text-indent: 0;
 color: #fff;
 text-shadow: none;
 line-height: 26px;
 /*text-indent: 30px;*/
}
.post-like a {
 text-align: center;
 line-height: 26px;
 color: #fff;
 background-color: #39ACE2 !important;
 border-bottom: 1px solid #d6d6d6;
 text-indent: 0;
 cursor: pointer;
 position: relative;
 padding: 8px 40px;
 display: inline-block;
 border: 1px solid #d6d6d6;
 border-radius: 2px;
 font-size: 15px;
}
.post-like a:hover {
 background-color: #0279FF !important;
 border-bottom:1px solid #d6d6d6 !important
}
.post-like a.paizhuan{
 background-color: #888 !important;
}
.post-like a.paizhuan:hover {
 background-color: #555 !important;
}
.post-like .or {
 background: #fff;
 color: #455670;
 display: inline-block;
 padding: 5px 12px;
 font-size: .8725em;
 position: absolute;
 z-index: 2;
 margin: 4px 0 0 -19px;
 border-radius: 100px;
 -webkit-border-radius: 100px;
 text-shadow: none;
 text-align: center;
 text-indent: 0;
 -webkit-border-radius:100px;
 -moz-border-radius:100px;
 -o-border-radius:100px
}
.post-like a.done,.post-like a:hover {
 background-color:#eee;
 color:#E7E7E7;
}
.post-like a.done {
 cursor:not-allowed
}

好了，教程结束，教程写的还算比较明白的吧！按照我提供的方法和代码，一步步做，你就可以看到效果了，有问题可以下方留言