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

25

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!

PVA
fonte
11
heres a solução funciona muito bem ir dar uma olhada wordpress.org/support/topic/no-page-menu-item
Você pode fazer isso usando js. tente este artigo. kvcodes.com/2014/07/…
Kvvaradha
Na caixa URL, deixe em branco.
AMY WANG
Ninguém mencionou a classe WP_NAV_MENU_WALKER; você pode escrever seu próprio andador que cospe o que deseja.
user3135691

Respostas:

12

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)
Brooke.
fonte
Obrigado pelas dicas e links! Como Gavin sugeriu, usar um # para um link personalizado "funciona"; as outras opções podem funcionar melhor, embora não sejam tão fáceis. Bem, o plug-in provavelmente é fácil, mas eu odeio usar plug-ins se eu puder realizar a mesma coisa mais diretamente. Vou ter que decidir a melhor abordagem. Obrigado novamente!
PVA
Se você pretende usá-lo em dispositivos táteis, ter cuidado com o uso de vazio href=""porque os usuários de dispositivos mais tátil não será capaz de ver menu suspenso, sem usar JS
Simon
Links quebram. Você pode trabalhar algumas dessas idéias em sua resposta
shea
Além disso, os nºs 2 e 3 referem-se a wp_list_pages(), nãowp_nav_menu()
shea
25

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"
GavinR
fonte
Obrigado por essa dica. É ez, embora não seja perfeito, pois os marcadores ainda parecem "links" quando você passa o mouse, mas eles não vão a lugar algum. Para que ele possa funcionar em uma pitada.
PVA
11
Você leu todo o comentário? Após a adição do link, clique na seta suspensa ao lado do nome do link e remova o "#" da caixa de texto do URL. Isso, em todos os navegadores, fará com que o link não seja clicável.
GavinR
11
Sim, obrigado, eu li o comentário inteiro. Voltei e tentei novamente e percebi o meu problema. Quando deixo o #, a palavra aparece na barra de navegação, mas como um "link morto". Quando removi o #, a palavra não apareceu na barra de navegação, a menos que eu passasse o mouse sobre ela e ela aparecesse em um estado de foco. Então, eu suponho que isso significa que eu tenho que aplicar CSS à palavra para que ela apareça sem estar vinculada. Eu não sei por que o Estado pairar mostra-se ...
PVA
Isso ainda está em 4.9.5, no entanto, não tenho certeza, pois 'parece' como uma vantagem de hack tacking de um bug. Caso contrário, isso poupará muita dor de cabeça às pessoas ... É como o fato de o Wordpress considerar "1 2 3 4 5 6" uma senha forte ... ainda.
brooklynsweb
Para sua informação, se você executar a Etapa 8 (por qualquer motivo), seu cursor não será um ponteiro quando você passar o mouse sobre o link personalizado. Nesse caso, você pode estilizá-lo com o ponteiro: cursor.
MarsAndBack
7

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 );
} );
shea
fonte
2

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;
}
RickyBono
fonte
Isso mata o menu suspenso também.
user385917
Usar #como destino do link e aplicar uma classe CSS personalizada para fins de estilo é a solução menos invasiva na minha opinião. No entanto, a configuração pointer-events: nonenão faz muito sentido para mim, pois interromperá os submenus. Você poderia explicar por que define esse atributo?
user1438038 4/07
1

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.

Sam Bull
fonte
0

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

niente0
fonte
Oi, eu sei que essa é uma resposta antiga, mas para referência futura, não iria apenas alterar o arquivo de cabeçalho do seu tema, porque quando ele for atualizado a seguir, todo o seu código será substituído. A melhor solução para isso é criar um tema filho com seu código personalizado.
Scott
0

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);
deweydb
fonte
0

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 );
Doug Cassidy
fonte
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.

user1249523
fonte
0

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.

Barry
fonte
0

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.

Roubar
fonte
Essa funcionalidade não é fornecida pelo núcleo. Talvez um tema ou plugin o esteja adicionando à sua configuração?
Dave Romsey
Também já vi isso antes, gostaria de saber qual plugin ou tema fez isso.
DavGarcia 15/01
0
  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;.

calmohallag
fonte
0

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.

Tahi Reu
fonte
0

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.

DavGarcia
fonte
0

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;
}
Karl Adler
fonte