Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > Wordpress Tips > Tùy biến form Comments trong wordpress
Tùy biến form Comments trong wordpress
Nguyễn Trung Hiếu
Share Code Web Company 2012

Tùy biến form Comments trong wordpress

Bài viết hôm nay chúng ta cùng đi mổ xẻ cái hệ thống comments của wordpress, sau đó cùng tùy chỉnh nó theo phong cách của bạn nhé.

I. Tìm hiểu sơ qua về Comments trong wordpress
Trong wordpress, có một hàm để gọi comments ra đó là comment_form. Hàm này sẽ hiển thị comment ở nơi mà bạn muốn, có thể là cuối mỗi bài post, hoặc bài page trên website của bạn. Thông thường, khi phát triển theme cho wordpress, thì nhà phát triển đã tích hợp riêng phần comments trong một file có tên comments.php rồi. Và sau đó bạn chỉ việc dùng file đó bằng hàm comments_template.
Bạn có thể tìm hiểu về comments_template trong wordpress codex
Nếu chúng ta sử dụng hàm comment_form để gọi comment ra, thì form comment sẽ được hiển thị dưới dạng default với các trường cơ bản như name, email, website…
comment form default in wordpress
Chú ý một vài đối số quan trọng của hàm comment_form:

  • fields – Điều khiển những field nào xuất hiện ngoài form comment.
  • comment_notes_before and comment_notes_after – Được sử dụng để đưa ra các chú ý trước và sau phần comments.
  • title_reply – Dùng để thay đổi phần title của comments, cụ thể đó là thay chữ ‘Leave a Reply’.
  • label_submit – Thay đổi đoạn thông báo khi comment được submit.

II. Tùy biến form comment sử dụng hàm Comment_form
Nào chúng ta cùng bắt tay vào việc tùy biến form comment theo ý chúng ta nhé.
Trước tiên chúng ta muốn thay đổi một số field sẽ xuất hiện bên ngoài form. Chúng ta có thể sử dụng fields trong comment_form. Fields mặc định có dạng như sau:

Vậy, chúng ta sẽ tiến hành bỏ fields website đi, thì đoạn code bạn cần là ở bên dưới

Khi đó kết quả sẽ thành

comments form in wordpress
Tiếp theo là thay đổi dòng chữ “Leave a Reply” thành “Please give us your valuable comment” và “Post comment” thành “Send My Comment” bạn làm như sau:

m in wordpress 3″ width=”500″/>
III. Gỡ một số field trong form comment sử dụng hooks
Bạn có thể sử dụng hook/filter để remove một số trường mà bạn không sử dụng. Filter được dùng để thêm hoặc gỡ bỏ một field nào đó trong form comment là “comment_form_default_fields”. Vậy bây giờ chúng ta tiến hành remove thuộc tính url ra khỏi form comment. Bạn có thể đặt đoạn code dưới đây trong file function.php

Trong đoạn code trên, chúng ta đã thêm remove_comment_fields vào trong bộ lọc filter “comment_form_default_fields” sau đó unset cho url để nó được remove khỏi website.
IV. Thêm dữ liệu vào form comment sử dụng hook
Bạn cũng có thể thêm một field vào trong comment form sử dụng “comment_form_default_fields”. Ở đây, chúng ta sẽ tiến hành thêm thuộc tính tuổi vào form như dưới đây

Ở đây chúng ta thêm một thuộc tính mà nó không có trong style của theme, do vậy bạn cần style nó trong file css của bạn

Nó sẽ trông như thế này
comment form in wordpress
Bây giờ bạn cần lưu trữ thuộc tính trên như một comment meta thì cần phải hook nó vào bộ lọc comment_post như dưới đây

Tiếp theo là bạn cho nó hiển thị ra nơi bạn muốn.

Nó sẽ được như dưới đây
comment in wordpress 5
V. Tùy biến cho các bài post có kiểu đặc biệt
Bạn có thể thêm thuộc tính tuổi chỉ với những bài post nào có dạng ‘Books’ thôi chẳng hạn, còn những bài bình thường khác thì không hiện thuộc tính đó lên thì bạn làm như sau

VI. Hiển thị lại comment
Hàm wp_list_comments được dùng để hiển thị tất cả các comment của người dùng trong một bài post.
Trong file comment.php của theme Twenty Eleven bạn sẽ thấy hàm đó như sau:

và chúng ta sửa thành

Vậy là hàm my_comments_callback sẽ được gọi cho mỗi bài viết.
VII. Styling Your Comment
Trong bước trên, bạn đã gán một callback là my_comments_callback và bây giờ là đoạn style cấu trúc hiển thị cho nó.

Và css

Vậy là xong rồi đó, cùng chiêm ngưỡng thành quả của mình nhé
comment in wordpress 6
Hy vọng qua bài viết này, bạn sẽ có kinh nghiệm để có thể tùy biến hệ thống comment cho wordpress, giúp cho trang web của bạn trông đẹp hơn. Chúc thành công!

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}

Blog Stats

  • 5.679 hits
%d bloggers like this: