Bạn muốn thay đổi phong cách của mẫu bình luận WordPress trên trang web của bạn? Nhận xét đóng vai trò quan trọng trong việc xây dựng sự tham gia của người dùng trên một trang web. Mẫu nhận xét hấp dẫn và dễ sử dụng khuyến khích người dùng tham gia thảo luận. Đó là lý do tại sao chúng tôi đã tạo ra hướng dẫn dứt khoát về cách dễ dàng thiết kế biểu mẫu nhận xét WordPress.
Trước khi bạn bắt đầu
Chủ đề WordPress kiểm soát sự xuất hiện của trang web của bạn. Mỗi chủ đề WordPress đi kèm với các tệp khác nhau, bao gồm các tệp mẫu, tệp chức năng, JavaScripts và biểu định kiểu.
Biểu định kiểu chứa các quy tắc CSS cho tất cả các thành phần được sử dụng bởi chủ đề WordPress của bạn. Bạn có thể thêm CSS tùy chỉnh của riêng bạn để ghi đè các quy tắc kiểu của chủ đề của bạn.
Nếu bạn chưa từng làm điều này trước đây, hãy xem bài viết của chúng tôi về cách thêm CSS tùy chỉnh trong WordPress cho người mới bắt đầu.
Ngoài CSS, bạn có thể cần thêm một số chức năng để sửa đổi giao diện mặc định của biểu mẫu nhận xét WordPress của mình. Nếu bạn chưa từng làm điều này trước đây, hãy xem bài viết của chúng tôi về cách sao chép và dán mã trong WordPress.
Như đã nói, chúng ta hãy xem cách thiết kế mẫu nhận xét WordPress.
Vì đây là một hướng dẫn khá toàn diện, chúng tôi đã tạo một bảng nội dung để hỗ trợ điều hướng:
- Thay đổi nhận xét WordPress với các lớp CSS mặc định
- Thêm đăng nhập xã hội vào mẫu bình luận WordPress
- Thêm văn bản chính sách bình luận trong mẫu bình luận WordPress
- Di chuyển trường văn bản nhận xét xuống dưới cùng
- Xóa trường trang web (URL) khỏi mẫu nhận xét WordPress
- Thêm hộp kiểm Đăng ký nhận xét trong WordPress
- Thêm thẻ nhanh trong nhận xét WordPress
Trong hầu hết các chủ đề WordPress có một mẫu gọi là Comments.php. Tập tin này được sử dụng để hiển thị các bình luận và hình thức bình luận trên các bài đăng trên blog của bạn. Biểu mẫu nhận xét WordPress được tạo bằng chức năng :.
Theo mặc định, chức năng này tạo biểu mẫu nhận xét của bạn với ba trường văn bản (Tên, Email và Trang web), trường khu vực văn bản cho văn bản nhận xét, hộp kiểm cho tuân thủ RGPD và nút Gửi.
Bạn có thể dễ dàng sửa đổi từng trường này một cách đơn giản bằng cách điều chỉnh các lớp CSS mặc định. Dưới đây là danh sách các lớp CSS mặc định mà WordPress thêm vào mỗi dạng nhận xét.
#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 điều chỉnh các lớp CSS này, bạn hoàn toàn có thể thay đổi giao diện của mẫu nhận xét WordPress của mình.
Hãy tiếp tục và thử thay đổi một số thứ, để bạn có thể biết được cách thức hoạt động của nó.
Đầu tiên, chúng ta sẽ bắt đầu bằng cách làm nổi bật trường biểu mẫu hoạt động. Bằng cách làm nổi bật trường hiện đang hoạt động, biểu mẫu của bạn dễ tiếp cận hơn với những người có nhu cầu đặc biệt và nó cũng làm cho biểu mẫu nhận xét của bạn trông đẹp hơn trên các thiết bị nhỏ hơn.
#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);
}
Đây là hình thức của chúng tôi trông giống như trong chủ đề WordPress Twenty Sixteen sau khi thay đổi:
Với các lớp này, bạn có thể thay đổi hành vi về cách văn bản xuất hiện trong các hộp nhập. Chúng tôi sẽ tiếp tục và thay đổi kiểu văn bản của các trường tên và URL của tác giả.
#author, #email {
font-family: "Open Sans", "Droid Sans", Arial;
font-style:italic;
color:#1d1d1d;
letter-spacing:.1em;
}
#url {
color: #1d1d1d;
font-family: "Luicida Console", "Courier New", "Courier", monospace;
}
Nếu bạn xem kỹ ảnh chụp màn hình bên dưới, tên và nguồn của trường email sẽ khác với URL trang web.
Bạn cũng có thể thay đổi kiểu nút gửi của mẫu nhận xét WordPress. Thay vì sử dụng nút gửi mặc định, hãy cung cấp cho nó một số bóng và độ dốc hộp CSS3.
#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;
}
Đưa các mẫu nhận xét WordPress lên cấp độ tiếp theo
Có thể bạn nghĩ rằng đó là quá cơ bản. Chà, chúng ta phải bắt đầu từ đó, để mọi người có thể theo dõi chúng ta.
Bạn có thể đưa biểu mẫu nhận xét WordPress của mình lên cấp độ tiếp theo bằng cách sắp xếp lại các trường biểu mẫu, thêm đăng nhập xã hội, đăng ký nhận xét, hướng dẫn nhận xét, thẻ nhanh và hơn thế nữa.
Thêm thông tin đăng nhập xã hội vào bình luận WordPress
Hãy bắt đầu bằng cách thêm thông tin đăng nhập xã hội vào bình luận WordPress.
Điều đầu tiên cần làm là cài đặt và kích hoạt plugin đăng nhập xã hội WordPress. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress.
Sau khi kích hoạt, bạn phải truy cập Cài đặt »Đăng nhập xã hội WP trang để cấu hình các cài đặt plugin.
Plugin sẽ yêu cầu các khóa API để kết nối với các nền tảng xã hội. Bạn sẽ thấy các liên kết đến các hướng dẫn về cách có được thông tin này cho mỗi nền tảng.
Sau khi nhập các khóa API, nhấp vào nút Lưu Cài đặt để lưu các thay đổi của bạn.
Bây giờ bạn có thể truy cập trang web của họ để xem các nút đăng nhập xã hội phía trên mẫu nhận xét của họ.
Chúng tôi yêu tất cả người dùng của chúng tôi và chúng tôi thực sự đánh giá cao việc dành thời gian để bình luận trên trang web của chúng tôi. Tuy nhiên, để tạo ra một môi trường thảo luận lành mạnh, điều quan trọng là phải kiểm duyệt các bình luận.
Để hoàn toàn minh bạch, chúng tôi đã tạo một trang chính sách nhận xét, nhưng bạn không thể đặt liên kết này ở chân trang.
Chúng tôi muốn chính sách bình luận của mình nổi bật và hiển thị cho tất cả người dùng đang để lại nhận xét. Đó là lý do tại sao chúng tôi quyết định thêm chính sách bình luận trong mẫu nhận xét WordPress của chúng tôi.
Nếu bạn muốn thêm một trang chính sách bình luận, điều đầu tiên bạn nên làm là tạo một trang WordPress và xác định chính sách bình luận của bạn (bạn có thể đánh cắp trang của chúng tôi và sửa đổi nó cho phù hợp với nhu cầu của bạn).
Sau đó, bạn có thể thêm mã sau vào tệp tin.php của chủ đề hoặc plugin dành riêng cho trang web.
function wpbeginner_comment_text_before($arg) {
$arg('comment_notes_before') = "";
return $arg;
}
add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');
Mã ở trên sẽ thay thế mẫu nhận xét mặc định trước khi ghi chú bằng văn bản này. Chúng tôi cũng đã thêm một lớp CSS vào mã, vì vậy chúng tôi có thể làm nổi bật cảnh báo bằng CSS. Dưới đây là ví dụ CSS chúng tôi sử dụng:
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;
}
Đây là những gì nó trông giống như trên trang web thử nghiệm của chúng tôi:
Nếu bạn muốn hiển thị liên kết sau vùng văn bản nhận xét, hãy sử dụng mã sau đây.
function wpbeginner_comment_text_after($arg) {
$arg('comment_notes_after') = "";
return $arg;
}
add_filter('comment_form_defaults', 'wpbeginner_comment_text_after');
Đừng quên thay đổi URL cho phù hợp, vì vậy hãy truy cập trang chính sách nhận xét của bạn thay vì example.com 
Theo mặc định, biểu mẫu nhận xét WordPress sẽ hiển thị vùng văn bản nhận xét trước, sau đó là tên, email và các trường trang web. Thay đổi này đã được giới thiệu trong WordPress 4.4.
Trước đó, các trang web WordPress trước tiên hiển thị tên trường, email và trường trang web và sau đó là hộp văn bản nhận xét. Chúng tôi cảm thấy rằng người dùng của chúng tôi đã quen với việc xem mẫu nhận xét theo thứ tự đó, vì vậy chúng tôi vẫn sử dụng thứ tự trường cũ trong WPBeginner.
Nếu bạn muốn, tất cả những gì bạn cần làm là thêm đoạn mã sau vào tệp tin.php của chủ đề hoặc một plugin dành riêng cho trang web.
function wpb_move_comment_field_to_bottom( $fields ) {
$comment_field = $fields('comment');
unset( $fields('comment') );
$fields('comment') = $comment_field;
return $fields;
}
add_filter( 'comment_form_fields', 'wpb_move_comment_field_to_bottom');
Mã này chỉ đơn giản là di chuyển trường trong vùng văn bản ý kiến xuống dưới cùng.
Xóa trường Trang web (URL) khỏi biểu mẫu nhận xét WordPress
Các lĩnh vực trang web trong các hình thức bình luận thu hút nhiều người gửi thư rác. Mặc dù loại bỏ nó sẽ không ngăn chặn những kẻ gửi thư rác hoặc giảm bình luận spam, nó chắc chắn sẽ ngăn bạn vô tình phê duyệt một bình luận có liên kết đến trang web của tác giả sai.
Nó cũng sẽ thu nhỏ một trường từ mẫu nhận xét, làm cho nó dễ dàng và thân thiện hơn với người dùng. Để biết thêm thông tin về chủ đề này, hãy xem bài viết của chúng tôi về cách xóa trường URL trang web khỏi mẫu nhận xét WordPress
Để xóa trường URL khỏi biểu mẫu nhận xét, chỉ cần thêm đoạn mã sau vào tệp tin.php của bạn hoặc một plugin dành riêng cho trang web.
function wpbeginner_remove_comment_url($arg) {
$arg('url') = '';
return $arg;
}
add_filter('comment_form_default_fields', 'wpbeginner_remove_comment_url');
Khi người dùng để lại nhận xét trên trang web của bạn, họ có thể muốn theo dõi chủ đề đó để xem ai đó đã phản hồi nhận xét của bạn. Thêm hộp kiểm đăng ký nhận xét cho phép người dùng nhận thông báo tức thì mỗi khi nhận xét mới xuất hiện trong bài đăng.
Để thêm hộp kiểm này, điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Tải lại Đăng ký Nhận xét. Khi kích hoạt, bạn nên truy cập Cài đặt »Đăng ký nhận xét để định cấu hình cài đặt plugin.
Để biết hướng dẫn chi tiết từng bước, hãy xem bài viết của chúng tôi về cách cho phép người dùng đăng ký nhận xét trong WordPress.
Thẻ nhanh là các nút định dạng cho phép người dùng dễ dàng thiết kế nhận xét của họ. Chúng bao gồm các nút để in đậm, in nghiêng, thêm một liên kết hoặc trích dẫn khối.
Để thêm thẻ nhanh, bạn cần cài đặt và kích hoạt plugin Basic Comment Quick Tags. Để biết chi tiết, hãy xem bài viết của chúng tôi về cách dễ dàng thêm các thẻ nhanh trong biểu mẫu nhận xét WordPress.
Đây là hình thức bình luận của bạn sẽ trông như thế nào sau khi thêm các thẻ nhanh chóng.
Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách thiết kế biểu mẫu nhận xét WordPress để làm cho nó thú vị hơn cho người dùng của bạn. Bạn cũng có thể xem các mẹo của chúng tôi để có thêm nhận xét về bài đăng trên blog WordPress của bạn.
Nếu bạn thích bài viết này, đăng ký kênh của chúng tôi YouTube để xem video hướng dẫn WordPress. Bạn cũng có thể tìm thấy chúng tôi tại Twitter y Facebook.
