Criando um Menu Sanfona na Barra Lateral com WordPress #17

0
376
Imagem destacada do Post #17

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.

Print Screen de onde acessar o menu 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”

Print Screen de como ficam divididos os menus e subitens no WordPress

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‘.

Print Screen demonstrando onde é o campo da barra lateral nos widgets do WordPress.

Temos que clicar nesse campo, para ele se estender e apresentar a opção ‘Adicionar bloco‘.

Imagem demonstrando a opção de criar bloco em Widget do WordPress

O próximo passo é clicar no ícone ‘+‘ e procurar pela opção chamada ‘Shortcode‘, podemos usar a caixa de pesquisa para isso.


Imagem da janela de seleção de blocos de Widgets do WordPress.

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.Imagem apresentando onde colar o código para criação do Menu Sanfona no barra lateral no WordPress.

A partir daí, quando acessamos nosso site de novo, veremos o Menu Sanfona na barra lateral e já teremos como personalizar ele.

A imagem demonstra como ficou o Menu Sanfona dentro da página em WordPress.


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.

Imagem da tela de configuração do plugin Bellows no WordPress.

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!