Thêm link logout vào menu điều hướng WordPress

2 tháng ago, Hướng dẫn WordPress, Views
Thêm link logout vào menu điều hướng WordPress

Thêm Link Logout vào Menu Điều Hướng WordPress: Hướng Dẫn Chi Tiết

Menu điều hướng (navigation menu) là một phần quan trọng của bất kỳ trang web WordPress nào. Nó giúp người dùng dễ dàng tìm kiếm và truy cập các trang quan trọng. Thêm một liên kết đăng xuất (logout link) vào menu điều hướng có thể cải thiện trải nghiệm người dùng, đặc biệt là đối với các trang web có nhiều thành viên hoặc yêu cầu đăng nhập.

Bài viết này sẽ hướng dẫn bạn qua nhiều cách khác nhau để thêm liên kết đăng xuất vào menu điều hướng WordPress của bạn, từ các phương pháp đơn giản nhất đến các phương pháp phức tạp hơn đòi hỏi một chút kiến thức về code.

Tại Sao Nên Thêm Link Logout vào Menu?

Việc thêm link logout vào menu điều hướng mang lại nhiều lợi ích:

  • Tiện lợi cho người dùng: Người dùng đã đăng nhập có thể dễ dàng tìm và sử dụng link logout bất cứ lúc nào mà không cần phải tìm kiếm trong phần cài đặt tài khoản hoặc footer.
  • Cải thiện trải nghiệm người dùng: Loại bỏ sự phức tạp và rắc rối cho người dùng khi muốn đăng xuất.
  • Tăng tính chuyên nghiệp: Một website có thiết kế tốt và dễ sử dụng tạo ấn tượng tốt cho người dùng.

Các Phương Pháp Thêm Link Logout vào Menu

Có nhiều cách để thêm link logout vào menu điều hướng WordPress. Dưới đây là một số phương pháp phổ biến:

1. Sử Dụng Custom Link (Liên Kết Tùy Chỉnh) trong WordPress

Đây là phương pháp đơn giản nhất và phù hợp cho hầu hết người dùng.

  1. Đăng nhập vào trang quản trị WordPress của bạn.
  2. Đi đến Appearance (Giao diện) > Menus (Menu).
  3. Ở cột bên trái, tìm phần Custom Links (Liên kết tùy chỉnh).
  4. Trong ô URL, nhập “ hoặc `/wp-login.php?action=logout`. Tuy nhiên, việc sử dụng `wp_logout_url()` đòi hỏi bạn cần phải bật hỗ trợ PHP trong menu. Cách an toàn hơn là sử dụng `/wp-login.php?action=logout`.
  5. Trong ô Link Text (Văn bản liên kết), nhập “Đăng xuất” hoặc bất kỳ văn bản nào bạn muốn hiển thị.
  6. Nhấn nút Add to Menu (Thêm vào menu).
  7. Kéo và thả mục menu vừa tạo vào vị trí mong muốn trong menu điều hướng của bạn.
  8. Nhấn nút Save Menu (Lưu menu).

Lưu ý quan trọng: Khi sử dụng `/wp-login.php?action=logout`, người dùng sẽ được chuyển đến trang đăng nhập sau khi đăng xuất. Để tùy chỉnh trang chuyển hướng sau khi đăng xuất, bạn cần sử dụng các phương pháp phức tạp hơn (xem phần sau).

2. Sử Dụng Plugin WordPress

Có nhiều plugin WordPress miễn phí và trả phí có thể giúp bạn thêm link logout vào menu một cách dễ dàng. Một số plugin phổ biến bao gồm:

  • Menu Item Visibility Control: Cho phép bạn hiển thị hoặc ẩn các mục menu dựa trên trạng thái đăng nhập của người dùng (đăng nhập/chưa đăng nhập).
  • If Menu: Tương tự như Menu Item Visibility Control, If Menu cung cấp các tùy chọn điều kiện hiển thị menu linh hoạt hơn.
  • Conditional Menus: Plugin này cho phép bạn tạo các menu khác nhau dựa trên các điều kiện khác nhau, bao gồm trạng thái đăng nhập.

Hướng dẫn sử dụng Menu Item Visibility Control:

  1. Cài đặt và kích hoạt plugin Menu Item Visibility Control.
  2. Đi đến Appearance (Giao diện) > Menus (Menu).
  3. Tìm mục menu bạn muốn hiển thị hoặc ẩn dựa trên trạng thái đăng nhập.
  4. Bạn sẽ thấy một hộp kiểm Visibility (Hiển thị) dưới mục menu.
  5. Chọn các điều kiện phù hợp (ví dụ: chỉ hiển thị khi người dùng đã đăng nhập).
  6. Lưu menu.

Bằng cách sử dụng plugin, bạn có thể tạo ra một menu “Tài khoản” hoặc “Profile” hiển thị các tùy chọn khác nhau (ví dụ: “Thông tin tài khoản”, “Đăng xuất”) khi người dùng đã đăng nhập và các tùy chọn khác (ví dụ: “Đăng nhập”, “Đăng ký”) khi người dùng chưa đăng nhập.

3. Thêm Code vào File `functions.php` của Theme

Phương pháp này đòi hỏi bạn phải có một chút kiến thức về PHP và WordPress. Bạn cần cẩn thận khi chỉnh sửa file `functions.php` vì một lỗi nhỏ có thể khiến website của bạn gặp sự cố.

Quan trọng: Trước khi thực hiện bất kỳ thay đổi nào đối với file `functions.php`, hãy tạo bản sao lưu (backup) của file này hoặc sử dụng một theme con (child theme) để tránh làm hỏng theme chính của bạn.

Dưới đây là một ví dụ về code bạn có thể thêm vào file `functions.php`:

“`php
theme_location == ‘primary’ ) { // Thay ‘primary’ bằng location menu của bạn
if ( is_user_logged_in() ) {
$logout_url = wp_logout_url( home_url() ); // Chuyển hướng về trang chủ sau khi đăng xuất
$items .= ‘

  • Đăng xuất

    • ‘;
    }
    }
    return $items;
    }
    add_filter( ‘wp_nav_menu_items’, ‘add_logout_link_to_menu’, 10, 2 );
    ?>
    “`

    Giải thích code:

    • `add_logout_link_to_menu()`: Đây là hàm tùy chỉnh của chúng ta.
    • `$args->theme_location == ‘primary’`: Kiểm tra xem menu có phải là menu “primary” (hoặc bất kỳ vị trí menu nào bạn muốn thêm link logout) hay không. Bạn cần thay thế `’primary’` bằng location menu thực tế của bạn.
    • `is_user_logged_in()`: Kiểm tra xem người dùng đã đăng nhập hay chưa.
    • `wp_logout_url( home_url() )`: Tạo URL đăng xuất và chuyển hướng người dùng về trang chủ sau khi đăng xuất. Bạn có thể thay `home_url()` bằng URL khác nếu muốn chuyển hướng người dùng đến một trang cụ thể sau khi đăng xuất.
    • `$items .= ‘
    • Đăng xuất

      • ‘;`: Thêm một mục menu “Đăng xuất” vào danh sách các mục menu.

    • `add_filter( ‘wp_nav_menu_items’, ‘add_logout_link_to_menu’, 10, 2 )`: Thêm hàm `add_logout_link_to_menu()` vào filter `wp_nav_menu_items`, cho phép chúng ta sửa đổi danh sách các mục menu.

    Cách thực hiện:

    1. Truy cập vào Appearance (Giao diện) > Theme Editor (Sửa giao diện).
    2. Tìm file `functions.php` ở bên phải.
    3. Dán đoạn code trên vào cuối file `functions.php`.
    4. Nhấn nút Update File (Cập nhật file).
    5. Kiểm tra menu điều hướng của bạn. Bạn sẽ thấy một liên kết “Đăng xuất” xuất hiện khi người dùng đã đăng nhập.

    Lưu ý: Nếu bạn không thấy menu điều hướng “primary” hoặc không chắc chắn về location menu của bạn, bạn có thể kiểm tra trong file `header.php` của theme hoặc trong phần quản lý menu (Appearance > Menus).

    4. Sử Dụng Shortcode (Yêu cầu Plugin Shortcode)

    Mặc dù ít phổ biến hơn, bạn cũng có thể sử dụng shortcode để thêm liên kết đăng xuất vào menu. Tuy nhiên, phương pháp này thường yêu cầu bạn phải sử dụng một plugin shortcode (ví dụ: Shortcoder, Insert PHP Code Snippet). Hầu hết các theme hiện đại đều không cho phép chạy PHP trực tiếp trong menu.

    Ví dụ (sử dụng Shortcoder):

    1. Cài đặt và kích hoạt plugin Shortcoder.
    2. Đi đến Shortcoder > Add New Shortcode.
    3. Đặt tên cho shortcode (ví dụ: `logout_link`).
    4. Trong ô “Enter code here”, nhập đoạn code sau:
      “`php

      <a href="”>Đăng xuất

      “`

    5. Nhấn nút Publish.
    6. Đi đến Appearance > Menus.
    7. Trong phần Custom Links, thêm một liên kết tùy chỉnh với URL `#` và văn bản liên kết tùy ý (ví dụ: “Logout Placeholder”).
    8. Lưu menu.
    9. Sử dụng plugin “Menu Item Visibility Control” (hoặc tương tự) để ẩn liên kết “Logout Placeholder” này.
    10. Trong file `functions.php` của bạn (sử dụng child theme!), thêm code sau:
      “`php
      theme_location == ‘primary’ ) {
      $items = str_replace( ‘Logout Placeholder’, do_shortcode(‘[logout_link]’), $items );
      }
      return $items;
      }
      ?>
      “`

    Phương pháp này khá phức tạp và không được khuyến khích trừ khi bạn thực sự cần nó.

    Kết Luận

    Việc thêm liên kết đăng xuất vào menu điều hướng WordPress là một cách đơn giản nhưng hiệu quả để cải thiện trải nghiệm người dùng. Bạn có thể chọn phương pháp phù hợp nhất với trình độ kỹ thuật và nhu cầu của mình. Phương pháp đơn giản nhất là sử dụng Custom Link, trong khi phương pháp linh hoạt nhất (nhưng cũng phức tạp nhất) là chỉnh sửa file `functions.php`. Các plugin cung cấp một giải pháp trung gian, giúp bạn dễ dàng kiểm soát hiển thị của các mục menu.

    Related Topics by Tag
    , , , ,

    ..