很多网站文章页底部都有顶踩按钮,这是用于对文章的评价,这个功能对网站的活跃有很大的帮助,有很多插件可以实现这个功能,但很多人不喜欢用插件,那怎么用代码手工添加这个功能呢?下面歪主题就把方法告诉大家吧!
声明:代码上从某主题分离下载的,非自创
效果演示
功能实现方法
首先还上先将一下代码放入主题函数文件最后的?>
前 , 函数文件一般为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 }
好了,教程结束,教程写的还算比较明白的吧!按照我提供的方法和代码,一步步做,你就可以看到效果了,有问题可以下方留言
评论前必须登录!
注册