Thêm huy hiệu bên cạnh tên Admin khi bình luận trên WordPress đơn giản với CSS
Thêm huy hiệu bên cạnh tên admin khi bình luận trên WordPress
Hello, chào ngày mới nhé anh em ! Hôm nay thietkewebsitephuyen.com có trò này hay lắm, đó là: Thêm huy hiệu bên cạnh tên Admin khi bình luận trên WordPress. Ở một cách khác ta có thể gọi nó là User Role Label . Đơn giản và nhanh thôi vì nó được thực hiện chỉ với một đoạn CSS ngắn.
Cách thêm huy hiệu bên cạnh tên Admin khi bình luận trên WordPress
Thật ra thủ thuật này là một mẹo đơn giản với CSS và cụ thể nó là việc sử dụng thuộc tính :after Selector . Không chỉ áp dụng cho WordPress không thôi mà đối với các nền tảng khác cũng vậy như Blogspot chẳng hạn.
Cách làm trên WordPress thì nó tùy mỗi theme nhé, giờ theme thietkewebsitephuyen.com đang dùng là Smartline của Themezee, tên admin bình luận nó có class là:
.bypostauthor .fn {.....}
Giờ, muốn thêm cái gì đó ở đằng sau thì ta sẽ thêm :after vào sau như này nè:
.bypostauthor .fn:after {...}
Trong cái {….} sẽ là định dạng cho nội dung và nội dung cần hiển thị ở đó, nó có thể là ngôi sao như ảnh đầu bài, dấu tick xác minh, hoặc một đoạn text màu xanh lá cây như: thietkewebsitephuyen.com (admin) chẳng hạn.
Các bạn thực hiện theo như sau: Vào Customize >> Additional CSS >> dán đoạn code dưới đây vào trong đó rồi lưu lại để xem kết quả.
.bypostauthor .fn:after {
content: 'f513';
color: #03A9F4;
display: inline-block;
text-decoration: inherit;
vertical-align: middle;
font-family: 'Genericons';
-webkit-font-smoothing: antialiased;
margin-left: 3px;
}
- Nếu muốn đổi huy hiệu khác thì bạn xem các mẫu huy hiệu khác theo bảng mã: Genericons unicode codes list values này (do theme Smartline dùng icon của bên này, theme của bạn có khi dùng icon của bên khác). Mà cái này là theo font Genericons nhé, còn font khác thì không xài được đoạn CSS trên.
- Nếu muốn thay huy hiệu bằng từ Admin thì dán đoạn này vào:
.bypostauthor .fn:after {
content: 'Admin';
color: green;
display: inline-block;
text-decoration: inherit;
vertical-align: middle;
font-family: 'arial';
-webkit-font-smoothing: antialiased;
margin-left: 3px;
}
Xong rồi đó, bạn thấy sao ? Quá được đi chứ nhỉ ? Ta cứ dựa vào cách này và nghĩ ra nhiều trò hay ho khác nhé, và comment thành quả bên dưới để anh em chiêm ngưỡng nhen :v
Cuối cùng, lâu quá không viết lách gì, nay mần bài chia sẻ này đến anh em để giao lưu tí ha. Anh em có điều gì thắc mắc hoặc góp ý cứ để lại bình luận bên dưới nhé 😀
Bài viết liên quan
- Hướng dẫn thêm User Role Label cạnh tên người comment trong WordPress
- Đếm số bình luận của mỗi người, user comment count trên WordPress