Thêm title menu không link WordPress

5 giờ ago, Hướng dẫn người mới, Views
Thêm title menu không link WordPress

Thêm Menu Title Không Link Trong WordPress

Giới thiệu

Khi xây dựng một trang web WordPress, menu điều hướng đóng vai trò quan trọng trong việc giúp người dùng dễ dàng tìm kiếm và truy cập thông tin. Tuy nhiên, đôi khi bạn có thể muốn thêm một tiêu đề menu chỉ để phân loại các mục con mà không cần liên kết đến bất kỳ trang nào. Ví dụ: bạn có thể muốn một tiêu đề “Sản phẩm” để phân loại các sản phẩm khác nhau mà bạn cung cấp, nhưng bản thân tiêu đề “Sản phẩm” không phải là một trang độc lập.

Bài viết này sẽ hướng dẫn bạn các phương pháp khác nhau để thêm một menu title không link trong WordPress, giúp bạn tùy chỉnh menu của mình theo ý muốn và cải thiện trải nghiệm người dùng.

Phương pháp 1: Sử dụng Custom Link với “#” hoặc JavaScript

Cách đơn giản nhất để tạo một menu title không link là sử dụng tính năng Custom Link (Liên kết tùy chỉnh) trong WordPress.

  1. Đăng nhập vào trang quản trị WordPress của bạn.
  2. Đi tới Appearance > Menus (Giao diện > Menu).
  3. Ở phía bên trái, tìm hộp Custom Links (Liên kết tùy chỉnh).
  4. Trong trường URL, nhập # hoặc javascript:void(0);. Sử dụng # sẽ tạo ra một liên kết trên trang hiện tại, trong khi javascript:void(0); sẽ vô hiệu hóa hoàn toàn liên kết.
  5. Trong trường Link Text (Văn bản liên kết), nhập tiêu đề bạn muốn hiển thị (ví dụ: “Sản phẩm”).
  6. Nhấn nút Add to Menu (Thêm vào menu).
  7. Bây giờ bạn có thể kéo và thả tiêu đề vừa tạo để đặt nó vào vị trí mong muốn trong menu.
  8. Nhấn nút Save Menu (Lưu menu) để lưu các thay đổi.

Ưu điểm:

  • Dễ thực hiện và nhanh chóng.
  • Không cần sử dụng code.

Nhược điểm:

  • Sử dụng # có thể khiến trình duyệt cuộn lên đầu trang khi người dùng nhấp vào (tùy thuộc vào theme).
  • Sử dụng javascript:void(0); có thể không tốt cho SEO vì nó là một liên kết “chết”.

Phương pháp 2: Sử dụng Plugin

Nếu bạn không muốn chỉnh sửa code hoặc cảm thấy phương pháp Custom Link không phù hợp, bạn có thể sử dụng một plugin để giúp bạn tạo menu title không link.

Có rất nhiều plugin miễn phí và trả phí có sẵn trên WordPress.org. Một số plugin phổ biến bao gồm:

  • Menu Item Visibility Control: Cho phép bạn kiểm soát hiển thị của các mục menu dựa trên các điều kiện khác nhau, bao gồm cả việc ẩn liên kết.
  • Page Menu Filter: Cung cấp các tùy chọn để lọc và tùy chỉnh các mục menu.
  • Custom Menu Wizard: Cho phép bạn tạo các menu phức tạp với nhiều tùy chọn tùy chỉnh.

Để sử dụng plugin:

  1. Trong trang quản trị WordPress, đi tới Plugins > Add New (Plugins > Thêm mới).
  2. Tìm kiếm plugin bạn muốn sử dụng.
  3. Nhấn nút Install Now (Cài đặt ngay) và sau đó Activate (Kích hoạt).
  4. Làm theo hướng dẫn của plugin để tạo menu title không link. Thường thì bạn sẽ có thể tạo một mục menu tùy chỉnh và chỉ định rằng nó không nên có liên kết.
  5. Lưu menu.

Ưu điểm:

  • Dễ sử dụng, đặc biệt đối với người không quen thuộc với code.
  • Cung cấp nhiều tùy chọn tùy chỉnh.

Nhược điểm:

  • Có thể làm chậm trang web nếu sử dụng quá nhiều plugin.
  • Một số plugin có thể không tương thích với theme của bạn.

Phương pháp 3: Chỉnh sửa Code (functions.php hoặc Plugin tùy chỉnh)

Nếu bạn là một nhà phát triển hoặc cảm thấy thoải mái với việc chỉnh sửa code, bạn có thể sử dụng phương pháp này để tạo menu title không link. Bạn sẽ cần chỉnh sửa file functions.php của theme hoặc tạo một plugin tùy chỉnh.

Quan trọng: Sao lưu trang web của bạn trước khi chỉnh sửa code để tránh mất dữ liệu nếu có lỗi xảy ra.

Bước 1: Thêm Menu Walker tùy chỉnh

Bạn cần tạo một menu walker tùy chỉnh để loại bỏ liên kết khỏi một mục menu cụ thể. Đây là một ví dụ về cách tạo một walker tùy chỉnh trong file functions.php:


class No_Link_Menu_Walker extends Walker_Nav_Menu {
  function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
      $t = '';
      $n = '';
    } else {
      $t = "t";
      $n = "n";
    }
    $indent = ( $depth ) ? str_repeat( $t, $depth ) : '';

    $classes = empty( $item->classes ) ? array() : (array) $item->classes;
    $classes[] = 'menu-item-' . $item->ID;

    $args = apply_filters( 'nav_menu_item_args', $args, $item, $depth );

    $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
    $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

    $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args, $depth );
    $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

    $output .= $indent . '
  • ';

    $atts = array();
    $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
    $atts['target'] = ! empty( $item->target )     ? $item->target     : '';
    $atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
    $atts['href']   = ! empty( $item->url )        ? $item->url        : '';

    $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );

    $attributes = '';
    foreach ( $atts as $attr => $value ) {
      if ( ! empty( $value ) ) {
        $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
        $attributes .= ' ' . $attr . '="' . $value . '"';
      }
    }

    // Kiểm tra xem có class 'no-link' không
    if ( in_array('no-link', $item->classes) ) {
        $item_output = $args->before;
        $item_output .= '';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= '';
        $item_output .= $args->after;
    } else {
        $item_output = $args->before;
        $item_output .= '';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= '';
        $item_output .= $args->after;
    }

    $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
  }
}

    • Bước 2: Sử dụng Walker trong Menu

    Bây giờ, bạn cần sử dụng walker tùy chỉnh này khi hiển thị menu của bạn. Bạn có thể làm điều này bằng cách chỉnh sửa template của theme hoặc sử dụng một hook. Ví dụ, nếu bạn đang sử dụng hàm wp_nav_menu(), bạn có thể thêm đối số 'walker':

    
wp_nav_menu( array(
  'theme_location' => 'primary',
  'walker' => new No_Link_Menu_Walker()
) );

    Bước 3: Thêm Class ‘no-link’ vào Menu Item

    Cuối cùng, bạn cần thêm class no-link vào menu item mà bạn muốn loại bỏ liên kết.

    1. Đi tới Appearance > Menus (Giao diện > Menu).
    2. Nhấn vào Screen Options (Tùy chọn hiển thị) ở góc trên bên phải.
    3. Đánh dấu vào hộp CSS Classes (Lớp CSS).
    4. Mở rộng menu item mà bạn muốn loại bỏ liên kết.
    5. Trong trường CSS Classes (optional) (Lớp CSS (tùy chọn)), nhập no-link.
    6. Lưu menu.

    Ưu điểm:

    • Kiểm soát hoàn toàn code.
    • Hiệu quả và tối ưu cho hiệu suất.

    Nhược điểm:

    • Yêu cầu kiến thức về code.
    • Có thể phức tạp đối với người mới bắt đầu.
    • Cần cẩn thận để tránh gây ra lỗi cho trang web.

    Kết luận

    Có nhiều cách để thêm một menu title không link trong WordPress. Phương pháp đơn giản nhất là sử dụng Custom Link với “#” hoặc JavaScript. Tuy nhiên, nếu bạn muốn kiểm soát nhiều hơn hoặc muốn tránh các vấn đề tiềm ẩn, bạn có thể sử dụng một plugin hoặc chỉnh sửa code. Hãy chọn phương pháp phù hợp nhất với kỹ năng và nhu cầu của bạn.

    Related Topics by Tag
    , , , ,

    ..