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ủaWordPress. 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.
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <!--<?phpfunction 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
| <!--<?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 »</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.
1
2
3
| <!--<?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!
