Na WPBeginner, ajudamos inúmeros leitores a personalizar seus sites WordPress para melhorar a experiência do usuário, impulsionar o branding e gerar conversões. E vimos que, quando feito corretamente, um menu de navegação exclusivo pode ajudar a aumentar o engajamento e manter as pessoas em seu site por mais tempo.
O problema é que todos os temas do WordPress têm locais definidos onde você pode exibir um menu de navegação, então mudar isso pode ser complicado. Isso é especialmente verdade se você for um iniciante, pois modificar os arquivos do tema é um processo delicado.
Quando você está usando um tema de blocos, pode fazer isso com o Editor de Site Completo. Mas, em nossa experiência, existem opções melhores que funcionarão para todos os tipos de temas.
Por exemplo, se você deseja personalizações avançadas, pode usar um poderoso construtor de páginas como o SeedProd. Ou, se você está procurando uma maneira simples de usar código personalizado, o WPCode é, de longe, a melhor escolha.
Neste artigo, mostraremos como adicionar um menu de navegação personalizado a qualquer área do seu tema WordPress. Abordaremos 3 opções diferentes para que você possa escolher o tutorial certo para suas necessidades.
Por que adicionar menus de navegação personalizados em temas WordPress?
Um menu de navegação é uma lista de links que apontam para áreas importantes do seu site. Eles facilitam para os visitantes encontrarem conteúdo interessante, o que pode aumentar as visualizações de página e reduzir a taxa de rejeição no WordPress.
A localização exata do seu menu variará com base no seu tema WordPress. A maioria dos temas tem várias opções, para que você possa criar menus diferentes e exibi-los em locais diferentes.
Para ver onde você pode exibir menus no seu tema WordPress atual, basta ir para Aparência » Menus e, em seguida, dar uma olhada na seção 'Local de exibição'.
A imagem a seguir mostra os locais suportados pelo tema WordPress Astra.
Às vezes, você pode querer exibir um menu em uma área que não está listada como um 'Local de exibição' no seu tema.
Com isso em mente, vamos dar uma olhada em como adicionar um menu de navegação personalizado a qualquer área do seu tema WordPress. Simplesmente use os links rápidos abaixo para pular para o método de sua preferência:
- Método 1: Usando o Editor de Site Completo (Apenas Temas Baseados em Blocos)
- Método 2: Usando um Plugin de Page Builder (Funciona Com Todos os Temas)
- Method 3: Create a Custom Navigation Menu in WordPress Using Code (Advanced)
Método 1: Usando o Editor de Site Completo (Apenas Temas Baseados em Blocos)
Se você estiver usando um tema de blocos como o ThemeIsle Hestia Pro, você poderá adicionar um menu de navegação personalizado usando a Edição de Site Completo (FSE) e o editor de blocos.
Para mais detalhes, você pode ver nosso artigo sobre os melhores temas de edição de site completo do WordPress.
Este método não funciona com todos os temas e não permite personalizar todas as partes do menu. Se você deseja adicionar um menu totalmente personalizado a qualquer tema do WordPress, recomendamos o uso de um plugin de page builder em vez disso.
Se você estiver usando um tema baseado em blocos, vá para Aparência » Editor.
Por padrão, o editor de site completo exibe o modelo inicial do seu tema, mas você pode adicionar um menu de navegação a qualquer área.
Para ver todas as opções disponíveis, basta selecionar 'Modelos', 'Padrões' ou 'Páginas'.
Agora você pode clicar no modelo, parte do modelo ou página onde deseja adicionar um menu de navegação personalizado.
O WordPress agora mostrará uma prévia do design. Para editar este modelo, clique no pequeno ícone de lápis.
O próximo passo é adicionar um bloco de Navegação à área onde você deseja exibir seu menu.
No canto superior esquerdo, clique no botão azul ‘+’.
Agora, digite ‘Navegação’ na barra de pesquisa.
Quando o bloco ‘Navegação’ aparecer, basta arrastá-lo e soltá-lo em seu layout.
Em seguida, clique para selecionar o bloco de Navegação.
Se você já criou o menu que deseja exibir, clique para selecionar o bloco de Navegação. No menu à direita, clique no ícone de três pontos ao lado de ‘Menu’.
Você pode então escolher um menu no menu suspenso.
Outra opção é criar um menu dentro do editor de site completo adicionando páginas, posts, links personalizados e muito mais. Para adicionar itens ao novo menu, basta clicar no ícone ‘+’.
Isso abre um pop-up onde você adiciona qualquer post ou página e decide se esses links devem abrir em uma nova aba.
Você também pode adicionar uma barra de pesquisa ao menu do WordPress, adicionar ícones de mídia social e muito mais. No pop-up, basta digitar o bloco que você deseja adicionar ao menu e selecionar a opção correta quando ela aparecer.
Você pode então configurar este bloco usando as configurações na mini barra de ferramentas e no menu à direita. Simplesmente repita essas etapas para adicionar mais itens ao menu.
Quando estiver satisfeito com a aparência do menu, basta clicar no botão ‘Salvar’.
Seu site agora estará usando o novo modelo, e os visitantes poderão interagir com seu menu de navegação personalizado.
Método 2: Usando um Plugin de Page Builder (Funciona Com Todos os Temas)
O editor de site completo permite que você adicione menus a temas baseados em blocos. No entanto, se você quiser adicionar um menu avançado e totalmente personalizável a qualquer tema do WordPress, você precisará de um plugin de construtor de páginas.
SeedProd é o melhor plugin de construtor de páginas WordPress do mercado que permite personalizar todas as partes do seu menu de navegação.
Temos vasta experiência usando esta ferramenta para construir menus de navegação personalizados, landing pages e muito mais. Para mais detalhes, confira nossa análise completa do SeedProd.
Quando se trata de páginas, o SeedProd vem com mais de 350 templates projetados profissionalmente que você pode usar como ponto de partida. Após escolher um template, você pode adicionar um menu de navegação personalizado ao seu site usando o bloco Nav Menu pronto do SeedProd.
Primeiro, você precisa instalar e ativar o plugin SeedProd. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin WordPress.
Observação: Existe também uma versão gratuita do SeedProd que permite criar menus de navegação personalizados sem escrever código. No entanto, neste guia, usaremos o SeedProd Pro, pois ele possui o bloco Nav Menu, além de templates extras e recursos avançados.
Após ativar o plugin, o SeedProd solicitará sua chave de licença.
Você pode encontrar esta informação em sua conta no site da SeedProd. Após inserir a chave, clique no botão ‘Verificar Chave’.
Assim que terminar, vá para SeedProd » Landing Pages e clique no botão ‘Adicionar Nova Landing Page’.
Agora você pode escolher um modelo para sua página personalizada.
Para ajudar você a encontrar o design certo, todos os modelos da SeedProd são organizados em diferentes tipos de campanha, como em breve e campanhas de captação de leads. Você pode até usar os modelos da SeedProd para melhorar sua página 404.
Para dar uma olhada mais de perto em qualquer design, basta passar o mouse sobre esse modelo e clicar no ícone da lupa.
Quando encontrar um design que deseja usar, clique em ‘Escolher Este Modelo’.
Estamos usando o modelo ‘Página de Vendas Black Friday’ em todas as nossas imagens, mas você pode usar qualquer modelo que desejar.
Após escolher um modelo, digite um nome para essa página personalizada. O SeedProd criará automaticamente um URL com base no título da página, mas você pode alterar esse URL para o que quiser.
Por exemplo, você pode adicionar palavras-chave relevantes para ajudar os mecanismos de busca a entender do que se trata a página. Isso pode melhorar seu SEO para WordPress e ajudar o mecanismo de busca a mostrar a página para pessoas que procuram conteúdo como o seu.
Após inserir essas informações, clique no botão ‘Salvar e Começar a Editar a Página’.
A maioria dos modelos já contém alguns blocos, que são os componentes principais de todos os layouts de página do SeedProd.
Para personalizar um bloco, basta clicar para selecioná-lo no editor de páginas.
A barra de ferramentas do lado esquerdo mostrará todas as configurações desse bloco. Por exemplo, na imagem abaixo, estamos alterando o texto dentro de um bloco de ‘Título’.
Você pode formatar o texto, alterar seu alinhamento, adicionar links e muito mais usando as configurações no menu do lado esquerdo.
Se você selecionar a aba ‘Avançado’, terá acesso a ainda mais configurações. Por exemplo, você pode fazer o bloco se destacar realmente adicionando sombras de caixa e animações CSS.
Para adicionar novos blocos ao seu design, basta encontrar qualquer bloco no menu do lado esquerdo e arrastá-lo para a página. Se você quiser excluir um bloco, clique para selecioná-lo e use o ícone da lixeira.
Como queremos criar um menu de navegação personalizado, arraste um bloco de ‘Menu de Navegação’ para a página.
Isso cria um menu de navegação com um único item padrão ‘Sobre’.
Agora você pode criar um novo menu dentro do editor do SeedProd ou escolher um menu que você já criou no painel do WordPress.
Para mostrar um menu que você criou anteriormente, clique no botão ‘WordPress Menu’. Agora você pode abrir o menu suspenso ‘Menus’ e escolher qualquer opção da lista.
Depois disso, você pode alterar o tamanho da fonte, o alinhamento do texto e mais usando as configurações no menu do lado esquerdo.
Se você quiser criar um novo menu dentro do SeedProd, selecione o botão ‘Simple’.
Em seguida, clique para expandir o item ‘About’ que o SeedProd cria por padrão.
Isso abre alguns controles onde você pode alterar o texto e adicionar a URL para a qual o item do menu será vinculado.
Por padrão, o link será ‘dofollow’ e abrirá na mesma janela do navegador. Você pode alterar essas configurações usando as caixas de seleção na seção ‘URL Link’.
Na imagem a seguir, estamos criando um link ‘nofollow’ que abrirá em uma nova janela. Para mais informações sobre este tópico, por favor, consulte nosso guia para iniciantes sobre links nofollow.
Para adicionar mais itens ao menu, basta clicar no botão ‘Add New Item’.
Você pode então personalizar cada um desses itens seguindo o mesmo processo descrito acima.
O menu do lado esquerdo também tem configurações que alteram o tamanho da fonte e o alinhamento do texto.
Você pode até criar um divisor, que aparecerá entre cada item do menu.
Depois disso, vá em frente e mude para a aba ‘Advanced’. Aqui, você pode alterar as cores, espaçamento, tipografia e outras opções avançadas do menu.
À medida que você faz alterações, a prévia ao vivo será atualizada automaticamente, para que você possa experimentar diferentes configurações e ver o que fica bom no seu design.
Por padrão, o SeedProd exibe o mesmo menu em dispositivos móveis e de desktop. No entanto, dispositivos móveis geralmente têm telas muito menores em comparação com computadores desktop.
Com isso em mente, você pode querer criar um menu separado para exibir em dispositivos móveis. Por exemplo, você pode usar um layout vertical para que os usuários de dispositivos móveis não precisem rolar para os lados. Você também pode querer exibir menos links em smartphones e tablets.
Para criar um menu pronto para dispositivos móveis, basta projetar o menu seguindo o mesmo processo descrito acima. Em seguida, selecione a aba 'Avançado' e clique para expandir a seção 'Visibilidade do Dispositivo'.
Agora você pode ativar o controle deslizante 'Ocultar no Desktop'.
Agora, o SeedProd exibirá este menu apenas para usuários de dispositivos móveis.
Quando você estiver satisfeito com a aparência do seu menu personalizado, é hora de publicá-lo.
Simplesmente clique na seta suspensa ao lado de ‘Salvar’ e, em seguida, selecione ‘Publicar’.
Agora, se você visitar seu blog WordPress, verá o menu de navegação personalizado em ação.
Método 3: Crie um Menu de Navegação Personalizado no WordPress Usando Código (Avançado)
Se você não quiser configurar um plugin de construtor de páginas, poderá adicionar um menu de navegação personalizado usando código. Você frequentemente encontrará guias com instruções sobre como adicionar trechos de código personalizados ao arquivo functions.php do seu tema.
No entanto, não recomendamos este método, pois um pequeno erro no seu código pode causar uma série de erros comuns do WordPress ou até mesmo quebrar seu site completamente. Você também perderá o código personalizado ao atualizar seu tema do WordPress.
É por isso que recomendamos o uso do WPCode. É a maneira mais fácil e segura de adicionar código personalizado no WordPress sem ter que editar nenhum arquivo principal do WordPress.
Observação: Existem muitas maneiras diferentes de usar o WPCode para personalizar seu site WordPress com segurança. Ele possui uma biblioteca de trechos de código integrada e suporta todas as linguagens mais importantes do WordPress, incluindo PHP, JavaScript, CSS e HTML. Para mais informações sobre o plugin, confira nossa análise completa do WPCode.
A primeira coisa que você precisa fazer é instalar e ativar o plugin gratuito WPCode. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.
Após a ativação, vá para Snippets de Código » Adicionar Snippet no seu painel do WordPress.
Aqui, você verá todos os snippets prontos que pode adicionar ao seu site. Estes incluem um snippet que permite desativar completamente os comentários, fazer upload de tipos de arquivo que o WordPress normalmente não suporta, desativar páginas de anexos, e muito mais.
Para criar seu próprio snippet, passe o mouse sobre ‘Adicionar Seu Código Personalizado (Novo Snippet)’ e clique no botão ‘+ Adicionar Snippet Personalizado’.
Em seguida, você precisa escolher um tipo de código na lista de opções que aparecem na tela. Para este tutorial, selecione ‘Snippet PHP’ como o tipo de código.
Você será direcionado para a página Criar Snippet Personalizado.
Para começar, insira um título para o snippet de código personalizado. Pode ser qualquer coisa que ajude você a identificar o snippet no seu painel do WordPress.
Depois de fazer isso, simplesmente cole o seguinte snippet no editor de código:
function wpb_custom_new_menu() {
register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );
Isso adicionará um novo local de menu ao seu tema chamado ‘Meu Menu Personalizado’. Para usar um nome diferente, basta ajustar o snippet de código.
Se você quiser adicionar mais de um menu de navegação personalizado ao seu tema, basta adicionar uma linha extra ao trecho de código.
Por exemplo, aqui estamos adicionando dois novos locais de menu ao nosso tema, chamados ‘Meu Menu Personalizado’ e ‘Menu Extra:’
function wpb_custom_new_menu() {
register_nav_menus(
array(
'my-custom-menu' => __( 'My Custom Menu' ),
'extra-menu' => __( 'Extra Menu' )
)
);
}
add_action( 'init', 'wpb_custom_new_menu' );
Depois disso, role até as opções de ‘Inserção’. Se ainda não estiver selecionado, escolha o método ‘Inserção Automática’ para que o WPCode adicione o trecho em todo o seu site.
Em seguida, abra o menu suspenso ‘Localização’ e clique em ‘Executar em Todos os Lugares’.
Agora, você está pronto para rolar até o topo da tela e clicar no alternador ‘Inativo’ para que ele mude para ‘Ativo’.
Finalmente, prossiga e clique em ‘Salvar’ para tornar este trecho ativo.
Depois disso, vá para Aparência » Menus e olhe na área ‘Local de exibição’.
Você deverá ver agora uma nova opção ‘Meu Menu Personalizado’.
Agora você pode prosseguir e adicionar alguns itens de menu ao novo local. Para mais informações, consulte nosso guia passo a passo sobre como adicionar menus de navegação para iniciantes.
Quando estiver satisfeito com seu menu, o próximo passo é adicioná-lo ao seu tema do WordPress.
A maioria dos sites exibe o menu de navegação diretamente abaixo da seção do cabeçalho. Isso significa que o menu é uma das primeiras coisas que os visitantes veem, juntamente com o logotipo do site ou título.
Você pode adicionar o menu de navegação personalizado a qualquer local adicionando algum código ao arquivo de modelo do seu tema.
No painel do WordPress, vá para Aparência » Editor de Arquivos do Tema.
No menu à direita, escolha o modelo onde você deseja adicionar o menu. Por exemplo, se você quiser mostrar o menu de navegação personalizado no cabeçalho do seu site, você normalmente selecionará o arquivo header.php.
Para obter ajuda para encontrar o arquivo de modelo correto, consulte nosso guia sobre como encontrar quais arquivos editar no seu tema WordPress.
Após selecionar o arquivo, você precisará adicionar uma função wp_nav_menu e especificar o nome do seu menu personalizado.
Por exemplo, no seguinte trecho de código, estamos adicionando 'Meu Menu Personalizado' ao cabeçalho do tema:
wp_nav_menu( array( 'theme_location'=>'my-custom-menu', 'container_class'=>'custom-menu-class' ) );
Após adicionar o código, clique no botão 'Atualizar Arquivo' para salvar suas alterações.
Agora, se você visitar seu site, verá o menu personalizado em ação.
Por padrão, seu menu aparecerá como uma lista com marcadores simples.
Você pode estilizar o menu de navegação personalizado para combinar melhor com o seu tema WordPress ou com a identidade visual da sua empresa adicionando código CSS personalizado ao seu site.
Para fazer isso, vá para Aparência » Personalizar.
No personalizador de temas do WordPress, clique em ‘CSS Adicional’.
Isso abre um pequeno editor de código onde você pode digitar algum CSS.
Agora você pode estilizar seu menu usando a classe CSS que você adicionou ao seu template de tema. Em nosso exemplo, esta é .custom_menu_class.
No código a seguir, estamos adicionando margens e preenchimento, definindo a cor do texto para preto e organizando os itens do menu em um layout horizontal:
div.custom-menu-class ul {
margin:20px 0px 20px 0px;
list-style-type: none;
list-style: none;
list-style-image: none;
text-align:right;
display:inline-block;
}
div.custom-menu-class li {
padding: 0px 20px 0px 0px;
display: inline-block;
}
div.custom-menu-class a {
color:#000;
}
O personalizador do WordPress será atualizado automaticamente.
Ele mostrará como o menu ficará com o novo estilo.
Se você estiver satisfeito com a aparência do menu, clique em ‘Publicar’ para tornar suas alterações visíveis.
Para mais informações, consulte nosso guia sobre como estilizar menus de navegação do WordPress.
Guias de Especialistas: Faça Mais Com Menus de Navegação do WordPress
Com o WordPress, você pode criar todos os tipos de menus úteis e envolventes. Com isso em mente, aqui estão alguns guias de especialistas para ajudá-lo a aproveitar ainda mais seus menus de navegação:
- Como Adicionar Ícones de Imagem com Menus de Navegação no WordPress
- Como Adicionar Lógica Condicional a Menus no WordPress (Passo a Passo)
- Como Adicionar Descrições de Menu em Seus Temas do WordPress
- Como Adicionar um Menu Responsivo em Tela Cheia no WordPress
- Como Adicionar um Mega Menu no Seu Site WordPress (Passo a Passo)
Esperamos que este guia definitivo tenha ajudado você a aprender como adicionar um menu de navegação personalizado no WordPress. Você também pode querer ver nossos guias sobre como adicionar um botão no menu do cabeçalho do seu WordPress ou como destacar um item de menu no WordPress.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Imran
Eu tenho um cabeçalho personalizado construído para o WordPress quando tinha itens de menu codificados, como posso usar o menu do WordPress no cabeçalho em vez do menu codificado?
cheryl
Sou relativamente novo no WordPress, no entanto, gostaria de editar um menu personalizado que criamos, pois algo parece errado dentro do menu.
Como faço isso?
Manu
Excellent tutorial! This was exactly what I needed right now. Within 5 minutes I was able to set up a footer menu in a theme that by default didn’t have any. Thank you so much
Munna Hossain
Artigo útil. Sou um usuário do WordPress e estas dicas me ajudarão a adicionar menus de navegação personalizados. Obrigado por compartilhar.
Daniel Keith
Olá,
Ótimo tutorial. Como posso aplicar CSS a este menu personalizado?
Embora esta seja uma ótima maneira de adicionar vários menus, sem CSS adequado o site fica estranho.
Zaheer Abbas
Estou criando meu tema do WordPress, mas o menu e o widget não estão aparecendo no painel de administração???
São recursos integrados do WordPress ou tenho que criar menus e widgets com código, por favor, me guie.
Tabitha
Como posso transformar meu menu suspenso em colunas? Meu menu suspenso atual é muito longo.
Aakash Salunke
Sou um usuário um pouco avançado. Meu tema suporta apenas um menu. Mas quero adicionar mais um menu. Eu o criei, mas como posso adicioná-lo?
WPBeginner Support
Primeiro, você precisará registrar a localização do menu, depois precisará editar os arquivos do seu tema para exibir seu menu de navegação.
Admin
bobit
funcionou, obrigado pelo ótimo post
Aijaz Ansari
Incrível, tutorial, realmente ajuda um novato como eu.
Obrigado
Victoria
Obrigado pelo artigo!!! Criei meu novo menu.
Tenho um problema, no entanto.
Meu site tem uma largura fixa e, quando redimensiono a janela, tudo fica no lugar, exceto o novo menu. Min-width não é uma opção porque não é exatamente o comportamento que eu quero.
Como posso fazer com que ele se comporte da mesma forma que o restante do conteúdo da página?
Obrigado!
Joey
OBRIGADO! Estava procurando por isso há muito tempo, nunca pensei que fosse tão simples.
Cory
Eu tenho um tema antigo e maluco que não suportava menus WP 3.0+. Este tutorial foi tão fácil. Levei 3 minutos para atualizá-lo um pouco. muito obrigado.
Jacques Goudreau
Obrigado pela dica! Ótimo tutorial!
Emma
Onde você vai para fazer essas alterações? Não consigo ver nenhuma dessas opções nas abas Tema ou Opções do Tema.
I use the Buenos Theme, but can’t find on the Buenos theme page does it support these changes? I want to put in an Archive menu with a list of all the recipes on my blog… should be easy but proving impossible
Equipe Editorial
A maioria dos temas suporta isso. Veja Aparência > Menus. Este artigo é para designers de temas que desejam adicionar este recurso em seus temas para permitir que os usuários adicionem menus pelo backend.
Admin
Zoe
Tenho tentado adicionar uma classe personalizada a um URL personalizado singular (para mudar a cor de apenas um URL) na seção Menus de Navegação Superior, mas ele apenas adiciona minha classe como uma extensão da classe existente no código-fonte de saída e nada acontece.
Aqui está meu código CSS e o código-fonte que é gerado no meu site:
.myCustomClass { color: #FFFF00; }
Um link colorido único
Alguma sugestão de como fazer isso funcionar?
Equipe Editorial
Sim, adicione como color: #ffff00 !important; nessa classe. Isso deve resolver.
Admin
Jeremy Johnson
Consegui implementar essas modificações e o menu personalizado funciona. No entanto, o CSS do meu tema escolhido não parece suportar submenus. O item do submenu está sempre visível, passar o mouse sobre o item pai não faz nada, e o item do menu pai é tão largo quanto o item filho mais largo, o que empurra os outros itens do menu para a direita mais do que deveriam. Alguma sugestão para fazer o submenu agir dinamicamente? Sou bem novo em CSS.
Equipe Editorial
O melhor lugar para começar seria pegar o tema padrão Twenty Eleven. Use o CSS de navegação de lá e comece a modificar.
Admin
Cedric
Ainda procurando uma solução para isso.
shaunling
Isso é simplesmente ótimo!
digitfox
Sim! É um bom tutorial para mim! Sou muito novo no WP! Obrigado
PauloNeves
Preciso de ajuda.
Sigo todos os passos, mas no Painel de Aparência o menu de opções não está habilitado.
Quando seleciono outro tema, funciona.
Como habilito o menu de opções?
Obrigado.
Paulo Neves
wpbeginner
@PauloNeves Você precisa adicionar esta linha ao arquivo functions.php do seu tema: add_theme_support( ‘menus’ );
Brad
Obrigado por isso! Funcionou maravilhosamente para mim e ajudou muito meu cliente! – aptdesign
eeebasic
Isso me ajuda muito, embora a versão 3.3 do WordPress tenha sido lançada há poucos dias.
citydan
Segui as instruções deste post e do post aqui (https://www.wpbeginner.com/wp-tutorials/adding-a-second-menu-to-the-twenty-ten-theme/), e descobri como fazer meu CSS para que o menu apareça corretamente, mas os itens filhos (itens de submenu) não estão aparecendo. Eu os configurei corretamente no editor de menus, mas no site eles não aparecem. Eles não estão ocultos por CSS porque não estão no código fonte da página.
Alguma ideia de por que meus subitens de menu não estão aparecendo?
GourabMalla
Olá,
Adicionei o menu personalizado na navegação superior, mas quero saber como posso ativar a “Classe da Página Atual”.
Estou usando o WordPress 3.2
Obrigado
Gourab
DanFlynnDesign
Obrigado! Adorei como tudo isso é dinâmico para que o cliente possa editar se necessário, além de poder indicar qual é a página atual e aplicar um efeito de hover! EXATAMENTE o que eu estava procurando!
asharperrazor
Já tentei isso muitas vezes. Tenho um tema antigo do WordPress. Tão antigo que nem tenho certeza para qual versão do WordPress ele foi escrito. De qualquer forma, consigo fazer a parte das funções funcionar. Consigo salvar o menu correto. Consigo colocar o código em outras partes do meu site, digamos no rodapé, embora ele seja exibido como uma lista hierárquica e não horizontalmente.
Não será exibido no menu de navegação superior. Preciso de um novo tema ou é possível editar meu tema atual para permitir a nova função de menu?
Agradeço desde já. O site é http://www.asharperrazor.com
JamesGeorge
Implementei isso SEM problemas - obrigado! Peguei o código do "menu de navegação" e o coloquei na div onde o tema do meu cliente estava chamando a lista de páginas. Basicamente, o substituí pelo seu código acima e o carreguei, e o CSS o manteve no mesmo estilo. Ficou ótimo e funciona perfeitamente. INCRÍVEL!
ÁlvaroBenavides
Preciso muito de ajuda para implementar o CSS das classes, então, por favor, notifique quando terminar!
Bec
Ótimo post – obrigado!
Implementei como acima e os itens do meu menu estão aparecendo no site, o único problema é que cada página está vazia?!
Alguma ideia?
Equipe Editorial
Parece um erro de PHP. Por favor, valide seu PHP para garantir que não há erros.
Admin
Joseph McCullough
Rápido e direto – do jeito que eu gosto dos meus snippets de código. Muito obrigado.
Paul
Eu já criei menus de navegação personalizados algumas vezes. O estranho é que, depois de criá-los e salvá-los, eles aparecem por um tempo e, em seguida, a barra de navegação retorna a apenas 2 abas, como se as configurações fossem sobrescritas automaticamente. Em sites com o mesmo template onde eu nunca criei uma barra personalizada, eles são exibidos corretamente.
Alguma ideia?
Equipe Editorial
Não, nenhuma ideia do porquê isso está acontecendo.
Admin
Narendra Choudhary
Você pode definir classes personalizadas para cada navegação e, em seguida, adicionar uma imagem no fundo. Você pode até usar a propriedade CSS (text-indent) para se livrar do texto do Menu, se desejar.
Responder
Ram
Tenho uma pergunta sobre o menu de navegação,
existe alguma maneira de adicionar a imagem à lista de menus de navegação?
Obrigado,
Ram
Equipe Editorial
Você pode definir classes personalizadas para cada navegação e, em seguida, adicionar uma imagem ao fundo. Você pode até usar a propriedade CSS (text-indent) para remover o texto do Menu, se desejar.
Admin
Ram
thanks for your response but i need more clearly that custom menu image for the wordpress.
Im using wp_list_categories(‘exclude=4,7&title_li=’); to show the navigational menu so is it any possibility to add the different images to the different menu button. Im trying the CSS but it never works for me
Obrigado,
Ram
Equipe Editorial
Sim, é possível adicionar imagens diferentes com o menu personalizado. O que você está usando não é o menu sobre o qual estamos falando neste artigo.
Julie @ Inspired to Write
Você pode adicionar código para torná-lo mais apresentável (fontes, botões, tamanho, etc)? Se sim, você pode me dar um exemplo e onde colocar esse código? Obrigado!
Equipe Editorial
Esta é uma pergunta relacionada a CSS. Você terá que adicionar o tamanho da fonte nas classes apropriadas no arquivo CSS. Faremos uma postagem sobre os estilos CSS em breve.
Admin
Chris
Pergunta sobre o gerenciamento do menu.
Tenho um menu que está alinhado à direita, então os itens do menu aparecem em ordem inversa.
Existe uma maneira de classificar o menu_order em REVERSO?
então: sort_column’ => ‘menu_order’ teria algo adicionado para reverter a ordem.
Obrigado!
Equipe Editorial
Só porque eles estão alinhados à direita, não deveria fazer com que aparecessem em ordem inversa. Para corrigir isso, você precisa mudar seu CSS em vez de reverter o hook. Crie uma div container que esteja alinhada à direita e, em seguida, faça com que as tags de lista flutuem para a esquerda.
Admin
Julie
Segui as instruções, mas depois de criar os menus e adicionar as categorias apropriadas para usar, não consigo vê-los na minha barra de navegação – alguma ideia do que fiz de errado?
Equipe Editorial
Você colou os códigos no seu header.php ou onde quer que esse menu deva aparecer?
Admin
dan
Você também precisa adicionar isso ao seu arquivo functions.php para poder usar os menus
register_nav_menus( array(
‘primary’ => __( ‘Navegação Principal’, ‘twentyten’ ),
) );
Equipe Editorial
Certamente algo que você deve ter ao lançar temas gratuitos, mas para temas personalizados, tudo depende do que você precisa. Às vezes, você não precisa registrar locais.
Admin
errr
eu não estou entendendo nada… você poderia ser mais claro onde eu colocaria este código (add_theme_support( ‘menus’ );) no arquivo functions.php?
estou totalmente perdido
Equipe Editorial
Em algum lugar dentro das tags php. Se você não tem experiência com PHP, recomendamos que contrate um profissional.
Admin
BanyanTree
Se você vai escrever artigos para iniciantes, segue que você deve responder a perguntas simples. Caso contrário, apenas pague por anúncios para impulsionar seu negócio e salve a pretensão.
wpbeginner
@BanyanTree Adicionar códigos ao arquivo functions.php não é tão difícil. Você cola dentro das tags php. Escrevemos artigos como este: https://www.wpbeginner.com/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/ Mas é simplesmente impossível linkar para esse artigo de todos os nossos artigos. Quando alguém pergunta como mudar o fundo em CSS e você diz que adiciona background: #000 ou outro hexcode na propriedade CSS, isso já é ajuda suficiente. Agora, se eles perguntam onde no arquivo CSS eu colo isso, então isso é algo que você precisa saber de antemão. Este site não é um site de PHP para Leigos ou CSS para Leigos. Fazemos o nosso melhor para ajudar o máximo de pessoas possível GRATUITAMENTE.
BanyanTree
@wpbeginner@BanyanTree Você não precisa linkar para artigos, ninguém pediu isso. Três palavras respondem à pergunta dele; “no final”, que é mais fácil de digitar do que um comentário sarcástico. Lembre-se, você nomeou seu site; “wpbeginner”, e se esse é o público que você procura, atenda de acordo.
wpbeginner
@f1mktsol Sim, e o site cresceu além do público que inicialmente tínhamos. Este site evoluiu. É por isso que temos categorias… A palavra “iniciante” está sendo usada em uma escala relativa.
Temos artigos para Iniciantes Absolutos que são apenas usuários em nossa Categoria Guia para Iniciantes… Também temos artigos em nossa categoria de plugins do WordPress que são voltados para esse público. Se você estiver em nossa categoria de Temas WP, então os artigos são escritos para desenvolvedores de temas iniciantes. Eles são iniciantes na área de desenvolvimento. O mesmo vale para os tutoriais.
Espero que isso explique.
f1mktsol
@wpbeginner Se você superou seu nome, deveria mudá-lo para se adequar ao público que parece preferir. Considere consultar um profissional.
Skubeedoo
Eu adicionei add_theme_support( ‘menus’ );
e não vi nenhuma opção no painel de administração [onde devo procurar?] Estou usando o tema intrepidity. Sou um novato, então pode estar bem na minha frente e eu não sei a diferença. Tenho um site que tem um WP dentro dele e quero poder navegar para fora do WP e de volta para o meu URL principal. Tudo o que preciso é um link de navegação "Home".
Obrigado antecipadamente.
Equipe Editorial
Deveria aparecer na Aba Aparência.
Admin
ianarosh
Amigo, você tem um site incrível e fico feliz por tê-lo encontrado!
Eu estava quebrando a cabeça para descobrir como adicionar o menu personalizado e foi fácil depois que vi isso! Simplesmente incrível.
Uma sugestão já pensada em fazer posts sobre segurança de blog/servidor? (não tenho certeza se você já precisou explorar mais :O)
Melhores cumprimentos e continue o bom trabalho, amigo!
Equipe Editorial
Faça uma busca, já temos um post sobre isso.
Admin
Charles
Algum de vocês pode me dizer como adicionar suporte para múltiplos menus no arquivo functions.php. Quero incluir dois conjuntos de menus.
Equipe Editorial
Você não precisa ter dois conjuntos de functions.php… Apenas chame a função principal. Crie múltiplos menus usando a interface do usuário no wp-admin. Então você teria que chamar os menus no código php.
Admin
Jamie
Só para te avisar, mas o seguinte:
“add_theme_support( ‘nav-menus’ );”
Mudou na versão final para:
“add_theme_support( ‘menus’ );”
Thanks!
Peter Luit
@Jamie: Obrigado por essa última observação!
Equipe Editorial
Thanks Jamie, Post fixed
Admin
Jacob
Ótimo. Exatamente o que eu estava procurando. Como eu adiciono o slug do menu à função?
Equipe Editorial
‘menu’ => ‘Navegação do Projeto’ assim <<
Admin
Chris Creed
Obrigado por isso – estou atualmente brincando com o novo sistema de menus – é um ótimo recurso adicional que tornará as coisas muito mais fáceis. Eu desenvolvo temas e recebo muitas solicitações de suporte de pessoas que desejam criar seções de navegação personalizadas em seus sites – os novos menus devem ajudar a simplificar muito as coisas (especialmente para pessoas com pouca experiência em WordPress).
Gopal Bhattacharjee
Eu também estou testando o WordPress 3.0 Beta, agora posso brincar com os menus… Obrigado!
Angie
Estou me perguntando como remover o HOME do meu menu de navegação usando o WP 3.0 beta. Eu edito a função wp_nav_menu ou existe alguma outra maneira?
Se eu editar a função, você pode fornecer instruções?
Equipe Editorial
Você pode simplesmente clicar em Remover… assim como qualquer outro link de navegação.
Admin
Kevin
É uma pena que não haja como adicionar a página "home" ao menu dentro do construtor de menus. Esta é uma falha importante.
Equipe Editorial
Por que não? Você pode criar um link de navegação personalizado chamado Home e adicionar o URL da sua página inicial a ele.
Admin
Noor
Eu também estou testando o WordPress 3.0 Beta e encontrei algumas coisas ruins nos Menus… por exemplo, é inconsistente e espero que até o lançamento final ele se torne consistente.
michelle
Bom tutorial! obrigado por compartilhar!
Mani Viswanathan
Bons tutoriais em primeiro lugar! serão úteis quando eu atualizar para o 3.0