Cum să faci elementul de meniu principal fără link, dar să aibă submeniuri cu linkuri?

Cea mai ușoară metodă de a realiza acest lucru fără un plugin sau altceva este să folosești funcția "Menus" din WordPress. Iată instrucțiunile pentru WordPress 4.8:

1. Din panoul de control WordPress, accesează "Aspect -> Meniuri"
2. În fila "Editare Meniuri", selectează "Legături Personalizate"
3. Pentru URL, introdu "#" (fără ghilimele)
4. Pentru textul linkului, introdu textul dorit pentru nivelul superior al meniului tău derulant
5. Apasă butonul "Adaugă la Meniu"
6. Trage elementul de meniu în poziția dorită în cadrul meniului tău
7. Pentru elementul de meniu pe care tocmai l-ai adăugat, apasă pe săgeata în jos din dreapta elementului (va fi scris "legătură personalizată" în stânga elementului)
8. Șterge "#" din URL. Acest lucru - în toate browserele - va converti linkul în text simplu.
9. Apasă pe butonul "Salvează Meniul"

Cea mai simplă metodă la care m-am gândit a fost să creez un element de tip Link Personalizat cu valoarea URL-ului setată la #. Acest lucru trimite utilizatorul către un hash gol pe aceeași pagină, deci practic nu duce nicăieri.

Totuși, există câteva efecte secundare ale utilizării hash-urilor goale pentru link-uri de tip placeholder. Link-ul va apărea și se va comporta în continuare ca un link, ceea ce ar putea deruta un utilizator atunci când dă clic pe ceea ce pare a fi un link, dar nu se întâmplă nimic. Un alt efect este că dând clic pe un link cu hash gol va suprascrie orice hash existent, trimitând utilizatorul în partea de sus a paginii. Acest lucru s-ar putea să nu fie atât de deranjant pentru un meniu care este deja în partea de sus a paginii, dar este destul de neplăcut când pagina sare neașteptat, mai ales dacă este vorba despre un meniu din footer.

Soluția este să combinăm metoda hash-ului gol cu o bucată de cod care să detecteze când sunt folosite link-uri cu hash gol în meniu și să elimine atributul href din acel link complet. Un element a fără atribut href este metoda corectă în HTML 5 de a crea un link de tip placeholder.

/**
 * Elimină atributul href din link-urile goale `<a href="#">` din meniurile de navigare
 * @param string $menu HTML-ul curent al meniului
 * @return string HTML-ul modificat al meniului
 */
add_filter( 'wp_nav_menu_items', function ( $menu ) {
    return str_replace( '<a href="#"', '<a', $menu );
} );

Acest lucru a funcționat pentru mine:

Am activat Clasele CSS în Meniuri > Opțiuni ecran > Clase CSS Apoi am dat elementului de meniu pe care am vrut să-l dezactivez clasa ".nolink" și am adăugat acest fragment de cod în panoul meu CSS personalizat:

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

Înțeleg că acesta este un subiect vechi, dar pentru o metodă rapidă și simplă de a avea un link în Wordpress este prin setarea URL-ului link-ului ca:

#_

Observați underscore-ul după hashtag. În acest fel, dacă meniul dvs. derulează în jos pe pagină (adică este fixat), nu veți avea un salt în partea de sus a paginii când faceți clic pe el și nu necesită niciun plugin/script.

Creează un element de meniu "Linkuri Personalizate" și adaugă javascript:; în câmpul URL. Aceasta este o metodă mai bună decât folosirea # deoarece nu va derula pagina în sus la click.

Folosind abordarea PHP, am adăugat acest cod în 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);

Acest cod va înlocui link-ul cu un element span pentru elementul de meniu cu post_name == "contact", exact ceea ce căutam. Puteți modifica cu ușurință acest cod pentru a verifica titlul meniului sau ID-ul, sau puteți adăuga cod suplimentar pentru a verifica dacă elementul are subelemente de meniu etc.

1. Setează link-ul personalizat la # care nu va returna nimic List item

2. Adaugă acest filtru:

   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. Editează CSS-ul pentru span pentru a obține același stil ca <a>, nu uita de cursor: context-menu;.

Aceasta va elimina acțiunea de click (și va elimina stilizarea elementului). În acest fel, nu este necesar să folosești link-uri personalizate # în meniu.

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 );

După cum au sugerat și alții aici, puteți crea un element de meniu personalizat cu link folosind # ca URL. Apoi ștergeți # odată ce este adăugat în meniu. În final, puteți folosi această expresie regulată simplă pentru a elimina tag-ul <a> real din acele link-uri.

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

Îmi dau seama că am întârziat la petrecere, dar acestea sunt cele două metode pe care le folosesc:

1) Faceți elementul părinte din meniu o copie a primului sub-element și schimbați-i eticheta. De exemplu, dacă primul element din submeniul "Produse" este "Produsul 1", folosiți "Produsul 1" ca element părinte din meniu, apoi schimbați eticheta acestuia în "Produse". Astfel, atât "Produse" cât și "Produsul 1" vor duce către pagina Produsul 1.

2) Adăugați o redirecționare astfel încât pagina Produse să fie redirecționată către Produsul 1. Beneficiul acestei opțiuni este că vă permite să creați o pagină Produse goală pentru a crea o listă ierarhică în Pagini, dar dacă cineva încearcă să acceseze pagina goală Produse, va fi redirecționat.

Accesează Aspect, apoi dă clic pe meniuri. În această secțiune, mergi sub structura meniului și dă clic pe săgeata în jos pentru a extinde pagina și vei vedea o casetă care spune dezactivează linkul. Bifează acea casetă și salvează.

Am rezolvat astfel: în header.php (al temei tale) am căutat:

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

și am înlocuit cu:

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

Pe scurt, acest script verifică dacă link-ul părinte se termină cu "#", iar în acest caz adaugă un element span în jurul conținutului tag-ului A, care dezactivează click-ul.

Sper să te ajute :-)

Scris în 1/2019, soluția care generează HTML5 corect este următoarea.

1. Adaugă un Link Personalizat cu URL-ul setat pe # și orice nume dorești. Ambele câmpuri sunt obligatorii.
2. Editează Linkul Personalizat tocmai adăugat astfel încât URL-ul să fie gol.
3. Salvează modificările.

Aceasta va genera un element de navigare de nivel superior care este <a>Meniu</a>, ceea ce reprezintă modalitatea corectă de a afișa un link neclicabil.

Creează un meniu personalizat cu linkuri așa cum s-a menționat. Vezi codul sursă și caută href-ul submeniului, de exemplu: #mm-1. Lipește acest cod în URL-ul linkului personalizat și salvează meniul. Acest lucru va face ca versiunea mobilă să funcționeze și ea atunci când apeși pe textul meniului.

Versiunea mea arată astfel:

mai întâi, în meniul din panoul de administrare, în link-ul dorit, în câmpul href puneți # sau lăsați-l gol, apoi în function.php al temei se adaugă:

function replace_empty_menu_links( $item_output, $item, $depth, $args ) {
  if ( $item->url == '#' || $item->url == '' ) {
    $item_output = sprintf( '%1$s<' . 'div' . '%2$s>%3$s%4$s%5$s</' . 'div' . '>%6$s',
      $args->before,
      $attributes,
      $args->link_before,
      apply_filters( 'the_title', $item->title, $item->ID ),
      $args->link_after,
      $args->after
    );
  }
  return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'replace_empty_menu_links', 10, 4 );

Puteți înlocui 'div' cu orice element care vă convine.

Această soluție funcționează pentru versiunea 5.3.2 (testată în această versiune, dar ar trebui să funcționeze și în alte versiuni).

În această formă, este păstrată funcționalitatea tuturor argumentelor 'before', 'after', 'link_before', 'link_after', etc. din wp_nav_menu().

De asemenea, această soluție funcționează și pentru sub-meniu.

O soluție mult mai ușoară poate fi găsită în altă întrebare:

Meniu Admin - Evidențierea meniului principal când vă aflați pe o pagină de sub-meniul (fără a afișa sub-meniul)

Căutați răspunsul lui Askelon. Funcționează perfect, fără a fi nevoie să utilizați preg_replaces sau jquery.

Puteți dezactiva evenimentele pe tag-ul <a> pentru toate elementele de meniu de prim nivel folosind CSS pur. Clasa .main-menu poate avea alt nume în funcție de denumirea meniului dumneavoastră.

/* dezactivează elementele de meniu părinte */
ul.main-menu > li > a {
    pointer-events: none;
}