WordPress comments được xây dựng ở file comments.php, file này gọi là comment template. Form comment được đính ở cuối mỗi bài viết, chèn dòng sau đây vào cuối file single.php:

comments_template();   //equal include('comments.php')

Và kết quả bạn bạn nhận được là:

Hiển thị comment form

Copy và chèn đoạn code này trong comments.php. Tất cả các chuỗi như reply, reply to, reply link, nút submit có thể sửa ở biến $args.

$args=array(
  'id_form'           => 'commentform',
  'id_submit'         => 'submit',
  'title_reply'       => __( 'Leave a Reply' ),
  'title_reply_to'    => __( 'Leave a Reply to %s' ),
  'cancel_reply_link' => __( 'Cancel Reply' ),
  'label_submit'      => __( 'Post Comment' ),
 
//display more comment fields with some defaults fields in which.
		'fields'=>$fields, 
 
//Text or HTML to be displayed after the set of comment fields (and before the submit button)
		'comment_notes_after'=>'',
 
//Text or HTML to be displayed before the set of comment form fields if the user is not logged in.
		'comment_notes_before'=>'',
 
//The textarea and the label of comment body. Sửa nội dung theo ý bạn.
   'comment_field'=>'<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>'		
		);
 
//this tag output complete comment form
comment_form($args);

Hiển comment form wordpress cung cấp hàm comment_form. Các thiết lập cài đặt hiển thị cho form như nhãn nút submit, tiêu đề reply, tiêu đề form..được truyền vào hàm. Tuy nhiên bạn thể tách riêng cho phép sửa từng giá trị thông qua sử dụng filters. Xem bài tùy biến nội dung comment form trong wordpress.

– Hiển thị 3 fields mặc định của form bình luận là ‘url’, ’email’, ‘author’

$commenter = wp_get_current_commenter();
$req = get_option( 'require_name_email' );
$aria_req = ( $req ? " aria-required='true'" : '' );
$fields =  array(
 
  'author' =>
    '<p class="comment-form-author"><label for="author">' . __( 'Name', 'domainreference' ) . '</label> ' .
    ( $req ? '<span class="required">*</span>' : '' ) .
    '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) .
    '" size="30"' . $aria_req . ' /></p>',
 
  'email' =>
    '<p class="comment-form-email"><label for="email">' . __( 'Email', 'domainreference' ) . '</label> ' .
    ( $req ? '<span class="required">*</span>' : '' ) .
    '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) .
    '" size="30"' . $aria_req . ' /></p>',
 
  'url' =>
    '<p class="comment-form-url"><label for="url">' . __( 'Website', 'domainreference' ) . '</label>' .
    '<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) .
    '" size="30" /></p>',
);

Ngoài ra có thể custom fields thêm 1 vài trường theo nhu cầu của bạn.

Hiển thị nội dung các comments

Hàm callback hiển thị danh sách comments. Đây là code mẫu của theme twentyten functions.php

< ?php
function twentyten_comment( $comment, $args, $depth ) {
    $GLOBALS['comment'] = $comment;
    switch ( $comment->comment_type ) :
        case '' :
    ?>
    <li <?php comment_class(); ?> id="li-comment-< ?php comment_ID(); ?>">
        <div id="comment-<?php comment_ID(); ?>">
        <div class="comment-author vcard">
            < ?php echo get_avatar( $comment, 40 ); ?>
            < ?php printf( __( '%s <span class="says">says:', 'twentyten' ), sprintf( '<cite class="fn">%s</cite>', get_comment_author_link() ) ); ?>
        </div><!-- .comment-author .vcard -->
        < ?php if ( $comment->comment_approved == '0' ) : ?>
            <em class="comment-awaiting-moderation">< ?php _e( 'Your comment is awaiting moderation.', 'twentyten' ); ?></em>
            <br />
        < ?php endif; ?>
 
        <div class="comment-meta commentmetadata"><a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>">
            < ?php
                /* translators: 1: date, 2: time */
                printf( __( '%1$s at %2$s', 'twentyten' ), get_comment_date('d/m/y'),  get_comment_time('H:m:s') ); ?></a>< ?php edit_comment_link( __( '(Edit)', 'twentyten' ), ' ' );
            ?>
        </div><!-- .comment-meta .commentmetadata -->
 
        <div class="comment-body">< ?php comment_text(); ?></div>
 
        <div class="reply">
            < ?php comment_reply_link( array_merge( $args, array( 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
        </div><!-- .reply -->
    </div><!-- #comment-##  -->
 
    < ?php
            break;
        case 'pingback'  :
        case 'trackback' :
    ?>
    </li><li class="post pingback">
        <p>< ?php _e( 'Pingback:', 'twentyten' ); ?> < ?php comment_author_link(); ?>< ?php edit_comment_link( __( '(Edit)', 'twentyten' ), ' ' ); ?></p>
    < ?php
            break;
    endswitch;
}
?>
</li>

Using hooks

Comment form có 3 fields mặc định là name, email, website URL. Nếu user đã login thì sẽ không nhìn thấy những fields này và chỉ hiện duy nhất textarea để nhập nội dung comment. Tại sao vậy? vì những fields đó được lấy từ thông tin của user không cho người sửa thông tin đó. Đoạn code dưới đây, mình tạo lại fields mặc định bằng cách định nghĩa lại giá trị field trong mảng $fields và thêm trường phone. Thêm hoặc xóa comments field bởi filter comment_form_default_fields chèn đoạn code sau vào functions.php

add_filter('comment_form_default_fields', 'custom_fields');
function custom_fields($fields) {
 
		$commenter = wp_get_current_commenter();
		$req = get_option( 'require_name_email' );
		$aria_req = ( $req ? " aria-required='true'" : '' );
 
		$fields[ 'author' ] = '<p class="comment-form-author">'.
			'<label for="author">' . __( 'Name' ) . '</label>'.
			( $req ? '<span class="required">*</span>' : '' ).
			'<input id="author" name="author" type="text" value="'. esc_attr( $commenter['comment_author'] ) .
			'" size="30" tabindex="1"' . $aria_req . ' /></p>';
 
		$fields[ 'email' ] = '<p class="comment-form-email">'.
			'<label for="email">' . __( 'Email' ) . '</label>'.
			( $req ? '<span class="required">*</span>' : '' ).
			'<input id="email" name="email" type="text" value="'. esc_attr( $commenter['comment_author_email'] ) .
			'" size="30"  tabindex="2"' . $aria_req . ' /></p>';
 
		$fields[ 'url' ] = '<p class="comment-form-url">'.
			'<label for="url">' . __( 'Website' ) . '</label>'.
			'<input id="url" name="url" type="text" value="'. esc_attr( $commenter['comment_author_url'] ) .
			'" size="30"  tabindex="3" /></p>';
 
		$fields[ 'phone' ] = '<p class="comment-form-phone">'.
			'<label for="phone">' . __( 'Phone' ) . '</label>'.
			'<input id="phone" name="phone" type="text" size="30"  tabindex="4" /></p>';
 
	return $fields;
}

Chú ý: việc định nghĩa lại fields mặc định nếu bạn thấy cần thiết sửa lại HTML vì các trường này đã được định nghĩa rồi, bạn có thể bỏ qua.

Bước tiếp theo, Chúng ta sẽ thêm danh sách radio để đánh giá bài viết. Đây không phải là fields mặc định do vậy khi user logined thì fields này vẫn sẽ hiển thị. Để làm được điều này ta kết hợp dùng 2 action
“comment_form_logged_in_after” : không kích hoạt nếu user chưa có phiên làm việc (not logged).
và “comment_form_after_fields” : hiển thị những fields cho khách truy cập.

// Add fields after default fields above the comment box, always visible
 
add_action( 'comment_form_logged_in_after', 'additional_fields' );
add_action( 'comment_form_after_fields', 'additional_fields' );
 
function additional_fields () {
	echo '<p class="comment-form-title">'.
	'<label for="title">' . __( 'Comment Title' ) . '</label>'.
	'<input id="title" name="title" type="text" size="30"  tabindex="5" /></p>';
 
	echo '<p class="comment-form-rating">'.
	'<label for="rating">'. __('Rating') . '<span class="required">*</span></label>
	<span class="commentratingbox">';
 
		//Current rating scale is 1 to 5. If you want the scale to be 1 to 10, then set the value of $i to 10.
		for( $i=1; $i < = 5; $i++ )
		echo '<span class="commentrating"><input type="radio" name="rating" id="rating" value="'. $i .'"/>'. $i .'</span>';
 
	echo'</p>';
 
}

Lưu thông tin custom fields vào nội dung comment, bằng cách thêm hook comment_post. Note: các fields này không tự động lưu và trường không được để trống thì mới nên lưu vào database,
Đây là cú pháp của hàm add_comment_meta:

add_comment_meta($comment_id, $meta_key, $meta_value, $unique = false)

Trong đó:

$comment_id: comment ID lấy từ tham số cung cấp bởi WordPress.
$meta_key: thuộc tính “name” của input fields đã thiết lập trước đó. Trong ví dụ này là phone, tiêu đề comment và rating.

Chèn vào code dưới đây:

// Save the comment meta data along with comment
 
add_action( 'comment_post', 'save_comment_meta_data' );
function save_comment_meta_data( $comment_id ) {
	if ( ( isset( $_POST['phone'] ) ) && ( $_POST['phone'] != '') )
//loại bỏ html tag trong nội dung POST
	$phone = wp_filter_nohtml_kses($_POST['phone']);
	add_comment_meta( $comment_id, 'phone', $phone );
 
	if ( ( isset( $_POST['title'] ) ) && ( $_POST['title'] != '') )
	$title = wp_filter_nohtml_kses($_POST['title']);
	add_comment_meta( $comment_id, 'title', $title );
 
	if ( ( isset( $_POST['rating'] ) ) && ( $_POST['rating'] != '') )
	$rating = wp_filter_nohtml_kses($_POST['rating']);
	add_comment_meta( $comment_id, 'rating', $rating );
}

Đánh dấu * cho trường rating tức trường này không được bỏ trống. Chúng ta có filter kiểm tra dữ liệu trước khi lưu comment của người dùng preprocess_comment.

// Add the filter to check whether the comment meta data has been filled
 
add_filter( 'preprocess_comment', 'verify_comment_meta_data' );
function verify_comment_meta_data( $commentdata ) {
	if ( ! isset( $_POST['rating'] ) )
	wp_die( __( 'Error: You did not add a rating. Hit the Back button on your Web browser and resubmit your comment with a rating.' ) );
	return $commentdata;
}

Sửa đổi hiển thị nội dung các comment, chúng ta sử dụng filter comment_text. Để phân biệt, Code này bạn để vào comments.php thay vì thường đặt vào functions.php nếu bạn làm việc với theme.
Hàm get_comment_meta để lấy meta fields của comment hiện tại. Ở đây ta lấy tiêu đề comment title nếu có hoặc lấy rating.

// Add the comment meta (saved earlier) to the comment text
// You can also output the comment meta values directly to the comments template  
 
add_filter( 'comment_text', 'modify_comment');
function modify_comment( $text ){
 
	$plugin_url_path = WP_PLUGIN_URL;
 
	if( $commenttitle = get_comment_meta( get_comment_ID(), 'title', true ) ) {
		$commenttitle = '<strong>' . esc_attr( $commenttitle ) . '</strong><br />';
		$text = $commenttitle . $text;
	} 
 
	if( $commentrating = get_comment_meta( get_comment_ID(), 'rating', true ) ) {
		$commentrating = '<p class="comment-rating">	<img src="'. $plugin_url_path .
		'/ExtendComment/images/'. $commentrating . 'star.gif"/><br />Rating: <strong>'. $commentrating .' / 5</strong></p>';
		$text = $text . $commentrating;
		return $text;
	} else {
		return $text;
	}
}

Về phần backend wordpress admin, các meta fields mới vừa tạo ở trên là rating cần được quản lý. Cũng giống như quản lý bài viết của custom post type, chúng ta có hàm thêm form fields.

add_meta_box( $id, $title, $callback, $post_type, $context, $priority, $callback_args );

– Sử dụng hàm kiểm tra bảo mật wp_nonce_field cho việc thêm/sửa comment ở phần quản trị.

< ?php
// Add an edit option to comment editing screen  
 
add_action( 'add_meta_boxes_comment', 'extend_comment_add_meta_box' );
function extend_comment_add_meta_box() {
    add_meta_box( 'title', __( 'Comment Metadata - Extend Comment' ), 'extend_comment_meta_box', 'comment', 'normal', 'high' );
}
 
function extend_comment_meta_box ( $comment ) {
    $phone = get_comment_meta( $comment->comment_ID, 'phone', true );
    $title = get_comment_meta( $comment->comment_ID, 'title', true );
    $rating = get_comment_meta( $comment->comment_ID, 'rating', true );
    wp_nonce_field( 'extend_comment_update', 'extend_comment_update', false );
    ?>
    <p>
        <label for="phone">< ?php _e( 'Phone' ); ?></label>
        <input type="text" name="phone" value="<?php echo esc_attr( $phone ); ?/>" class="widefat" />
    </p>
    <p>
        <label for="title">< ?php _e( 'Comment Title' ); ?></label>
        <input type="text" name="title" value="<?php echo esc_attr( $title ); ?/>" class="widefat" />
    </p>
    <p>
        <label for="rating">< ?php _e( 'Rating: ' ); ?></label>
			<span class="commentratingbox">
			< ?php for( $i=1; $i <= 5; $i++ ) {
				echo '<span class="commentrating"><input type="radio" name="rating" id="rating" value="'. $i .'"';
				if ( $rating == $i ) echo ' checked="checked"';
				echo ' />'. $i .' </span>';
				}
			?>
 
    </p>
    < ?php
}
?>

Như phần trước đã đề cập, chúng ta có code lưu comment ở form người dùng truy cập vào website (frontend). Ở backend cũng sử lý giống như vậy, chúng ta sử dụng hook edit_comment. Chú ý: hàm wp_verify_nonce để xác nhận chuỗi bảo mật được sinh ra ở form fields vừa tạo ở trên.

// Update comment meta data from comment editing screen 
 
add_action( 'edit_comment', 'extend_comment_edit_metafields' );
 
function extend_comment_edit_metafields( $comment_id ) {
    if( ! isset( $_POST['extend_comment_update'] ) || ! wp_verify_nonce( $_POST['extend_comment_update'], 'extend_comment_update' ) ) return;
 
	if ( ( isset( $_POST['phone'] ) ) && ( $_POST['phone'] != '') ) :
	$phone = wp_filter_nohtml_kses($_POST['phone']);
	update_comment_meta( $comment_id, 'phone', $phone );
	else :
	delete_comment_meta( $comment_id, 'phone');
	endif;
 
	if ( ( isset( $_POST['title'] ) ) && ( $_POST['title'] != '') ):
	$title = wp_filter_nohtml_kses($_POST['title']);
	update_comment_meta( $comment_id, 'title', $title );
	else :
	delete_comment_meta( $comment_id, 'title');
	endif;
 
	if ( ( isset( $_POST['rating'] ) ) && ( $_POST['rating'] != '') ):
	$rating = wp_filter_nohtml_kses($_POST['rating']);
	update_comment_meta( $comment_id, 'rating', $rating );
	else :
	delete_comment_meta( $comment_id, 'rating');
	endif;
 
}

Chúc bạn thành công.

Hãy cho mình biết suy nghĩ của bạn trong phần bình luận bên dưới bài viết này. Hãy theo dõi kênh chia sẻ kiến thức WordPress của Hoangweb trên Twitter và Facebook

Comments

Đặng Hải says

Thứ Tư, 20/02/2019 at 10:38 chiều

Bạn ơi mình muốn làm phần comment như hiện tại của bạn thì phải làm sao.
- Hoàng Quách says
  
  Thứ Bảy, 23/02/2019 at 10:05 sáng
  
  form comment của m là mặc định mà. b đọc và làm theo bài viết nhé
Nam Hải says

Chủ Nhật, 15/09/2019 at 1:59 chiều

bạn ơi cho mình hỏi, form comment này dùng được cho tất cả các web hay chỉ mặc định WordPress thôi hả bạn?
- Hoàng Quách says
  
  Chủ Nhật, 15/09/2019 at 9:51 chiều
  
  chỉ dành cho wordpress nhé.
Lê says

Thứ Hai, 16/03/2020 at 11:31 chiều

Cảm ơn bài viết hay
Quốc Cường says

Thứ Năm, 02/04/2020 at 11:12 chiều

Bài viết rất hay. Bạn cho mình hỏi: Mình đang sài theme Flatsome, muốn cho người dùng comment yêu cầu chỉ nhập tên và số điện thoại và khi hiển thị chỉ hiển thị tên, sát tên là số điện thoại có che bớt mấy số cuối.
Mỗi comment sẽ được gửi mail về mail của admin thì làm như thế nào bạn nhỉ.
Cảm ơn bạn
- Hoàng Quách says
  
  Thứ Bảy, 04/04/2020 at 9:36 sáng
  
  chào bạn. Bạn làm theo hướng dẫn để thêm hoặc loại bỏ field.
  – Để hiển thị trường tùy chỉnh sử dụng get_comment_meta() trong template comments.php.
  – Bạn vào cài đặt /wp-admin/options-discussion.php & bật tùy chọn ở mục “Gửi email cho tôi khi”

Chèn comment form trong wordpress – tùy biến comment form từ a-z

Hiển thị comment form

Hiển thị nội dung các comments

Using hooks

Comments

HOÀNG WEB

SẢN PHẨM

LIÊN KẾT

Hiển thị comment form

Hiển thị nội dung các comments

Using hooks

Comments

HOÀNG WEB

KẾT NỐI VỚI TÔI

SẢN PHẨM

LIÊN KẾT