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

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

    作者: 分类:wordpress CMS主题制作 点击: 2,120 次
    wordpress CMS主题:ssmay主题

      前面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; }

       



      QQ二维码

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

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.