Làm thế nào để làm cho mục menu cấp cao nhất không có liên kết, nhưng có các menu phụ được liên kết?

Tôi đang xây dựng một menu ngang và một số mục trong menu đó sẽ có menu thả xuống (menu phụ), và một số sẽ không. Những người có menu phụ không thực sự là trang. Chúng chỉ là hướng dẫn cho việc thả xuống.

Chẳng hạn, giả sử menu ngang giống như sau:

Trang chủ | Giới thiệu | Sản phẩm | Chỉ đường | Tiếp xúc

Và mục li "sản phẩm" có nghĩa là có 3 trang được liên kết trong danh sách thả xuống dọc bên dưới, vì vậy "sản phẩm" không thực sự đại diện cho một trang, làm thế nào tôi có thể làm điều đó trong WP?

(Tôi sử dụng WP như một CMS, với các trang tĩnh và trang bên trong. Tôi xây dựng các mẫu của riêng mình, định kiểu các menu trong CSS, sau đó đăng ký các menu trong hàm.php và gọi chúng trong các mẫu.) Trong WP bạn thêm các mục vào các menu thông qua danh sách các trang, hoặc bằng các liên kết tùy chỉnh. Nhưng tôi không muốn "sản phẩm" được liên kết. Nếu tôi không thêm một liên kết đến liên kết tùy chỉnh, nó sẽ không cho phép tôi thêm nó vào menu.

Điều này có thể thực hiện được thông qua quản trị viên menu hay tôi phải tiếp cận nó theo một cách khác?

Cảm ơn bạn đã giúp đỡ!

Tôi có một vài ý tưởng:

1. Đặt liên kết tùy chỉnh #sẽ không trả lại bất cứ điều gì
2. Thêm một lớp tùy chỉnh vào các mục và sau đó sử dụng jQuery để xóa các liên kết.
3. Sử dụng một PHP tương đương với phương thức jQuery
4. Sử dụng plugin Vô hiệu hóa liên kết cha mẹ (hoặc tách nó ra và viết riêng của bạn)

Cách dễ nhất để làm điều đó mà không cần plugin hay bất cứ thứ gì là sử dụng chức năng "Menu" của WordPress. Dưới đây là hướng dẫn cho WordPress 4.8:

1. Từ bảng điều khiển WordPress của bạn, đi đến "Giao diện -> Menu"
2. Trong tab "Chỉnh sửa menu", chọn "Liên kết tùy chỉnh"
3. Đối với URL, nhập "#" (không có dấu ngoặc kép)
4. Đối với văn bản liên kết, nhập văn bản bạn muốn cho cấp cao nhất của menu thả xuống của bạn
5. Nhấp vào nút "Thêm vào Menu"
6. Kéo mục menu đến vị trí mong muốn trong menu của bạn
7. Đối với mục menu bạn vừa thêm, nhấp vào mũi tên xuống ở bên phải của mục (nó sẽ đọc "liên kết tùy chỉnh" ở bên trái của mục)
8. Xóa "#" khỏi URL. Điều này - trong tất cả các trình duyệt - sẽ chuyển đổi liên kết thành văn bản thuần túy.
9. Nhấp vào nút "Lưu Menu"

Phương pháp đơn giản nhất tôi nghĩ ra là tạo một mục Liên kết tùy chỉnh với giá trị URL Liên kết là #. Điều này đang gửi người dùng đến một hàm băm trống trên cùng một trang, vì vậy về cơ bản không có liên kết nào.

Tuy nhiên, có một số tác dụng phụ của việc sử dụng băm trống cho các liên kết giữ chỗ. Liên kết vẫn sẽ xuất hiện và hoạt động giống như một liên kết, vì vậy nó có thể gây nhầm lẫn cho người dùng khi họ nhấp vào liên kết có vẻ là liên kết nhưng không có gì xảy ra. Hiệu ứng khác là nhấp vào liên kết băm trống sẽ ghi đè mọi hàm băm hiện có, đưa người dùng đến đầu trang. Điều này có thể không quá đáng lo ngại đối với một menu ở đầu trang, nhưng nó khá chói tai khi trang bất ngờ nhảy khi bạn không mong đợi nó, đặc biệt nếu đây là cho menu chân trang.

Giải pháp là kết hợp phương thức băm trống với một đoạn mã để phát hiện khi các liên kết băm trống được sử dụng trong menu và loại bỏ hrefhoàn toàn thuộc tính khỏi liên kết đó. Một aphần tử không có hrefthuộc tính là phương pháp HTML 5 chính xác để tạo liên kết giữ chỗ.

/**
 * Remove the href from empty links `<a href="#">` in the nav menus
 * @param string $menu the current menu HTML
 * @return string the modified menu HTML
 */
add_filter( 'wp_nav_menu_items', function ( $menu ) {
    return str_replace( '<a href="#"', '<a', $menu );
} );

Điều này làm việc cho tôi:

Tôi đã kích hoạt các Lớp CSS trong Menu> Tùy chọn màn hình> Các lớp CSS Sau đó, tôi đã đưa phần tử menu mà tôi muốn hủy kích hoạt lớp ".nolink" và thêm đoạn mã này vào bảng CSS tùy chỉnh của mình:

.nolink {
   pointer-events: none;
   cursor: default;
}

Sử dụng cách tiếp cận PHP tôi đã thêm mã này vào hàm.php:

function remove_link_contact_menu($item_output, $item) {
    if ($item->post_name == 'contact')
        return '<span>' . $item->title . '</span>';

    return $item_output;
}
add_filter('walker_nav_menu_start_el', 'remove_link_contact_menu', 20, 2);
add_filter('megamenu_walker_nav_menu_start_el', 'remove_link_contact_menu', 20, 2);

Điều này sẽ thay thế liên kết bằng một phần tử span cho menu item bằng post_name == "contact", đây là thứ tôi đang tìm kiếm. Bạn có thể dễ dàng thay đổi điều đó để kiểm tra tiêu đề menu hoặc ID, hoặc thêm một số mã để kiểm tra xem nó có bất kỳ mục menu con nào không, v.v.

Tôi đã giải quyết theo cách này: trong tiêu đề.php (của chủ đề của bạn) Tôi đã tìm kiếm:

'link_before'     => '',
'link_after'      => '',

và được thay thế bằng:

'link_before'     => '<script>var scriptTag=document.getElementsByTagName("script");scriptTag=scriptTag[scriptTag.length-1];if(scriptTag.parentNode.href)if(scriptTag.parentNode.href.slice(-1)=="#")document.write("<span onclick=\"return false\">")</script>',
'link_after'      => '<script>var scriptTag=document.getElementsByTagName("script");scriptTag=scriptTag[scriptTag.length-1];if(scriptTag.parentNode.href)if(scriptTag.parentNode.href.slice(-1)=="#")document.write("</span>")</script>',

Nói một cách đơn giản, tập lệnh này kiểm tra xem liên kết cha của nó có kết thúc bằng "#" hay không, trong trường hợp này, nó thêm một phần tử span xung quanh nội dung của thẻ A, vô hiệu hóa nhấp chuột.

Hy vọng nó giúp :-)

Như những người khác ở đây đã đề xuất, bạn có thể tạo một mục menu liên kết tùy chỉnh với # là url của nó. Sau đó xóa # một khi nó được thêm vào menu. Và cuối cùng, bạn có thể sử dụng regex đơn giản này để tách thẻ thực tế khỏi các liên kết đó.

preg_replace('/<a>([^<]+)<\/a>/i', '<span class="no-link">$1</span>', $navHTML);

Điều này sẽ loại bỏ nhấp chuột (và bỏ kiểu dáng mục). Bằng cách này, bạn không phải sử dụng các liên kết # tùy chỉnh trong menu.

add_action( 'wp_footer', function(){
    ?>
    <script>
    (function( $ ) {
        var itemm = $('#main-menu .menu-item-has-children > a');
        itemm.click(function(){
            document.activeElement && document.activeElement.blur();
            return false;
        });
    })(jQuery);
    </script>
<?php
 }, 1, 0 );

Đánh giá cao đây là một chủ đề cũ, nhưng để có một liên kết nhanh và bẩn trong Wordpress là bằng cách tạo URL liên kết dưới dạng:

#_

Chú ý dấu gạch dưới sau hashtag. Bằng cách này nếu menu của bạn cuộn xuống trang (tức là đã sửa), bạn không được nhảy lên đầu trang khi nhấp vào nó và không yêu cầu bất kỳ plugin / tập lệnh nào.

Tôi nhận ra mình đến trễ trong trò chơi, nhưng đây là hai phương pháp tôi sử dụng:

1) Làm cho mục menu cha là một bản sao của mục phụ đầu tiên và thay đổi nhãn của nó. Ví dụ: nếu mục đầu tiên trong "Sản phẩm" là "Sản phẩm 1", hãy sử dụng "Sản phẩm 1" làm mục menu chính, sau đó thay đổi nhãn của nó thành "Sản phẩm". Bằng cách đó, cả "Sản phẩm" và "Sản phẩm 1" sẽ dẫn đến trang Sản phẩm 1.

2) Thêm chuyển hướng để trang Sản phẩm được chuyển hướng đến Sản phẩm 1. Lợi ích của tùy chọn này là cho phép bạn tạo trang Sản phẩm trống để tạo danh sách phân cấp trong Trang, nhưng nếu có ai cố gắng truy cập Sản phẩm trống trang, họ sẽ được chuyển hướng.

Đi đến Giao diện, sau đó nhấp vào menu. Trong phần này đi theo cấu trúc menu và nhấp vào mũi tên xuống để mở rộng trang và bạn sẽ thấy một hộp có liên kết vô hiệu hóa. Kiểm tra hộp đó và lưu lại.

1. Đặt liên kết tùy chỉnh thành # sẽ không trả lại bất kỳ mục nào trong danh sách

2. Thêm bộ lọc này:

   add_filter( 'wp_nav_menu_items', 'wpse_remove_empty_links' );
   
   function wpse_remove_empty_links( $menu ) {
   
       return preg_replace("/<a href=\"#\">(.+?)<\/a>/is", "<span>$1</span>", $menu);
   
   }

3. Chỉnh sửa span CSS để có cùng kiểu với <a>, đừng quên cursor: context-menu;.

Tạo mục trình đơn "Liên kết tùy chỉnh" và thêm "javascript:;" (không có dấu ngoặc kép) cho trường URL. Đây là cách tốt hơn so với sử dụng "#" vì nó sẽ không cuộn trang của bạn lên đầu khi nhấp vào.

Viết từ 1/2019, giải pháp tạo ra HTML5 phù hợp là thực hiện như sau.

1. Thêm Liên kết tùy chỉnh với URL được đặt thành # và bất kỳ tên nào bạn muốn. Cả hai lĩnh vực được yêu cầu.
2. Chỉnh sửa Liên kết tùy chỉnh mới được thêm vào để URL trống.
3. Lưu các thay đổi.

Điều này sẽ tạo ra một điều hướng cấp cao nhất, <a>Menu</a>đó là cách chính xác để thể hiện một liên kết không thể nhấp.

Bạn có thể vô hiệu hóa các sự kiện trên <a>thẻ cho tất cả các mục menu cấp đầu tiên bằng cách sử dụng css thuần túy. .main-menulớp có thể có một tên khác theo cách đặt tên menu của bạn.

/* disable parent menu items */
ul.main-menu > li > a {
    pointer-events: none;
}

Giải pháp dễ dàng hơn nhiều có thể được tìm thấy trên một câu hỏi khác:

Menu quản trị - Đánh dấu menu cấp cao nhất khi ở trang menu phụ (không hiển thị menu phụ)

Hãy tìm câu trả lời của Askelon. Hoạt động hoàn hảo, không cần phải thực hiện bất kỳ preg numplaces hoặc jquery nào.