WordPress的评论模板在主题中相对于其它文件来说我个人认为较难，当然这个也是相对而言，理解到了也就那么回事。WordPress根本没有难的事儿，难的都是前端设计，所以别问我你的WordPress评论怎么那么难看，我不熟css。下面我就用代码狗博客的评论模板为例，讲讲怎么写一个自定义的WordPress评论模板，也不算是自定义，只是自定义了评论列表比最简版的评论模板多点功能罢了。
WordPress自定义评论模板
实现效果
最终的效果就是本文下面的评论效果，评论内容按层级显示，评论时使用js提交，避免刷新页面。限制评论间隔时间，避免重复评论，剔除无汉字评论，屏蔽关键词评论等功能。
需要掌握的内容
- css层叠样式掌握。这个是必须的，如果你不想你的评论特别难看的话。
- PHP语言的简单使用。只需要你能看懂程序代码，知道程序运行逻辑，能打字就行。
- JavaScript的简单使用。这个是使用原生JavaScript还是jQuery就看你的主题了，如果你的主题没有使用jQuery那么建议使用原生JavaScript，避免新增请求数。
- WordPress评论相关函数的使用。使用WordPress封装好的评论函数，可以减少很多代码量。
开始写模板
创建评论模板文件
在你的主题目录下创建一个名为comments.php的文件。里面的代码使用判断逻辑大概分为这几个类别。
- 评论功能是否开启，未开启直接返回。
- 用户是否已登录，已登录输出已登录评论模板，未登录输出未登录评论模板。
- 也许你需要必须注册登陆才能评论，可能你只需要输入资料即可评论。
复制
<?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提交评论以及移动评论框的内容就不写了，比较简单，文章内容有点多了。
评论 （7）
狗哥 文章评论的验证码这个咋加NE ?