给wordpress网站 CMS主题添加文章顶踩投票功能(3)：前台页面调用

前面2章我们介绍了WordPress主题激活后自动新建数据表以及插入和调用函数，这些只是把用户的点击投票记入到数据库中，并没有在前台显示出来。要想在前台的文章页面显示用户的投票数（如下图），我们还要为前台页面添加调用。就一起来看看吧。

第一，添加前台调用代码 。

在主题的single.php文件的loop循环中添加如下代码：

<span class="vote_up" id="<?php echo 'vote_up'.$post->ID;?>">
<a href="javascript:void(0);" rel="<?php echo 'up_',$post->ID;?>">
<span id="<?php echo 'vup'.$post->ID;?>">
<?php echo get_post_vote($post->ID,'up');?>
</span>
</a> 顶
</span>
<span class="vote_down" id="<?php echo 'vote_down'.$post->ID;?>">
<a href="javascript:void(0);" rel="<?php echo 'down_'.$post->ID;?>">
<span id="<?php echo 'vdown'.$post->ID;?>">
<?php echo get_post_vote($post->ID,'down');?>
</span>
</a> 踩
</span>

这2段代码，一个是调用用户“顶”的数据，一个是调用用户的“踩”的数据。这里就用到了我们上一章添加的调用函数get_post_vote()。

[baidu2]

第二、添加JS代码。

在主题文件夹下的js文件夹里添加一个dingcai.js 的JS文件，在这个dingcai.js 文件中添加如下JS代码：

/**
获取Cookie ，
name cookie名称
*/
function getCookie(name) {
var start = document.cookie.indexOf( name + "=" );
var len = start + name.length + 1;
if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) )
return null;
if ( start == -1 )
return null;
var end = document.cookie.indexOf( ';', len );
if ( end == -1 )
end = document.cookie.length;
return unescape( document.cookie.substring( len, end ) );
}
function ashu_isCookieEnable() {
var today = new Date();
today.setTime( today.getTime() );
var expires_date = new Date( today.getTime() + (1000 * 60) );
document.cookie = 'ashu_cookie_test=test;expires=' + expires_date.toGMTString() + ';path=/';
var cookieEnable = (getCookie('ashu_cookie_test') == 'test') ? true : false;
//document.cookie = 'ludou_cookie_test=;expires=Fri, 3 Aug 2001 20:47:11 UTC;path=/';
return cookieEnable;
}
jQuery(document).ready(function($) {
var ashu_token = 1;
$('.vote_up a').click(function(){
//检查浏览器是否启用cookie功能
if( !ashu_isCookieEnable() ) {
alert("很抱歉，您不能给本文投票！");
return;
}
if( ashu_token != 1 ) {
alert("您的鼠标点得也太快了吧？！");
return false;
}
ashu_token = 0;
//获取投票a标签中的rel值
var full_info = $(this).attr( 'rel' );
var arr_param = full_info.split( '_' ); //以字符"_"分割
//发起ajax
$.ajax({
url:ajax_url, //ajax地址
type:'POST',
//请求的参数包括action rating postid三项
data:'action=vote_post&rating=' + arr_param[ 0 ] + '&postid=' + arr_param[ 1 ],
//返回数据
success:function(results){
if(results=='n'){
alert('评价失败');
ashu_token = 1;
}
if (results=='y'){
//如果成功，给前台数据加1
var upd_vd = 'vup' + arr_param[ 1 ];
$('#'+upd_vd).text(parseInt($("#"+upd_vd).text())+1);
ashu_token = 1;
}
if (results=='h'){
ashu_token = 1;
alert('已经发表过评价了');
}
if (results=='e'){
ashu_token = 1;
alert('评价失败');
}
}
});
});
$('.vote_down a').click(function(){
if( !ashu_isCookieEnable() ) {
alert("很抱歉，您不能给本文投票！");
return;
}
if(ashu_token != 1) {
alert("您的鼠标点得也太快了吧？！");
return false;
}
ashu_token = 0;
var full_info = $(this).attr( 'rel' );
var arr_param = full_info.split( '_' );
$.ajax({
url:ajax_url,
type:'POST',
data:'action=vote_post&rating=' + arr_param[ 0 ] + '&postid=' + arr_param[ 1 ],
success:function(results){
if(results=='n'){
alert('评价失败');
ashu_token = 1;
}
if (results=='y'){
var upd_vd = 'vdown' + arr_param[ 1 ];
$("#"+upd_vd).text(parseInt($("#"+upd_vd).text())+1);
ashu_token = 1;
}
if (results=='h'){
ashu_token = 1;
alert('已经发表过评价了');
}
if (results=='e'){
ashu_token = 1;
alert('发生未知错误');
}
}
});
});
});

这段JS代码会获取用户点击的cookie。

第三、添加JS调用代码。

在主题的header.php文件的</head>标签前添加JS调用代码，如下：

<script src="<?php echo get_template_directory_uri();?>/js/jquery-1.4.4.js"></script>
<script type="text/javascript">var ajax_url = '<?php echo admin_url(); ?>/admin-ajax.php';</script>
<script src="<?php echo get_template_directory_uri();?>/js/dingcai.js"></script>

这里的jquery-1.4.4.js文件可以到网上下载一个，版本不限，可以是jquery的任意版本，如jquery.js、jquery.1.7.2.js 等。

第四、添加后台处理函数。

以前我们的ajax请求地址直接是网站页码地址，即调用另一个php文件来处理的。而此处我们的ajax请求地址是类似wanlimm.com/wp-admin/admin-ajax.php， 即调用wordpress自带的php文件，使用这个地址来处理ajax请求，需要在请求中有action参数，然后在functions.php文件中添加如下php代码，即可处理ajax的请求（注：执行完请求输出内容之后，添加die函数结束）。

add_action("wp_ajax_vote_post", "add_votes_options");
add_action("wp_ajax_nopriv_vote_post", "add_votes_options");
function add_votes_options() {
if( isset($_POST['action']) && ($_POST['action'] == 'vote_post') ){
$postid = (int)$_POST['postid'];
if( !$postid ){
echo 'e'; //输出error
die(0);
}
//cookie中是否已经存在投票数据
$voted = $_COOKIE["smzdm_voted_".$postid];
if( $voted ){
echo 'h'; //输出have
die(0);
}
$ip = $_SERVER['REMOTE_ADDR'];//ip
$rating = $_POST['rating']; //投票内容
//判断用户是否登录
if( is_user_logged_in() ){
global $wpdb, $current_user;
get_currentuserinfo();
$uid = $current_user->ID;
}else{
$uid='';
}
if($rating=='up'){
$rating='up';
}else{
$rating='down';
}
//添加数据
$voted = add_vote($postid,$uid,$ip,$rating);
if($voted=='y'){
//设置cookie
setcookie("ashu_voted_" . $postid,$rating, time() + 3000000, '/');
echo 'y';//输出yes
die(0);
}
if($voted=='h'){
//设置cookie
setcookie("ashu_voted_" . $postid,$rating, time() + 3000000, '/');
echo 'h';
die(0);
}
if($voted=='e'){
echo 'n';//输出no
die(0);
}
}else{
echo 'e';//输出eroor
}
die(0);
}

通过上面这几步，我们就完成了WordPress主题添加顶踩投票功能，效果如上图。要想达到上图的效果，还要为顶踩添加CSS样式代码。

第五、CSS样式代码：

/* 文章顶踩 */
.vote_up{ float:right; background:no-repeat url("/wp-content/themes/wanlimm/images/ding.gif") 0 50%; }
.vote_up:hover{ background:no-repeat url("/wp-content/themes/wanlimm/images/ding.gif"); }
.vote_up a { padding-left:16px; color:#FF0000 !important; font-weight:600; }
.vote_up a:hover { color:#3300CC !important; text-decoration:none; }
.vote_down{ float:right; background:no-repeat url("/wp-content/themes/wanlimm/images/cai.gif") 0 50%;; margin:0 20px;}
.vote_down:hover{ background:no-repeat url("/wp-content/themes/wanlimm/images/cai.gif"); }
.vote_down a { padding-left:18px; color:#FF0000 !important; font-weight:600; }
.vote_down a:hover { color:#3300CC !important; text-decoration:none; }