纯代码实现wordpress顶踩功能-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
}

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

纯代码实现wordpress顶踩功能

效果演示

功能实现方法

前端调用

js

css

WordPress代码实现历史上的今天功能

wordpress网站添加客排行最新评论自动排序最前

为WordPress的注册登录页面添加运算验证码

给WordPress 自带的搜索功能添加过滤只搜索文章的标题

WordPress网页粒子背景粒子特效代码分享

非插件实现WordPress彩色背景标签云

为WordPress添加百度分享按钮侧边悬浮固定效果

WordPress纯代码实现“返回顶部、返回底部、评论”效果

评论抢沙发

评论前必须登录！

歪迪资源屋资源福利博客

提供各类真实且有效的福利资源

无价，而且免费

下载WordPress并用于您的站点

最新主题

很高兴本文可以为您带来灵感和帮助！

支付宝扫一扫打赏

微信扫一扫打赏

QQ扫一扫打赏

效果演示

功能实现方法

前端调用

js

css

评论 抢沙发

评论前必须登录！

歪迪资源屋资源福利博客

提供各类真实且有效的福利资源

无价，而且免费

下载WordPress并用于您的站点

最新主题

很高兴本文可以为您带来灵感和帮助！

支付宝扫一扫打赏

微信扫一扫打赏

QQ扫一扫打赏

评论抢沙发