Thiết kế theme WP – phần 8: làm việc với comment

Một thành phần không thể tách rời và góp phần tạo nên sức mạnh của WordPress đó là comment. Tính năng này ngoài việc tạo ra một khung trao đổi gữa tác giả bài viết và người đọc còn là một công cụ khá hữu ích giúp người dùng thường xuyên quay lại để tham khảo các góp ý của người dùng khác cũng như nhận những phản hồi đa chiều.

Trong phần 7, chúng ta đã nói về content, phần này cũng thuộc về content nhưng mình muốn tách riêng ra để chúng ta dễ dàng quan sát hơn.

Xây dựng comments.php

Trước tiên, bạn cần tạo một file comments.php có nội dung như sau:

[php] <?php // Do not delete these lines

if (‘comments.php’ == basename($_SERVER[‘SCRIPT_FILENAME’])) die (‘Please do not load this page directly. Thanks!’);
if (!empty($post->post_password)) { // if there’s a password

if ($_COOKIE[‘wp-postpass_’ . COOKIEHASH] != $post->post_password) { // and it doesn’t match the cookie
?>

<h2><?php _e(‘Password Protected’); ?></h2>
<p><?php _e(‘Enter the password to view comments.’); ?></p>

<?php return;

}

}
/* This variable is for alternating comment background */

$oddcomment = ‘alt’;

?>

<!– You can start editing here. –>
<?php if ($comments) : ?>
<h3 id="comments"><?php comments_number(‘No Responses’, ‘One Response’, ‘% Responses’ );?> to &#8220;<?php the_title(); ?>&#8221;</h3>

<ol class="commentlist">
<?php foreach ($comments as $comment) : ?>

<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">

<div class="commentmetadata">
<strong><?php comment_author_link() ?></strong>, <?php _e(‘on’); ?> <a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date(‘F jS, Y’) ?> <?php _e(‘at’);?> <?php comment_time() ?></a> <?php _e(‘Said&#58;’); ?> <?php edit_comment_link(‘Edit Comment’,”,”); ?>

<?php if ($comment->comment_approved == ‘0’) : ?>

<em><?php _e(‘Your comment is awaiting moderation.’); ?></em>

<?php endif; ?>

</div>

<?php comment_text() ?>

</li>

<?php /* Changes every other comment to a different class */

if (‘alt’ == $oddcomment) $oddcomment = ”;

else $oddcomment = ‘alt’;

?>

<?php endforeach; /* end for each comment */ ?>

</ol>

<?php else : // this is displayed if there are no comments so far ?>

<?php if (‘open’ == $post->comment_status) : ?>

<!– If comments are open, but there are no comments. –>

<?php else : // comments are closed ?>

<!– If comments are closed. –>

<p class="nocomments">Comments are closed.</p>

<?php endif; ?>

<?php endif; ?>

<?php if (‘open’ == $post->comment_status) : ?>

<h3 id="respond">Leave a Reply</h3>

<?php if ( get_option(‘comment_registration’) && !$user_ID ) : ?>

<p>You must be <a href="<?php echo get_option(‘siteurl’); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>">logged in</a> to post a comment.</p>

<?php else : ?>

<form action="<?php echo get_option(‘siteurl’); ?>/wp-comments-post.php" method="post" id="commentform">

<?php if ( $user_ID ) : ?>

<p>Logged in as <a href="<?php echo get_option(‘siteurl’); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option(‘siteurl’); ?>/wp-login.php?action=logout" title="Log out of this account">Logout &raquo;</a></p>

<?php else : ?>

<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="40" tabindex="1" />

<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>

<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="40" tabindex="2" />

<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>

<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="40" tabindex="3" />

<label for="url"><small>Website</small></label></p>

<?php endif; ?>

<!–<p><small><strong>XHTML:</strong> <?php _e(‘You can use these tags&#58;’); ?> <?php echo allowed_tags(); ?></small></p>–>

<p><textarea name="comment" id="comment" cols="60" rows="10" tabindex="4"></textarea></p>

<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />

<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />

</p>

<?php do_action(‘comment_form’, $post->ID); ?>

</form>

<?php endif; // If registration required and not logged in ?>

<?php endif; // if you delete this the sky will fall on your head ?>
[/php]

Trong nội dung file này, mình đã có sẵn những thứ các bạn cần cho một hệ thống comment của wordpress. Bạn thiết kế thêm một chút CSS nữa cho comment và cho chúng vào style.css để nó đẹp đẽ hơn nhé :)

Đưa comment vào nội dung

Công việc tiếp theo của chúng ta là đưa comments.php đã thiết kế vào trong trang single.php (là nơi comment sẽ xuất hiện). Bạn bổ sung vào phía dưới the_content() nội dung sau:

[code lang=”html”] <div class=”comments-template”>
<?php comments_template(); ?>
</div>
[/code]

Nhiệm vụ của đoạn code này là gọi hàm comments_template(), hàm đó như thế nào ?

Hàm này là hàm được xây dựng sẵn bởi hệ thống WordPress, và nếu bạn click vào liên kết mình đã đính kèm vào hàm bạn sẽ thấy hàm này có tác dụng gọi file comments.php mà chúng ta đã thiết kế ở trên.

Trong đoạn code đầu tiên mình đã đưa lên, chúng ta có một số hàm mới mà mình chưa có dịp giới thiệu. Hôm nay có khác hơn những nội dung đã viết ở các bài trước 1 xíu là các bạn tự copy vào codex.wordpress.com để tìm hiểu các hàm nha. Mình nghĩ để các bạn vận động tay chân 1 chút sẽ tốt hơn :D

Một số điểm đáng lưu ý

Trong đoạn code đầu tiên chúng ta có thể dễ dàng tìm thấy các comment được sắp xếp thông qua một Ordered List (OL) chứ không phải Unordered(UL). Bạn có thể thay thế bằng thẻ div nếu muốn nhưng cũng nhớ thay đổi nội dung bên trong luôn cho nó thích hợp vì thẻ li sẽ đi kèm với ol hoặc ul thôi.

Trong đoạn code trên chúng ta cũng thiếu 1 số thứ, ví dụ như đối với các bài viết yêu cầu phải có mật khẩu mới có thể comment. Chúng ta sẽ làm điều đó như sau:

Chúng ta có thể sử dụng hàm wp_list_comments() để tạo ra một danh sách comment. Hàm này được xây dựng sẵn bởi WordPress nhưng nếu sử dụng nó đồng nghĩa với việc tùy biến nội dung (như cách trên) của chúng ta sẽ bị hạn chế lại. Một cách khác để tùy biến hàm wp_list_comments() đó là gọi gàm callback để override lại mặc định của wp_list_comments() như sau:

[php] <ul class="commentlist">
<?php wp_list_comments(‘type=comment&callback=mytheme_comment’); ?>
</ul>
[/php] Tuy nhiên phần này mình sẽ không nói tới ở đây. Bạn có thể tự nghiên cứu hoặc xem thêm trong codex. Phần này là tùy biến nâng cao khá hay :)