Como fazer com que o item de menu de nível superior não tenha link, mas tenha submenus vinculados?

Estou construindo um menu horizontal e algumas das entradas desse menu terão menus suspensos (submenus) e outras não. Aqueles que têm submenus não são realmente páginas. Eles só servem como guias para as listas suspensas.

Por exemplo, digamos que o menu horizontal seja o seguinte:

Página inicial Sobre nós | Produtos | Instruções | Contato

E o item li "produtos" deve ter três páginas vinculadas em uma lista suspensa vertical abaixo dele, para que os "produtos" em si não representem realmente uma página, como posso fazer isso no WP?

(Uso o WP como um CMS, com páginas internas e internas estáticas. Crio meus próprios modelos, estilizo os menus em CSS, depois registro os menus no functions.php e os chamo nos modelos.) No WP, você adiciona entradas a os menus pela lista de páginas ou pelos links personalizados. Mas não quero que "produtos" sejam vinculados. Se eu não adicionar um link ao link personalizado, ele não permitirá que eu o adicione ao menu.

Isso é possível através dos menus admin ou preciso abordá-lo de outra maneira?

Obrigado por qualquer ajuda!

Eu tenho algumas ideias:

1. Defina o link personalizado para o #qual não retornará nada
2. Adicione uma classe personalizada aos itens e use o jQuery para remover os links.
3. Use um PHP equivalente ao método jQuery
4. Use o plug-in Desativar link do menu pai (ou desmonte-o e escreva seu próprio)

A maneira mais fácil de fazer isso sem um plug-in ou qualquer coisa é usar a função "Menus" do WordPress. Aqui estão as instruções para o WordPress 4.8:

1. No painel do WordPress, vá para "Aparência -> Menus"
2. Na guia "Editar menus", selecione "Links personalizados"
3. Para o URL, digite "#" (sem aspas)
4. Para o texto do link, digite o texto desejado para o nível superior do seu menu suspenso
5. Clique no botão "Adicionar ao menu"
6. Arraste o item de menu para a posição desejada dentro do seu menu
7. Para o item de menu que você acabou de adicionar, clique na seta para baixo à direita do item (será exibido "link personalizado" à esquerda do item)
8. Remova o "#" do URL. Isso - em todos os navegadores - converterá o link em texto sem formatação.
9. Clique no botão "Salvar menu"

O método mais simples que eu criei foi criar um item de Link personalizado com o valor do URL do link de #. Isso está enviando o usuário para um hash vazio na mesma página, portanto, basicamente, os links não aparecem em lugar nenhum.

No entanto, existem alguns efeitos colaterais do uso de hashes vazios para links de espaço reservado. O link ainda aparecerá e se comportará como um link; portanto, isso poderá confundir um usuário ao clicar no que parece ser um link, mas nada acontece. O outro efeito é que clicar em um link de hash vazio substituirá qualquer hash existente, enviando o usuário para o topo da página. Isso pode não ser tão preocupante para um menu que esteja na parte superior da página, mas é bastante chocante quando a página salta inesperadamente quando você não a espera, especialmente se for para um menu de rodapé.

A solução é combinar o método hash vazio com um trecho de código para detectar quando links de hash vazios são usados ​​no menu e remover completamente o hrefatributo desse link. Um aelemento sem um hrefatributo é o método HTML 5 correto para criar um link de espaço reservado.

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

Isso funcionou para mim:

I activado Classes CSS em Menus> Opções de Tela> Classes CSS Então eu dei o elemento do menu que eu queria para desativar o ".nolink" classe e adicionado este pedaço de código para o meu painel CSS personalizado:

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

Usando a abordagem PHP, adicionei esse código ao 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);

Isso substituirá o link por um elemento de extensão do menu do item com o post_name == "contato", que é o que eu estava procurando. Você pode alterar isso facilmente para verificar o título ou o ID do menu ou adicionar um código para verificar se há algum item do menu filho etc.

Eu resolvi desta maneira: no header.php (do seu tema) eu procurei:

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

e substituído 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>',

Em palavras simples, esse script verifica se o link pai termina com "#"; nesse caso, ele adiciona um elemento de extensão ao redor do conteúdo da tag A, que desativa o clique.

Espero que ajude :-)

Como outras pessoas sugeriram, você pode criar um item de menu de link personalizado com o # como URL. Em seguida, apague o # quando ele for adicionado ao menu. E, finalmente, você pode usar esse regex simples para remover a tag real desses links.

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

Isso removerá o clique (e removerá o estilo do item). Dessa forma, você não precisa usar os links # personalizados no seu 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 );

Perceba que este é um tópico antigo, mas para uma maneira rápida e suja de ter um link no Wordpress, crie o URL do link como:

#_

Observe o sublinhado após a hashtag. Dessa forma, se o seu menu rola a página (ou seja, fixo), você não pula para o topo da página ao clicar nela e não requer nenhum plug-in / script.

Percebo que estou atrasado no jogo, mas estes são os dois métodos que eu uso:

1) Faça do item do menu pai uma duplicata do primeiro subitem e mude seu rótulo. Por exemplo, se o primeiro item em "Produtos" for "Produto 1", use "Produto 1" como o item de menu pai e altere seu rótulo para "Produtos". Dessa forma, "Produtos" e "Produto 1" levarão à página Produto 1.

2) Adicione um redirecionamento para que a página Produtos seja redirecionada para o Produto 1. O benefício desta opção é que ela permite criar uma página Produtos em branco para criar uma lista hierárquica em Páginas, mas se alguém tentar acessar os Produtos em branco página, eles serão redirecionados.

Vá para Aparência e clique nos menus. Nesta seção, acesse a estrutura do menu e clique na seta para baixo para expandir a página e você verá uma caixa que diz desativar o link. Marque essa caixa e salve.

1. Defina o link personalizado como # que não retornará nada Item da lista

2. Adicione 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 CSS de extensão para obter o mesmo estilo de <a>, não se esqueça cursor: context-menu;.

Crie o item de menu "Links personalizados" e adicione "javascript :;" (sem aspas) para o campo URL. É uma maneira melhor do que usar "#" porque ela não rolará sua página para o topo quando clicada.

Por escrito, a partir de 1/2019, a solução que produz HTML5 adequado é fazer o seguinte.

1. Adicione um link personalizado com o URL definido como # e o nome que você desejar. Ambos os campos são obrigatórios.
2. Edite o link personalizado recém-adicionado para que o URL fique vazio.
3. Salve as alterações.

Isso produzirá uma navegação de nível superior, <a>Menu</a>que é a maneira correta de representar um link não clicável.

Você pode desativar os eventos na <a>tag para todos os itens de menu de primeiro nível usando css puro. .main-menuA classe pode ter outro nome, de acordo com a nomeação do menu.

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

Uma solução muito mais fácil pode ser encontrada em outra pergunta:

Menu Admin - destaque o menu de nível superior quando estiver em uma página de submenu (sem exibir o submenu)

Procure a resposta de Askelon. Funciona perfeitamente, sem a necessidade de fazer nenhum preg_replaces ou jquery.