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 giao diện trang web của bạn. Mỗi chủ đề WordPress có các tệp khác nhau, bao gồm các tệp mẫu, tệp tính 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 trong chủ đề WordPress của bạn. Bạn có thể thêm CSS tùy chỉnh của riêng bạn để ghi đè quy tắc kiểu cho chủ đề của bạn.
Nếu bạn chưa từng làm như vậ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 vào WordPress cho người mới bắt đầu.
Ngoài CSS, bạn có thể cần thêm một số tính năng để thay đổ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 như vậ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ã vào 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 bằng các lớp CSS tiêu chuẩn Thêm đăng nhập xã hội vào WordPress Bình luận biểu mẫu Thêm bình luận Chính sách văn bản vào WordPress Bình luận Biểu mẫu Di chuyển bình luận Trường văn bản xuống dưới Xóa trường trang web (URL bình luận biểu mẫu WordPress) Thêm Đăng ký vào WordPress Bình luận Thêm bình luận Phím tắt
Hầu hết các chủ đề WordPress bao gồm một mẫu được 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. Mẫu bình luận WordPress được tạo ra với chức năng :.
Theo mặc định, tính 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), một trường văn bản cho văn bản nhận xét, một hộp kiểm cho tuân thủ RGPD và nút Gửi.
Bạn có thể dễ dàng thay đổ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 tiêu chuẩn mà WordPress thêm vào mỗi dạng nhận xét.
#respond {} # reply-title {} # hủy-bình luận-reply-link {} #commentform {} # Tác giả {} #email {} #url {} #comment #submit .comment-ghi chú {} .required {}. .comment-form-Author {} .comment-form-email {} .comment-form-url {} .comment-form-comment {} .comment-form-cookies-chấp thuận {} .form-allow-tags {} .form-nộp
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à cố gắng 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 tôi bắt đầu bằng cách chọn trường biểu mẫu hoạt động. Bằng cách chọn trường hoạt động hiện tại, 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 {nền: #fbfbfb; padding:0 10px 0 10px; } / * Đánh dấu trường biểu mẫu hoạt động * / #respond đầu vào (type = text), textarea {-webkit-quá trình chuyển đổi: tất cả 0.30s dễ dàng ra vào; chuyển đổi -moz: tất cả 0.30s dễ dàng ra vào; -ms-quá trình: tất cả 0.30s dễ dàng ra vào; -o-chuyển tiếp: tất cả 0.30s dễ dàng ra vào; phác thảo: không có; đệm: 3px 0px 3px 3px; lề: 5px 1px 3px 0px; viền: 1px solid #DDDDDD; } #respond input (type = text): tập trung, đầu vào (type = email): tập trung, đầu vào (type = url): tập trung, textarea: tập trung {hộp-bóng: 0 0 5px rgba (81, 203, 238, 1); lề: 5px 1px 3px 0px; viền: rpxba 2px (81, 203, 238, 1); }
Đây là hình thức của chúng tôi 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 hiển thị văn bả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 cho trường tên và trường của tác giả.
# Tác giả, #email {font-family: "Open Sans", "Droid Sans", Arial; font-style: nghiêng; color: # 1d1d1d; letter-spacing: .1em; } #url {màu: # 1d1d1d; họ phông chữ: "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 của trang web.
Bạn cũng có thể thay đổi kiểu của nút gửi trong mẫu nhận xét WordPress. Thay vì sử dụng nút gửi tiêu chuẩn, hãy cung cấp cho nó một số bóng và độ dốc lưới CSS3.
#submit {nền: -moz-linear-gradient (trên cùng, # 44c767 5%, # 5cbf2a 100%); nền: -webkit-linear-gradient (trên cùng, # 44c767 5%, # 5cbf2a 100%); nền: -o-linear-gradient (trên cùng, # 44c767 5%, # 5cbf2a 100%); nền: -ms-linear-gradient (trên cùng, # 44c767 5%, # 5cbf2a 100%); nền: gradient tuyến tính (xuống dưới, # 44c767 5%, # 5cbf2a 100%); background-color: # 44c767; moz-border-radius: 28px; -webkit- border-radius: 28px; border-radius: 28px; viền: 1px solid # 18ab29; hiển thị: inline-block; con trỏ: con trỏ; color: # ffffff; font-family: Arial; font-size: 17px; phần đệm: 16px 31px; text-decoration: none; bóng văn bản: 0px 1px 0px # 2f6627; } #submit: hover {nền: -webkit-gradient (tuyến tính, trên cùng bên trái, dưới cùng bên trái, dừng màu (00,05, # 5cbf2a), dừng màu (1, # 44c767)); nền: -moz-linear-gradient (trên cùng, # 5cbf2a 5%, # 44c767 100%); nền: -webkit-linear-gradient (trên cùng, # 5cbf2a 5%, # 44c767 100%); nền: -o-linear-gradient (trên cùng, # 5cbf2a 5%, # 44c767 100%); nền: -ms-linear-gradient (trên cùng, # 5cbf2a 5%, # 44c767 100%); nền: gradient tuyến tính (xuống dưới, # 5cbf2a 5%, # 44c767 100%); background-color: # 5cbf2a; } #submit: active {vị trí: tương đối; top: 1px; }
Đưa mẫu nhận xét WordPress lên cấp độ tiếp theo
Bạn có thể nghĩ rằng nó là quá cơ bản. Chúng tôi phải bắt đầu từ đó để mọi người có thể theo dõi chúng tôi.
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 thông tin, 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 để 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 lấy thông tin cho từng nền tảng.
Khi bạn đã nhập các khóa 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 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 rằng chúng tôi dành thời gian để để lại nhận xét 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 để 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 vào mẫu bình luận 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à thay đổi chúng khi cần thiết).
Sau đó, bạn có thể thêm mã sau vào tệp Feature.php của chủ đề hoặc plugin dành riêng cho trang web.
hàm wpbeginner_comment bản_b Before ($ arg) {$ arg ('comment_notes_b Before') = ""; trả lại $ arg; } add_filter ('comment_form_defaults', 'wpbeginner_comment bản_b Before');
Mã ở trên sẽ thay thế hình thức bình luận tiêu chuẩn 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ể đánh dấu cảnh báo bằng CSS. Dưới đây là ví dụ CSS chúng tôi sử dụng:
p.comment-chính sách {đường viền: 1px solid # ffd499; màu nền: # fff4e5; bán kính đường viền: 5px; phần đệm: 10px; lề: 10px 0px 10px 0px; cỡ chữ: nhỏ; kiểu chữ: in nghiêng; }
Đây là những gì nó trông giống như trên trang thử nghiệm của chúng tôi:
Để xem liên kết cho vùng văn bản nhận xét, sử dụng mã sau đây.
hàm wpbeginner_comment bản_after ($ arg) {$ arg ('comment_notes_after') = ""; trả lại $ arg; } add_filter ('comment_form_defaults', 'wpbeginner_comment bản_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 trước tiên hiển thị vùng văn bản nhận xét và sau đó là các trường tên, email và 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, email và trường trang web và sau đó là trường 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 nhìn thấy 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 Feature.php của chủ đề hoặc một plugin dành riêng cho trang web.
hàm wpb_move_comment_field_to_bottom ($ field) {$ comment_field = $ field ('comment'); bỏ đặt ($ trường ('bình luận')); $ trường ('bình luận') = $ bình luận_field; trả về các trường $; } 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 khu vực văn bản bình luậ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 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. Xóa 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, nhưng chắc chắn 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ề việc xóa trường URL của trang web khỏi biểu 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 Feature.php hoặc plugin dành riêng cho trang web.
hàm wpbeginner_remove_comment_url ($ arg) {$ arg ('url') = ''; trả lại $ 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 đăng ký vào hộp kiểm bình luận cho phép người dùng nhận thông báo tức thì mỗi khi một bình luận 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 để biết, in nghiêng, thêm một liên kết hoặc trích dẫn cho các khối.
Để thêm thẻ nhanh, bạn cần cài đặt và kích hoạt trình cắm nhận xét cơ bản. Để biết thêm thông tin, hãy xem bài viết của chúng tôi về cách dễ dàng thêm thẻ nhanh vào biểu mẫu nhận xét WordPress.
Vì vậy, hình thức bình luận của bạn sẽ trông giống như sau khi bạn 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 và Facebook.
