Các comment trên JamViet.com

Hiển thị comment của User đăng nhập trong danh sách comment của WordPress

Xin chào các bạn, đã lâu tôi không đăng một bài viết nào trong chuyên mục thủ thuật WordPress, và để cho các bạn đang theo dõi chuyên mục có bài viết mới để nghiên cứu 😀 cùng với yêu cầu của một bạn trên Jam Việt, hôm nay tôi xin chia sẻ cách hiển thị người dùng đăng nhập trong danh sách comment, cách làm này giúp người dùng phân biệt dễ dàng đâu là comment của người có tài khoản, đâu là của khách và đâu là của người viết bài.

Các comment trên JamViet.com
Các comment trên JamViet.com

Như ảnh trên, bạn không thể nào phân biệt được đâu là tác giả bài đăng đang trả lời comment, đâu là comment của khách truy cập, sau đây Jam xin chia sẻ thủ thuật với CSS để tạo thêm một dấu hiệu nhận biết cho các tiêu chí trên.

Trước hết bạn nên để ý tới Class trong các vòng lặp comment, với những người đăng nhập, nó sẽ có thêm class trong phần comment của người đó là byuser, trong khi các comment của chính tác giả sẽ có thêm class bypostauthor, các bạn sẽ dùng thủ thuật với CSS để can thiệp.

Lưu ý, các chỉnh sửa sau nằm trong file Style.css của giao diện nhé.

Đầu tiên, ta không cần phân biệt khách truy cập comment, chỉ cần hiển thị tác giả có comment trả lời bài viết, ta làm như sau:

.bypostauthor .comment-author  {
    position:relative;
}

Ta sẽ khai báo vị trí của tên người comment là relative để các thẻ sau phụ thuộc vào vị trí của thẻ này, ta khai báo thêm như sau:

.bypostauthor .comment-author:after  {
background: #076c91;
border-radius: 4px;
color: #fff;
content: "Tác giả";
padding: 0 10px;
position: absolute;
right: 0;
top: 0;
}

Lưu ý: before hay After đều như nhau, bạn thoải mái chọn, tôi đã làm sẵn màu xanh cho nền và hiển thị bên cạnh tên người comment rồi, các bạn có thể đổi khác đi với cách thức tương tự, giờ ta xem kết quả:

Đã hiển thị được chữ tác giả trong phần comment
Đã hiển thị được chữ tác giả trong phần comment

Và bằng cách trên, cũng cho thẻ class byuser bạn có thể thêm chữ “Quản trị viên” cho các comment của người đăng nhập nếu blog của bạn chỉ có mỗi một User là bạn 😀

Nếu các bạn cần tùy chỉnh sâu hơn, thử tham khảo các plugin giúp tùy chỉnh lại comment trong WordPress nhé.

Chúc các bạn thành công !

TÁC GIẢ:

Tôi là Jam, thâm niên 7 năm thiết kế website và làm SEO. Hãy theo dõi blog của tôi để nhận được nhiều chia sẻ thú vị xung quanh chủ đề công nghệ.

Có 14 bình luận !

  1. Em đã làm được rồi. Cái này anh Jam bổ sung nhé. Muốn phân biệt đâu là admin đâu là tác giả và đâu là khách thì thêm đoạn này vào nữa nhé
    $additional_comment_classes = ”; if ( user_can( $comment->user_id, ‘administrator’ ) ) { $additional_comment_classes = ‘ byadmin’; }

    Rồi thêm class này vào nữa <span > :

    Demo : http://yeualo.com/view/cach-khac-phuc-loi-may-lumia-bi-treo-hinh-banh-rang-xoay-trong-thoi-gian-dai-khi-reset-hoac-update#comment-4364

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 *