Come creare una voce di menu di primo livello senza link ma con sottomenu collegati?

Il modo più semplice per farlo senza plugin o altro è utilizzare la funzione "Menu" di WordPress. Ecco le istruzioni per WordPress 4.8:

1. Dalla tua dashboard WordPress, vai su "Aspetto → Menu"
2. Nella scheda "Modifica Menu", seleziona "Link personalizzati"
3. Per l'URL, inserisci "#" (senza virgolette)
4. Per il testo del link, inserisci il testo desiderato per il livello superiore del tuo menu a discesa
5. Clicca sul pulsante "Aggiungi al menu"
6. Trascina la voce del menu nella posizione desiderata all'interno del tuo menu
7. Per la voce del menu appena aggiunta, clicca sulla freccia verso destra accanto alla voce (leggerai "link personalizzato" a sinistra della voce)
8. Rimuovi il "#" dall'URL. Questo - in tutti i browser - convertirà il link in testo semplice.
9. Clicca sul pulsante "Salva Menu"

Il metodo più semplice che ho trovato è stato quello di creare un elemento Link personalizzato con il valore URL impostato su #. Questo reindirizza l'utente a un hash vuoto sulla stessa pagina, quindi sostanzialmente non linka a nulla.

Tuttavia, ci sono alcuni effetti collaterali nell'utilizzare hash vuoti per i link segnaposto. Il link apparirà e si comporterà comunque come un link, quindi potrebbe confondere un utente quando clicca su quello che sembra un link ma non succede nulla. L'altro effetto è che cliccando su un link con hash vuoto sovrascriverà qualsiasi hash esistente, riportando l'utente all'inizio della pagina. Questo potrebbe non essere un problema per un menu che si trova già in cima alla pagina, ma è piuttosto fastidioso quando la pagina salta inaspettatamente, specialmente se si tratta di un menu nel footer.

La soluzione è combinare il metodo dell'hash vuoto con un pezzo di codice per rilevare quando i link con hash vuoti vengono utilizzati nel menu e rimuovere completamente l'attributo href da quel link. Un elemento a senza l'attributo href è il metodo corretto in HTML 5 per creare un link segnaposto.

/**
 * Rimuove l'href dai link vuoti `<a href="#">` nei menu di navigazione
 * @param string $menu l'HTML corrente del menu
 * @return string l'HTML del menu modificato
 */
add_filter( 'wp_nav_menu_items', function ( $menu ) {
    return str_replace( '<a href="#"', '<a', $menu );
} );

Questo ha funzionato per me:

Ho attivato Classi CSS in Menu > Opzioni Schermo > Classi CSS Poi ho assegnato all'elemento del menu che volevo disattivare la classe ".nolink" e ho aggiunto questo codice al pannello CSS personalizzato:

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

Anche se è un thread vecchio, per un modo rapido e sporco di avere un link in Wordpress è impostando l'URL del link come:

#_

Nota l'underscore dopo il cancelletto. In questo modo, se il tuo menu scorre lungo la pagina (ad esempio è fissato), non si verifica un salto in cima alla pagina quando ci clicchi sopra e non richiede alcun plugin o script.

Crea una voce di menu "Link personalizzati" e inserisci javascript:; nel campo URL. Questo è un metodo migliore rispetto all'uso del # perché non farà scorrere la pagina verso l'alto quando viene cliccato.

Utilizzando l'approccio PHP ho aggiunto questo codice a 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);

Questo codice sostituirà il link con un elemento span per la voce di menu con post_name == "contact", che è esattamente quello che cercavo. Puoi facilmente modificarlo per verificare il titolo del menu o l'ID, oppure aggiungere del codice per controllare se ha voci di menu figlie ecc.

1. Imposta il link personalizzato su # che non restituirà nulla Voce di elenco

2. Aggiungi questo filtro:

   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. Modifica il CSS dello span per ottenere lo stesso stile di <a>, non dimenticare cursor: context-menu;.

Questo rimuoverà il click (e toglierà lo stile all'elemento). In questo modo, non sarà necessario utilizzare i link personalizzati con # nel tuo 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 );

Come altri hanno suggerito qui, puoi creare una voce di menu personalizzata con il link # come URL. Poi cancella il # una volta che è stato aggiunto al menu. Infine, puoi usare questa semplice espressione regolare per rimuovere il tag <a> effettivo da quei link.

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

Mi rendo conto di essere in ritardo, ma questi sono i due metodi che utilizzo:

1) Rendere l'elemento principale del menu un duplicato del primo sotto-elemento e cambiarne l'etichetta. Ad esempio, se il primo elemento sotto "Prodotti" è "Prodotto 1", usa "Prodotto 1" come elemento principale del menu, poi cambia la sua etichetta in "Prodotti". In questo modo, sia "Prodotti" che "Prodotto 1" porteranno alla pagina Prodotto 1.

2) Aggiungi un reindirizzamento in modo che la pagina Prodotti venga reindirizzata a Prodotto 1. Il vantaggio di questa opzione è che ti permette di creare una pagina Prodotti vuota per creare un elenco gerarchico nelle Pagine, ma se qualcuno prova ad accedere alla pagina Prodotti vuota, verrà reindirizzato.

Vai su Aspetto, quindi clicca su menu. In questa sezione vai sotto struttura menu e clicca sulla freccia verso il basso per espandere la pagina e vedrai una casella con scritto disabilita link. Spunta quella casella e salva.

Ho risolto in questo modo: in header.php (del tuo tema) ho cercato:

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

e l'ho sostituito con:

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

In parole semplici, questo script controlla se il link genitore termina con "#", in questo caso aggiunge un elemento span attorno al contenuto del tag A, che disabilita il click.

Spero sia utile :-)

Scritto a partire da 1/2019, la soluzione che produce un HTML5 corretto è la seguente.

1. Aggiungi un Link Personalizzato con l'URL impostato su # e il nome che preferisci. Entrambi i campi sono obbligatori.
2. Modifica il Link Personalizzato appena aggiunto in modo che l'URL sia vuoto.
3. Salva le modifiche.

Questo produrrà un elemento di navigazione di primo livello come <a>Menu</a> che è il modo corretto per rappresentare un link non cliccabile.

Crea un menu di collegamento personalizzato come descritto. Visualizza il codice sorgente e cerca l'href del sottomenu, ad esempio: #mm-1. Incolla questo nell'URL del collegamento personalizzato e salva il menu. In questo modo anche la versione mobile funzionerà quando tocchi il testo del menu.

La mia versione si presenta così:

per prima cosa, nel menu del pannello di amministrazione nel link desiderato, nel campo href inserisci # o lascialo vuoto, e poi nel function.php del tema aggiungi:

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

Puoi sostituire 'div' con qualsiasi elemento che preferisci.

Questo funziona per la versione 5.3.2 (testato in questa versione, ma dovrebbe funzionare anche in altre).

In questa forma, viene preservato il funzionamento di tutti gli argomenti 'before', 'after', 'link_before', 'link_after', ecc. da wp_nav_menu().

Inoltre, questo funziona anche per i sottomenu.

Una soluzione molto più semplice può essere trovata in un'altra domanda:

Menu Admin - Evidenzia il menu di primo livello quando sei su una pagina di sottomenu (senza mostrare il sottomenu)

Cerca la risposta di Askelon. Funziona perfettamente, senza bisogno di fare preg_replace o usare jQuery.

Puoi disabilitare gli eventi sul tag <a> per tutti gli elementi di menu di primo livello utilizzando CSS puro. La classe .main-menu potrebbe avere un nome diverso a seconda della denominazione del tuo menu.

/* disabilita gli elementi del menu genitore */
ul.main-menu > li > a {
    pointer-events: none;
}