Cách Hiển Thị Tên Người Dùng Và Ảnh Đại Diện (Avatar) Trên Menu WordPress

Bạn muốn sau khi người dùng đăng nhập, tên và ảnh đại diện (avatar) của họ xuất hiện ngay trên thanh menu? Đây là một cách tuyệt vời để website trông chuyên nghiệp hơn và thân thiện với người dùng.

Trong bài viết này, mình sẽ hướng dẫn bạn cách làm điều đó từng bước, không cần cài plugin, chỉ cần vài dòng mã đơn giản.

---

Bước 1: Xác định menu bạn muốn chỉnh sửa

WordPress có thể có nhiều menu khác nhau (ví dụ: menu chính, menu chân trang…). Trong bài này, mình sẽ chỉnh sửa menu chính (Primary Menu). Nếu theme bạn đang dùng gọi menu chính bằng tên khác, bạn cần thay tên đó trong phần code (mình sẽ chỉ rõ bên dưới).

---

Bước 2: Mở file functions.php trong theme

1. Vào trang quản trị WordPress
2. Vào Giao diện (Appearance) > Sửa giao diện (Theme File Editor)
3. Chọn file functions.php ở cột bên phải
4. Kéo xuống cuối file và dán đoạn mã sau:

add_filter('wp_nav_menu_items', 'custom_add_user_to_menu', 10, 2);

function custom_add_user_to_menu($items, $args) {
    // Chỉ áp dụng cho menu có vị trí là 'primary'
    if ($args->theme_location == 'primary') {
        if (is_user_logged_in()) {
            // Lấy thông tin người dùng hiện tại
            $current_user = wp_get_current_user();
            
            // Lấy ảnh đại diện (avatar), kích thước 32px
            $avatar = get_avatar($current_user->ID, 32);
            
            // Lấy tên hiển thị của người dùng
            $name = esc_html($current_user->display_name);
            
            // Link đến trang hồ sơ người dùng
            $profile_url = get_edit_profile_url($current_user->ID);
            
            // Link để đăng xuất
            $logout_url = wp_logout_url(home_url());

            // Thêm mục menu hiển thị tên và avatar
            $items .= '<li class="menu-item user-avatar" style="display:flex; align-items:center; gap:6px;">';
            $items .= '<a href="' . esc_url($profile_url) . '">' . $avatar . ' ' . $name . '</a>';
            $items .= '</li>';

            // Thêm mục "Đăng xuất"
            $items .= '<li class="menu-item logout-link">';
            $items .= '<a href="' . esc_url($logout_url) . '">Đăng xuất</a>';
            $items .= '</li>';
        } else {
            // Nếu chưa đăng nhập, hiển thị nút Đăng nhập và Đăng ký
            $items .= '<li class="menu-item login-link"><a href="' . esc_url(wp_login_url()) . '">Đăng nhập</a></li>';
            $items .= '<li class="menu-item register-link"><a href="' . esc_url(wp_registration_url()) . '">Đăng ký</a></li>';
        }
    }
    return $items;
}

---

Bước 3: Lưu lại và kiểm tra

Sau khi dán mã xong, bấm “Cập nhật tệp tin” (Update File). Giờ hãy vào website và thử đăng nhập bằng tài khoản người dùng.

• Nếu đã đăng nhập, bạn sẽ thấy ảnh đại diện và tên xuất hiện ở menu.
• Nếu chưa đăng nhập, bạn sẽ thấy 2 nút: Đăng nhập và Đăng ký.

---

Bước 4: Tùy chỉnh hiển thị (nếu muốn)

Bạn có thể chỉnh cho avatar tròn, căn chỉnh đẹp hơn bằng CSS. Dưới đây là một đoạn CSS cơ bản:

.user-avatar img {
  border-radius: 50%;
  vertical-align: middle;
}

.user-avatar a {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logout-link a {
  color: red;
}

Bạn có thể chèn đoạn CSS này vào phần Tùy biến giao diện > CSS bổ sung hoặc thêm vào file style.css trong theme con (nếu có).

---

Một số lưu ý

• Mặc định WordPress lấy avatar từ Gravatar.com. Nếu người dùng không có ảnh ở đó, họ sẽ thấy ảnh mặc định.
• Nếu theme của bạn không dùng vị trí menu là primary, bạn cần thay primary bằng tên đúng (ví dụ: main, top, v.v.).
• Để kiểm tra tên menu đang dùng, bạn vào Giao diện > Menu > Vị trí hiển thị.

---

Kết luận

Chỉ với vài dòng code, bạn đã có thể hiển thị tên và avatar người dùng ngay trên thanh menu. Điều này không chỉ giúp website trông chuyên nghiệp hơn mà còn tạo cảm giác thân thiện và cá nhân hóa cho người truy cập.