¿Cómo hacer que el elemento de menú de nivel superior no tenga enlace, pero tenga submenús que estén vinculados?

Estoy creando un menú horizontal y algunas de las entradas en ese menú tendrán menús desplegables (submenús), y otras no. Los que tienen submenús no son en realidad páginas. Solo están destinados a ser guías para los menús desplegables.

Por ejemplo, supongamos que el menú horizontal es el siguiente:

Inicio | Acerca de nosotros | Productos | Direcciones | Contacto

Y el elemento li "productos" está destinado a tener 3 páginas enlazadas en una lista desplegable vertical debajo de él, por lo que "productos" en sí no representa una página, ¿cómo puedo hacer eso en WP?

(Uso WP como CMS, con páginas de inicio y páginas internas estáticas. Construyo mis propias plantillas, diseño los menús en CSS, luego registro los menús en functions.php y los llamo en las plantillas). En WP agrega entradas a los menús a través de la lista de páginas o mediante los enlaces personalizados. Pero no quiero que se vinculen "productos". Si no agrego un enlace al enlace personalizado, no me permitirá agregarlo al menú.

¿Es esto posible a través de los menús de administración o tengo que abordarlo de otra manera?

¡Gracias por cualquier ayuda!

Tengo algunas ideas:

1. Establezca el enlace personalizado al #que no devolverá nada
2. Agregue una clase personalizada a los elementos y luego use jQuery para eliminar los enlaces.
3. Use un PHP equivalente al método jQuery
4. Use el complemento Desactivar enlace de menú principal (o desmóntelo y escriba el suyo)

La forma más fácil de hacerlo sin un complemento o algo es usar la función "Menús" de WordPress. Aquí están las instrucciones para WordPress 4.8:

1. Desde su panel de WordPress, vaya a "Apariencia -> Menús"
2. En la pestaña "Editar menús", seleccione "Enlaces personalizados"
3. Para la URL, ingrese "#" (sin comillas)
4. Para el texto del enlace, ingrese el texto deseado para el nivel superior de su menú desplegable
5. Haga clic en el botón "Agregar al menú"
6. Arrastre el elemento del menú a su posición deseada dentro de su menú
7. Para el elemento de menú que acaba de agregar, haga clic en la flecha hacia abajo a la derecha del elemento (se leerá "enlace personalizado" a la izquierda del elemento)
8. Elimine el "#" de la URL. Esto, en todos los navegadores, convertirá el enlace a texto sin formato.
9. Haga clic en el botón "Guardar menú"

El método más simple que se me ocurrió fue crear un elemento de enlace personalizado con el valor URL de enlace de #. Esto está enviando al usuario a un hash vacío en la misma página, por lo que básicamente no enlaza a ninguna parte.

Sin embargo, hay algunos efectos secundarios del uso de hashes vacíos para enlaces de marcador de posición. El enlace seguirá apareciendo y se comportará como un enlace, por lo que podría confundir a un usuario cuando hace clic en lo que parece ser un enlace, pero no sucede nada. El otro efecto es que hacer clic en un enlace hash vacío anulará cualquier hash existente, enviando al usuario a la parte superior de la página. Esto puede no ser tan preocupante para un menú que está en la parte superior de la página de todos modos, pero es bastante discordante cuando la página salta inesperadamente cuando no lo espera, especialmente si se trata de un menú de pie de página.

La solución es combinar el método hash vacío con un código para detectar cuándo se usan enlaces hash vacíos en el menú y eliminar completamente el hrefatributo de ese enlace. Un aelemento sin hrefatributo es el método HTML 5 correcto para crear un enlace de marcador de posición.

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

Esto funcionó para mí:

He activado clases CSS en menús> Opciones de pantalla> Clases CSS Entonces me di el elemento de menú que quería desactivar el ".nolink" clase y añadidos este pedazo de código a mi panel de CSS personalizado:

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

Usando el enfoque PHP agregué este código 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);

Esto reemplazará el enlace con un elemento span para el menú del elemento con post_name == "contact", que es lo que estaba buscando. Puede cambiarlo fácilmente para verificar el título del menú o la ID, o agregar algún código para verificar si tiene algún elemento secundario del menú, etc.

Resolví de esta manera: en header.php (de su tema) busqué:

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

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

En palabras simples, este script verifica si su enlace padre termina con "#", en este caso agrega un elemento span alrededor del contenido de la etiqueta A, que deshabilita el clic.

Espero eso ayude :-)

Como otros aquí han sugerido, puede crear un elemento de menú de enlace personalizado con el # como su url. Luego borre el # una vez que se haya agregado al menú. Y finalmente, puede usar esta simple expresión regular para quitar la etiqueta real de esos enlaces.

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

Esto eliminará el clic (y eliminará el estilo del elemento). De esta manera, no tiene que usar los # enlaces personalizados en su menú.

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

Aprecio que este es un hilo viejo, pero para una forma rápida y sucia de tener un enlace en Wordpress es hacer la URL del enlace como:

#_

Observe el guión bajo después del hashtag. De esta manera, si su menú se desplaza hacia abajo en la página (es decir, fijo), no salta a la parte superior de la página al hacer clic en él y no requiere ningún complemento / script.

Me doy cuenta de que llego tarde al juego, pero estos son los dos métodos que uso:

1) Convierta el elemento del menú principal en un duplicado del primer subelemento y cambie su etiqueta. Por ejemplo, si el primer elemento en "Productos" es "Producto 1", use "Producto 1" como elemento del menú principal, luego cambie su etiqueta a "Productos". De esa forma, tanto "Productos" como "Producto 1" llevarán a la página Producto 1.

2) Agregue una redirección para que la página de Productos se redirija al Producto 1. El beneficio de esta opción es que le permite crear una página de Productos en blanco para crear una lista jerárquica en las Páginas, pero si alguien intenta ir a los Productos en blanco página, serán redirigidos.

Vaya a Apariencia, luego haga clic en los menús. En esta sección, vaya a la estructura del menú y haga clic en la flecha hacia abajo para expandir la página y verá un cuadro que dice deshabilitar el enlace. Marque esa casilla y guarde.

1. Establezca el enlace personalizado en # que no devolverá nada Elemento de la lista

2. Agregue este 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. Edite span CSS para obtener el mismo estilo que <a>, no lo olvide cursor: context-menu;.

Cree el elemento de menú "Enlaces personalizados" y agregue "javascript :;" (sin comillas) para el campo URL. Esta es una mejor manera que usar "#" porque no desplazará su página a la parte superior al hacer clic.

Escribiendo desde el 1/2019, la solución que produce HTML5 adecuado es hacer lo siguiente.

1. Agregue un enlace personalizado con la URL establecida en # y el nombre que desee. Ambos campos son obligatorios.
2. Edite el enlace personalizado recién agregado para que la URL esté vacía.
3. Guarda los cambios.

Esto producirá un navegador de nivel superior, <a>Menu</a>que es la forma correcta de representar un enlace no cliqueable.

Puede deshabilitar los eventos en la <a>etiqueta para todos los elementos del menú de primer nivel usando CSS puro. .main-menuLa clase puede tener otro nombre según el nombre de su menú.

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

Una solución mucho más fácil se puede encontrar en otra pregunta:

Menú de administración: resalte el menú de nivel superior cuando se encuentre en una página de submenú (sin mostrar el submenú)

Busque la respuesta de Askelon. El trabajo es perfecto, sin necesidad de hacer ningún preg_replaces o jquery.