Articles

Como criar um menu Dropdown no WordPress (em 5 passos)

navegação no Site é a chave para ajudar os usuários a chegar onde eles querem ir. Um menu bem projetado pode ir um longo caminho para melhorar a experiência do usuário (UX), e até mesmo diminuir a sua taxa de salto. No entanto, uma pessoa mal feita pode fazer exactamente o contrário.

felizmente, o WordPress permite que você crie menus personalizados para atender às necessidades do seu site. Você pode até mesmo usar funções nativas para adicionar um menu WordPress dropdown compacto que economiza espaço, enquanto ainda fornecer direção clara para os seus visitantes.

neste post, vamos discutir por que a navegação do site é importante e como menus dropdown pode ser particularmente útil. Em seguida, vamos acompanhá-lo através de como criá-los em WordPress, e compartilhar alguns plugins que podem ajudar.vamos mergulhar!

uma introdução para o WordPress navegação e Menus Dropdown

embora possam ser desassumantes, menus de navegação são um elemento vital de qualquer site. Eles ajudam os usuários a encontrar rapidamente as páginas mais relevantes para realizar seus objetivos, ao mesmo tempo que dão aos visitantes da primeira vez uma idéia do que você tem a oferecer:

menu exemplo

o menu de navegação primário do website Kinsta

ter um menu de navegação bem concebido é a chave para impulsionar conversões e diminuir a sua taxa de salto. Quando os usuários podem facilmente encontrar as páginas onde seu produto, Formulário de inscrição por e-mail, ou outro conteúdo de conversão está localizado, você terá um tempo mais simples obtê-los para fazer uma compra ou se inscrever.

Mais, se os usuários podem confiantemente encontrar o seu caminho em todo o seu site, eles não terão que saltar fora de suas páginas porque eles acabaram no lugar errado. Ajudá-los a acertar na primeira vez pode melhorar UX e minimizar a frustração.

no WordPress, menus são uma característica inerente. Qualquer site criado com a plataforma pode exibir um ou mais deles. No entanto, temas WordPress também desempenham um papel importante quando se trata de estilo e colocar o seu menu ou menus.

Por esta razão, o seu menu WordPress pode assumir muitas formas diferentes. O mais familiar é o menu cabeçalho padrão:

menu de cabeçalho exemplo

um exemplo de um menu de cabeçalho típico

Pode também incluir um menu de rodapé adicional no fundo das suas páginas. Ele pode exibir o mesmo conteúdo que o seu menu principal, ou oferecer ligeiramente diferentes opções:

rodapé do menu de exemplo

um exemplo de um rodapé menu

Outro estilo é o menu de sobreposição, que os usuários podem abrir e fechar à vontade:

sobreposição de exemplo, no menu

Um exemplo de uma sobreposição de menu

como Alternativa, você pode considerar o uso de uma barra lateral do menu:

barra lateral do menu de exemplo

um exemplo de uma barra lateral do menu

Ou você pode incorporar um menu dropdown, também às vezes chamado de “aninhadas” menu:

menu suspenso exemplo

Um exemplo de um menu dropdown

Este tipo de navegação é ideal para vários tipos de sites. Não irá obscurecer o seu conteúdo como um menu sobreposto, mas não é tão intrusivo como uma barra de cabeçalho grande ou um menu lateral.

ao esconder algum conteúdo até que seja necessário, você vai economizar espaço de tela enquanto ainda fornecer aos usuários uma maneira fácil de se locomover.

como criar um menu no WordPress (em 5 passos)

Se você decidiu que um menu pode ser um bom ajuste para o seu site WordPress, configurar um é bastante simples. Usando as características do menu nativo disponíveis no WordPress, você pode criar um sistema de navegação personalizado que se adapta às suas necessidades em apenas cinco passos.

Passo 1: Crie os itens do seu Menu

o primeiro passo para a criação de um menu é decidir o que incluir nele. Comece por navegar para o Aparecimento > Menus do painel do WordPress:

WordPress menu

Acessando o editor de menu no painel do WordPress

o Que você vê no editor de menu irá variar um pouco, dependendo do seu tema.

no entanto, o que é importante notar por agora é a primeira opção na página de Menus de edição. Você deve ver uma opção onde você pode selecionar um de seus menus existentes para editar, bem como uma opção para criar um novo menu:

criar um novo link do menu no topo do WordPress editor de menu

para criar um novo link do menu no topo do WordPress editor de menu

Para este exemplo, vamos escolher a última opção e criar um novo menu. Isto envolve adicionar um título e depois carregar no botão Criar Do Menu:

nomear e criar o novo menu

nomear e criar o novo menu

agora está pronto para começar a adicionar itens ao seu menu WordPress. Na maioria dos casos, é melhor manter o seu menu o mais simples possível, enquanto ainda dando aos usuários informações suficientes para chegar onde eles querem ir.

incorporando muitas páginas pode sobrecarregar os visitantes e tornar a navegação mais difícil em vez de mais fácil.

Existem algumas maneiras diferentes de ir sobre a adição de seus itens de menu. As duas primeiras são páginas e Posts, e eles trabalham muito similarmente.

Adicionar páginas para o menu

Adicionar páginas para o menu

Na barra lateral do editor de menu, basta selecionar as caixas de seleção para cada página ou post que você deseja incluir e clique em Adicionar ao Menu do botão:

a Sua próxima opção é incorporar Links Personalizados. Isso envolve fornecer a URL para a página que você deseja direcionar os usuários para, e, em seguida, criar uma etiqueta curta, mas descritiva para ele. Depois disso, você pode clicar em Adicionar ao Menu novamente:

Adicionar um link personalizado para o menu

Adicionar um link personalizado para o menu

Finalmente, você também pode adicionar Página e Pós-Categorias para seu menu de navegação. Isto levará os usuários a uma página de arquivo onde eles podem ver todo o conteúdo em um tópico particular.Blogs e outros sites de conteúdo pesado podem achar Esta característica especialmente útil:

Adicionar categorias para o menu

Adicionar categorias para o menu

Como com as Páginas e Posts opções, basta selecionar as caixas de seleção das categorias que você deseja incluir e selecione Adicionar ao Menu.

Passo 2: Organize o seu menu WordPress

Depois de ter adicionado todos os itens do seu menu, deverá vê-los listados em peças individuais sob a estrutura do Menu no editor:

a secção da estrutura do Menu do editor

a secção da estrutura do Menu do editor

inicialmente, os itens do menu irão aparecer na ordem pela qual os adicionou. No entanto, você pode facilmente modificar a sua organização arrastando-os e largando-os no lugar. Isto permitir-lhe-á criar um menu simples sem funcionalidade de lista.

Há um par de maneiras de ir sobre a adição de dropdowns ao seu menu WordPress.

O mais simples é continuar arrastando e soltando, mas começar de aninhamento de determinados itens de menu em outros:

Criar um WordPress menu

o Aninhamento de categorias sob a página do Blog

Por exemplo, na imagem acima, passamos os três pós-categorias adicionado ao menu do Blog, tornando-os “sub-itens”. Na interface, isto irá criar um menu que se parece com este:

WordPress menu

Exemplo de um menu dropdown no WordPress

Se você gostaria de adicionar um menu pendente que inclua todas as categorias em seu site, você pode fazer isso adicionando um Link Personalizado para o seu menu. Use o “#” como o URL e “Categorias” ou algo semelhante para o rótulo:

Criando um rótulo de Categorias para o menu

a Criação de um rótulo de Categorias para o menu

em seguida, Você pode adicionar todas as suas categorias para o menu e aninhá-las sob esse rótulo. Cada categoria será clicável, mas o rótulo não ser:

Categorias menu

As Categorias de menu.

Usando uma técnica semelhante, você também pode ocultar todos os itens do menu em um único menu suspenso.

adicione outra ligação personalizada, usando ” # “como URL e” Menu ” como legenda. Depois, anota todos os outros itens do menu debaixo desse.:

Aninhamento de todos os links de navegação em um Menu único rótulo

o Aninhamento de todos os links de navegação em um Menu único rótulo

O resultado no frontend será de um menu pendente que inclua o seu site, páginas principais.

Como poderá ver no item categorias abaixo, qualquer conteúdo aninhado sob um sub-item irá aparecer num sub-menu:

Um verdadeiro WordPress dropdown menu de navegação

Um verdadeiro WordPress dropdown menu de navegação

usando o arrastar-e-soltar editor de menu desta forma, você pode criar qualquer estilo e combinação de WordPress menus dropdown. Lembre-se, no entanto, que muitos itens de menu podem ser confusos para os usuários.

Inscreva-se para a Newsletter

crescemos o nosso tráfego 1,187% com WordPress. Vamos mostrar-te como.Junte-se a 20.000 outros que recebem a nossa newsletter semanal com dicas internas do WordPress!

subscreva agora

também é melhor limitar o número de sub-menus que incorpora, para evitar sobrecarregar a sua navegação.

Passo 3: incorporar imagens no seu menu WordPress

se, no final do Passo 2, o seu menu ficar exactamente igual ao que imaginou, poderá saltar para o Passo 5 para o publicar. No entanto, existem passos adicionais que você pode querer tomar se você gostaria de melhorar o seu menu com personalizações.

uma tática a considerar é incorporar elementos visuais em seus menus para fornecer mais orientação para os visitantes. Enquanto etiquetas descritivas são vitais, às vezes uma imagem ou um ícone pode ajudar os usuários a determinar mais rapidamente onde uma determinada ligação de navegação leva.

é possível adicionar imagens usando css personalizado, que discutiremos em breve. No entanto, recomendamos pegar um plugin, como imagem de Menu, Ícones facilitados:

WordPress menu com imagens ao lado os links de navegação

o WordPress menu com imagens

Desta forma, você não terá de se preocupar em incomodar com qualquer código para adicionar interesse visual para o menu de lista pendente.

instale simplesmente o plugin e depois volte à aparência > Menus:

a secção de imagem do Menu no editor de menus

a secção de imagem do Menu no editor de menus

verá que existem agora Opções de imagem para cada página que incluiu no seu menu. Você pode selecionar a foto, tamanho e posição de cada página. Lembre-se de gravar as suas alterações quando terminar.

Passo 4: Adicione CSS personalizado ao seu menu

embora não seja recomendado para iniciantes, usuários intermediários e avançados podem querer incorporar seu próprio estilo em seus menus de dropdown WordPress. Antes de saltar para o seu CSS, no entanto, você vai precisar adicionar uma classe ao seu menu.

Se ignorar este passo, o seu CSS personalizado pode causar problemas para quaisquer outros menus no seu site. Por exemplo, você pode inadvertidamente aplicar o estilo ao seu menu rodapé que você quis dizer apenas para o seu menu principal.

No editor de menu, clique em Opções da Tela no canto superior direito:

guia Opções de Tela no menu editor

A Tela de guia Opções no editor de menu

em Seguida, marque a caixa de Classes CSS:

CSS Classes de seleção na guia Opções de Tela

As Classes CSS caixa de seleção na guia Opções de Tela

Isto irá adicionar um CSS Aulas de campo para cada página em seu menu:

CSS Aulas de campo no editor de menu

As Classes CSS campo no editor de menu

Depois de adicionar uma ou mais classes CSS para os itens do menu, qualquer código personalizado que você incluir na sua folha de estilo será aplicada somente para os itens em seu menu com a classe que você especificar.cansado de um host lento para o seu site WordPress? Nós fornecemos servidores rápidos blazing e 24/7 Suporte de classe mundial de especialistas WordPress. Confira os nossos planos

pode agora dirigir-se à sua ‘stylesheet’ ou ao ‘customizador’ e começar a trabalhar na sua ‘styling’ personalizada.

Passo 5: Publique o seu Menu em locais primos

Uma vez que o seu menu WordPress está estruturado para atender às suas necessidades, e você incorporou todas as personalizações que quiser, você estará pronto para publicá-lo no seu site.

Este processo irá variar ligeiramente dependendo do seu tema e dos locais do menu que suporta. Para este exemplo, vamos usar o tema vinte vinte.

No editor de menu, desloque-se para a seção de Configurações de Menu:

O Menu de Configurações de seção no editor

O Menu de Configurações de seção no editor

Você pode selecionar a primeira caixa de seleção se você desejar para novas páginas para ser automaticamente adicionado ao seu menu. Se você está apenas começando com o seu site e ainda não adicionou todas as suas páginas-Chave, isso pode ser útil. No entanto, tenha cuidado para que você não adicione acidentalmente muitos itens ao seu menu.

abaixo desta opção, você verá uma lista de checkboxes observando as diferentes áreas do seu site onde você pode mostrar o seu menu.

O vinte temas inclui diferentes áreas de menu: menu Horizontal do ecrã, Menu expandido do ecrã, Menu móvel, menu rodapé, Menu Social.

neste caso, o menu que criamos é o mais adequado para a área de Trabalho no Menu Horizontal local, que se encontra no site do cabeçalho:

área de Trabalho no Menu Horizontal para os Vinte e Vinte tema

área de Trabalho no Menu Horizontal para os Vinte e Vinte tema

Você também pode considerar a navegar para Gerenciar guia de Locais na área de Menus do painel de controle. Aqui você pode ver todos os locais do menu que são suportados pelo seu tema, bem como qual o menu que você atribuiu a cada um:

the Manage Locations tab

The Manage Locations tab

ao colocar os seus menus, pode ser útil ver como eles se irão parecer na interface.

a opção Gerir com a antevisão ao vivo

a opção Gerir com a antevisão ao vivo

carregue no botão Gerir com a antevisão ao vivo para ver como o seu menu irá aparecer no local que escolheu para ela, usando o personalizador WordPress:

Uma visualização ao vivo para o WordPress no menu Customizer

Uma visualização ao vivo para o WordPress no menu Customizer

em seguida, Você pode publicar o seu menu ou barra de menus diretamente do Personalizador de sistemas. Se alguma vez precisar de adicionar ou remover itens do seu menu, pode simplesmente voltar ao editor do menu e fazer os ajustes necessários.

Plugins WordPress para melhorar os seus Menus Dropdown

embora você possa criar menus de navegação WordPress em pleno funcionamento sem quaisquer ferramentas extras, às vezes pode ser útil para estender a funcionalidade do seu menu. Se esse é o caso com o seu site, você pode querer olhar para alguns plugins populares do menu WordPress.

páginas aninhadas é uma forma eficiente para blogs pesados de conteúdo criar menus de dropdown. Embora seja usado principalmente para organizar posts e páginas, Este plugin também irá gerar automaticamente um menu que espelha a estrutura do seu conteúdo:

aninhados páginas

Aninhados Páginas plugin WordPress

Embora não necessariamente aconselhável incorporar um grande número de itens em seus menus, às vezes, é inevitável.se for esse o caso com o seu site, o Menu Max Mega pode ajudá-lo a combinar os menus WordPress existentes para formar um “mega menu”:

max mega menu

Max Mega Menu plugin WordPress

Com a navegação móvel em ascensão, garantindo que os seus menus são ainda podem ser lidos em dispositivos móveis é a chave.

WP Móvel Menu pares com qualquer tema sensível para ajudar a criar um sistema de navegação para os usuários de seu site, que são na go:

wp móvel menu

WP Móvel Menus do WordPress plugin

Finalmente, como já discutimos, pode haver situações em que descritivo itens de menu não são suficientes. Nestas situações, você pode querer olhar para usar a imagem do Menu, Ícones facilitados como nós descritos no Passo 3 acima.

Você pode usar qualquer um destes plugins para melhorar o seu sistema de navegação atual e tornar o seu menu WordPress dropdown mais eficaz. Lembre-se que às vezes, quando se trata de navegação, mais simples é melhor. Apenas adicione recursos extras se ele vai melhorar o seu UX e evitar a confusão do seu site.

solução de problemas com o menu WordPress

Se tiver configurado o seu menu como descrito acima, mas a funcionalidade de lista não estiver a funcionar, existem várias causas possíveis.embora não possamos cobrir todos eles aqui, podemos ajudá-lo a reduzir a causa do seu problema para que possa encontrar a solução adequada.

muitas vezes, um menu defeituoso é o resultado de um código em conflito entre o seu menu personalizado e o seu tema. A primeira coisa que você deve fazer se o seu menu não está funcionando é mudar para um tema padrão, como vinte. Se o seu menu começar a funcionar novamente, você saberá que a questão está relacionada com o seu tema. Você pode então contatar o desenvolvedor do seu tema para procurar uma solução.

algumas outras causas possíveis incluem:

  • Código Mistipado: verifique duas vezes que qualquer CSS personalizado que tenha adicionado está correcto, e que está a usar classes CSS como descrito no Passo 4.incompatibilidade do ‘Plugin’: tente desactivar quaisquer ‘plugins’ relacionados com o menu que tenha instalado, para ver se isso resolve o problema.
  • jQuery desactualizado: actualize para a versão mais recente do jQuery e tente abrir o menu de contexto novamente.

No entanto, como mencionamos anteriormente, as potenciais causas por trás do seu menu defeituoso são numerosas. Se nenhuma das soluções acima parecem estar funcionando, recomendamos visitar os fóruns de suporte WordPress, alcançar a nossa equipe de suporte Kinsta WordPress especialista, ou contratar um desenvolvedor WordPress para corrigi-lo para você.os menus de navegação são a chave para o UX do seu site. Mas e se você tiver muitos itens de menu que você precisa para caracterizar? Menu Dropdown é o nome do jogo aqui! Confira como é fácil criar um com este guia 📑 🗃 ️clique para Tweetar

resumo

embora possa parecer uma questão pequena, a navegação do seu site WordPress pode fazer ou quebrar o seu sucesso. Usando menus dropdown pode economizar espaço nas telas dos usuários, ao mesmo tempo que lhes permite facilmente fazer o seu caminho em torno de seu site e melhorar suas conversões.Se gostou deste tutorial, então vai adorar o nosso apoio. Todos os planos de hospedagem da Kinsta incluem o suporte 24/7 de nossos veteranos desenvolvedores e engenheiros WordPress. Conversar com a mesma equipa que apoia os nossos clientes da Fortune 500. Confira nossos planos