wordpress CMS主题 微信
  • 全部教程
  • Home > wordpress CMS主题制作 > 给wordpress CMS主题添加文章顶踩投票功能(3):前台页面调用

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

    高时银博客 wordpress CMS主题制作 点击: 1,181 次 0 2
    [文章目录]

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

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

     

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

    在主题的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()。

    ssmay主题

    第二、添加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; }

     


    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201506164408.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    目前还没有评论。赶快来坐沙发吧。

    发表评论