WordPress自定义评论模板的写法

发布于 2022.03.26

WordPress的评论模板在主题中相对于其它文件来说我个人认为较难，当然这个也是相对而言，理解到了也就那么回…

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="[sS]*?" href="[sS]*?"#', ' class="signin-loader" href="javascript:;"', $replyText );
                }else{
                  echo preg_replace('# href=[sS]*? 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提交评论以及移动评论框的内容就不写了，比较简单，文章内容有点多了。

类别：WordPress教程、

本文收集自互联网，转载请注明来源。
如有侵权，请联系 wper_net@163.com 删除。

实现效果

需要掌握的内容

开始写模板

创建评论模板文件

需要使用到的WordPress函数

评论表单需要的参数

评论列表

评论输出逻辑

ajax提交评论

猜你喜欢GUESS YOU LIKE

WordPress添加贴吧表情

Windows上配置Nginx+PHP7+WordPress

WordPress静态缓存插件WP Super Cache

WordPress配置WP Super Cache缓存导致不计数的问题

WordPress网站SEO优化

WordPress固定链接修改后出现404

评论 (0)COMMENT