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

Tengo algunas ideas:

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

La forma más sencilla de hacerlo sin un complemento o cualquier cosa 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", selecciona "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. Haz 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. Eliminar el "#" de la URL. Esto, en todos los navegadores, convertirá el enlace a texto sin formato.
9. Haz 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 de URL de enlace de # . Esto es enviar al usuario a un hash vacío en la misma página, así que básicamente no se vincula a ningún lado.

Sin embargo, hay algunos efectos secundarios del uso de hashes vacíos para los enlaces de marcadores 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 de hash vacío anulará cualquier hash existente, enviando al usuario a la parte superior de la página. Esto podría no ser tan preocupante para un menú que está en la parte superior de la página de todos modos, pero es bastante chocante cuando la página salta inesperadamente cuando no lo está esperando, especialmente si es para un menú de pie de página.

La solución es combinar el método de hash vacío con un trozo de código para detectar cuándo se usan los enlaces de hash vacíos en el menú y eliminar por completo el atributo href de ese enlace. Un elemento a sin un atributo href es el método HTML 5 correcto de 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
 */
function wpse_remove_empty_links( $menu ) {
    return str_replace( '<a href="#">', '<a>', $menu );
}

add_filter( 'wp_nav_menu_items', 'wpse_remove_empty_links' );

Usando el enfoque de 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ú de elementos con post_name == "contacto", 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 de menú secundario, etc.

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

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

y reemplazado por:

'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, esta secuencia de comandos comprueba si su enlace primario termina con "#", en este caso agrega un elemento de extensión alrededor del contenido de la etiqueta A, que desactiva el clic.

Espero que 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 agrega al menú. Y finalmente, puede usar esta expresión regular simple 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 anulará 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 );

Esto me funcionó:

He activado Clases CSS en los menús > Opciones de pantalla > Clases de CSS Luego le di al elemento del menú que quería desactivar la clase ".nolink" y agregué este fragmento de código a mi panel CSS personalizado:

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

Aprecio que esto es un hilo antiguo, pero para una manera rápida y sucia de tener un enlace en Wordpress es haciendo 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 obtiene un salto a la parte superior de la página al hacer clic en ella y no requiere ningún complemento / script.

Me doy cuenta de que estoy atrasado en el juego, pero estos son los dos métodos que utilizo:

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

2) Agregue un redireccionamiento 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 La página de productos en blanco, serán redirigidos.

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

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

2. Añade 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 el span CSS para obtener el mismo estilo que <a> , no olvide cursor: context-menu; .

Cree el elemento de menú "Vínculos personalizados" y agregue "javascript :;" (sin comillas) para el campo URL. Esta es una forma mejor que usar "#" porque no pasará de la página a la parte superior cuando se hace clic.

Se puede encontrar una solución mucho más sencilla en otra pregunta:

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

Busca la respuesta de Askelon. El trabajo es perfecto, sin necesidad de realizar ningún cambio o reparación.