Como criar estruturas de menu personalizadas no WordPress

O WordPress possui uma estrutura de navegação integrada automática que cria seus menus para você. Inclui páginas e categorias. Ele os colocará em seu menu principal sem que você precise fazer nada além de criar a página ou um post dentro da categoria. Isso funciona muito bem se você tiver apenas algumas páginas e categorias, mas depois de um tempo pode começar a ficar fora de controle. Além disso, só porque ele pode lidar com sua navegação automaticamente não significa que você deva deixá-lo.

O WordPress irá lidar com seus menus automaticamente sem nenhuma entrada sua, mas se você realmente quiser aproveitar ao máximo sua estrutura de menus, poderá criar seus próprios menus personalizados. Os menus personalizados permitem que você assuma o controle total sobre sua estrutura de navegação e pode dar ao seu site uma aparência mais limpa e profissional.

Tipo de Menus

Existem vários tipos diferentes de menus. Os tipos de menu que você pode usar dependem dos recursos do seu tema. Os tipos de menu populares incluem:

• Menu Primário – este aparece abaixo do cabeçalho. Deve incluir sua navegação principal e as páginas que seus visitantes esperam com base no tipo de site que você possui: home, about, contact, blog, portfolio, etc.
• Menu Secundário – este aparece acima do cabeçalho. Isso deve incluir links e páginas que você deseja fornecer aos seus leitores em um local conveniente, mas não necessariamente em sua estrutura de navegação principal. Isso pode ser itens como tutoriais, um carrinho de compras, etc.
• Barra lateral – seus menus personalizados podem ser colocados na barra lateral usando o widget de menu personalizado. Você pode usar quantos widgets quiser e colocar qualquer menu neles.
• Rodapé – você pode criar um menu apenas para o seu rodapé. Esse menu geralmente contém menos informações que o menu principal. Dependendo das necessidades do seu site, ele geralmente contém home, about, contact, blog, etc. Se o seu site inclui anúncios de emprego, um programa de afiliados e sites irmãos, eles também podem ser incluídos aqui.
• Menu de links sociais – este é um menu especial encontrado em temas como Twenty Fifteen que coloca seus links de mídia social na barra lateral. Se o tema reconhecer a rede social, ele fornecerá o ícone adequado. Caso contrário, ele mostrará os nomes como texto (de acordo com como você rotulou o link).

Os menus primário e secundário são os mais populares entre os temas do WordPress. O que vai neles realmente depende do foco do seu site. O foco principal do seu site deve aparecer no menu principal. Deve fazer sentido para seus visitantes e ser o que eles esperam ver.

Por exemplo, se você tem uma loja, seu carrinho de compras deve estar no menu principal. Se você tem um site de portfólio, mas também vende algumas coisas, seu portfólio deve estar no menu principal e o carrinho de compras no menu secundário. Basta pensar sobre onde ele se encaixa logicamente e colocá-lo de acordo.

Criando seus próprios menus personalizados

O WordPress facilita a criação manual de seus próprios menus personalizados. Você pode criar, ajustar e aplicar menus no back-end e pode selecionar seus menus no front-end para vê-los e testá-los antes de ir ao ar.

Criando os menus a partir do back-end

No back-end, vá para Aparência e selecione Menus. No front-end, vá para Personalizar e selecione Navegação.

Na tela do menu, selecione criar um novo menu, dê um nome ao menu e clique no botão Criar menu.

Agora você está pronto para começar a adicionar a estrutura de navegação. À esquerda, você tem caixas para Páginas, Links Personalizados e Categorias. Você pode usar tudo isso como links em seu menu personalizado. No meio você tem algumas opções. Você pode permitir que todas as novas páginas sejam adicionadas automaticamente à estrutura do menu ou deixar isso desmarcado se quiser ter mais controle e escolher as páginas e categorias por conta própria.

Páginas

Selecione a guia Páginas na janela esquerda, se ainda não estiver aberta. Para adicionar páginas ao menu, selecione todas as páginas desejadas e clique em Adicionar ao menu.

Se você quiser que eles sejam organizados de maneira diferente, basta arrastar e soltar o item de menu que deseja mover para o novo local. Você pode até torná-lo um subitem de outro item de menu arrastando e soltando-o à direita sob o item do qual deseja que seja um subitem.

Você pode selecionar a seta à direita para abrir o item e fazer ajustes, como alterar o nome e o local. Você também pode remover o item da estrutura do menu aqui.

Links personalizados

Para adicionar links personalizados, abra Links personalizados na janela esquerda, adicione o URL desejado e selecione Adicionar ao menu. Você pode criar qualquer tipo de link que desejar e fazer com que eles façam parte da estrutura do seu menu. É também assim que você cria links para o menu Links Sociais.

Você pode então arrastá-lo e soltá-lo onde quiser na estrutura do menu.

Categorias

Você escolhe e adiciona categorias da mesma forma que escolhe e adiciona Páginas na janela esquerda. Eles agirão da mesma forma que as páginas e links no menu.

Salve seu cardápio

Uma vez que você gosta de sua nova estrutura de menu, salve-o e então você pode usá-lo.

Gerenciar locais

Existem duas maneiras de usar seu menu a partir do back-end.

Configurações do Menu

Na tela em que você criou o menu, há um grupo de caixas de seleção em Configurações do menu. Você pode selecionar qualquer menu e, em seguida, selecionar onde ele deve ser usado. Você pode selecionar quantos quiser. Não se esqueça de salvá-lo.

Gerenciar locais

Selecione a guia Gerenciar locais. Aqui você pode escolher qual menu usar nas caixas suspensas. Você não precisa usar todos eles. Um que você escolheu qual dos seus menus será usado, basta clicar em salvar e você acabou de atualizar sua estrutura de menu.

Ferramenta

O WordPress também possui um widget de menu personalizado que você pode arrastar e soltar em suas barras laterais. A partir daqui você pode selecionar o seu menu.

Teste

Aqui está uma olhada no meu menu de teste e widget da barra lateral. A próxima coisa a fazer é testar cada item para garantir que ele funcione de forma suave e intuitiva. Não se esqueça deste passo. É muito importante testar seu cardápio para ver se funciona da maneira que você pretendia. Obviamente, esses não são títulos de menu que você deve usar em seu site.

Usando o Front End para uma Visualização WYSIWYG

Para modificar sua estrutura de menu no front end, vá para Aparência e selecione Personalizar. Quando chegar ao front-end, escolha Navegação. A partir daqui você pode escolher seus menus. A vantagem dessa visualização é que você pode ver as alterações imediatamente antes de salvá-las. Dessa forma, você pode decidir se gosta antes de se comprometer. Infelizmente este sistema não permite que você os crie.

Personalize a aparência com temas como Divi

Alguns temas, como o Divi 2.4 do Elegant Theme, oferecem ferramentas para que você possa fazer ajustes na aparência de seus menus a partir do front-end e ver seus efeitos imediatamente. Dessa forma, você saberá o que seus visitantes verão antes de salvá-lo.

Aqui está uma olhada nos ajustes de menu do Divi. Você pode fazer esses mesmos ajustes para alterar a aparência de cada item de menu.

Personalizando ainda mais – usando plugins para modificar seus menus

Existem muitos plugins disponíveis para o WordPress que ajudam você a modificar seus menus personalizados com novos recursos, aparência e funcionalidade. Eles adicionam muitos ajustes de CSS, os tornam responsivos e até os tornam mais rápidos. Aqui está uma olhada em alguns dos plugins mais populares.

Widget Assistente de Menu Personalizado

Este plugin gratuito adiciona um widget de menu personalizado que você pode usar em suas barras laterais ou em seu conteúdo usando códigos de acesso. Ele oferece controle total sobre os parâmetros do seu menu e permite que você use partes específicas de seus menus personalizados. Ele também adiciona algumas classes personalizadas.

Você pode exibir partes específicas do menu ou o menu inteiro. Você também pode tornar a saída condicional. Ele será exibido como plano ou hierárquico de acordo com o número de níveis que você especificar. Você também pode modificar a saída com HTML.

As configurações do widget são fáceis de usar. Você escolhe o menu em uma caixa suspensa e seleciona filtros, fallbacks, saída, contêiner, classes, links e alternativas (este é outro nível de condições). Ele também fornece um código de acesso para que você possa colar seus menus em seu conteúdo.

Menu Acordeão Nextend

Este plugin permite que você crie menus estilo acordeão com controle total sobre os níveis de menu, cores, animação, etc., cada um com suas próprias configurações e skins. Você tem controle sobre os níveis e estados de fontes, fundos, cores, imagens, etc. Ele acelera o sistema de menus usando cache, fornece vários tipos de animação, tem níveis ilimitados de menus e oferece 30 configurações.

Eu gosto da maneira como os menus de acordeão funcionam. Você pode expandi-los quando quiser usá-los e, em seguida, ocultá-los para obter um layout mais limpo quando não quiser vê-los na tela. O plugin é fácil de usar e configurar. Você cria menus exatamente como faria com tipos de conteúdo personalizados. Você pode então arrastar o widget para suas barras laterais e escolher o menu dentro do widget.

Há também uma edição Pro que adiciona três temas e suporte. Os preços começam em US$ 29.

Menu responsivo

Este plugin gratuito tem 70 opções para ajustar a aparência, a sensação e a ação dos seus menus. Você pode ajustar os títulos, CSS, ações, tamanhos, animação, scripts e muito mais. Funciona muito bem para dispositivos móveis e possui recursos para puxar o menu de um lado e definir a localização do menu. Ele vai até mesmo minificar o CSS e JavaScript do seu menu. Você também pode adicionar HTML personalizado e importar/exportar suas configurações.

Existem muitos ajustes nas configurações, mas todos são simples de entender e ajustar. Há também um nível avançado de configurações, mas você pode ignorá-las se quiser. Ele inclui códigos de acesso e você pode até adicionar o código PHP ao seu tema, se preferir.

Outros plugins para modificar menus

Aqui está uma lista de outros plugins que achei interessantes. Eles adicionam ou modificam os recursos de seus menus e permitem que você os controle de várias maneiras.

• Megamenu WordPress
• Menu suspenso Mega CSS3
• Menu responsivo WP
• Font Awesome 4 Menus
• Códigos de acesso nos menus
• Aparência mais rápida – Menus
• Cardápio de comidas e bebidas
• Menus de varejo simples
• Purifique os menus do WordPress
• Menuizador de widgets

Dicas para criar ótimas estruturas de menu

• Use seus menus para manter sua estrutura de navegação organizada.
• Use o menor número de níveis que puder. Pense em termos de Primário e Secundário.
• Use nomes que façam sentido para os leitores sem que eles precisem decifrar seu código.
• Use o método KISS. Lembre-se – mais simples é melhor. Os menus devem ser fáceis de usar e intuitivos.
• Verifique as estruturas de menu de seus sites favoritos e veja o que você gosta e o que não gosta. Então melhore o seu.

Pensamentos finais

Adicionar sua própria estrutura de menu personalizada é fácil e fará com que seu site WordPress pareça mais profissional e evitará que sua estrutura pareça aleatória. Leva apenas alguns minutos para criar seu próprio conjunto de menus e você pode vê-los e experimentá-los antes de ir ao vivo. Seus visitantes apreciarão uma estrutura de menu que permite que eles naveguem em seu site de forma mais rápida e intuitiva.

Sua vez! Você criou sua própria estrutura de menu personalizada? Você tem algo a acrescentar? Você usa plugins para modificar seus menus? Conte-nos sobre isso nos comentários abaixo.