当前位置:代码狗 > WordPress > WP建站 > 正文

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提交评论以及移动评论框的内容就不写了,比较简单,文章内容有点多了。

感觉很棒!可以赞赏支持我哟~

赞(1) 打赏

评论 2

  1. #1

    可以!
    狗哥 文章评论的验证码这个咋加NE ?

    懂司机评测7个月前 (01-17)回复
    • 我抽空再写篇加验证码的教程。

      daimadog7个月前 (01-17)回复
×

请作者吃根烤肠!

支付宝