Início Tutoriais Plugins Criando um Menu Sanfona na Barra Lateral com WordPress #17

Criando um Menu Sanfona na Barra Lateral com WordPress #17

0

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.

Imagem da captura de tela do Menu Sanfona do site da Netcks

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!

Sair da versão mobile