Hướng dẫn tùy biến Form bình luận WordPress bằng CSS (hướng dẫn cơ bản)

Bạn có muốn tùy biến form bình luận WordPress trên trang web của mình hay không? Phần bình luận đóng vai trò quan trọng trong việc thu hút tương tác người dùng trên một trang web. Một form bình luận đẹp mắt, thân thiện với người dùng sẽ khuyến khích mọi người tham gia thảo luận. Đó là lý do tại sao gần đây chúng tôi đã tạo ra một hướng dẫn giúp bạn dễ dàng tùy biến form bình luận WordPress theo ý thích của mình.

Trước khi bắt đầu

Theme WordPress kiểm sóaoát hiển thị cho trang web của bạn. Mỗi theme WordPress thường có một số file bao gồm file khuôn mẫu (template), file hàm, JavaScripts và stylesheet.

Stylesheet chứa các quy tắc CSS cho tất cả các thành phần được sử dụng bởi theme WordPress của bạn. Bạn có thể thêm CSS tùy chỉnh của riêng mình để ghi đè lên quy tắc định dạng của theme.

Nếu bạn chưa từng làm điều đó trước đây, vui lòng xem thêm bài viết về cách thêm CSS trong WordPress cho người mới bắt đầu của chúng tôi.

Ngoài CSS, bạn cũng có thể cần thêm một số chức năng để sửa đổi hiển thị mặc định cho form bình luận WordPress của bạn. Nếu bạn chưa làm điều đó trước đây, vui lòng xem bài viết của chúng tôi về cách sao chép và dán code trong WordPress .

Qua trở lại theme của bài viết này, chúng ta hãy tìm hiểu xem làm thế nào để tùy biến form bình luận WordPress.

Vì đây là một hướng dẫn khá toàn diện, chúng tôi đã tạo một mục lục để bạn có thể điều hướng dễ dàng:

Thay đổi form bình luận WordPress bằng các lớp CSS mặc định
Thêm đăng nhập xã hội vào form bình luận WordPress
Thêm văn bản chính sách bình luận trong form bình luận WordPress
Di chuyển trường văn bản bình luận xuống phía dưới
Xóa trường website (URL) khỏi form bình luận WordPress
Thêm Đăng ký theo dõi bình luận trong WordPress
Thêm Quicktags vào form bình luận trong WordPress

Thay đổi form bình luận trong WordPress

Hầu hết các theme WordPress đều có một template tên là Comments.php. File này được sử dụng để hiển thị bình luận và form nhập bình luận trên các bài đăng trên blog của bạn. Form bình luận WordPress được tạo bằng cách sử dụng chức năng : <?php comment_form(); ?>.

Chức năng mặc định này tạo ra form bình luận của bạn với ba trường cơ bản (Tên, Email và website), một trường để nhập bình luận dưới dạng văn bản, một checkbox tuân thủ GDPR và nút gửi.

Bạn có thể dễ dàng sửa đổi từng trường này 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 form bình luận.

Hãy tiếp tục theo dõi và cố gắng thay đổi một số điều, để bạn có thể có thêm vài ý tưởng hay về cách thức hoạt động của nó.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18	`#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 form bình luận WordPress. Chúng ta sẽ tiếp tục thử thay đổi kiểu văn bản của tên tác giả và các trường URL

Đầu tiên, chúng ta sẽ bắt đầu bằng cách làm nổi bật trường đang hoạt động. Làm nổi bật trường hiện đang hoạt động làm cho form của bạn dễ tiếp cận hơn đối với những người có nhu cầu đặc biệt và nó cũng làm cho form bình luận của bạn trông đẹp hơn trên các thiết bị nhỏ hơn.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28 #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 ảnh form bình luận của theme Twenty Sixteen của WordPress sau khi đã được thay đổi:

Sử dụng các lớp này, bạn có thể thay đổi cách văn bản xuất hiện bên trong các hộp đầu vào. Chúng ta sẽ tiếp tục và thay đổi kiểu văn bản của tên tác giả và các trường URL.

1
2
3
4
5
6
7
8
9
10
11 #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 nhìn kỹ vào ảnh chụp màn hình bên dưới, tên trường và phông chữ trường email sẽ khác với URL trang web.

Bạn cũng có thể thay đổi kiểu của nút gửi form bình luận WordPress. Thay vì sử dụng nút gửi mặc định, chúng ta có thể thêm bóng đổ và các hiệu ứng trong CSS3.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34 ##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 form bình luận WordPress lên cấp độ cao hơn

Bạn có thể nghĩ rằng những điều trên quá cơ bản, nhưng chúng ta cần bắt đầu tại đó để mọi người đền có thể theo kịp.

Bạn có thể đưa form bình luận 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 thông tin đăng nhập mạng xã hội, theo dõi bình luận, quicktags …

Thêm đăng nhập mạng xã hội vào bình luận WordPress

Hãy bắt đầu với việc thêm thông tin đăng nhập xã hội vào bình luận WordPress.

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Đăng nhập mạng 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 cần truy cập Settings » WP Social Login để định cấu hình cài đặt plugin.

Plugin sẽ yêu cầu các mã API để kết nối với các nền tảng xã hội. Bạn sẽ thấy các đường liên kết đến các hướng dẫn nhập thông tin cho từng nền tảng.

Sau khi nhập các mã key API, hãy 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 mình để xem các nút đăng nhập mạng xã hội ở phía trên form bình luận của bạn.

Thêm chính sách bình luận ở trước hoặc sau form bình luận

Chúng ta đều thích tất cả người dùng của mình dành ra vài phút để viết vài dòng bình luận trên trang của mình. Tuy nhiên, để tạo ra một môi trường thảo luận lành mạnh, việc phải kiểm duyệt các bình luận là rất quan trọng.

Để mọi thứ trở nên rõ ràng, chúng ta có thể tạo ra trang chính sách bình luận, nhưng bạn không nên đặt liên kết này ở cuối trang.

Chúng tôi muốn làm cho chính sách bình luận trở nên nổi bật và hiển thị cho tất cả người dùng đang để lại bình luận. Đây là lý do tại sao chúng tôi quyết định thêm chính sách bình luận trong form bình luận WordPress của mình.

Nếu bạn muốn tạo thêm một trang chính sách bình luận, đầu tiên bạn 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ể sử dụng lại trang mẫu của chúng tôi và sửa đổi nó để đáp ứng nhu cầu của bạn).

Sau đó, bạn có thể thêm đoạn code sau vào file functions.php trên theme của bạn hoặc cho plugin riêng của trang.

1
2

3
4
5
6 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ế form bình luận mặc định trước đó. Chúng tôi cũng đã thêm một lớp CSS trong mã, để có thể làm nổi bật thông báo bằng CSS. Đây là CSS mẫu mà chúng tôi đã sử dụng:

1
2
3
4
5
6
7
8
9 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; }

Phía dưới là cách nó hiển thị 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 bình luận, hãy thử sử dụng đoạn code sau đây.

1
2

3
4
5
6 function wpbeginner_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', 'wpbeginner_comment_text_after');

Đừng quên thay đổi URL cho phù hợp, để nó đi đến trang chính sách bình luận của bạn chứ không phải trang example.com .

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

Theo mặc định, form bình luận WordPress hiển thị vùng văn bản bình luận trước rồi đến tên, email và các trường trang web. Thay đổi này đã được giới thiệu trong phiên bản WordPress 4.4.

Trước đó, các trang web WordPress đã hiển thị các trường tên, email và trang web trước tiên và sau đó là hộp văn bản bình luận. Chúng tôi cảm thấy rằng người dùng đã quen sử dụng form bình luận theo thứ tự đó, vì vậy chúng tôi vẫn sử dụng thứ tự trường cũ trên WPBeginner.

Nếu bạn muốn làm điều đó, bạn chỉ cần thêm đoạn code sau vào file functions.php trong theme của bạn hoặc một site-specific WordPress plugin.

1
2
3
4
5
6
7
8 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');

Code này chỉ đơn giản là di chuyển trường nhập văn bản bình luận xuống dưới cùng.

Xóa trường website (URL) khỏi form bình luận WordPress

Các trường nhập website trong các form bình luận thu hút rất nhiều spam. Mặc dù loại bỏ nó cũng sẽ không ngăn chặn được những kẻ gửi thư rác hay làm giảm bình luận spam, nhưng nó chắc chắn sẽ giúp bạn tránh vô tình phê duyệt một bình luận với liên kết đến trang web của tác giả xấu.

Nó cũng sẽ giảm một trường từ form bình luận, giúp form của bạn trở nên thân thiện hơn với người dùng. Để biết thêm về chủ đề này, hãy xem thêm bài viết của chúng tôi về việc xóa trường url website khỏi form bình luận WordPress

Để xóa trường URL khỏi form bình luận, bạn chỉ cần thêm đoạn code sau vào file functions.php của bạn hoặc một plugin site-specific WordPress.

1
2
3
4
5 function wpbeginner_remove_comment_url($arg) { $arg['url'] = ''; return $arg; } add_filter('comment_form_default_fields', 'wpbeginner_remove_comment_url');

Thêm 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, họ có thể muốn theo dõi chủ đề đó để xem có ai trả lời bình luận của họ hay không. Bằng cách thêm checkbox đăng ký theo dõi bình luận, bạn cho phép người dùng nhận thông báo tức thì mỗi khi bình luận mới xuất hiện trên bài đăng.

Để thêm hộp 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. Khi kích hoạt, bạn cần truy cập Settings » Subscribe to Comments để định dạng 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ý theo dõi bình luận trong WordPress .

Thêm Quicktags trong form bình luận

Quicktags là các nút định dạng cho phép người dùng dễ dàng tùy biến cho bình luận của họ. Chúng bao gồm các nút để in đậm, in nghiêng, thêm liên kết hoặc quote.

Để thêm quicktags, bạn cần cài đặt và kích hoạt plugin Basic Comment Quicktags. Để 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 quicktags trong form bình luận WordPress .

Form bình luận của bạn sau khi thêm quicktags sẽ trông như sau.

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách tùy biến form bình luận trên WordPress để giúp trang của bạn trở nên thú vị hơn với người sử dụng. Bạn cũng có thể muốn xem thêm các mẹo để nhận được nhiều bình luận về bài đăng trên blog WordPress của mình.

Nếu bạn thích bài viết này, vui lòng đăng ký YouTube Channel của chúng tôi để xem thêm các hướng dẫn về WordPress. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook.

Thẻ : tùy biến Form bình luận WordPress bằng CSS