it-swarm.dev

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

Sto costruendo un menu orizzontale e alcune 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 dropdown.

Ad esempio, dì che il menu orizzontale è come segue:

Home | Chi siamo | Prodotti | Indicazioni | Contatto

E l'articolo "prodotti" è pensato per avere 3 pagine collegate in un elenco a discesa verticale sotto di esso, quindi "prodotti" di per sé non rappresentano effettivamente una pagina, come posso farlo in WP?

(Io uso WP come CMS, con home statiche e pagine interne. Costruisco i miei modelli, modifico i menu in CSS, quindi registro i menu in functions.php e li chiamano nei template.) In WP si aggiungono voci ai menu tramite l'elenco di 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 farlo attraverso i menu admin o devo affrontarlo in un altro modo?

Grazie per tutto l'aiuto!

24
PVA

Ho alcune idee:

  1. Imposta il link personalizzato su # che non restituirà nulla
  2. Aggiungi una classe personalizzata agli elementi e poi usa jQuery per rimuovere i collegamenti.
  3. Utilizza un PHP equivalente al metodo jQuery
  4. Usa il Disattiva il menu principale Link plugin (o prendilo e scrivi il tuo)
12
Brooke.

Il modo più semplice per farlo senza un plugin o altro è usare 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 "Link 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 del menu nella posizione desiderata all'interno del tuo menu
  7. Per la voce di menu che hai appena aggiunto, fai clic sulla freccia in giù a destra dell'elemento (leggerà "link personalizzato" a sinistra dell'elemento)
  8. Rimuovi il "#" dall'URL. Questo - in tutti i browser - convertirà il link in testo normale.
  9. Fare clic sul pulsante "Salva menu"
22
GavinR

Il metodo più semplice che ho ideato è stato quello di creare un oggetto Link personalizzato con il valore URL link di #. Questo sta inviando l'utente a un hash vuoto sulla stessa pagina, quindi fondamentalmente non collega da nessuna parte.

Tuttavia, ci sono alcuni effetti collaterali dell'utilizzo di hash vuoti per i collegamenti segnaposto. Il collegamento apparirà ancora e si comporterà come un link, quindi potrebbe confondere un utente quando sta facendo clic su quello che sembra essere un collegamento ma non accade nulla. L'altro effetto è che facendo clic su un link hash vuoto si sostituisce qualsiasi hash esistente, inviando l'utente in cima alla pagina. Questo potrebbe non essere così preoccupante per un menu che è comunque in cima alla pagina, ma è piuttosto fastidioso quando la pagina salta inaspettatamente quando non la si aspetta, specialmente se si tratta di un menu di piè di pagina.

La soluzione consiste nel combinare il metodo di hash vuoto con un pezzo di codice per rilevare quando vengono utilizzati collegamenti hash vuoti nel menu e rimuovere completamente l'attributo href da quel collegamento. Un elemento a senza un attributo href è il metodo HTML 5 corretto di creare un link 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
 */
function wpse_remove_empty_links( $menu ) {
    return str_replace( '<a href="#">', '<a>', $menu );
}

add_filter( 'wp_nav_menu_items', 'wpse_remove_empty_links' );
6
shea

Questo ha funzionato per me:

Ho attivato Classi CSS in Menu> Opzioni schermo> Classi CSS Poi ho dato l'elemento del 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;
}
1
RickyBono

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 item con il post_name == "contact", che è quello che stavo cercando. Puoi facilmente cambiarlo per controllare il titolo del menu o l'ID, o aggiungere del codice per verificare se ha voci di menu secondarie, ecc.

1
Sam Bull

Apprezzo che questo è un thread vecchio, ma per un modo veloce e sporco di avere un collegamento in Wordpress è rendere l'URL del link come:

#_

Notare il carattere di sottolineatura dopo l'hashtag. In questo modo se il tuo menu scorre verso il basso della pagina (cioè fisso), non fai un salto in cima alla pagina quando fai clic su di esso e non richiede alcun plugin/script.

0
user1249523

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

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

Questo produrrà un nav di livello superiore che è <a>Menu</a> che è il modo corretto per rappresentare un link non cliccabile.

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

0
calmohallag

Crea una voce di menu "Collegamenti personalizzati" e aggiungi "javascript :;" (senza virgolette) per il campo URL. Questo è un modo migliore di usare "#" perché non farà scorrere la pagina verso l'alto quando si fa clic.

0
Tahi Reu

Ho risolto in questo modo: in header.php (del tema) che 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 controlla se il suo link padre termina con "#", in questo caso aggiunge un elemento span attorno al contenuto del tag A, che disabilita il clic.

Spero che sia d'aiuto :-)

0
niente0

Puoi disabilitare gli eventi sul tag <a> per tutti gli elementi del menu di primo livello usando puro css. La classe .main-menu potrebbe avere un altro nome in base alla denominazione del menu.

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

Questo rimuoverà il clic (e disattiverà l'oggetto). In questo modo, non devi usare i link personalizzati # 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 );
0
Doug Cassidy

Come altri qui hanno suggerito puoi creare una voce di menu di collegamento personalizzata con il # come suo url. Quindi cancella il # una volta aggiunto al menu. Infine, è possibile utilizzare questa semplice espressione regolare per rimuovere il tag effettivo da tali collegamenti.

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

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

1) Rendi la voce di menu principale un duplicato della prima voce secondaria e modifica la sua etichetta. Ad esempio, se il primo elemento in "Prodotti" è "Prodotto 1", utilizzare "Prodotto 1" come voce del menu principale, quindi cambiare l'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 al Prodotto 1. Il vantaggio di questa opzione è che ti consente di creare una pagina Prodotti vuota per creare un elenco gerarchico in Pages, ma se qualcuno prova ad accedere ai Prodotti vuoti pagina, saranno reindirizzati.

0
Barry

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

0
Rob