Hướng dẫn tùy biến Comment Form trong WordPress

Bạn có muốn thay đổi định dạng kiểu cho biểu mẫu bình luận (Comment Form) cho WordPress site của mình. Bình luận đóng một vai trò quan trọng trong việc xây dựng mức độ tương tác của người dùng trên một trang web. Một Comment Form ưu nhìn, thân thiện sẽ khuyến khích người dùng tham gia bình luận. Đó là lý do tại sao tôi viết bài này để hướng dẫn cho người mới cách định dạng kiểu cho biểu mẫu bình luận trong WordPress.

Trước khi bắt đầu

WordPress Theme kiểm soát cách hiển thị đối với website của bạn. Mỗi một WordPress Theme thường có các tập tin quan trọng như tập tin khuôn mẫu (template), tập tin functions.php, tập tin JavaScript, tập tin stylesheets…

Stylesheets chứa các mã CSS quy định cách hiển thị đối với tất cả các đối tượng trong WordPress Theme. Tuy nhiên bạn có thể thêm các mã CSS tùy chỉnh để ghi đè lên các tập tin quy định định dạng kiểu của Theme.

Ngoài CSS bạn cũng cần phải thêm một số tính năng để thay đổi cách hiển thị mặc định của WordPress Comment Form.

Thay đổi định dạng kiểu cho Comment Form trong WordPress

Trong hầu hết các WordPress Theme đều có một template có tên là comment.php. Tập tin này dùng để hiển thị các bình luận có trên trang của bạn và Comment Form. WordPress Comment Form được tạo ra bằng cách sử dụng hàm: <?php comment_form(); ?>.

Theo mặc định, hàm này tạo ra cho WordPress Comment Form của bạn 03 trường văn bản là: Name, Email, và Website. Ngoài ra nó còn có khu vực dùng để nhập bình luận, nút đồng ý với các điều khoản, và nút Gửi bình luận.

Bạn có thể dễ dàng chỉnh sửa các trường này bằng cách bằng cách tinh chỉnh các lớp CSS mặc định.

Bên dưới là danh sách các lớp CSS mà theo mặc định WordPress đã thêm vào Comment Form:

#respond { }
#reply-title { }
#cancel-comment-reply-link { }
#commentform { }
#author { }
#email { }
#url { }
#comment
#submit
.comment-notes { }
.required { }
.comment-form-author { }
.comment-form-email { }
.comment-form-url { }
.comment-form-comment { }
.comment-form-cookies-consent { }
.form-allowed-tags { }
.form-submit

Chỉ cần tinh chỉnh các lớp CSS này, bạn hoàn toàn có thể thay đổi giao diện của Comment Form.

Hãy tiếp tục và thử chỉnh sửa một vài thứ đơn giản để hiểu được cách thức hoạt động của nó.

Chúng ta hãy bắt đầu bằng cách làm nổi bật các trường đang hoạt động. Làm nổi bật trường đang hoạt động thu hút những người có nhu cầu đặc biệt và nó cũng làm cho biểu mẫu của bạn trông đẹp hơn trên các thiết bị có màn hình nhỏ.

#respond {
background: #fbfbfb;
padding:0 10px 0 10px;
/* Highlight active form field */
#respond input[type=text], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
#respond input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
margin: 5px 1px 3px 0px;
border: 2px solid rgba(81, 203, 238, 1);
}

Và Comment Form của tôi sẽ trông như thế này sau khi thực hiện chỉnh sửa trong Theme Twenty Sixteen.

comment form after change css

Sử dụng các lớp này bạn có thể thay đổi kiểu chữ trong các trường văn bản của Comment Form. Tôi sẽ thử thay đổi kiểu chữ của trường Author và URL.

#author, #email, #url{
font-family: “Open Sans”, “Droid Sans”, Arial;
font-style:italic;
color:#1d1d1d;
letter-spacing:.1em;

custome field in comment form

Bạn cũng có thể thay đổi định dạng kiểu cho nút Submit trên Comment Form. Thay vì sử dụng nút Submit mặc định, bạn có thể sử dụng CSS để làm cho nút trong suốt và đổ bóng.

#submit {
background:-moz-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-webkit-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-o-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-ms-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
background-color:#44c767;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
#submit:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cbf2a), color-stop(1, #44c767));
background:-moz-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-webkit-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-o-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-ms-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
background-color:#5cbf2a;
#submit:active {
position:relative;
top:1px;
}

Và đây là kết quả:

custome submit botton

Nâng tầm cho Comment Form

Bạn có thể nghĩ rằng những điều tôi chia sẻ ở trên là quá cơ bản? Vâng đúng là mọi thứ quá cơ bản, vì tôi muốn chia sẻ những điều cơ bản nhất để mọi người có thể dễ dàng theo dõi.

Bạn có thể nâng tầm cho Comment Form của mình bằng cách sắp xếp lại các trường, thêm các nút đăng nhập vào các mạng xã hội, đăng ký để bình luận và nhiều thứ khác.

Thêm Social Login vào WordPress Comment Form

Hãy bắt đầu việc nâng tầm Comment Form của bạn bằng cách thêm Social Login.

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin WordPress Social Login. Nếu bạn chưa biết cách cài đặt plugin, hãy xem lại bài viết Hướng dẫn cài đặt và quản lý WordPress plugin.

Sau khi kích hoạt, bạn cần truy cập vào trang Settings » WP Social Login để cấu hình các cài đặt của plugin.

wordpress social login

Plugin sẽ yêu cầu khóa API, để kết nối đến các nền tảng mạng xã hội. Bạn sẽ thấy các liên kết có hướng dẫn về cách lấy thông tin này cho mỗi nền tảng.

Sau khi nhập các khóa API của bạn, hãy nhấp vào nút Save Settings để lưu trữ các thay đổi của bạn.

Bây giờ bạn có thể truy cập vào trang web của mình để xem các nút đăng nhập mạng xã hội phía trên Comment Form của bạn.

Thêm các quy định, chính sách về việc để lại bình luận trước hoặc sau Comment Form

Nếu bạn là chủ sở hữu của một website, bạn sẽ rất quý trọng độc giả của mình. Với tôi, tôi thật sự mong sẽ nhận được các bình luận từ họ. Tuy nhiên để tạo ra một môi trường trao đổi lành mạnh, cần phải kiểm duyệt các bình luận. Bởi vì ngoài những thành viên bình luận để xây dựng, đóng góp còn có những người chuyên đi spam, để lại những bình luận thiếu văn minh.

Để minh bạch, bạn có thể tạo một trang quy định các chính sách để lại bình luận. Tuy nhiên bạn không thể chỉ đặt liên kết đến trang này ở cuối blog. Vì sẽ rất ít người tìm đọc nó.

Nếu bạn muốn tạo một trang chính sách bình luận, việc đầu tiên bạn cần làm là tạo một trang trong WordPress, sau đó thêm vào các điều khoản sao cho phù hợp.

Sau đó bạn có thể thêm đoạn code bên dưới vào tập tin functions.php của mình.

function thanh1986t_comment_text_before($arg) {
$arg[‘comment_notes_before’] = “<p class=’comment-policy’>We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href=’http://www.example.com/comment-policy-page/’>comment policy</a>.</p>”;
return $arg;
add_filter(‘comment_form_defaults’, ‘thanh1986t_comment_text_before’);

Đoạn mã trên sẽ thay thế thông báo mặc định của Comment Form bằng đoạn văn bản này. Tôi cũng thêm một lớp CSS để làm nổi bật thông báo. Và bên dưới là mã CSS mẫu:

p.comment-policy {
border: 1px solid #ffd499;
background-color: #fff4e5;
border-radius: 5px;
padding: 10px;
margin: 10px 0px 10px 0px;
font-size: small;
font-style: italic;
}

Sau khi thêm mã CSS, Comment Form trông sẽ như thế này:

add comment policy to comment formNếu bạn muốn hiển thị liên kết bên dưới khu vực nhập bình luận, hãy dùng đoạn code bên dưới:

function thanh1986t_comment_text_after($arg) {
$arg[‘comment_notes_after’] = “<p class=’comment-policy’>We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href=’http://www.example.com/comment-policy-page/’>comment policy</a>.</p>”;
return $arg;
add_filter(‘comment_form_defaults’, ‘thanh1986t_comment_text_after’);

Đừng quên thay đổi URL sao cho phù hợp để nó chuyển hướng chính xác đến trang chính sách bình luận của bạn.

Chuyển trường Comment Text xuống dưới

Theo mặc định, WordPress Comment Form hiển thị khu vực dùng để nhập bình luận trước tiên và sau đó là các trường Name, Email và Website. Sự thay đổi này được giới thiệu trong phiên bản WordPress 4.4.

Trước đó WordPress hiển thị các trường Name, Email và Website trước sau đó mới hiển thị hộp văn bản bình luận. Đa số người dùng đều thích cách sắp xếp này, vì thế tôi vẫn giữ bố cục này trên blog của mình.

Nếu bạn muốn làm điều đó, bạn chỉ cần thêm đoạn code bên dưới vào tập tin functions.php của mình.

function thanh1986t_move_comment_field_to_bottom( $fields ) {
$comment_field = $fields[‘comment’];
unset( $fields[‘comment’] );
$fields[‘comment’] = $comment_field;
return $fields;
}
add_filter( ‘comment_form_fields’, ‘thanh1986t_move_comment_field_to_bottom’

Đoạn mã trên sẽ di chuyển hộp văn bản bình luận xuống phía dưới.

move comment area to bottom

Cách xóa bỏ trường Website (URL) trong WordPress Comment Form

Trường website trong Comment Form thường thu hút nhiều người gửi spam. Xóa trường này không chỉ giúp làm giảm spam mà còn giúp bạn tránh vô tình phê duyệt các bình luận có chèn liên kết xấu.

Nó cũng làm giảm các trường trên Comment Form, giúp cho biểu mẫu nhìn gọn gàng và thân thiện hơn.

Để xóa trường Website (URL) chỉ cần thêm đoạn code bên dưới vào tập tin functions.php.

function thanh1986t_remove_comment_url($arg) {
$arg[‘url’] = ”;
return $arg;
}
add_filter(‘comment_form_default_fields’, ‘thanh1986t_remove_comment_url’);

remove url field

Thêm hộp kiểm đăng ký để bình luận vào Comment Form

Khi người dùng để lại bình luận trên website của bạn, có thể họ sẽ muốn biết có ai quan tâm, trả lời lại bình luận của họ hay không. Bằng cách thêm hộp kiểm đăng ký để bình luận, bạn cho phép người dùng nhận thông báo ngay tức thì bất cứ khi nào bình luận mới xuất hiện trên bài viết.

Để thêm hộp kiểm này, việc đầu tiên bạn cần phải làm là cài đặt và kích hoạt plugin Subscribe to Comments Reloaded. Sau khi kích hoạt, bạn truy cập vào trang Settings » Subscribe to Comments để cấu hình các cài đặt của plugin.

Tôi hy vọng rằng bài viết này sẽ giúp bạn biết cách định dạng kiểu cho Comment Form trong WordPress.

Nếu bạn thích bài viết, đừng quên Like và Share.

Hẹn gặp lại bạn trong bài viết tiếp theo./.

Đăng ký nhận bài viết mới nhất

Hãy đăng ký nhận tin để nhận được những nội dung thú vị và tuyệt vời!

Để lại bình luận

Plugins Themes Thủ thuật
Cách hiển thị tổng số bình luận trong WordPress
Hướng dẫn thêm JavaScript trong WordPress
Hướng dẫn thêm JavaScript trong WordPress
HƯỚNG DẪN NHÂN BẢN WORDPRESS SITE
Hướng dẫn nhân bản WordPress site
Keyword Research SEO Offpage SEO Onpage
Từ khoá và website của bạn
Xây dựng Website chuẩn SEO
Xây dựng Website chuẩn SEO
Hướng dẫn chi tiết WordPress SEO
Hướng dẫn chi tiết WordPress SEO cho người mới
Ajax Bootstrap HTML/CSS JavaScript Joomla jQuery PHP/MySQL
Cách đặt tên miền
Tên miền là gì? Cách chọn tên miền cho blog WordPress
Thay đổi tên miền cho website wordpress
Hướng dẫn thay đổi tên miền cho website WordPress
Sự khác nhau giữa tên miền và Web Hosting
Sự khác nhau giữa tên miền và Web Hosting
Amazon Nichesite Google Adsense Product Lauch Social Marketing Viết Blog Youtube Partner
Thêm Google Adsense vào trang web WordPress
Hướng dẫn thêm Google Adsense vào trang web WordPress
Hướng dẫn đăng ký tài khoảnClickbank khi bị chặn ở Việt Nam
Hướng dẫn đăng ký tài khoản Clickbank khi bị chặn tại Việt Nam
Kiếm tiền từ blog WordPress
Kiếm tiền từ blog WordPress như thế nào?