Cách tạo kiểu cho bố cục bình luận WordPress của bạn
Gần đây chúng tôi đã chỉ cho bạn cách tạo kiểu cho biểu mẫu nhận xét trên WordPress và chúng tôi nghĩ rằng nó sẽ không đầy đủ nếu chúng tôi không viết về cách tạo kiểu cho bố cục nhận xét của WordPress. Trước đây, chúng ta đã thảo luận rằng có các lớp CSS và ID mặc định do WordPress tạo để giúp các nhà thiết kế chủ đề tạo kiểu cho mẫu của họ dễ dàng hơn. Trong bài viết này, chúng tôi sẽ sử dụng các lớp mặc định đó để chỉ cho bạn cách tạo kiểu cho bố cục nhận xét WordPress của bạn và một số điều thú vị bạn có thể làm với nó.
Vì lợi ích của ví dụ này, Chúng tôi sẽ sửa đổi chủ đề Twenty Twelve WordPress mặc định trong bài viết này. Lưu ý: Bài viết này dành cho những người mới bắt đầu thiết kế chủ đề và những người dùng DIY có hiểu biết tương đối về HTML và CSS.
Các lớp bình luận mặc định của WordPress
Theo mặc định, WordPress tạo các lớp này cho các thành phần trong mẫu nhận xét:
/*Comment Output*/
.commentlist .reply {}
.commentlist .reply a {}
.commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {}
.commentlist .vcard {}
.commentlist .vcard cite.fn {}
.commentlist .vcard span.says {}
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {}
.commentlist .vcard cite.fn a.url {}
.commentlist .comment-meta {}
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}
.commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {}
.commentlist .comment-author-admin {}
.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {}
.commentlist li ul.children li.comment-author-admin {}
#cancel-comment-reply {}
#cancel-comment-reply a {}
Cách tìm lớp CSS nào bạn cần chỉnh sửa
Trước khi chuyển sang tạo kiểu bố cục nhận xét WordPress, một mẹo nhỏ dành cho người dùng mới của chúng tôi. Trình duyệt web Google Chrome và Mozilla Firefox đi kèm với một công cụ tiện dụng mà bạn có thể sử dụng để cải thiện kỹ năng phát triển chủ đề WordPress của mình. Công cụ này có tên là Kiểm tra phần tử. Chỉ cần đưa chuột đến một phần tử trên trang web, nhấp chuột phải và chọn kiểm tra phần tử. Cửa sổ trình duyệt của bạn sẽ chia thành hai hàng và ở cửa sổ phía dưới bạn sẽ thấy mã nguồn của thành phần đó. Cũng trong cửa sổ phía dưới, bạn sẽ có thể thấy các phần tử CSS và cách chúng được tạo kiểu. Bạn thậm chí có thể chỉnh sửa CSS trong đó cho mục đích thử nghiệm. Điều quan trọng cần nhớ là bất kỳ điều gì bạn thay đổi bằng cách sử dụng Phần tử Kiểm tra chỉ hiển thị với bạn. Thời điểm bạn làm mới trang, những thay đổi đó sẽ biến mất. Để thực hiện các thay đổi vĩnh viễn, bạn phải sử dụng tệp style.css hoặc các tệp thích hợp khác trong chủ đề của mình.
Thêm màu nền chẵn và lẻ cho bình luận
Sử dụng màu nền khác cho các bình luận chẵn và lẻ là xu hướng thiết kế đã có từ vài năm nay. Nó giúp dễ đọc đặc biệt nếu bạn có nhiều bình luận. Nó cũng trông rất đẹp với một số màu chủ đề nhất định, đó là lý do tại sao nhiều nhà thiết kế muốn sử dụng chức năng này. Để giúp các nhà thiết kế đạt được mục tiêu này, WordPress thêm một lớp chẵn và lẻ vào mỗi nhận xét tương ứng.
Bạn có thể dễ dàng thêm kiểu chẵn/lẻ cho nhận xét trong style.css của chủ đề bằng cách dán đoạn mã sau.
.commentlist .even .comment {
background-color:#ccddf2;
}
.commentlist .odd .comment {
background-color:#CCCCCC;
}
Kết quả sẽ trông giống như thế này:
Tác giả bình luận kiểu dáng và thông tin Meta
WordPress cũng thêm các lớp vào các thành phần được hiển thị trong mỗi tiêu đề bình luận. Điều này cho phép các nhà thiết kế chủ đề tùy chỉnh hiển thị thông tin tác giả và các meta nhận xét khác như ngày và giờ nhận xét. Đây là mã mẫu để dán vào tệp style.css của chủ đề để tạo kiểu cho các thành phần này theo cách khác nhau. Trong ví dụ này, chúng tôi đã thêm màu nền cho meta nhận xét cùng với một số khoảng cách.
.comments-area article header {
margin: 0 0 48px;
overflow: hidden;
position: relative;
background-color:#55737D;
color:#FFFFFF;
padding: 10px;
}
Nó sẽ trông như thế này:
Tạo kiểu bài viết Tác giả bình luận khác nhau
Thông thường, bạn có thể thấy nhận xét của tác giả bài đăng được đánh dấu bằng màu nền khác hoặc một số huy hiệu bổ sung. WordPress thêm lớp mặc định bypostauthor vào tất cả nhận xét của tác giả bài đăng. Các nhà thiết kế chủ đề WordPress có thể sử dụng lớp này để tạo phong cách khác nhau cho các bình luận của tác giả.
Một số chủ đề sử dụng chức năng gọi lại của riêng chúng để hiển thị nhận xét. Bằng cách sử dụng chức năng gọi lại, các chủ đề này có thể thêm thông tin bổ sung vào nhận xét của tác giả bài đăng. Ví dụ: Twenty Twelve sử dụng dòng sau trong hàm gọi lại nhận xét twentytwelve_comment() (nằm trong tệp functions.php của chủ đề).
// If current post author is also comment author, make it known visually. ( $comment->user_id === $post->post_author ) ? '<span> ' . __( 'Post author', 'twentytwelve' ) . '</span>' : '' );
Mã này thêm Tác giả bài viết vào thông tin meta nhận xét. Tùy thuộc vào cách chủ đề WordPress của bạn xử lý nhận xét của tác giả bài đăng, bạn có thể sửa đổi điều đó thành bất cứ điều gì bạn muốn.
Nếu bạn đang sử dụng một chủ đề khác với Twenty Twelve thì bạn cần tìm hiểu cách chủ đề của bạn xử lý các nhận xét. Chỉ cần mở tệp comments.php của chủ đề của bạn. Nếu chủ đề của bạn đang sử dụng chức năng gọi lại của riêng nó thì bạn sẽ thấy nó bên trong hàm wp_list_comments, như sau:
<?php wp_list_comments( array( 'callback' => 'twentytwelve_comment', 'style' => 'ol' ) ); ?>
Trong ví dụ trên, bạn có thể thấy chủ đề đang sử dụng twentytwelve_comment làm hàm gọi lại. Nếu một hàm gọi lại được chỉ định thì vị trí có thể tìm thấy hàm này nhất là trong tệp tin.php của chủ đề của bạn.
Trong ví dụ này, chúng tôi đang thay đổi chức năng này để hiển thị Trình chỉnh sửa thay vì Tác giả bài đăng. Để làm điều đó, chúng tôi đã sửa đổi chức năng gọi lại nhận xét như thế này:
// If current post author is also comment author, make it known visually. ( $comment->user_id === $post->post_author ) ? '<span> ' . __( 'Editor', 'twentytwelve' ) . '</span>' : '');
Chúng tôi cũng sẽ sửa đổi giao diện của nó bằng cách thêm phần sau vào tệp style.css của chủ đề như thế này:
li.bypostauthor cite span {
color: #21759b;
background-color: #f8f0cb;
background-image: none;
border: 1px solid #f8f0cb;
border-radius: 3px;
box-shadow: none;
padding: 3px;
font-weight:bold;
}
Đây là cách nó sẽ trông như thế nào:
Liên kết trả lời bình luận kiểu dáng trong bình luận WordPress
Hầu hết các chủ đề WordPress đều có liên kết trả lời bên dưới mỗi bình luận. Chức năng này chỉ được hiển thị nếu bạn đã bật nhận xét theo chuỗi. Để bật nhận xét theo chuỗi, hãy truy cập quản trị viên WordPress của bạn (Cài đặt » Thảo luận). Hãy xem phần có ghi các cài đặt nhận xét khác và chọn hộp để bật nhận xét theo luồng (lồng nhau).
Các lớp CSS mặc định do WordPress tạo cho liên kết trả lời là reply và comment-reply-link. Chúng tôi sẽ sử dụng các lớp đó để sửa đổi liên kết trả lời và biến thành nút CSS.
.reply {
float:right;
margin:0 10px 10px 0;
text-align:center;
background-color: #55737D;
border:1px solid #55737D;
border-radius:3px;
padding:3px;
width:50px;
box-shadow: 1px 1px 2px 2px #4f4f4f;
}
.comment article {
padding-bottom:2.79rem;
}
a.comment-reply-link,
a.comment-edit-link {
color: #FFFFFF;
font-size: 13px;
font-size: 0.928571429rem;
line-height: 1.846153846;
text-decoration:none;
}
a.comment-reply-link:hover,
a.comment-edit-link:hover {
color: #f6e7d7;
}
Đây là cách nó sẽ trông như thế nào:
Nút chỉnh sửa bình luận kiểu dáng
Trong hầu hết các chủ đề WordPress, người dùng đã đăng nhập có khả năng chỉnh sửa nhận xét có thể thấy liên kết chỉnh sửa nhận xét bên dưới mỗi nhận xét. Đây là một CSS nhỏ sử dụng lớp mặc định comment-edit-link để sửa đổi giao diện của liên kết.
a.comment-edit-link {
float:left;
margin:0 0 10px 10px;
text-align:center;
background-color: #55737D;
border:1px solid #55737D;
border-radius:3px;
padding:3px;
width:50px;
box-shadow: 1px 1px 2px 2px #4f4f4f;
}
Đây là cách nó sẽ trông như thế nào:
Tạo kiểu Hủy bình luận Trả lời Liên kết
Trong hầu hết các chủ đề WordPress hay, việc nhấp vào liên kết Trả lời sẽ mở ra biểu mẫu nhận xét ngay bên dưới nhận xét mà bạn đang trả lời kèm theo liên kết để hủy trả lời nhận xét. Hãy sửa đổi liên kết trả lời hủy nhận xét này bằng cách sử dụng ID CSS mặc định cancel-comment-reply.
#cancel-comment-reply-link {
text-align:center;
background-color: #55737D;
border:1px solid #55737D;
border-radius:3px;
padding:3px;
width:50px;
color:#FFFFFF;
box-shadow: 1px 1px 2px 2px #4f4f4f;
text-decoration:none;
}
Đây là cách nó sẽ trông như thế nào:
Tạo kiểu cho mẫu bình luận WordPress
Các hình thức nhận xét có thể sử dụng, đẹp mắt về mặt thẩm mỹ và phong cách sẽ khuyến khích người dùng để lại nhận xét trên blog của bạn. Trước đó chúng tôi đã viết một bài viết chi tiết về cách tạo kiểu cho mẫu bình luận WordPress. Chúng tôi thực sự khuyên bạn nên kiểm tra xem làm thế nào 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.
Chúng tôi hy vọng rằng bài viết này sẽ giúp bạn tạo kiểu cho bố cục bình luận WordPress của mình. Nếu bạn có bất kỳ câu hỏi hoặc đề xuất nào, vui lòng cho chúng tôi biết bằng cách để lại nhận xét bên dưới.