In che modo la voce di menu di livello superiore non ha un collegamento, ma ha sottomenu collegati?

Sto creando un menu orizzontale e alcune delle voci di quel menu avranno menu a discesa (sottomenu), e altre no. Quelli che hanno sottomenu non sono in realtà pagine. Sono solo pensati per essere guide per i menu a discesa.

Ad esempio, supponiamo che il menu orizzontale sia il seguente:

Home | Chi siamo | Prodotti | Indicazioni | Contatto

E l'elemento li "prodotti" dovrebbe avere 3 pagine collegate in un elenco a discesa verticale sotto di esso, quindi i "prodotti" non rappresentano effettivamente una pagina, come posso farlo in WP?

(Uso WP come CMS, con home statica e pagine interne. Costruisco i miei modelli, modifico i menu in CSS, quindi registro i menu in Functions.php e li chiamo nei modelli.) In WP aggiungi voci a i menu tramite l'elenco delle pagine o tramite i collegamenti personalizzati. Ma non voglio che i "prodotti" siano collegati. Se non aggiungo un collegamento al collegamento personalizzato, non mi consente di aggiungerlo al menu.

È possibile tramite i menu admin o devo affrontarlo in qualche altro modo?

Grazie per tutto l'aiuto!

Ho alcune idee:

1. Imposta il link personalizzato su #cui non restituirà nulla
2. Aggiungi una classe personalizzata agli elementi e quindi usa jQuery per rimuovere i collegamenti.
3. Usa un PHP equivalente al metodo jQuery
4. Utilizzare il plug-in Disabilita collegamento menu principale (o smontarlo e scrivere il proprio)

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

1. Dalla dashboard di WordPress, vai su "Aspetto -> Menu"
2. Nella scheda "Modifica menu", seleziona "Collegamenti personalizzati"
3. Per l'URL, inserisci "#" (senza virgolette)
4. Per il testo del collegamento, inserisci il testo desiderato per il livello superiore del menu a discesa
5. Fai clic sul pulsante "Aggiungi al menu"
6. Trascina la voce di menu nella posizione desiderata all'interno del menu
7. Per la voce di menu che hai appena aggiunto, fai clic sulla freccia in giù a destra della voce (leggerà "collegamento personalizzato" a sinistra della voce)
8. Rimuovi "#" dall'URL. Questo, in tutti i browser, convertirà il collegamento in testo semplice.
9. Fai clic sul pulsante "Salva menu"

Il metodo più semplice che mi è venuto in mente è stato quello di creare un elemento di collegamento personalizzato con il valore URL collegamento di #. Questo sta inviando l'utente a un hash vuoto sulla stessa pagina, quindi praticamente non si collega da nessuna parte.

Tuttavia, ci sono alcuni effetti collaterali dell'uso di hash vuoti per i collegamenti segnaposto. Il collegamento verrà comunque visualizzato e si comporterà come un collegamento, pertanto potrebbe confondere un utente quando fa clic su quello che sembra essere un collegamento ma non accade nulla. L'altro effetto è che facendo clic su un collegamento hash vuoto si sovrascriverà qualsiasi hash esistente, inviando l'utente nella parte superiore della pagina. Questo potrebbe non essere così preoccupante per un menu che si trova in cima alla pagina comunque, ma è abbastanza stonante quando la pagina salta inaspettatamente quando non te l'aspetti, specialmente se questo è per un menu a piè di pagina.

La soluzione è combinare il metodo hash vuoto con un pezzo di codice per rilevare quando nel menu vengono utilizzati collegamenti hash vuoti e rimuovere completamente l' hrefattributo da quel collegamento. Un aelemento senza hrefattributo è il metodo HTML 5 corretto per creare un collegamento segnaposto.

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

Questo ha funzionato per me:

Ho attivato le classi CSS in Menu> Opzioni schermo> Classi CSS Quindi ho dato l'elemento di menu che volevo disattivare la classe ".nolink" e ho aggiunto questo pezzo di codice al mio pannello CSS personalizzato:

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

Usando 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 sostituirà il collegamento con un elemento span per il menu di elementi con post_name == "contatto", che è quello che stavo cercando. Puoi facilmente cambiarlo per verificare il titolo del menu o l'ID, oppure aggiungere un codice per verificare se ha voci di menu figlio ecc.

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

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

e 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 verifica se il suo link principale termina con "#", in questo caso aggiunge un elemento span attorno al contenuto del tag A, che disabilita il clic.

Spero che sia d'aiuto :-)

Come altri hanno suggerito, puoi creare una voce di menu di collegamento personalizzata con # come relativo URL. Quindi cancellare il # una volta che è stato aggiunto al menu. E infine, puoi usare questa semplice regex per rimuovere il tag effettivo da quei collegamenti.

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

Ciò rimuoverà il clic (e disattiverà l'elemento). In questo modo, non è necessario utilizzare i collegamenti # personalizzati nel 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 );

Apprezzo questo è un vecchio thread, ma per un modo rapido e sporco di avere un link in Wordpress è facendo l'URL del link come:

#_

Nota il carattere di sottolineatura dopo l'hashtag. In questo modo se il tuo menu scorre verso il basso nella pagina (es. Fisso), non fai un salto in cima alla pagina quando fai clic su di essa e non richiedono plugin / script.

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

1) Trasforma la voce del menu principale in un duplicato della prima voce secondaria e cambia la sua etichetta. Ad esempio, se il primo elemento in "Prodotti" è "Prodotto 1", utilizzare "Prodotto 1" come voce di menu principale, quindi cambiare 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 sia reindirizzata al Prodotto 1. Il vantaggio di questa opzione è che ti consente di creare una pagina Prodotti vuota per creare un elenco gerarchico in Pagine, ma se qualcuno cerca di andare ai Prodotti vuoti pagina, verranno reindirizzati.

Vai su Aspetto, quindi fai clic sui menu. In questa sezione vai sotto la struttura del menu e fai clic sulla freccia verso il basso per espandere la pagina e vedrai una casella che dice disabilita collegamento. Seleziona quella casella e salva.

1. Impostare il collegamento personalizzato su # che non restituirà nulla dell'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 span CSS per ottenere lo stesso stile di <a>, non dimenticare cursor: context-menu;.

Crea la voce di menu "Collegamenti personalizzati" e aggiungi "javascript :;" (senza virgolette) per il campo URL. Questo è un modo migliore rispetto all'uso di "#" perché non fa scorrere la pagina verso l'alto quando viene cliccato.

Scrivendo dal 1/2019, la soluzione che produce HTML5 corretto è di fare quanto segue.

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

Ciò produrrà un navigatore di livello superiore <a>Menu</a>che è il modo corretto di rappresentare un collegamento non cliccabile.

È possibile disabilitare gli eventi sul <a>tag per tutte le voci di menu di primo livello utilizzando CSS puro. .main-menuLa classe potrebbe avere un altro nome in base alla denominazione del menu.

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

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

Menu Ammin. - Evidenzia il menu principale quando sei su una pagina del sottomenu (senza mostrare il sottomenu)

Cerca la risposta di Askelon. Funziona perfettamente, senza la necessità di eseguire preg_replaces o jquery.