Thêm tích xanh vào tên tác giả trong các bài đăng trên blog WordPress giúp cho khách truy cập website nhận thấy các bài đăng thêm niềm tin và tín nhiệm.
Trong bài viết này, Thuthuatwiki sẽ hướng dẫn bạn cách thêm tích xanh vào tên tác giả trong WordPress mà không cần plugin của bên thứ ba nào.
Xem thêm:
Cách Thêm Nhãn Menu Tuỳ Chỉnh Cho Website Dùng Wordpress
Cách vô hiệu hoá chức năng WP-Cron trong WordPress
Các bước để thêm tích xanh vào tên tác giả trong WordPress
Bước 1: Chọn biểu tượng huy hiệu icon bạn thích
Đầu tiên, bạn cần chọn biểu tượng muốn đặt làm huy hiệu đã xác minh cho tên tác giả. Có nhiều thư viện và bộ icon có sẵn trên internet, chẳng hạn như Font Awesome, Iconify,…
Trong hướng dẫn này, Thuthuatwiki sẽ sử dụng Iconify để tìm kiếm các biểu tượng icon mà chúng tôi muốn sử dụng làm huy hiệu icon cho tên tác giả.
- Hãy truy cập trang Iconify, sau đó tìm kiếm và chọn biểu tượng bạn muốn sử dụng làm huy hiệu icon cho tên tác giả.
- Sau khi chọn xong biểu tượng, bạn có thể tùy chỉnh biểu tượng theo ý thích của mình. Trong ví dụ này, chúng tôi thêm màu xanh vào biểu tượng.
- Tiếp theo tìm đến phần mã code biểu tượng và chọn theo như ảnh bên dưới, sau đó sao chép mã code CSS của biểu tượng icon tích xanh.
Bước 2: Xác định class CSS của tên tác giả
Mỗi thành phần Tên tác giả có thể có một class CSS khác nhau tùy thuộc vào chủ đề wordpress của bạn. Chúng ta sẽ sử dụng class Author để viết đoạn CSS trong bước tiếp theo.
- Mở bất kỳ bài đăng blog nào bạn đã đăng, chọn đến tên tác giả bài đăng của bạn và sau đó nhấp chuột phải và nhấn vào Kiểm tra.
- Khi bạn nhấn vào Kiểm tra, bạn sẽ thấy tên class CSS của tên tác giả. Đối với theme của Thuthuatwiki, lớp class của tác giả được đặt tên là author-name.
Bước 3: Thêm CSS bổ sung
Khi bạn đã phát hiện ra tên class của tác giả và nhận được mã CSS của biểu tượng huy hiệu tích xanh, đã đến lúc bạn thêm đoạn mã CSS vào CSS bổ sung WordPress của bạn.
- Đi đến Giao diện -> Tùy biến -> CSS bổ sung. (Appearance -> Customizer -> Additional CSS.)
Bạn có thể sao chép đoạn mã CSS bên dưới và dán vào trường CSS bổ sung nếu tên class tác giả của bạn giống với Thuthuatwiki, nếu tên khác thì bạn hãy sửa lại đoạn code css bên dưới thành tên class của bạn là được.
.author-name:after { background: url('https://api.iconify.design/akar-icons/circle-check-fill.svg?color=blue') no-repeat center center / contain; content: url('https://api.iconify.design/akar-icons/circle-check-fill.svg?color=blue'); font-size: 20px; margin-left: 4px; vertical-align: middle; }
- Đến đây, hãy nhấn vào nút Đăng (Publish).
Sau khi bạn thêm đoạn mã CSS vào trường CSS bổ sung, huy hiệu icon tích xanh sẽ được thêm vào sau tên tác giả. Hãy chỉnh kích thước và lề của huy hiệu bằng cách thay đổi giá trị thuộc tính trong đoạn mã CSS.