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

Them huy hieu ben canh ten admin khi binh luan tren WordPress

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 Hocban.vn 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à liên quan đến :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.

Rồi cách làm trên WordPress thì nó tùy mỗi theme nhé, giờ theme Hocban.vn đ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ư: Hocban.vn (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. 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é 😀