Hướng dẫn tùy chỉnh Comment WordPress theo cách riêng của bạn

Hướng dẫn tùy chỉnh Comment WordPress theo cách riêng của bạn

Comment đóng một vai trò quan trọng trong việc xây dựng, tăng mức độ tương tác của người dùng trên một trang web. Một form mẫu bình luận thân thiện với người dùng thân thiện sẽ khuyến khích người dùng tham gia thảo luận trên trang web của bạn hơn. Đó là lý do tại sao hôm nay tôi quyết định viết thêm một bài viết về Comment WordPress.

WordPress theme kiểm soát giao diện hiển thị của mỗi trang web. Mỗi theme WordPress sẽ đi kèm với một số tệp tin riêng bao gồm template, functions, JavaScripts và stylesheets CSS riêng.

Stylesheets chứa CSS quyết định việc hiển thị của giao diện website WordPress của bạn cùng JavaScripts. Bạn cũng có thể thêm CSS tùy chỉnh riêng của mình để thay đổi các CSS mặc định của theme (các thêm CSS tùy chỉnh riêng chúng tôi sẽ cập nhật trong một bài viết khác).

Tại sao tôi lại bắt đầu bằng cách nói về CSS như vậy? Bởi để tùy chỉnh comment trong WordPress mà cụ thể trong hướng dẫn này, chúng ta sẽ đụng độ với nó khá nhiều.

Tùy chỉnh mẫu Bình luận trong WordPress

Bên trong hầu hết các theme WordPress sẽ có một tệp mẫu là comments.php. Tệp này được sử dụng để hiển thị các bình luận, nhận xét và biểu mẫu bình luận trên các bài đăng trên trang web của bạn. Hình thức bình luận WordPress được tạo ra bằng cách sử dụng các hàm chức năng: <?php comment_form(); ?>.

Theo mặc định, hàm này sẽ tạo ra biểu mẫu bình luận với ba trường (Tên, Email và Trang web) và một trường văn bản cho người dùng nhập văn bản bình luận, checkbox GDPR và nút gửi. Bạn có thể dễ dàng tùy chỉnh lại những trường này bằng cách tinh chỉnh 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 mẫu bình luận.

#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 chỉnh sửa ở CSS này, bạn hoàn toàn có thể thay đổi giao diện của mẫu bình luận WordPress. Hãy thử thay đổi chúng, bạn sẽ dễ dàng biết được cách thức hoạt động và sẽ có thể có được một vài ý tưởng tốt hơn.

Đầu tiên, chúng ta sẽ bắt đầu với việc làm nổi bật các trường trong biểu mẫu bình luận. Làm nổi bật trường hiện đang nhập làm cho biểu mẫu dễ theo dõi hơn và nó cũng làm cho biểu mẫu bình luận 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);
}
highlight comment field
Chúng ta sẽ tiếp tục và thay đổi kiểu văn bản của tác giả và các trường URL. Chúng ta sẽ thay đổi font chữ của trường tên và email khác với trường URL.
#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;
}
comment form style
Bạn cũng có thể thay đổi nút gửi biểu mẫu bình luận WordPress. Thay vì sử dụng nút mặc định, hãy cho nó một số gradient CSS như sau.
#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;
}
comment submit button

Thêm đăng nhập mạng xã hội vào WordPress Comment

Tiếp theo chúng ta sẽ cùng thêm thông tin đăng nhập để comment bằng mạng xã hội. Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin WordPress Social Login. Khi kích hoạt, bạn cần truy cập trang Settings » WP Social Login để cấu hình cài đặt plugin.

wp social login settings

Plugin sẽ yêu cầu cung cấp API để kết nối với các nền tảng mạng xã hội. Bạn sẽ thấy các liên kết hướng dẫn cách lấy thông tin này cho mỗi nền tảng. Sau khi nhập API, hãy lưu cài đặt. Bây giờ bạn có thể truy cập trang web của mình để xem các nút đăng nhập xã hội phía trên biểu mẫu bình luận.

add social login comment

Thêm văn bản chính sách bình luận trước hoặc sau biểu mẫu

Việc thúc đẩy, khuyến khích người dùng thảo luận, tranh luận, đăng tải những bình luận, nhận xét, ý kiến đóng góp của riêng mình trên website là điều rất tốt. 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. Để có tính minh bạch cần thiết, chúng ta nên tạo ra một trang chính sách bình luận riêng nhưng bạn cần nổi bật chúng trước mỗi biểu mẫu bình luận chứ không chỉ đơn thuần là đặt liên kết này ở phần footer không thôi đâu.

Nếu bạn muốn làm như vậy, thì điều đầu tiên bạn cần làm là tạo một trang với nội dung chính sách bình luận, thảo luận riêng trên trang web của mình (nếu bạn không rõ cách viết có thể tham khảo tại các trang web khác, các diễn đàn,… và tùy chỉnh lại cho phù hợp). Sau đó, bạn cần thêm đoạn mã sau vào tệp functions.php của theme.

function wpbeginner_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', 'wpbeginner_comment_text_before');
Đoạn code trên sẽ thay thế biểu mẫu bình luận mặc định trước bằng đoạn văn bản ghi chú này. Chúng ta cũng đã thêm một lớp CSS trong đoạn mã này để có thể làm nổi bật thông báo bằng cách sử dụng CSS. Đây là CSS mẫu 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;
}
comment policy notice
Đừng quên thay đổi URL cho phù hợp liên kết đến trang chính sách bình luận của bạn chứ không phải example.com nhé :)

Di chuyển trường văn bản bình luận xuống dưới

Theo mặc định, biểu mẫu bình luận trong WordPress sẽ hiển thị văn bản bình luận trước và sau đó là tên, email và trang web. Thay đổi này đã được giới thiệu trong bản cập nhật WordPress 4.4. Để thay đổi thứ tự này bạn cần thêm đoạn code sau vào tệp functions.php của theme.

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'
comment text bottom

Xóa trường trang web (URL) khỏi biểu mẫu bình luận WordPress

Trường trang web trong biểu mẫu bình luận sẽ là tác nhân thu hút nhiều người gửi bình luận spam, tìm kiếm backlink vô tội vạ trên website của bạn. Trong khi việc bạn xóa chúng hằng ngày sẽ không ngăn chặn tình trạng này, nó chỉ làm bạn mất thêm thời gian, nhưng nếu bạn loại bỏ trường này khỏi bình luận vô tình sẽ làm tình trạng này giảm đi đáng kể.

Để xóa trường URL khỏi biểu mẫu bình luận, bạn chỉ cần thêm đoạn code sau vào tệp functions.php.

function wpbeginner_remove_comment_url($arg) {
$arg['url'] = '';
return $arg;
}
add_filter('comment_form_default_fields', 'wpbeginner_remove_comment_url');
remove url field wordpress

Thêm một Checkbox Đăng ký theo dõi bình luận trong WordPress

Khi người dùng để lại bình luận trên trang web của bạn, nhiều người có thể đang đặt một câu hỏi và muốn theo dõi câu trả lời từ chủ thớt hoặc từ một người nào đó vì vậy việc tạo một checkbox đăng ký theo dõi bình luận trên trang web là điều không thể thiếu. Ngoài ra, với checkbox này bạn sẽ thu hút thêm những người đã thảo luận trên trang web sẽ tiếp tục quay lại và thảo luận tiếp.

Để thêm checkbox này, điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Subscribe to Comments Reloaded. Sau khi kích hoạt, bạn cần truy cập Settings » Subscribe to Comments để cấu hình các cài đặt cho plugin.

plugin Subscribe to Comments Reloaded

Thêm thẻ Quicktags vào biểu mẫu bình luận

Quicktags là các nút định dạng cho phép người dùng dễ dàng tạo kiểu văn bản bình luận. Các nút này bao gồm các nút in đậm, in nghiêng, thêm liên kết,…

Để thêm thẻ quicktags, bạn cần cài đặt và kích hoạt plugin Basic Comment Quicktags.

quicktags

Hi vọng với bài viết này bạn sẽ có thêm nhiều ý tưởng cho việc thiết kế web và tối ưu hóa tỷ lệ tương tác trên website của mình.

Hướng dẫn tùy chỉnh Comment WordPress theo cách riêng của bạn
5 (100%) 2 votes

One Reply to “Hướng dẫn tùy chỉnh Comment WordPress theo cách riêng của bạn”

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *