Thêm title menu không link WordPress

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

Thêm Title Menu Không Link Trong WordPress

Trong quá trình thiết kế và xây dựng website WordPress, đôi khi bạn cần thêm một mục menu chỉ để hiển thị tiêu đề, mà không cần liên kết đến bất kỳ trang nào. Điều này có thể hữu ích khi bạn muốn nhóm các menu con lại dưới một tiêu đề, hoặc đơn giản là muốn hiển thị một thông tin quan trọng mà không cần người dùng nhấp vào. Bài viết này sẽ hướng dẫn bạn cách thêm title menu không link trong WordPress bằng nhiều phương pháp khác nhau, từ đơn giản đến nâng cao.

Tại Sao Cần Title Menu Không Link?

Trước khi đi vào chi tiết cách thực hiện, hãy cùng tìm hiểu tại sao bạn có thể cần sử dụng title menu không link:

  • Nhóm các menu con: Bạn có thể sử dụng một title menu làm tiêu đề cho một nhóm các menu con liên quan đến nhau. Ví dụ, bạn có thể có một menu “Dịch Vụ” làm title, và bên dưới là các menu con như “Thiết Kế Web”, “SEO”, “Quảng Cáo”.
  • Hiển thị thông tin: Bạn có thể sử dụng title menu để hiển thị thông tin quan trọng, chẳng hạn như “Liên Hệ” hoặc “Thông Tin Chung”, mà không cần người dùng phải nhấp vào.
  • Cải thiện trải nghiệm người dùng (UX): Một title menu được thiết kế tốt có thể giúp người dùng dễ dàng điều hướng trên website của bạn và tìm thấy thông tin họ cần.

Cách 1: Sử Dụng Custom Link với Dấu #

Đây là phương pháp đơn giản nhất để tạo title menu không link. Bạn chỉ cần tạo một custom link và đặt URL là “#”. Khi người dùng nhấp vào menu này, trang sẽ không tải lại, nhưng nó vẫn có thể kích hoạt một số hành vi JavaScript (nếu có).

Các Bước Thực Hiện:

  1. Đăng nhập vào trang quản trị WordPress của bạn.
  2. Truy cập Appearance > Menus.
  3. Chọn menu mà bạn muốn thêm title menu.
  4. Trong hộp “Add menu items”, chọn “Custom Links”.
  5. Trong ô “URL”, nhập #.
  6. Trong ô “Link Text”, nhập tiêu đề bạn muốn hiển thị. Ví dụ: “Dịch Vụ”.
  7. Nhấn “Add to Menu”.
  8. Sắp xếp menu mới vào vị trí mong muốn.
  9. Nhấn “Save Menu”.

Lưu ý: Mặc dù phương pháp này đơn giản, nhưng nó có một nhược điểm nhỏ là khi người dùng nhấp vào menu, trình duyệt có thể cuộn lên đầu trang (tùy thuộc vào cấu hình của trình duyệt). Để khắc phục điều này, bạn có thể sử dụng JavaScript (xem cách 3).

Cách 2: Sử Dụng Custom Link với javascript:void(0);

Phương pháp này tương tự như cách 1, nhưng thay vì sử dụng “#”, bạn sử dụng javascript:void(0); làm URL. Điều này sẽ ngăn trình duyệt thực hiện bất kỳ hành động nào khi người dùng nhấp vào menu.

Các Bước Thực Hiện:

  1. Đăng nhập vào trang quản trị WordPress của bạn.
  2. Truy cập Appearance > Menus.
  3. Chọn menu mà bạn muốn thêm title menu.
  4. Trong hộp “Add menu items”, chọn “Custom Links”.
  5. Trong ô “URL”, nhập javascript:void(0);
  6. Trong ô “Link Text”, nhập tiêu đề bạn muốn hiển thị. Ví dụ: “Sản Phẩm”.
  7. Nhấn “Add to Menu”.
  8. Sắp xếp menu mới vào vị trí mong muốn.
  9. Nhấn “Save Menu”.

Lưu ý: Phương pháp này cũng khá đơn giản, nhưng một số người có thể cho rằng việc sử dụng javascript:void(0); không phải là cách tiếp cận tốt nhất từ góc độ kỹ thuật.

Cách 3: Sử Dụng JavaScript để Ngăn Chặn Hành Vi Mặc Định

Phương pháp này sử dụng JavaScript để ngăn chặn hành vi mặc định của liên kết khi người dùng nhấp vào title menu. Điều này cho phép bạn sử dụng “#” làm URL mà không lo trình duyệt cuộn lên đầu trang.

Các Bước Thực Hiện:

  1. Tạo Title Menu với URL “#”: Thực hiện các bước tương tự như trong Cách 1 để tạo title menu với URL là “#”.
  2. Thêm JavaScript: Bạn cần thêm một đoạn mã JavaScript vào website của bạn để ngăn chặn hành vi mặc định của liên kết. Bạn có thể thêm mã này vào tệp functions.php của theme, hoặc sử dụng một plugin để thêm JavaScript tùy chỉnh.

Mã JavaScript (ví dụ):

    
    jQuery(document).ready(function($) {
      $('a[href="#"]').on('click', function(e) {
        e.preventDefault();
      });
    });

Giải thích mã:

  • jQuery(document).ready(function($) { ... });: Đảm bảo mã JavaScript chỉ được thực thi sau khi trang web đã tải xong.
  • $('a[href="#"]').on('click', function(e) { ... });: Lắng nghe sự kiện click trên tất cả các liên kết có thuộc tính href là “#”.
  • e.preventDefault();: Ngăn chặn hành vi mặc định của liên kết (tức là ngăn trình duyệt cuộn lên đầu trang).

Cách 4: Sử Dụng Plugin

Nếu bạn không muốn chỉnh sửa mã hoặc viết JavaScript, bạn có thể sử dụng một plugin WordPress để tạo title menu không link. Có nhiều plugin miễn phí và trả phí có thể giúp bạn thực hiện điều này.

Ví dụ về một số plugin:

  • Menu Item Settings: Plugin này cho phép bạn tùy chỉnh nhiều thuộc tính của menu, bao gồm cả việc tắt liên kết.
  • Page Menu Filter: Plugin này cho phép bạn loại bỏ các trang cụ thể khỏi menu, hoặc tạo các menu tùy chỉnh với nhiều tùy chọn nâng cao.
  • Custom Menu Wizard: Plugin này cung cấp nhiều tính năng để tùy chỉnh menu, bao gồm cả việc tạo title menu không link.

Lưu ý: Khi sử dụng plugin, hãy chọn một plugin đáng tin cậy và được cập nhật thường xuyên để đảm bảo tính bảo mật và tương thích với phiên bản WordPress của bạn.

Cách 5: Sử Dụng Walker Menu (Nâng Cao)

Phương pháp này phức tạp hơn các phương pháp trước, nhưng nó cho phép bạn kiểm soát hoàn toàn cấu trúc và hiển thị của menu. Bạn sẽ cần tạo một custom Walker Menu để tùy chỉnh HTML được tạo ra cho mỗi mục menu.

Walker Menu là một class trong WordPress được sử dụng để duyệt qua các mục menu và tạo ra HTML tương ứng. Bạn có thể tạo một class kế thừa từ class Walker_Nav_Menu và ghi đè các phương thức như start_el() và end_el() để tùy chỉnh HTML.

Ví dụ về một Walker Menu (Rút gọn):

    
    class Custom_Menu_Walker extends Walker_Nav_Menu {
      function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        if ($item->url == '#title') { // Kiểm tra nếu URL là '#title'
          $output .= '
  • ';
          $output .= '' . $item->title . '';
        } else {
          parent::start_el( $output, $item, $depth, $args, $id );
        }
      }

      function end_el( &$output, $item, $depth = 0, $args = array() ) {
        if ($item->url == '#title') {
          $output .= '
    • ';
        } else {
          parent::end_el( $output, $item, $depth, $args );
        }
      }
    }

    Giải thích mã:

    • class Custom_Menu_Walker extends Walker_Nav_Menu { ... }: Tạo một class mới kế thừa từ Walker_Nav_Menu.
    • function start_el( ... ) { ... }: Phương thức này được gọi trước khi hiển thị mỗi mục menu.
    • function end_el( ... ) { ... }: Phương thức này được gọi sau khi hiển thị mỗi mục menu.
    • if ($item->url == '#title') { ... }: Kiểm tra nếu URL của mục menu là “#title”. Nếu đúng, thay vì tạo một liên kết, chúng ta chỉ hiển thị tiêu đề trong một thẻ span.
    • parent::start_el( ... ) và parent::end_el( ... ): Gọi các phương thức gốc của class Walker_Nav_Menu để xử lý các mục menu thông thường.

    Cách sử dụng Walker Menu:

    1. Thêm đoạn mã Walker Menu vào tệp functions.php của theme.
    2. Trong trang quản trị WordPress, tạo một custom link với URL là “#title” (hoặc bất kỳ URL nào bạn muốn sử dụng để đánh dấu title menu).
    3. Khi hiển thị menu, sử dụng tham số 'walker' => new Custom_Menu_Walker(). Ví dụ:
        
    wp_nav_menu( array(
      'theme_location' => 'primary',
      'walker' => new Custom_Menu_Walker()
    ) );

    Lưu ý: Phương pháp này đòi hỏi kiến thức về PHP và WordPress Theme Development. Tuy nhiên, nó cho phép bạn tùy chỉnh menu một cách linh hoạt và chuyên nghiệp.

    Kết Luận

    Bài viết này đã giới thiệu nhiều cách khác nhau để thêm title menu không link trong WordPress. 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. Nếu bạn mới bắt đầu, cách sử dụng custom link với “#” hoặc javascript:void(0); có thể là lựa chọn tốt nhất. Nếu bạn muốn kiểm soát nhiều hơn, bạn có thể sử dụng JavaScript hoặc Walker Menu.

    Chúc bạn thành công trong việc tạo ra những menu đẹp và chuyên nghiệp cho website WordPress của mình!

    Related Topics by Tag
    , , , ,

    ..