• 注册
  • 个人说明:TA有点懒了,什么都没有写。
    关注 1 粉丝 0 喜欢 0 内容 256
    河南省·郑州市
    聊天 送礼

    新版界面开发进度

    14%
    其实就是啥也没写,只有想法,哈哈
    • 回帖总排行
    • 采纳总排行

    分享精彩给好友

    全部文章 关注:0 内容:1074

    WordPress自定义评论模板的写法【转】

  • 查看作者
  • 打赏作者
  • 拉黑名单
    • WordPress的评论模板在主题中相对于其它文件来说我个人认为较难,当然这个也是相对而言,理解到了也就那么回事。WordPress根本没有难的事儿,难的都是前端设计,所以别问我你的WordPress评论怎么那么难看,我不熟css。下面我就用博客的评论模板为例,讲讲怎么写一个自定义的WordPress评论模板,也不算是自定义,只是自定义了评论列表比最简版的评论模板多点功能罢了。

      WordPress自定义评论模板

      实现效果

      最终的效果就是本文下面的评论效果,评论内容按层级显示,评论时使用js提交,避免刷新页面。限制评论间隔时间,避免重复评论,剔除无汉字评论,屏蔽关键词评论等功能。

      需要掌握的内容

      • css层叠样式掌握。这个是必须的,如果你不想你的评论特别难看的话。
      • PHP语言的简单使用。只需要你能看懂程序代码,知道程序运行逻辑,能打字就行。
      • JavaScript的简单使用。这个是使用原生JavaScript还是jQuery就看你的主题了,如果你的主题没有使用jQuery那么建议使用原生JavaScript,避免新增请求数。
      • WordPress评论相关函数的使用。使用WordPress封装好的评论函数,可以减少很多代码量。

      开始写模板

      创建评论模板文件

      在你的主题目录下创建一个名为comments.php的文件。里面的代码使用判断逻辑大概分为这几个类别。

      1. 评论功能是否开启,未开启直接返回。
      2. 用户是否已登录,已登录输出已登录评论模板,未登录输出未登录评论模板。
      3. 也许你需要必须注册登陆才能评论,可能你只需要输入资料即可评论。
      <?php if ( !comments_open() ) return;
       if ( !is_user_logged_in() ) { 
           if ( get_option('comment_registration'){
               //必须注册登陆才能评论表单
            }
      //未登录表单
      }else{
      //无需登陆即可评论表单
      }
      ?>

      需要使用到的WordPress函数

      • 获取评论数量。这个可以参考WordPress函数comments_number获取评论相关数据。如果你发现不是你想要的数据,你可以使用下面的方法获取评论数。
        $str = "SELECT COUNT(*) FROM $wpdb->comments WHERE comment_post_ID = $post->ID AND comment_approved = '1' AND comment_type = '' AND comment_author_email";
        $count_t = $post->comment_count;
      • is_user_logged_in()用户登录状态判断函数。
      • 后台评论设置获取,get_option(‘comment_registration’)
      • 获取头像函数,WordPress函数get_avatar获取用户gravatar头像
      • 评论查询函数,wp_list_comments
      • 评论分页函数,paginate_comments_links

      评论表单需要的参数

      WordPress的评论数据是以post的方式发送给网站的,下面是一些常用的参数。

      • 评论者姓名:author
      • 评论者邮箱地址:email
      • 评论内容:comment
      • 评论文章或页面id:comment_post_ID
      • 评论所属父评论id:comment_parent
      • 评论者url:url
      • 是否邮件通知:comment_mail_notify
      • 其它自定义参数

      提交评论只需要前面三项即可,其它参数看你需要。评论的表单就根据你需要提交的数据来写,不会的就去扒别人的吧。

      评论列表

      评论模板分为评论表单与评论列表两块,评论表单就是上面的写法,评论列表只需要使用WordPress的函数进行输出即可,如果你需要对评论进行楼层计数的话,可以使用下面的楼层计数器及自定义评论输出。

      <?php
      /**
       * [mo_comments_list description]
       * @param  [type] $comment [description]
       * @param  [type] $args    [description]
       * @param  [type] $depth   [description]
       * @return [type]          [description]
       */
      function mo_comments_list($comment, $args, $depth) {
          $GLOBALS['comment'] = $comment;
      
          global $commentcount, $wpdb, $post;
          if(!$commentcount) { //初始化楼层计数器
      
              $page     = get_query_var('cpage');//获取当前评论列表页码
              $cpp      = get_option('comments_per_page');//获取每页评论显示数量
              $pcs      = get_option('page_comments');//分页开关
              
              $comments = $wpdb->get_results("SELECT * FROM $wpdb->comments WHERE comment_post_ID = $post->ID AND comment_type = '' AND comment_approved = '1' AND !comment_parent");
              $cnt      = count($comments);//获取主评论总数量
      
              if ( get_option('comment_order') === 'desc' ) { //倒序
                  if (!$pcs || ceil($cnt / $cpp) == 1 || ($page > 1 && $page  == ceil($cnt / $cpp))) {
                      $commentcount = $cnt + 1;//如果评论只有1页或者是最后一页,初始值为主评论总数
                  } else {
                      $commentcount = $cpp * $page + 1;
                  }
              }else{ //顺序
                  if( !$pcs ){
                      $commentcount = 0;
                  }else{
                      $page = $page-1;
                      $commentcount = $cpp * $page;
                  }
              }
          }
      
      
          echo '<li '; comment_class(); echo ' id="comment-'.get_comment_ID().'">';
      
          if(!$parent_id = $comment->comment_parent ) {
              echo '<span class="comt-f">#'. (get_option('comment_order') === 'desc'?--$commentcount:++$commentcount) .'</span>';
          }
      
          echo '<div class="comt-avatar">';
              echo _get_the_avatar($user_id=$comment->user_id, $user_email=$comment->comment_author_email);
          echo '</div>';
      
          echo '<div class="comt-main" id="div-comment-'.get_comment_ID().'">';
      
              comment_text();
      
              if ($comment->comment_approved == '0'){
                  echo '<span class="comt-approved">待审核</span>';
              }
      
              echo '<div class="comt-meta"><span class="comt-author">'.get_comment_author_link().'</span>';
                  echo _get_time_ago($comment->comment_date); 
                  if ($comment->comment_approved !== '0'){
                      $replyText = get_comment_reply_link( array_merge( $args, array('add_below' => 'div-comment', 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) );
                      // echo str_replace(' href', ' href="javascript:;" data-href', $replyText ); 
                      if( strstr($replyText, 'reply-login') ){
                        echo preg_replace('# class="[\s\S]*?" href="[\s\S]*?"#', ' class="signin-loader" href="javascript:;"', $replyText );
                      }else{
                        echo preg_replace('# href=[\s\S]*? onclick=#', ' href="javascript:;" onclick=', $replyText );
                      }
                  }
              echo '</div>';
      
          echo '</div>';
      }

      不需要楼层计数就简单多了,参考WordPress获取评论数据函数wp_list_comments详解。输出评论很简单,难的是css。

      评论输出逻辑

      使用WordPress的循环函数逻辑,然后使用回调函数进行自定义输出。

      if ( have_comments() ) { 
      wp_list_comments('type=comment&callback=mo_comments_list');
      }

      上面使用了回调函数mo_comments_list,就是上面的计楼器写一起的自定义评论逻辑。到了这里,你的评论内容应该就能正常输出了,只需要写点css美化下显示效果。

      ajax提交评论

      使用js提交评论,就必须要有评论接口,下面是大前端dux的评论接口,我修复了因为重复评论导致布局错乱问题后的文件,修复办法见WordPress使用ajax提交评论WP_ERROR导致布局错乱

      <?php if ( 'POST' != $_SERVER['REQUEST_METHOD'] ) { header('Allow: POST'); header('HTTP/1.1 405 Method Not Allowed'); header('Content-Type: text/plain'); exit; } require( dirname(__FILE__).'/../../../../wp-load.php' ); nocache_headers(); $comment_post_ID = isset($_POST['comment_post_ID']) ? (int) $_POST['comment_post_ID'] : 0; $post = get_post($comment_post_ID); if ( empty($post->comment_status) ) {
      	do_action('comment_id_not_found', $comment_post_ID);
      	err(__('Invalid comment status.')); // 將 exit 改為錯誤提示
      }
      
      $status = get_post_status($post);
      $status_obj = get_post_status_object($status);
      
      	do_action('pre_comment_on_post', $comment_post_ID);
      
      $comment_author       = ( isset($_POST['author']) )  ? trim(strip_tags($_POST['author'])) : null;
      $comment_author_email = ( isset($_POST['email']) )   ? trim($_POST['email']) : null;
      $comment_author_url   = ( isset($_POST['url']) )     ? trim($_POST['url']) : null;
      $comment_content      = ( isset($_POST['comment']) ) ? trim($_POST['comment']) : null;
      $edit_id              = ( isset($_POST['edit_id']) ) ? $_POST['edit_id'] : null; // 提取 edit_id
      
      
      
      // If the user is logged in
      $user = wp_get_current_user();
      if ( $user->ID ) {
      	if ( empty( $user->display_name ) )
      		$user->display_name=$user->user_login;
      	$comment_author       = esc_sql($user->display_name);
      	$comment_author_email = esc_sql($user->user_email);
      	$comment_author_url   = esc_sql($user->user_url);
      	if ( current_user_can('unfiltered_html') ) {
      		if ( wp_create_nonce('unfiltered-html-comment_' . $comment_post_ID) != $_POST['_wp_unfiltered_html_comment'] ) {
      			kses_remove_filters(); // start with a clean slate
      			kses_init_filters(); // set up the filters
      		}
      	}
      } else {
      	if ( get_option('comment_registration') || 'private' == $status )
      		err('Hi,你必须登录才能发表评论!'); // 將 wp_die 改為錯誤提示
      }
      
      
      $comment_type = '';
      if ( get_option('require_name_email') && !$user->ID ) {
      	if ( 6 > strlen($comment_author_email) || '' == $comment_author )
      		err( '请填写昵称和邮箱!' ); // 將 wp_die 改為錯誤提示
      	elseif ( !is_email($comment_author_email))
      		err( '请填写有效的邮箱地址!' ); // 將 wp_die 改為錯誤提示
      }
      
      if ( '' == $comment_content )
      	err( '请填写点评论!' ); // 將 wp_die 改為錯誤提示
      // 增加: 錯誤提示功能
      
      function err($ErrMsg) {
          header('HTTP/1.1 405 Method Not Allowed');
          echo $ErrMsg;
          exit;
      }
      
      $comment_parent = isset($_POST['comment_parent']) ? absint($_POST['comment_parent']) : 0;
      $commentdata = compact('comment_post_ID', 'comment_author', 'comment_author_email', 'comment_author_url', 'comment_content', 'comment_type', 'comment_parent', 'user_ID');
      // 增加: 檢查評論是否正被編輯, 更新或新建評論
      if ( $edit_id ){
      $comment_id = $commentdata['comment_ID'] = $edit_id;
      wp_update_comment( $commentdata );
      } else {
      $comment_id = wp_new_comment( $commentdata,true);
      if(is_wp_error($comment_id)){
      	err( '重复评论' );
      }
      }
      $comment = get_comment($comment_id);
      if ( !$user->ID ) {
      	$comment_cookie_lifetime = apply_filters('comment_cookie_lifetime', 30000000);
      	setcookie('comment_author_' . COOKIEHASH, $comment->comment_author, time() + $comment_cookie_lifetime, COOKIEPATH, COOKIE_DOMAIN);
      	setcookie('comment_author_email_' . COOKIEHASH, $comment->comment_author_email, time() + $comment_cookie_lifetime, COOKIEPATH, COOKIE_DOMAIN);
      	setcookie('comment_author_url_' . COOKIEHASH, esc_url($comment->comment_author_url), time() + $comment_cookie_lifetime, COOKIEPATH, COOKIE_DOMAIN);
      }
      
      $comment_depth = 1;   //为评论的 class 属性准备的
      $tmp_c = $comment;
      while($tmp_c->comment_parent != 0){
      $comment_depth++;
      $tmp_c = get_comment($tmp_c->comment_parent);
      }
      //以下是評論式樣, 不含 "回覆". 要用你模板的式樣 copy 覆蓋.
      echo '<li '; comment_class();echo ' id="comment-'.get_comment_ID().'">';
      echo '<span class="comt-f">#</span>';
      //头像
      echo '<div class="comt-avatar">';
      /*global $loguser;
      if( $loguser ){
      	echo '<img src="'.$loguser->avatar.'">';
      }else{*/
      	echo _get_the_avatar($user_id=$comment->user_id, $user_email=$comment->comment_author_email, $src=true);
      // }
      echo '</div>';
      //内容
      echo '<div class="comt-main" id="div-comment-'.get_comment_ID().'">';
      	echo str_replace(' src=', ' data-src=', convert_smilies(get_comment_text()));
      	echo '<div class="comt-meta"><span class="comt-author">'.get_comment_author_link().'</span>';
          echo '<time>'._get_time_ago($comment->comment_date).'</time>'; 
      	echo '</div>';
          if ($comment->comment_approved == '0'){
            echo '<span class="comt-approved">待审核</span>';
          }
      echo '</div>';

      这个接口文件是大前端的,里面使用了大前端dux主题的函数,拿去用的时候记得替换为自己的函数。

      JavaScript提交评论以及移动评论框的内容就不写了,比较简单,文章内容有点多了。

      你需要登录,才能进行发帖操作