Hướng Dẫn Tạo Menu Đăng Nhập, Đăng Xuất Động trong WordPress

Bạn đang vận hành một website WordPress có thành viên và muốn nâng cao trải nghiệm người dùng? Một trong những cách hiệu quả nhất là tạo menu đăng nhập WordPress động, tự động thay đổi nội dung tùy theo trạng thái của người dùng (đã đăng nhập hay chưa). Thủ thuật này đặc biệt hữu ích cho các trang membership, forum, hoặc bất kỳ website nào cho phép đăng ký tài khoản.

Bài viết này sẽ hướng dẫn bạn chi tiết cách thay đổi menu theo trạng thái đăng nhập WordPress bằng cách thêm một vài đoạn code đơn giản vào file functions.php, giúp website của bạn trở nên chuyên nghiệp và thân thiện hơn.

Tại sao cần hiển thị menu khác nhau cho khách và thành viên?

  • Cá nhân hóa trải nghiệm: Hiển thị các liên kết phù hợp với từng đối tượng. Khách truy cập sẽ thấy nút “Đăng nhập / Đăng ký”, trong khi thành viên thấy “Hồ sơ / Đăng xuất”.
  • Tăng tính chuyên nghiệp: Tạo cảm giác website được đầu tư kỹ lưỡng, đặc biệt là các trang thiết kế website dạng cộng đồng hoặc bán khóa học.
  • Điều hướng thông minh: Giúp người dùng dễ dàng tìm thấy các chức năng quan trọng mà không bị rối bởi các mục menu không liên quan.

Hướng dẫn tạo menu đăng nhập đăng xuất bằng code

Quy trình gồm 2 bước chính: tạo sẵn các menu trong khu vực quản trị và sau đó thêm code để kích hoạt chức năng hiển thị động.

Bước 1: Tạo 2 menu riêng biệt trong WordPress

Đầu tiên, bạn cần tạo hai menu: một cho người dùng đã đăng nhập và một cho khách truy cập.

  1. Truy cập vào Giao diện (Appearance) -> Menu.
  2. Tạo menu thứ nhất, ví dụ đặt tên là “ThanhVien” (hoặc “Logged In”). Thêm các mục bạn muốn hiển thị cho thành viên đã đăng nhập như “Hồ sơ”, “Tài khoản của tôi”, “Đăng xuất”.
  3. Tạo menu thứ hai, ví dụ đặt tên là “Khach” (hoặc “Logged Out”). Thêm các mục như “Đăng nhập”, “Đăng ký”.
  4. Quan trọng: Tại mục Vị trí hiển thị (Display location), bạn chỉ tick chọn vị trí menu chính (ví dụ: “Primary Menu”) cho menu “Khach”. Để trống lựa chọn này ở menu “ThanhVien”. Code ở bước sau sẽ tự động hoán đổi chúng.

Tạo menu khác nhau khi đăng nhập wordpress

Bước 2: Thêm Code vào file functions.php

Sau khi đã có 2 menu, bạn cần thêm đoạn code sau vào file functions.php của theme bạn đang sử dụng.

Lưu ý quan trọng: Luôn sao lưu file functions.php trước khi chỉnh sửa để tránh gây lỗi website.

Bạn có thể chọn 1 trong 2 giải pháp sau:

Tùy chọn 1: Hiển thị 2 menu hoàn toàn khác nhau

Đoạn code này sẽ kiểm tra trạng thái đăng nhập của người dùng và hiển thị menu tương ứng mà bạn đã tạo ở Bước 1.

function my_wp_nav_menu_args( $args = '' ) {
    if( is_user_logged_in() ) { 
        // Nếu người dùng đã đăng nhập, hiển thị menu 'ThanhVien'
        $args['menu'] = 'ThanhVien';
    } else { 
        // Nếu là khách, hiển thị menu 'Khach'
        $args['menu'] = 'Khach';
    }
    return $args;
}
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );

Lưu ý: Hãy thay thế 'ThanhVien' và 'Khach' bằng tên menu (hoặc slug) chính xác bạn đã đặt ở Bước 1.

Tùy chọn 2: Chỉ thêm mục Đăng nhập/Đăng xuất vào menu có sẵn

Nếu bạn không muốn tạo 2 menu riêng biệt mà chỉ cần thêm nút “Đăng nhập” hoặc “Đăng xuất” vào cuối menu chính, hãy dùng đoạn code này. Đây là cách đơn giản và gọn gàng hơn.

add_filter( 'wp_nav_menu_items', 'add_loginout_link', 10, 2 );
function add_loginout_link( $items, $args ) {
    // Thay 'primary' bằng vị trí menu của bạn nếu cần
    if ($args->theme_location == 'primary') {
        if (is_user_logged_in()) {
            $items .= '<li><a href="'. wp_logout_url() .'">Đăng Xuất</a></li>';
        } else {
            $items .= '<li><a href="'. site_url('wp-login.php') .'">Đăng Nhập</a></li>';
        }
    }
    return $items;
}

Câu hỏi thường gặp (FAQ)

1. Thêm code vào functions.php có an toàn không? An toàn nếu bạn làm đúng cách. Luôn sao lưu file trước khi sửa. Một lỗi cú pháp nhỏ cũng có thể gây ra “lỗi màn hình trắng”. Nếu gặp lỗi, hãy khôi phục lại file functions.php gốc qua FTP hoặc File Manager của hosting.

2. Có plugin nào để tạo menu đăng nhập đăng xuất không? Có. Nếu bạn không quen với việc sửa code, các plugin như “Login or Logout Menu Item” hoặc “If Menu” là những lựa chọn tuyệt vời, cho phép bạn thiết lập logic hiển thị ngay trong giao diện quản trị menu.

3. Tôi có thể dùng AI để viết code này không? Hoàn toàn có thể. Bạn có thể yêu cầu các AI như ChatGPT hoặc Gemini: “Viết một đoạn code PHP cho file functions.php của WordPress để hiển thị menu ‘ThanhVien’ cho người dùng đã đăng nhập và menu ‘Khach’ cho khách truy cập.” AI có thể tạo ra các đoạn code tương tự và giải thích chức năng của chúng, giúp bạn hiểu rõ hơn về những gì mình đang làm.

Hy vọng với những hướng dẫn trên, bạn có thể dễ dàng tạo menu đăng nhập WordPress động, giúp website trở nên chuyên nghiệp và thân thiện hơn với người dùng. Để tham khảo thêm các thủ thuật WordPress hay, bạn có thể xem thêm tại blog của chúng tôi.

Bài viết liên quan: Hướng dẫn cài đặt Subiz trong WordPress

4.7/5 - (100 bình chọn)
4.7/5 - (100 bình chọn)