Thiết kế theme WP: Chức năng comment trong WordPress

Ai đã xài WordPress thì chức năng comment là không thể thíu nó cũng là một thế mạnh của WordPress. Chức năng này giúp chúng ta trao đổi, học hỏi và là nơi mà người dùng có thể tương tác đến blog bạn tạo ra sự thân thiện với người xem.

Comment là tính năng được tích hợp trong WordPress và chúng ta chỉ việc kích hoạt nó và sử dụng, và hiển nhiên là wordpress cho phép chúng ta custom nó. Bạn sử dụng comment mặc định thì cũng tốt tuy nhiên giao diện thì hơi cùi một tí, hii… Bây giờ chúng ta sẽ tùy biến comment cho riêng ta nha các bạn.

Viết hàm comment trong WordPress

Đầu tiên bạn vào file functions.php của theme tạo hàm comment như sau:

<!--
<?php
function bcd_comment($comment, $args, $depth)    {
    $GLOBALS['comment'] = $comment; ?>
    <li <?php comment_class();?> id="li-comment-<?php comment_ID();?>">
    
        <div id="comment-<?php comment_ID();?>" class="clearfix comment-body">
            <div class="comment-author vcard">
                <?php echo get_avatar($comment, $size='60', $default='<path_to_url>'); ?>
                <?php printf(__('<span class="fn">%s</span><br />'), get_comment_author_link()); ?>
                <?php if($comment->comment_approved == '0') : ?>
                <em><?php echo 'Your coment is waiting for moderation.';?></em>
                <?php endif; ?>
            </div><!-- end comment autho vcard-->
			<div class="comment-meta commentmetadata">
			<?php printf(get_comment_date());?><?php edit_comment_link(__('(Edit)'),' ',''); ?>
			</div><!--end .comment-meta-->
			<p class="commentcontent"><?php comment_text(); ?></p>
			<div class="reply">
				<?php comment_reply_link(array_merge($args,array('depth' => $depth, 'max_depth'=> $args['max_depth'])));?>
			</div><!--end .reply-->
        </div><!--end #comment-author-vcard-->
<?php }?>
-->

Hàm này qui định hiển thị của list comment bao gồm avatar, nội dung, ngày comment, trả lời comment… bạn save lại để đó.

Xây dựng file comments.php

Típ theo bạn vào thư mục gốc của theme đang sử dụng tạo file comments.php file này sẽ qui định giao diện của form comment, các ràng buộc ví dụ như: phải đăng nhập mới được comment, comment chờ kiểm duyệt…

Sau đó bạn copy đoạn code sau vào trong file comments.php, ban đầu nếu bạn chưa bít thì cứ làm như mình sau đó thì tùy biến sau cũng được.

<!--
<?php
	if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
		die ('>.<! BCDOnline.net!');

	if ( post_password_required() ) { ?>
		<p class="nocomments">Bài này muốn xem bạn phải đăng nhập.</p>
	<?php
		return;
	}
?>

<!-- You can start editing here. -->
	<div class="clear"></div>
	<div id="comment-content" class="gird_8">
<?php if ( have_comments() ) : ?>
			<h3 id="comments"><?php comments_number('Chưa có Comment', 'Một Comment', '% Comments' );?></h3>
			<ol class="commentlist">
<?php wp_list_comments( array( 'callback' => 'bcd_comment' ) );?>
			<?php //wp_list_comments('type=comment&callback=bcd_comment'); ?>
			</ol>
		 <?php else : // this is displayed if there are no comments so far ?>
			<?php if ( comments_open() ) : ?>
				<!-- If comments are open, but there are no comments. -->
			 <?php else : // comments are closed ?>
				<!-- If comments are closed. -->
				<p class="nocomments">Comments đã đóng.</p>
			<?php endif; ?>
		<?php endif; ?>
		<?php if ( comments_open() ) : ?>
		<div id="respond">
			<h3> <span class="icon-title"></span><?php comment_form_title( 'Để lại comment của bạn', 'Trả lời cho bài %s' ); ?></h3>
			<div class="cancel-comment-reply">
				<small><?php cancel_comment_reply_link(); ?></small>
			</div>
			<?php if ( get_option('comment_registration') && !is_user_logged_in() ) : ?>
			<p>Bạn phải <a href="<?php echo wp_login_url( get_permalink() ); ?>">đăng nhập</a> để có thể comment.</p>
			<?php else : ?>
		<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
			<?php if ( is_user_logged_in() ) : ?>
			<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Log out &raquo;</a></p>
			<?php else : ?>
				<p>
				<label for="author">Name</label>
				<input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
				</p>			
				<p>
				<label for="email">Email</label>
				<input type="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />
				</p>
				<p>
				<label for="url">Website</label>
				<input type="text" name="url" id="url" value="<?php echo esc_attr($comment_author_url); ?>" size="22" tabindex="3" />
				</p>
				<?php endif; ?>
				<p>
				<textarea name="comment" id="comment" cols="58" rows="10" tabindex="4"></textarea>
				</p>
				<p><input name="submit" type="submit" id="submit" tabindex="5" value="Gửi Comment" />
				<?php comment_id_fields(); ?>
				</p>
				<?php do_action('comment_form', $post->ID); ?>
		</form>
		<?php endif; // If registration required and not logged in ?>
		</div>
<?php endif; // if you delete this the sky will fall on your head ?>
</div>
-->

Có vài giải thích nho nhỏ cho bạn:

  • Dòng đầu tiên trong file comments.php là tránh truy cập trực tiếp đến file này.
  • get_avatar(): Hiển thị avatar cho bạn.
  • comment_author(): Lấy tác giả comment.
  • wp_list_comments(): Đây hàm tạo ra danh sách các comment, bạn chú ý trên đoạn code trên có gọi hàm bcd_comment trong fuctions.php.
  • comments_number(): Hàm đếm số lượng comment.
Hiển thị comment trong wordpress

Sau khi xây dựng xong các phần trên, vấn đền bây giờ là hiển thị comment ra ngoài các trang của wordpress bằng cách nào.

Thông thường thì người ta hiển thị comment dưới mỗi bài viết để có góp ý, bình luận về bài viết đó. Nghĩa là để code hiển thị vào file single.php trong theme. Page thì ít khi hiển thị comment vì đây chủ yếu là giới thiệu, các trang riêng biệt nên không cho comment, nếu bạn mún cho comment thì để code hiển thị vào file page.php.

Bạn mở file single.php và để đoạn code này vào.

<!--
<?php comments_template( '', true ); ?>
-->

Sau khi hiển thị công việc bây giờ là ngồi style css lại cho comment của bạn. Bạn dùng addon firebug trong firefox để hỗ trợ style cho nhanh hơn, đây là kết quả sau khi style css của mình!

Comment trong wordpress

Comment trong wordpress

Quản lý comment trong WordPress

Hàng ngày bạn vào blog của mình mục Dashboad để xem có ai comment không nếu thấy ai khen thì Approve cho thiên hạ nó bit, ai chê thì im ru lun nha! hii..

Bạn có thể xóa, sửa hay trả lời comment ngay tại đây cũng dc!

Recent comment trong wordpress

Recent comment trong wordpress

Kết luận: bài viết mang tính chất thực hành, bạn làm và nghiên cú típ nha! Tui cũng không hỉu hết dựa vào comment default mà tùy chỉnh lại thôi! Chúc thành công.

Nguồn: http://codex.wordpress.org/Function_Reference/wp_list_comments

VN:F [1.9.22_1171]
Rating: 7.7/10 (6 votes cast)
Thiết kế theme WP: Chức năng comment trong WordPress, 7.7 out of 10 based on 6 ratings
Chuyên mục: WordPress
Tagged: , .

10 Comments

  1. Trương Nhất Cơ

    thanks bạn nha. Nhờ bạn mà mình làm xong phần comment cho website của minh.

  2. ban oj sao minh lam theo huong dan mà sao sau khi gửi comment,thì nó lại hiện ra trang này http://www.fshop14.com/wp-comments-post.php trắng tinh, khi bấm F5 là báo là trùng nội dung,khi back lại rồi F5 thì lại xuất hiện comment ??? da tim google roi van zay ????

    • Juno

      Mình cũng giống như bạn, lỗi đó là gi nhì, nó ko relink lai được hay sao đó, trang trắng tinh

  3. keny

    sao comment cua minh no’ xuat hien dong:Comments đã đóng..the’ can sua nhung gj de no’ hien comment

    • Trong bài viết đó, ở phần quản lý Discusion chọn vào Allow comments.

  4. radius

    Mình sẽ làm thử, cảm ơn bạn rất nhiều!

  5. Hay! Mong ban se co nhieu bai viet hon nua

  6. thienthanxanh

    De thay doi avatar thi phai lam sao ban.^^

  7. Ngọc Ánh

    Cám ơn. mình đã sửa theme mặc định thành công và copy nguyên phần comment của bạn :)

Để lại comment của bạn