Quer criar um menu e colocar ele na barra lateral do seu site em WordPress?
Com o Menu Sanfona (Accordion Menu), os visitantes podem escolher entre vários links diferentes em um menu organizado. É perfeito para sites grandes, lojas virtuais, ou qualquer site com design mais complicado.
Nesse tutorial, vamos ensinar um jeito fácil e rápido de como criar um Menu Sanfona na barra lateral de um site WordPress, passo a passo.
O que é um Menu Sanfona?
O Menu Sanfona é um excelente jeito de organizar e facilitar o acesso aos links necessários no seu site. Uma jeito legal de usar esse menu é colocar ele na barra lateral da página, tanto na esquerda quanto na direita.
Imagine uma loja virtual gigante, como a Amazon, com centenas de categorias e subcategorias de produtos. Se todos esses links estivessem visíveis o tempo todo, o menu seria muito confuso e poderia distrair a atenção do visitante de outras informações importantes no site. Os usuários teriam que rolar a barra lateral várias vezes para encontrar o que querem.
E é aí que entra o Menu Sanfona. Ele organiza todo o conteúdo em categorias “pais” e “filhos”. Quando um visitante clica na categoria (pai), todas as subcategorias (filho) aparecem também.
Temos o exemplo de nosso site da Netcks, nele nós usamos o Menu Sanfona na parte de cima do site. Veja na imagem abaixo como o nosso menu é organizado e como é útil para organizar as categorias do nosso blog.
Podemos escolher colocar o menu em outras partes do seu site também, veremos isso na configurações do menu mais para frente.
Criando um Menu Sanfona no WordPress
Nesse tutorial vamos criar o Menu Sanfona na barra lateral de um site em WordPress usando o plugin Bellows Accordion Menu.
Versão WordPress: 6.2
Versão Plugin: 1.4.2
De começo, temos que instalar e ativar o plugin.
Depois disso, vamos nas opções Aparência » Menus no painel do WordPress.
Agora, criamos o menu colocando um nome no campo ‘Nome do menu‘.
Podemos escolher as páginas do site que queremos adicionar ao menu.
Dica: O WordPress mostra só as páginas mais recentes na lista de adição de itens, mas se você quiser ver todas as páginas do site, é só clicar na opção ‘Ver tudo‘.
Quando terminamos a seleção das páginas, clicamos no botão ‘Adicionar ao menu‘. Você também pode colocar outros tipos de página ao menu, como posts, categorias, etc.
Nós podemos organizar a ordem de como o menu vai ser exibido no site. É só arrastar e soltar os menus na ordem que preferir de cima para baixo.
Como já falamos anteriormente, os Menus Sanfona interagem como “pai” e “filho”, sendo o pai o menu primário e o filho sendo o subitem desse menu.
Quando um visitante clica no menu primário (pai), ele vai expandir para mostrar todos os subitens (filhos), simples assim.
Para fazer isso, é só clicarmos no nome do menu que for um subitem (filho) e arrastar ele um pouco para a direita do menu primário (pai). Temos o exemplo abaixo de como fica:
Menu Primário: “WordPress”
Subitem: “Menu Sanfona”
Depois de termos nosso menu organizado, nós clicamos no botão ‘Salvar menu‘ no canto inferior direito do WordPress.
Adicionando o Menu Sanfona na Barra Lateral
Agora vamos botar esse menu na barra lateral do site. Primeiro, temos que usar o código de acesso (shortcode) que o próprio plugin nos dá.
Para copiar o código, vamos entrar no painel do WordPress em Aparência » Bellows Menu.
Agora vamos clicar no campo ‘SHORTCODE‘ para selecionar e copiar o código.
Em seguida, temos que colar esse código em um Widget (elemento que adiciona conteúdo ou funcionalidade ao site).
Então, temos que ir em Aparência » Widgets no painel do WordPress. Nessa opção, veremos todos os elementos que temos em nosso tema. Os campos podem variar de um tema para outro, mas a grande maioria contém o elemento de barra lateral. No tema que estamos usando no tutorial por exemplo, o nome do campo também pode variar, no tema que estamos testando o nome é ‘Área do Widget da Barra Lateral‘.
Temos que clicar nesse campo, para ele se estender e apresentar a opção ‘Adicionar bloco‘.
O próximo passo é clicar no ícone ‘+‘ e procurar pela opção chamada ‘Shortcode‘, podemos usar a caixa de pesquisa para isso.
Agora, vamos selecionar esse bloco e temos que colar o código de acesso do Menu Sanfona no campo que aparece dentro do bloco. Depois de tudo isso, vamos clicar no botão azul ‘Atualizar‘ no canto superior direito do WordPress.
A partir daí, quando acessamos nosso site de novo, veremos o Menu Sanfona na barra lateral e já teremos como personalizar ele.
Com o plugin Bellows, é super fácil personalizar os menus. Por exemplo, podemos mudar as cores para ficar mais harmonioso e bonito no site.
Pra isso, só precisamos entrar no painel do plugin em Aparência » Bellows Menu como já fizemos anteriormente nesse tutorial, é lá onde temos todas as configurações.
Fiquem a vontade para testar as varias opções para deixar seu menu mais adequado para o layout do site.
Por exemplo, na aba Main Configuration » Basic Configuration, podemos escolher entre diferentes opções de cores e estilos, no campo ‘Skin‘. Temos também a possibilidade de escolher entre duas opções de como os submenus são expandidos. Também é possível optar pela expansão automática dos submenus, entre outras alterações.
Para mudar a largura e o alinhamento do menu, clique na aba Main Configuration » Layout & Position dentro do painel do plugin Bellows.
Agora que aprendemos a criar um Menu Sanfona na barra lateral de um site WordPress, podemos oferecer uma página mais organizada e com fácil navegação para os visitantes de nosso site.
Se você achou esse conteúdo útil, não deixe de compartilhar com seus amigos e colegas.
Se tiver alguma dúvida ou sugestão, sinta-se à vontade para deixar um comentário abaixo.
Não perca a chance de conferir todas as nossas dicas e tutoriais e continue aprimorando seu site cada vez mais. Até a próxima!