W jaki sposób element menu najwyższego poziomu nie ma łącza, ale ma połączone podmenu?

Buduję horyzontalne menu, a niektóre wpisy w tym menu będą miały rozwijane menu (podmenu), a niektóre nie. Te, które mają podmenu, w rzeczywistości nie są stronami. Mają być jedynie przewodnikami po rozwijanych listach.

Załóżmy na przykład, że menu horyzontalne wygląda następująco:

Strona główna | O nas | Produkty | Kierunki | Kontakt

A element „produkty” ma zawierać 3 strony połączone na pionowej liście rozwijanej poniżej, więc same „produkty” tak naprawdę nie reprezentują strony, jak mogę to zrobić w WP?

(Używam WP jako CMS, ze statycznymi stronami domowymi i wewnętrznymi. Buduję własne szablony, projektuję menu w CSS, a następnie rejestruję menu w functions.php i wywołuję je w szablonach.) W WP dodajesz wpisy do menu za pomocą listy stron lub niestandardowych łączy. Ale nie chcę, aby „produkty” były połączone. Jeśli nie dodam linku do linku niestandardowego, nie pozwoli mi dodać go do menu.

Czy można to zrobić za pomocą menu administratora, czy też muszę podejść do tego w inny sposób?

Dziękuję za wszelką pomoc!

Mam kilka pomysłów:

1. Ustaw niestandardowy link, do #którego nic nie zwróci
2. Dodaj niestandardową klasę do elementów, a następnie użyj jQuery, aby usunąć łącza.
3. Użyj PHP równoważnego z metodą jQuery
4. Użyj wtyczki Disable Parent Menu Link (lub rozłącz ją i napisz własną)

Najłatwiejszym sposobem na zrobienie tego bez wtyczki lub czegokolwiek jest skorzystanie z funkcji „Menu” WordPressa. Oto instrukcje dla WordPress 4.8:

1. Z pulpitu WordPress przejdź do „Wygląd -> Menu”
2. Na karcie „Edycja menu” wybierz „Niestandardowe łącza”
3. Jako adres URL wpisz „#” (bez cudzysłowów)
4. Jako tekst linku wprowadź żądany tekst dla najwyższego poziomu menu rozwijanego
5. Kliknij przycisk „Dodaj do menu”
6. Przeciągnij element menu do żądanej pozycji w swoim menu
7. W przypadku właśnie dodanego elementu menu kliknij strzałkę w dół po prawej stronie elementu (zostanie wyświetlony „niestandardowy link” po lewej stronie elementu)
8. Usuń „#” z adresu URL. To - we wszystkich przeglądarkach - zamieni link do zwykłego tekstu.
9. Kliknij przycisk „Zapisz menu”

Najprostszą metodą, jaką wymyśliłem, było utworzenie niestandardowego elementu linku o wartości adresu URL linku wynoszącego # . To wysyła użytkownika do pustego skrótu na tej samej stronie, więc w zasadzie nie ma nigdzie linków.

Istnieją jednak pewne skutki uboczne używania pustych skrótów dla łączy zastępczych. Link nadal będzie się pojawiał i będzie zachowywał się jak link, więc może wprowadzić użytkowników w błąd, gdy kliknie coś, co wydaje się linkiem, ale nic się nie dzieje. Innym efektem jest to, że kliknięcie pustego linku skrótu spowoduje zastąpienie istniejącego skrótu, wysyłając użytkownika na górę strony. To i tak może nie być tak niepokojące dla menu, które jest na górze strony, ale jest dość denerwujące, gdy strona niespodziewanie przeskakuje, gdy się jej nie spodziewasz, szczególnie jeśli jest to menu stopki.

Rozwiązaniem jest połączenie metody pustego skrótu z fragmentem kodu w celu wykrycia, kiedy w menu używane są puste łącza skrótu i hrefcałkowite usunięcie atrybutu z tego łącza. aElementem bez hrefatrybutu jest poprawny HTML 5 metoda tworzenia łącza zastępczy.

/**
 * 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 );
} );

To działało dla mnie:

Aktywowałem Klasy CSS w Menu> Opcje ekranu> Klasy CSS Następnie podałem element menu, który chciałem dezaktywować klasę „.nolink” i dodałem ten fragment kodu do mojego niestandardowego panelu CSS:

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

Korzystając z podejścia PHP, dodałem ten kod do functions.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);

Spowoduje to zastąpienie linku elementem span dla menu pozycji post_name == „kontakt”, czego szukałem. Możesz to łatwo zmienić, aby sprawdzić tytuł menu lub identyfikator, lub dodać kod, aby sprawdzić, czy zawiera elementy menu podrzędnego itp.

Rozwiązałem w ten sposób: w header.php (twojego tematu) szukałem:

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

i zastąpiony przez:

'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>',

Krótko mówiąc, ten skrypt sprawdza, czy jego link nadrzędny kończy się na „#”, w tym przypadku dodaje element rozpiętości wokół zawartości znacznika A, który wyłącza kliknięcie.

Mam nadzieję, że to pomoże :-)

Jak sugerują tu inni, możesz utworzyć niestandardowy element menu z linkiem # jako jego adres URL. Następnie usuń # po dodaniu go do menu. I wreszcie, możesz użyć tego prostego wyrażenia regularnego, aby usunąć rzeczywisty tag z tych łączy.

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

Spowoduje to usunięcie kliknięcia (i usunięcie stylu elementu). W ten sposób nie musisz używać niestandardowych # linków w swoim 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 );

Doceń to stary wątek, ale szybki i brudny sposób uzyskania linku w Wordpress polega na utworzeniu adresu URL linku jako:

#_

Zwróć uwagę na podkreślenie po hashtagu. W ten sposób, jeśli twoje menu przewija się w dół strony (tzn. Naprawione), nie dostajesz skoku na górę strony po kliknięciu na nią i nie wymaga żadnych wtyczek / skryptu.

Zdaję sobie sprawę, że spóźniłem się z grą, ale są to dwie metody, których używam:

1) Ustaw element menu nadrzędnego jako duplikat pierwszego elementu podrzędnego i zmień jego etykietę. Na przykład, jeśli pierwszy element w „Produktach” to „Produkt 1”, użyj „Produkt 1” jako elementu menu nadrzędnego, a następnie zmień jego etykietę na „Produkty”. W ten sposób zarówno „Produkty”, jak i „Produkt 1” doprowadzą do strony Produkt 1.

2) Dodaj przekierowanie, aby strona Produkty została przekierowana do produktu 1. Zaletą tej opcji jest to, że umożliwia utworzenie pustej strony Produkty w celu utworzenia hierarchicznej listy na Stronach, ale jeśli ktoś spróbuje przejść do pustych Produktów strona zostanie przekierowana.

Przejdź do Wygląd, a następnie kliknij menu. W tej sekcji przejdź do struktury menu i kliknij strzałkę w dół, aby rozwinąć stronę, a zobaczysz pole z komunikatem „Wyłącz link”. Zaznacz to pole i zapisz.

1. Ustaw niestandardowy link na #, który niczego nie zwróci Element listy

2. Dodaj ten filtr:

   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. Edytuj CSS zakresu, aby uzyskać taki sam styl jak <a>, nie zapomnij cursor: context-menu;.

Utwórz element menu „Niestandardowe łącza” i dodaj „javascript :;” (bez cudzysłowów) dla pola adresu URL. Jest to lepszy sposób niż użycie „#”, ponieważ kliknięcie nie spowoduje przewinięcia strony do góry.

Pisząc od 1/2019, rozwiązaniem, które produkuje prawidłowy HTML5 jest wykonanie następujących czynności.

1. Dodaj niestandardowy link z adresem URL ustawionym na # i dowolną nazwą, którą chcesz. Oba pola są wymagane.
2. Edytuj nowo dodany link niestandardowy, aby adres URL był pusty.
3. Zapisz zmiany.

Spowoduje to utworzenie nawigacji najwyższego poziomu, <a>Menu</a>która jest prawidłowym sposobem reprezentowania łącza, którego nie można kliknąć.

Możesz wyłączyć zdarzenia w <a>tagu dla wszystkich pozycji menu pierwszego poziomu, używając czystego css. .main-menuklasa może mieć inną nazwę zgodnie z nazwą twojego menu.

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

Znacznie łatwiejsze rozwiązanie można znaleźć na innym pytaniu:

Menu administracyjne - Podświetl menu najwyższego poziomu na stronie podmenu (bez pokazywania podmenu)

Poszukaj odpowiedzi Askelona. Działa idealnie, bez potrzeby wykonywania żadnych preg_replaces lub jquery.