Como o item de menu de nível superior não tem link, mas possui submenus vinculados?

22

Estou construindo um menu horizontal e algumas das entradas nesse menu terão menus suspensos (sub-menus) e outros não. Aqueles que têm sub-menus não são realmente páginas. Eles são apenas para serem guias para as listas suspensas.

Por exemplo, digamos que o menu horizontal é como segue:

Página inicial | Sobre nós | Produtos | Direções | Entre em contato com

E o item "products" está destinado a ter 3 páginas vinculadas em uma lista suspensa vertical abaixo, então "produtos" em si não representa realmente uma página, como posso fazer isso no WP?

(Eu uso o WP como um CMS, com páginas internas e internas estáticas. Eu construo meus próprios modelos, estilizo os menus em CSS, depois registro os menus no arquivo functions.php e os chamo nos modelos.) No WP você adicione entradas aos menus através da 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 me permitirá adicioná-lo ao menu.

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

Obrigado por qualquer ajuda!

    
por PVA 05.10.2011 / 04:47
fonte

14 respostas

13

Eu tenho algumas ideias:

  1. Defina o link personalizado para # , que não retornará nada
  2. Adicione uma classe personalizada aos itens e use o jQuery para remover os links.
  3. Use um equivalente PHP para o método jQuery
  4. Use o plug-in Desativar menu principal do pai (ou desmonte-o e escreva o seu)
por BandonRandon 05.10.2011 / 04:59
fonte
17

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

  1. No seu 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, insira 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 no seu menu
  7. Para o item de menu que você acabou de adicionar, clique na seta para baixo à direita do item (ele será "link personalizado" à esquerda do item)
  8. Remova o "#" do URL. Isso - em todos os navegadores - converterá o link em texto simples.
  9. Clique no botão "Salvar menu"
por GavinR 05.10.2011 / 05:02
fonte
4

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

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, por isso pode confundir um usuário quando ele 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 está no topo da página de qualquer maneira, mas é bastante chocante quando a página inesperadamente pula quando você não está esperando, 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 hash vazios são usados no menu e para remover o atributo href desse link por completo. Um elemento a sem um atributo href é o método correto de HTML 5 de 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
 */
function wpse_remove_empty_links( $menu ) {
    return str_replace( '<a href="#">', '<a>', $menu );
}

add_filter( 'wp_nav_menu_items', 'wpse_remove_empty_links' );
    
por shea 27.09.2014 / 13:00
fonte
1

Usando a abordagem PHP, adicionei 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);

Isso substituirá o link por um elemento span do menu de itens com o post_name == "contact", que é o que eu estava procurando. Você pode facilmente mudar isso para verificar o título do menu ou o ID, ou adicionar algum código para verificar se ele possui algum item de menu filho, etc.

    
por Sam Bull 11.11.2017 / 19:39
fonte
0

Eu resolvi assim: no header.php (do seu tema) eu procurei por:

'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, este script verifica se o link pai termina com "#", nesse caso, adiciona um elemento span ao redor do conteúdo da tag A, que desativa o clique.

Espero que ajude: -)

    
por niente0 28.07.2014 / 11:06
fonte
0

Como outros aqui sugeriram, você pode criar um item de menu de link personalizado com o # como seu URL. Em seguida, apague o # assim que ele for adicionado ao menu. E, finalmente, você pode usar essa regex simples para remover a tag real desses links.

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

Isso removerá o clique (e o item não estilizado). Dessa forma, você não precisa usar os links personalizados # em 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 );
    
por Doug Cassidy 18.03.2016 / 13:54
fonte
0

Isso funcionou para mim:

Ative as Classes CSS em Menus > Opções de tela > Classes CSS Então eu dei o elemento de menu que eu queria desativar a classe ".nolink" e adicionei este trecho de código ao meu painel CSS personalizado:

.nolink {
   pointer-events: none;
   cursor: default;
}
    
por RickyBono 13.10.2016 / 23:37
fonte
0

Aprecie que este é um thread antigo, mas para uma maneira rápida e suja de ter um link no Wordpress é fazendo o URL do link como:

#_

Observe o sublinhado após a hashtag. Desta forma, se o seu menu percorrer a página (ou seja, fixo), você não terá um salto para o topo da página ao clicar nele e não requer nenhum plug-in / script.

    
por user1249523 20.11.2017 / 23:41
fonte
0

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

1) Torne o item de menu pai uma duplicata do primeiro subitem e altere 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, tanto "Produtos" quanto "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 dessa opção é permitir que você crie uma página Produtos em branco para criar uma listagem hierárquica no Pages, mas se alguém tentar ir para a página Produtos em branco, eles serão redirecionados.

    
por Barry 21.12.2017 / 17:55
fonte
0

Vá para Appearance e clique nos menus. Nesta seção, vá até 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.

    
por Rob 26.01.2018 / 20:06
fonte
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 o intervalo de CSS para obter o mesmo estilo de <a> , não se esqueça de cursor: context-menu; .

por calmohallag 22.06.2018 / 18:28
fonte
0

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

    
por Tahi Reu 13.08.2018 / 22:22
fonte
-1

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

Menu Admin - Destaque menu de nível superior quando em uma página de submenu (sem mostrar submenu)

Procure a resposta de Askelon. O trabalho é perfeito, sem precisar fazer preg_replaces ou jquery.

    
por Jeff 03.02.2015 / 21:05
fonte

Tags