Phiên bản WordPress 2.7.x bao gồm khác nhiều thay đổi, một trong số đó có ảnh hưởng rất lớn đối với việc thiết kế giao diện. Trong phiên bản này, các phản hồi bài viết (comments) hay còn gọi là lời bình, ý kiến (với nhiều cách dịch khác nhau) được phân trang, theo dõi theo luồng, sắp các phản hồi liên quan đến nhau… trước đây người dùng cần cài đặt một vài thành phần bổ xung (plugins) tương ứng để có các tính năng này và nay WordPress v2.7.x đã hỗ trợ, tuy nhiên bạn cần phải thay đổi mã trong các chủ đề (themes) của bạn để tận dụng tốt các ưu điểm trên đồng thời gỡ có thể bỏ các plugins có cùng tính năng giúp giảm tải, tăng tốc độ nạp website.
Lưu ý:
- Hầu hết các tính năng mới này có thể kích hoạt hoặc tắt qua trang cấu hình của WordPress: Settings->Discussion mặc định là tắt.
- Các chủ đề (themes) cũ vẫn hoạt động tốt ở phiên bản WordPress 2.7.x mà không cần thay đổi gì nhưng không có được các tính năng đã nói trên.
- Đây là các tính năng có sẵn của WordPress v2.7.x, hãy tận dụng nó thay vì sử dụng các thành phần bổ xung có cùng tính năng, tất nhiên bạn vẫn sử dụng chúng nếu bạn muốn mà không ảnh hưởng gì cả.
Làm sao tạo comments.php tương thích với phiên bản 2.7.x và thấp hơn
Trước tiên bạn cần biết một đoạn mã cho phép sử dụng lại thiết kế cũ của các phiên bản trước, điều này có nghĩa là chủ đề bạn có thể hoạt động tốt trên tất cả các phiên bản của WordPress. Vấn đề này chỉ đơn giản là thêm một điều kiện trước khi gọi hàm wp_list_comments mà thôi:
[php]if (function_exists(‘wp_list_comments’)) :
// comments.php mới
else :
// comments.php cũ
endif;[/php]
“comments.php cũ” chính là mã php trước đây bạn dùng trong việc thiết kế chủ đề, ở phiên bản mới này chúng chỉ được sử dụng một phần rất nhỏ, và đơn giản hơn. Có một vài phương pháp thực hiện điều này, dưới đây là phương pháp tôi sử dụng tại Website này, nó đơn giản, dễ can thiệp được đặt trong functions.php:
[php]
add_filter(‘comments_template’, ‘legacy_comments’);
function legacy_comments($file) {
if ( !function_exists(‘wp_list_comments’) )
$file = TEMPLATEPATH . ‘/legacy.comments.php’;
return $file;
}
[/php]
Như các bạn thấy, hàm trên sẽ kiểm tra index.php nếu không có hàm wp_list_comments được gọi ra (phiên bản thấp hơn v2.7) thì sẽ sử dụng mã có trong legacy.comments.php cũng có nghĩa là chủ đề này vẫn hiển thị đúng như bạn muốn.
Kiểm tra quyền xem nội dung (kiểm tra bảo vệ bằng mật khẩu)
Đoạn mã dưới đây ở phần đầu của comments.php. Nó sẽ kiểm tra việc bảo vệ nội dung bài viết, tôi sẽ không đi sâu vào cách hoạt động của nó, đơn giản là nó được trích từ chủ đề mặc định của WordPress.
[php]if (!empty($_SERVER[‘SCRIPT_FILENAME’]) && ‘comments.php’ == basename($_SERVER[‘SCRIPT_FILENAME’]))
die (‘Please do not load this page directly. Thanks!’);
if ( post_password_required() ) {
echo ‘This post is password protected. Enter the password to view comments.’;
return;
}[/php]
Thiết kế theo phong cách riêng
Ưu điểm của cách viết mã hiển thị phản hồi mới trong các chủ đề:
- Tất cả các phản hồi được hiển thị trong danh sách (UL hoặc OL tùy bạn – danh sách không hoặc có thứ tự), mỗi phải hồi được chứa trong thẻ LI.
- Các phản hồi, trackback, pingback được định nghĩa bởi các tham số và có thể dễ dàng tùy biến qua CSS.
- Nếu người viết phản hồi là một thành viên hay có các thông tin xã hội,Wordpress sẽ hiển thị nó. Các phản hồi của tác giả bài viết có thể thiết kế riêng nổi bật hơn các phản hồi khác.
- Hiệu ứng hiển thị phản hồi chẵn, lẻ, di chuột được đĩnh nghĩa sẵn, dễ dàng tùy biến theo phong cách riêng.
- Thiết kế của các phản hồi có thể định nghĩa lại hoàn toàn mới theo ý bạn. (thiết kế mặc định của WordPress là thiết kế mang tính phổ biến, nếu không thích bạn có thể thiết kế lại)
Tôi sẽ chỉ nói thêm về cách tạo một thiết kế khác với thiết kế mặc định của WordPress, các phần khác bạn tự tìm hiểu bởi đấy là phong cách thiết kế của bạn.
Đoạn mã sau dùng để hiển thị phản hồi bài viết cho các phiên bản trước 2.7.x:
[php]if ($comments) :
<!–?php $comment_count = get_comment_count($post—>ID); echo $comment_count[‘approved’]; ?> Comments
<ul class="commentlist">
<!–?php foreach( $comments as $comment ) : // stuff to display the comment in an LI here endforeach; ?–></ul>
<!–?php else :<br /–>if (‘open’ == $post-comment_status) :
// If comments are open, but there are no comments.
else :
// comments are closed
endif;
endif;[/php]
Việc trình bày phản hồi được làm một cách thủ công bằng cách lắp ghép nhiều thành phần vào với nhau, điều này khiến comments.php có rất nhiều mã và dễ gây nhầm lẫn, hơn nữa người thiết kế phải tự bố trí các thành phần này cũng như tự đặt ra các tham số CSS riêng. Ở phiên bản 2.7, đoạn mã trên được viết một cách đơn giản hơn:
[php]
<!–?php if ( have_comments() ) : ?–>
<h4 id="comments"><!–?php comments_number(‘Không có phản hồi nào’, ‘Một phản hồi’, ‘Có % phản hồi’ );?–></h4>
<ul class="commentlist">
<!–?php wp_list_comments(); ?–></ul>
<div class="navigation">
<div class="alignleft"><!–?php previous_comments_link() ?–></div>
<div class="alignright"><!–?php next_comments_link() ?–></div>
</div>
<!–?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.
else : // comments are closed
endif;
endif;
?>[/php]
như vậy có thể thấy ở phiên bản này việc viết mã đơn giản hơn, với thiết kế có sẵn của WordPress bạn chỉ cần tập trung vào việc tùy biến các tham số cho CSS mà thôi, hơn nữa việc thiết kế chủ đề mới trở nên dễ dàng hơn thậm chí đơn giản chỉ là thay thế bằng một đặc tả CSS mới mà thôi, mọi thứ để đã theo chuẩn.
Có 3 điểm cần chú ý:
- Hàm have_comments() thay thế cho việc kiểm tra $comments trên toàn bộ chủ đề.
- Hàm wp_list_comments() xuất ra mã hiển thị (HTML) các phản hồi, nó cho phép sử dụng các tính năng mới.
- Hàm previous_comments_link() và next_comments_link() cho phép di chuyển các trang phản hồi (tính năng phân trang).
Thiết kế các trình bày phản hồi mang tính cá nhân
Tất nhiên không phải ai cũng thích thiết kế mặc định của WordPress cũng cấp và dĩ nhiên WordPress cũng hỗ trợ bạn cách tạo ra một thiết kế cá nhân của bạn mà nó vẫn hoạt động tốt với WordPress.
Thật đơn giản, chỉ cần thêm tham số của hàm wp_list_comments() để gọi thiết kế của bạn được định nghĩa sẵn trong functions.php như sau:
[code lang=”xml”]
<ul class="commentlist">
<!–?php wp_list_comments(‘type=comment&callback=thiết_kế_cá_nhân’); ?–></ul>
[/code]
trong đó thiết_kế_cá_nhân chính là thiết kế riêng của bạn, nó được khai báo trong functions.php:
[php]
function thiết_kế_cá_nhân($comment, $args, $depth) {
$GLOBALS[‘comment’] = $comment; ?>
//Thiết kế cá nhân
<li> id="li-comment-<!–?php comment_ID() ?–>">
<div id="comment-<?php comment_ID(); ?><br />">
<div class="comment-author vcard">
<!–?php echo get_avatar($comment,$size=’48’,$default='<path_to_url–>’ ); ?>
<!–?php printf(__(‘<cite class="fn"–>%s <span class="says">says:</span>’), get_comment_author_link()) ?></div>
<!–?php if ($comment—>comment_approved == ‘0’) : ?>
<em><!–?php _e(‘Your comment is awaiting moderation.’) ?–></em>
<!–?php endif; ?–>
<div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><!–?php printf(__(‘%1$s at %2$s’), get_comment_date(), get_comment_time()) ?–></a><!–?php edit_comment_link(__(‘(Edit)’),’ ‘,”) ?–></div>
<!–?php comment_text() ?–>
<div class="reply">
<!–?php comment_reply_link(array_merge( $args, array(‘depth’ =–> $depth, ‘max_depth’ => $args[‘max_depth’]))) ?></div>
</div>
<!–?php<br /–> }
[/php]
Chú ý: Trong đoạn mã trên phải thiếu một thẻ kết thúc </li>, WordPress sẽ tự thêm vào khi nó liệt kê các phản hồi.
JavaScript và phân luồng phản hồi theo chủ đề
Tính năng phân luồng các phản hồi cho phép các thảo luận được tập trung hơn, người đọc có thể trả lời trực tiếp vào vấn đề người khác đã nêu, tính năng này cần sự hỗ trợ bởi javascript. Trước tiên bạn cần thêm đoạn mã sau vào header.php trước khi gọi hàm wp_head():
[php]if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ );[/php]
Đoạn mã trên cho phép người đọc có thể trả lời trực tiếp cho một phản hồi để có thể theo dõi nội dung đang thảo luận một cách tập trung hơn. WordPress không tự làm điều này, nguyên nhân là để sử dụng đoạn mã này yêu cầu những quy ước đặt tên và những tham số nhất định trong mẫu nhập nội dung phản hồi, vì vậy bạn sẽ phải tự thêm vào. Tham số cần thêm trong mẫu nhập nội dung phản hồi:
[php] <!–?php comment_id_fields(); ?–>[/php]
tương ứng với 2 ô nhập liệu ẩn khi hiển thị: comment_post_ID và comment_parent; bạn cần xóa bỏ comment_post_ID nếu trong mẫu nhập liệu đã có tham số này, ngoài ra ô nhập liệu phải có id=”comment”. Điều này là bắt buộc, nếu bạn đã sử dụng id=”comment” cho một đối tượng nào đó thì bạn cần thay đổi để chúng hoạt động đúng.
Cuối cùng, toàn bộ phần hiển thị phản hồi PHẢI nằm trong thẻ DIV với thuộc tính id=”respond” để liên kết từ trang chính có thể chỉ thẳng tới phần trả lời ngay cả khi nó không có một phản hồi nào (người đọc sẽ được chuyển tới mẫu (form) nhập liệu phản hồi). Trong một vài chủ đề của phiên bản trước, phần này được đánh dấu bằng một thẻ liên kếta:
[code lang=”xml”]<a id="respond"></a>[/code]
Cách dùng này sẽ khiến người đọc không thể di chuyển nhanh đến phần viết phản hồi được.
Tiếp theo bạn cần thay thế tiêu đề của mẫu viết, thông thường là “Gửi một phản hồi” với đoạn mã sau:
[code lang=”xml”]
<h3><!–?php comment_form_title(); ?–></h3>
[/code]
comment_form_title() giúp bạn dễ dàng thay đôi tiêu đề của phần viết phản hồi tương ứng khi người đọc viết phản hồi mới hoặc trả lời trực tiếp một phản hồi của người khác. Đương nhiên bạn có thể thay thế phần tiêu đề nếu bạn muốn bằng cách dùng tham số của hàm này, ví dụ:
[php] <!–?php comment_form_title( ‘Gửi một phản hồi’, ‘Trả lời %s’ ); ?–>[/php]
Biến %s sẽ được thay thế bằng tên của người được trả lời.
Như vậy chúng ta đã giải quyết xong vấn đề xuất hiện mẫu viết phản hồi khi người đọc trả lời một ai đó hoặc viết phản hồi mới cũng như thay đổi tên của mẫu viết đó tương ứng, tiếp theo trong tình huống người đọc không muốn trả lời ai đó, hộ bấm hủy bỏ thì liên kết này cần trả lại thời điểm trước khi xuất hiện mẫu viết trên, bạn cần làm như sau:
[code lang=”xml”]
<div id="cancel-comment-reply"><small><!–?php cancel_comment_reply_link() ?–></small></div>
[/code]
Nó hoạt động với công nghệ AJAX, ngoài ra nó cũng là điều kiện cần để một số tính năng mới có thể có tác dụng.
Lời kết
Đến đây bạn cũng đã biết cách thiết kế lại phần phản hồi của chủ đề cho WordPress tương thích với phiên bản 2.7 hoặc hơn. Việc trình bày các từ khóa, hàm, biến, tham số, thuật ngữ của việc lập trình trong Tiếng Việt thường không được chính xác do cách hiểu, cách tiếp xúc, cách sử dụng của mỗi người một khác. Bạn có thể đọc bài viết Migrating Plugins and Themes to 2.7/Enhanced Comment Display của chính những người tạo ra WordPress hướng dẫn.
😀 Rất hay