NIUBI
wordpress教程

WordPress 自定义评论模板的写法

9个月前/ 29/ / WP爱好者/ 已收录/
导语: WordPress 的评论模板在主题中相对于其它文件来说我个人认为较难,当然这个也是相对而言,理解到了也就那么回事。WordPress 根本没有难的事儿,难的都是前端设计,所以别问我你的 WordPress 评论怎么那么难看,我不熟 css。下面我就用代码狗博客的评论模板为例,讲讲怎么写一个自定义的 WordPress 评论模板,也不算是自定义,只是自定义了评论列表比最简版的评论模板多点功能罢了。

WordPress 的评论模板在主题中相对于其它文件来说我个人认为较难,当然这个也是相对而言,理解到了也就那么回事。WordPress 根本没有难的事儿,难的都是前端设计,所以别问我你的 WordPress 评论怎么那么难看,我不熟 css。下面我就用 WP 爱好者博客的评论模板为例,讲讲怎么写一个自定义的 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 提交评论以及移动评论框的内容就不写了,比较简单,文章内容有点多了。

点点赞赏,手留余香

还没有人赞赏,快来当第一个赞赏的人吧!
admin给Admin打赏
×
予人玫瑰,手有余香
  • 2
  • 5
  • 10
  • 20
  • 50
2
支付
收藏 0 海报

版权归属:本文为原创文章,版权归 所有

本文链接:( 欢迎分享本文,转载请保留出处 )

免责声明:如发现本站有涉嫌抄袭侵权/违法违规的内容,请邮件/留言反馈,一经查实本站将立刻删除!

<< 上一篇

2020-05-29

下一篇 >>

2020-05-29

全部评论( 1 条 )
    最新评论
  1. ykkcom
    ykkcom 广东省广州市 电信

    看看怎么样

    沙发 2020-05-31 13:46
扫一扫二维码分享