Làm thế nào để tạo avatar hình tròn trong WordPress?

Một khách truy cập đã gửi email cho tôi và hỏi: “Làm thế nào để hình ảnh đại diện (avatar) của bạn có hình tròn như vậy? Có phải bạn đã sử dụng một hình ảnh được bo tròn để làm avatar không?”. Câu trả lời là không. Trong bài viết này, tôi sẽ hướng dẫn cho các bạn cách để hiển thị avatar có dạng hình tròn trong WordPress. Tôi sẽ sử dụng thuộc tính border-radius (biên giới-bán kính) của CSS3 để tạo ra avatar hình tròn một cách đơn giản và nhanh chóng.

Làm thế nào để tạo avatar hình tròn trong WordPress?

tao-avatar-hinh-tron-trong-wordpress

Một khách truy cập đã gửi email cho tôi và hỏi: “Làm thế nào để hình ảnh đại diện (avatar) của bạn có hình tròn như vậy? Có phải bạn đã sử dụng một hình ảnh được bo tròn để làm avatar không?”. Câu trả lời là không. Trong bài viết này, tôi sẽ hướng dẫn cho các bạn cách để hiển thị avatar có dạng hình tròn trong WordPress. Tôi sẽ sử dụng thuộc tính border-radius (biên giới-bán kính) của CSS3 để tạo ra avatar hình tròn một cách đơn giản và nhanh chóng.

Tham khảo thêm:

Tạo avatar hình tròn trong WordPress

Điều đầu tiên bạn cần làm là chỉnh sửa file style.css của theme mà bạn đang dùng. Bạn có thể làm điều này thông qua phần mềm FTP hoặc bằng cách truy cập vào Appearance => Editor trong bảng quản trị WordPress. Tiếp theo, hãy thêm đoạn code sau vào file style.css:

Code này sẽ hoạt động tốt với hầu hết theme WordPress. Tuy nhiên, nếu nó không có tác dụng trên trên theme của bạn thì có lẽ do một số plugin hoặc chức năng của theme đã làm đảo lộn các class mặc định được sử dụng cho avatar trong WordPress. Để tìm ra các CSS class của avatar được sử dụng trong theme, bạn cần phải click chuột phải vào hình ảnh avatar và chọn Inspect Element. Nó sẽ hiển thị mã nguồn avatar của bạn, trông giống như thế này:

avatar-inspect-element

Nếu CSS class của hình ảnh avatar có một cái gì đó khác so với avatar thì hãy sử dụng nó thay cho .avatar trong code CSS ở trên. Đơn giản vậy thôi.

Lưu ý: xóa cache web và cache trình duyệt trước khi xem kết quả.

Hy vọng rằng bài viết này sẽ giúp bạn tạo được avatar hình tròn trên blog/ website của mình. Hãy cho chúng tôi biết nếu bạn có bất kỳ câu hỏi hoặc ý kiến nào bằng cách sửa dụng khung bình luận dưới đây.

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)


Bài liên quan