• Home
  • WordPress
    • Thủ thuật WordPress
    • WordPress plugins
    • WordPress themes
    • Hosting và domain
  • Kiếm tiền
    • Google AdSense
    • Tiếp thị liên kết
    • Rút gọn link
  • Quà tặng
  • Khuyến mãi
  • Đánh giá
  • Dịch vụ
    • WordPress Hosting
    • Cài đặt WordPress
    • Quét mã độc website
    • Tối ưu WordPress
    • Mua theme Paradise
  • Thông báo
  • Liên hệ

WP Căn bản

Kiến thức căn bản cho người dùng WordPress

wordpress-theme-tot-nhat

Trang chủ » WordPress » Thủ thuật WordPress » Làm thế nào để tạo avatar hình tròn trong WordPress?

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

10/06/2014 25/03/2017 Trung Hiếu 13 Bình luận

Mục lục bài viết

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

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:

  • Sử dụng colored boxes, color buttons và highlight menu
  • Top 5 plugin miễn phí giúp chỉnh sửa CSS trong WordPress

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. :)

5 / 5 ( 8 bình chọn )
  • Share on Facebook
  • Tweet on Twitter

Bài viết liên quan

Cache Gravatar giúp blog/ website WordPress load nhanh hơn
Hướng dẫn thay đổi Gravatar mặc định của WordPress
thay-the-avatar-mac-dinh-cua-wordpress
Gravatar – Thay thế avatar mặc định của blog WordPress

Chuyên mục: Thủ thuật WordPress Thẻ: Gravatar

dich-vu-cai-dat-website-wordpress-mien-phi

Nói về Trung Hiếu

Một người con của xứ Nghệ, hiện đang sinh sống tại Hà Nội. Theo dõi tôi trên Facebook để cập nhật những tin tức mới nhất liên quan đến WordPress nhé.

Bài viết trước « Top 10 WordPress football themes dành cho FIFA World Cup
Bài viết sau Top 3 công cụ kiểm tra tốc độ và hiệu suất website »

Reader Interactions

Bình luận

    Trả lời Hủy

    Lưu ý:
    > Không sử dụng từ khóa trong mục "Tên".
    > Hãy sử dụng tên thật và địa chỉ email chính xác.
    > Vui lòng bình luận bằng tiếng Việt có dấu.
    Mọi bình luận trái quy định sẽ bị gỡ bỏ link hoặc xóa bỏ hoàn toàn.

  1. sua lo vi song tai nha viết

    11/06/2014 lúc 11:39

    Hehe thích bài này nè, đúng ngay cái e cần luôn, tròn đẹp hơn vuông :P

    Trả lời
    • Kim Ngọc viết

      28/06/2014 lúc 03:20

      Chuẩn rồi :) !

      Trả lời
  2. Tuấn Anh Blues viết

    19/06/2014 lúc 04:55

    Hiếu ơi bạn có cách nào làm cho avatar chuyển thành hình tròn, nhưng khi rê chuột lên avatar đó nó lại hình vuông không. Giống một kiểu của trang nhaccuatui này : http://www.nhaccuatui.com/nghe-si-khanh-phuong.html

    Trả lời
    • Trung Hieu viết

      19/06/2014 lúc 19:28

      Như trong Nhạc của tui thì mình chịu. Nhưng bạn có thể thử modul Gravatar Hovercards trong Jetpack plugin. :)

      Trả lời
    • Kim Ngọc viết

      28/06/2014 lúc 03:22

      Hi bạn !

      Xin phép Hiếu trả lời bạn như sau:
      Bạn chỉ cần thêm CSS sau vào là được nhé (để ý css của class avatar bạn có thể dùng !important) ! Lưu ý bạn là CSS phiên bản cũ không hỗ trợ radius nhé !

      img.avatar {
      border-radius: 53px;
      height: 100px;
      width: 100px;
      cursor:pointer;
      }
      img.avatar:hover {
      border-radius: 0;
      height: 100px;
      transition: all 0.2s ease-out 0s;
      width: 100px;
      }

      Trả lời
      • Trung Hieu viết

        28/06/2014 lúc 19:02

        Thím Ngọc thật là nguy hiểm :D

        Trả lời
  3. Đỗ Thành Luân viết

    26/06/2014 lúc 15:08

    Cái này là thủ thuật CSS…khá dễ thương, cảm ơn bạn nhé.

    Trả lời
    • Trung Hieu viết

      26/06/2014 lúc 15:43

      Mong bạn thường xuyên ghé thăm và ủng hộ blog của mình. :)

      Trả lời
  4. Trần Văn Nam viết

    02/09/2016 lúc 00:38

    Anh cho em hỏi là genesis theme magazine pro có cái widget user profile, làm sao hiện avatar to, bó tròn, với lại hiện ở giữa giống minhnhat. org vậy, anh hd em với, thank anh…

    Trả lời
    • Trung Hiếu viết

      02/09/2016 lúc 08:27

      Cái này chỉnh bằng CSS trong style.css thôi bạn. Click chuột phải vào cái avatar rồi chọn Inspect Element là thấy nhé. :P

      Trả lời
  5. Thái Tài viết

    27/03/2017 lúc 14:59

    Cái này mình dùng CSS bo hình ảnh thành hình tròn. Tuy nhiên có cách nào sửa ảnh gốc thành ảnh tròn luôn không bạn, mình muốn 1 tấm hình avatar tròn để up khắp mọi nơi chứ ko riêng gì website

    Trả lời
    • Trung Hiếu viết

      27/03/2017 lúc 15:12

      Cái này thiếu gì công cụ chỉnh sửa ảnh nó hỗ trợ bạn. Chỉ cần để phần rìa bên ngoài transparent (trong suốt) là được mà. :P

      Trả lời
  6. Tôi Sống viết

    29/04/2017 lúc 16:54

    Giờ thì dùng WPdiscuz khá đơn giản và hiệu quả.

    Trả lời

Sidebar chính

NHẬN BÀI VIẾT QUA EMAIL

Hãy đăng ký ngay để là người đầu tiên nhận được thông báo qua email mỗi khi chúng tôi có bài viết mới!

Đừng quên truy cập vào email của bạn để xác nhận việc đăng ký nhé!

Theo dõi qua mạng xã hội

Dịch vụ WordPress Hosting

dich-vu-wordpress-hosting-gia-re-tot-nhat

Bạn đang tìm gì?

  • WordPress căn bản
  • Bảo mật WordPress
  • Tăng tốc WordPress
  • Sửa lỗi WordPress
  • Thủ thuật Genesis
  • Thủ thuật SEO

Dịch vụ tối ưu WordPress miễn phí

dich-vu-toi-uu-website-wordpress-chat-luong-cao

Bài viết mới nhất

  • Tinh giản WooCommerce giúp website của bạn nhẹ hơn 04/04/2021
  • Tinh giản WordPress giúp website của bạn nhẹ hơn 16/03/2021
  • Trì hoãn tải script của bên thứ ba trong WordPress 10/03/2021
  • Nâng cấp tính năng tìm kiếm mặc định của WordPress 04/03/2021
  • Hướng dẫn sử dụng LiteSpeed Memcached 17/01/2021
  • Hướng dẫn nén ảnh bằng plugin LiteSpeed Cache 08/01/2021

Dịch vụ quét mã độc miễn phí

quet-ma-doc-mien-phi-cho-website

Footer

Bình luận mới nhất

  • Trung Hiếu trong Cài HTTPS cho WordPress nhanh chóng với Really Simple SSL
  • Land trong Cài HTTPS cho WordPress nhanh chóng với Really Simple SSL
  • Trung Hiếu trong Chuyển từ Classic Editor sang Block Editor (Gutenberg)
  • Kami trong Chuyển từ Classic Editor sang Block Editor (Gutenberg)

Bình luận nhiều nhất (tháng)

  1. David Do (2)
  2. Hoàng Minh (2)
  3. Kami (2)
  4. Gia Tuấn (1)
  5. Học Luật (1)
  6. Land (1)

Thông tin hữu ích

  • Quy định sử dụng
  • Chính sách bảo mật
  • Bản quyền nội dung

Thống kê WP Căn bản

10 Chuyên mục - 982 Bài viết - 37376 Bình luận
positivessl-trust-seal

Bản quyền © 2014 - 2020 · WP Căn bản · Sử dụng Paradise child theme và dịch vụ WordPress Hosting