Việc hiển thị tên người dùng và avatar trên menu WordPress giúp cải thiện trải nghiệm người dùng và tăng tính chuyên nghiệp cho website. Đặc biệt, điều này rất hữu ích đối với các trang thành viên (membership) hoặc website thương mại điện tử (WooCommerce). Hôm nay, chúng ta sẽ cùng tìm hiểu cách thực hiện việc này một cách đơn giản và hiệu quả.
Lợi ích của việc hiển thị tên người dùng và avatar trên menu WordPress
1. Cải thiện trải nghiệm người dùng
- Người dùng dễ dàng nhận diện tài khoản của mình.
- Giúp họ kiểm tra trạng thái đăng nhập mà không cần vào trang hồ sơ cá nhân.
- Nâng cao sự cá nhân hóa cho website.
2. Tăng tính chuyên nghiệp cho website
- Website trông trực quan hơn với avatar cá nhân.
- Tạo cảm giác thân thiện và gắn kết với người dùng.
- Đặc biệt hữu ích với các website thương mại điện tử hoặc diễn đàn.
Hướng dẫn hiển thị tên người dùng và avatar trên menu WordPress
1. Cài đặt plugin Logged In As
Để hiển thị tên người dùng và avatar trên menu WordPress, chúng ta có thể sử dụng plugin Logged In As. Đây là một công cụ mạnh mẽ giúp thay thế mục menu mặc định bằng thông tin người dùng.
Các bước cài đặt:
- Bước 1: Truy cập WordPress Dashboard và chọn Plugins > Add New.
- Bước 2: Tìm kiếm plugin “Logged In As” và nhấn Install Now.
- Bước 3: Nhấn Activate để kích hoạt plugin.
2. Cấu hình plugin Logged In As
Sau khi cài đặt plugin Logged In As, bạn cần thiết lập để hiển thị đúng thông tin mong muốn.
Cách thiết lập plugin:
- Vào Settings > Logged In As.
- Available Menus Items: Chọn menu mà bạn muốn thay thế bằng tên người dùng và avatar.
- Menu Name Format: Chọn thông tin hiển thị:
[first_name]– Hiển thị tên chính.[last_name]– Hiển thị họ và tên đệm.[nickname]– Hiển thị tên đăng nhập.- Bạn cũng có thể thêm văn bản tùy chỉnh để cá nhân hóa hơn.
- Avatar size: Cài đặt kích thước avatar (tối thiểu 10px, tối đa 99px). Avatar sẽ sử dụng Gravatar nếu có.
- Nhấn Save Changes để lưu thiết lập.
3. Kiểm tra và tối ưu hiển thị menu
Sau khi lưu các thay đổi, hãy xóa cache (nếu website bạn sử dụng plugin cache như WP Rocket, W3 Total Cache) để cập nhật giao diện menu mới.
Kiểm tra kết quả:
- Truy cập trang chủ và kiểm tra xem tên người dùng cùng avatar đã hiển thị đúng chưa.
- Nếu khoảng cách giữa avatar và tên quá gần, bạn có thể điều chỉnh bằng mã CSS sau:
.liam-icon > a::before {
margin-right: 10px;
}
Chèn mã CSS này vào Appearance > Customize > Additional CSS.
Một số mẹo để tối ưu hóa hiển thị tên người dùng và avatar trên menu WordPress
1. Kiểm tra giao diện trên thiết bị di động
- Đảm bảo rằng tên người dùng và avatar hiển thị tốt trên màn hình nhỏ.
- Nếu thấy vướng víu hoặc chiếm quá nhiều không gian, hãy thử giảm kích thước avatar.
2. Tùy chỉnh thiết kế theo phong cách website
- Nếu muốn thay đổi font chữ, màu sắc hoặc hiệu ứng hover, bạn có thể điều chỉnh CSS.
- Một số website có thể cần chỉnh sửa theme để tối ưu hiển thị.
3. Kết hợp với các plugin khác để nâng cao trải nghiệm
- Nếu bạn đang sử dụng WooCommerce, hãy hiển thị thêm điểm thưởng hoặc trạng thái thành viên bên cạnh tên người dùng.
- Đối với website membership, có thể hiển thị cấp độ thành viên ngay trong menu.
Kết luận
Việc hiển thị tên người dùng và avatar trên menu WordPress không chỉ giúp website trở nên chuyên nghiệp hơn mà còn tạo sự thuận tiện cho người dùng. Chỉ với một plugin đơn giản như Logged In As, bạn đã có thể cá nhân hóa menu WordPress một cách dễ dàng. Hãy thử ngay và cảm nhận sự khác biệt!
Tham khảo thêm: HiTech
