Các bước custom comment wordpress (tùy biến giao diện bình luận wordpress)

11/03/2021 14:12 5668

Tùy biến giao diện bình luận wordpress. Hôm nay mình sẽ chia sẽ cách làm

Table of Contents

1. Gọi comments_template vào vị trí file single.php

comments_template là function nó sẽ include file comments.php, do vậy anh chị muốn show phần comment ở đâu thì chỉ cần dùng code sau vào vị trí cần hiển thị

<?php comments_template(); ?>

1	<?php comments_template(); ?>

2. Trong folder theme tạo file comments.php

File comments.php la nơi xử lý lấy ra các list comment, phân trang comment và form comment

2.1 List comment

Chúng ta sẽ sử dụng function wp_list_comments để hiển thị list comment. Ví dụ

wp_list_comments(
    array(
    	//các tùy biến sẽ được thực hiện qua lớp CDT_Walker_Comment
        'walker'      => new CDT_Walker_Comment(),
        'avatar_size' => 120,
        'style'       => 'div',
    )
);

wp_list_comments(

array(

//các tùy biến sẽ được thực hiện qua lớp CDT_Walker_Comment

'walker' => new CDT_Walker_Comment(),

'avatar_size' => 120,

'style' => 'div',

)

);

Các bài viết khác có thể hữu ích với bạn

2.2 Phân trang comments

Chúng ta sẽ sử dụng function paginate_comments_links để làm việc này. Ví dụ

paginate_comments_links(
    array(
        'echo'      => false,
        'end_size'  => 0,
        'mid_size'  => 0,
        'next_text' => __( 'Newer Comments', 'developtheme' ) . ' <span aria-hidden="true">&rarr;</span>',
        'prev_text' => '<span aria-hidden="true">&larr;</span> ' . __( 'Older Comments', 'developtheme' ),
    )
);

paginate_comments_links(

array(

'echo' => false,

'end_size' => 0,

'mid_size' => 0,

'next_text' => __( 'Newer Comments', 'developtheme' ) . ' <span aria-hidden="true">→</span>',

'prev_text' => '<span aria-hidden="true">←</span> ' . __( 'Older Comments', 'developtheme' ),

)

);

2.3 Form comment

Chúng ta sẽ sử dụng function để hiển thị form comment. Ví dụ

comment_form(
    array(
        'class_form'         => 'section-inner thin max-percentage',
        'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title">',
        'title_reply_after'  => '</h2>',
        'comment_notes_before' => '',
        'submit_field' => '%1$s %2$s',
        'name_submit' => 'Gửi bình luận'
    )
);

comment_form(

array(

'class_form' => 'section-inner thin max-percentage',

'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title">',

'title_reply_after' => '</h2>',

'comment_notes_before' => '',

'submit_field' => '%1$s %2$s',

'name_submit' => 'Gửi bình luận'

)

);

Để tùy biến thứ tự cũng như thêm bớt các trường của form comment wordpress chúng ta sử dụng hook filter là để làm comment_form_fields. Ví dụ

//Sử dụng trong class
add_filter( 'comment_form_fields', array($this,'comment_fields_custom_order') );
function comment_fields_custom_order( $fields ) {
    $comment_field = $fields['comment'];
    $author_field = $fields['author'];
    $email_field = $fields['email'];
    $url_field = $fields['url'];
    $cookies_field = $fields['cookies'];
    //Xóa các fields hiện có
    unset( $fields['comment'] );
    unset( $fields['author'] );
    unset( $fields['email'] );
    unset( $fields['url'] );
    unset( $fields['cookies'] );
    //Tạo lại các fields cũng như thứ tự của nó
    $fields['author'] = '<p><input id="author" name="author" type="text" value="" size="30" maxlength="245" required="required" placeholder="Your Name">';
    $fields['email'] = '<input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required="required" placeholder="Email"></p>';
    $fields['comment'] = '<p><textarea name="comment" id="comment" cols="30" rows="10" placeholder="Your Message"></textarea></p>';
    return $fields;
}

//Sử dụng trong class

add_filter( 'comment_form_fields', array($this,'comment_fields_custom_order') );

function comment_fields_custom_order( $fields ) {

$comment_field = $fields['comment'];

$author_field = $fields['author'];

$email_field = $fields['email'];

$url_field = $fields['url'];

$cookies_field = $fields['cookies'];

//Xóa các fields hiện có

unset( $fields['comment'] );

unset( $fields['author'] );

unset( $fields['email'] );

unset( $fields['url'] );

unset( $fields['cookies'] );

//Tạo lại các fields cũng như thứ tự của nó

$fields['author'] = '<p><input id="author" name="author" type="text" value="" size="30" maxlength="245" required="required" placeholder="Your Name">';

$fields['email'] = '<input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required="required" placeholder="Email"></p>';

$fields['comment'] = '<p><textarea name="comment" id="comment" cols="30" rows="10" placeholder="Your Message"></textarea></p>';

return $fields;

}

2.4 CDT_Walker_Comment

Chúng ta sẽ tùy biến từng item comment qua lớp này. Ví dụ

<?php
if ( ! class_exists( 'CDT_Walker_Comment' ) ) {
	class CDT_Walker_Comment extends Walker_Comment {
		protected function html5_comment( $comment, $depth, $args ) {
			$tag = ( 'div' === $args['style'] ) ? 'div' : 'li';
			?>
			<<?php echo $tag; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static output ?> id="comment-<?php comment_ID(); ?>" <?php comment_class( $this->has_children ? 'parent' : '', $comment ); ?>>
			<div class="single-comment-body">
				<div class="comment-user-avater">
				<?php
				$comment_author_url = get_comment_author_url( $comment );
				$comment_author     = get_comment_author( $comment );
				$avatar             = get_avatar( $comment, $args['avatar_size'] );
				if ( 0 !== $args['avatar_size'] ) {
					if ( empty( $comment_author_url ) ) {
					//khử trùng html	
					echo wp_kses_post( $avatar );
					} else {
						printf( '<a href="%s" rel="external nofollow" class="url">', $comment_author_url ); 
						// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped --Escaped in https://developer.wordpress.org/reference/functions/get_comment_author_url/
						echo wp_kses_post( $avatar );
					}
				}
				if ( ! empty( $comment_author_url ) ) {
				echo '</a>';
				}
				$comment_reply_link = get_comment_reply_link(
				array_merge(
				$args,
				array(
				'add_below' => 'div-comment',
				'depth'     => $depth,
				'max_depth' => $args['max_depth'],
				'before'    => '<span class="comment-reply">',
				'after'     => '</span>',
				)
				)
				);
				?>
				</div>
				<div class="comment-text-body">
	<h4><?php echo $comment_author; ?> <span class="comment-date"><?php echo get_comment_date( 'F d, Y', $comment ); ?></span> 
	<?php  
	$by_post_author = CDT_is_comment_by_post_author( $comment );
	
	if ( $comment_reply_link || $by_post_author ) {
	?>
	<?php
	if ( $comment_reply_link ) {
	echo $comment_reply_link; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Link is escaped in https://developer.wordpress.org/reference/functions/get_comment_reply_link/
	}
	}
	?>
	</h4>
	
	<?php
	
	comment_text();
	
	if ( '0' === $comment->comment_approved ) {
	?>
	<p class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.', 'CDT' ); ?></p>
	<?php
	}
	
	?>
	
	
	</div>
	
			</div>
	<?php
		}
	}
}

<?php

if ( ! class_exists( 'CDT_Walker_Comment' ) ) {

class CDT_Walker_Comment extends Walker_Comment {

protected function html5_comment( $comment, $depth, $args ) {

$tag = ( 'div' === $args['style'] ) ? 'div' : 'li';

<<?php echo $tag; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static output ?> id="comment-<?php comment_ID(); ?>" <?php comment_class( $this->has_children ? 'parent' : '', $comment ); ?>>

<?php

$comment_author_url = get_comment_author_url( $comment );

$comment_author = get_comment_author( $comment );

$avatar = get_avatar( $comment, $args['avatar_size'] );

if ( 0 !== $args['avatar_size'] ) {

if ( empty( $comment_author_url ) ) {

//khử trùng html

echo wp_kses_post( $avatar );

} else {

printf( '<a href="%s" rel="external nofollow" class="url">', $comment_author_url );

// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped --Escaped in https://developer.wordpress.org/reference/functions/get_comment_author_url/

echo wp_kses_post( $avatar );

}

if ( ! empty( $comment_author_url ) ) {

echo '</a>';

}

$comment_reply_link = get_comment_reply_link(

array_merge(

$args,

array(

'add_below' => 'div-comment',

'depth' => $depth,

'max_depth' => $args['max_depth'],

'before' => '<span class="comment-reply">',

'after' => '</span>',

)

);

</div>

<?php

$by_post_author = CDT_is_comment_by_post_author( $comment );

if ( $comment_reply_link || $by_post_author ) {

<?php

if ( $comment_reply_link ) {

echo $comment_reply_link; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Link is escaped in https://developer.wordpress.org/reference/functions/get_comment_reply_link/

}

</h4>

<?php

comment_text();

if ( '0' === $comment->comment_approved ) {

<?php

}

</div>

<?php

}

Các làm là như thế, mình có đình kèm file zip để anh chị tham khảo, tải về anh chị tìm 3 file: single.php, comments.php và class-walker-comment.php trong thư mục classes

Tải file

4.6/5 (27 Đánh giá)

Gửi Phản Hồi

10 Bình Luận

4.8

4 đánh giá

1 đánh giá

0 đánh giá

M
Mạnh

Tôi đang muốn code comment giống trang của bạn, bạn có thể hỗ trợ tôi không ?

Trả lời Lúc 09:43 am ngày 24/07/2024

Fcwordpress.net

bạn đọc hết bài viết là làm được nha, code tham khảo https://drive.google.com/file/d/1Y7aF2X-Um-S4RvU3euOX3vUItTF8LgoA/view?usp=sharing

Trả lời Lúc 13:20 pm ngày 24/07/2024

Gửi
T
thien

tôi muốn css được không?

Trả lời Lúc 13:32 pm ngày 06/05/2024

Fcwordpress.net

css bình thường mà bạn

Trả lời Lúc 14:33 pm ngày 06/05/2024

Gửi
T
Tuấn

tôi đang muốn code comment giống như thế này bạn có thể hỗ trợ tôi không ?

Trả lời Lúc 11:44 am ngày 15/09/2021

Fcwordpress.net

Đã support

Trả lời Lúc 12:05 pm ngày 15/09/2021

Gửi
T
tinh

tuyệt vời

Trả lời Lúc 10:21 am ngày 13/09/2021

Fcwordpress.net

Ok không có gì bạn

Trả lời Lúc 12:05 pm ngày 15/09/2021

Gửi
T
tinh

cảm ơn bạn

Trả lời Lúc 14:06 pm ngày 01/09/2021

Fcwordpress.net

Không có gì, giúp được bạn là vui rồi

Trả lời Lúc 14:15 pm ngày 01/09/2021

Gửi

có thể bạn cần xem:

Một số hằng define hay dùng trong wordpress [ 26/05/2022 14:38 ]
Code mẫu add_menu_page và add_submenu_page [ 17/12/2021 14:04 ]
Các functions hỗ trợ cho table meta wordpress [ 14/11/2021 04:06 ]
Thêm mã google analytics vào wordpress [ 12/11/2021 03:07 ]
Một số function liên quan đến post wordpress [ 24/09/2021 07:35 ]
Xử lý dữ liệu json_encode wordpress [ 21/09/2021 08:14 ]
Cách dùng wp_schedule_single_event [ 21/09/2021 02:33 ]
Các phương thức liên quan đến database wordpres [ 18/09/2021 15:54 ]
Các functions liên quan đến user wordpress [ 18/09/2021 15:34 ]
Include css và js theo shortcode [ 16/09/2021 08:56 ]

Các bước custom comment wordpress (tùy biến giao diện bình luận wordpress)

1. Gọi comments_template vào vị trí file single.php

2. Trong folder theme tạo file comments.php

2.1 List comment

2.2 Phân trang comments

2.3 Form comment

2.4 CDT_Walker_Comment

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)