Como Criar um Menu Lateral Colapsável no WordPress (O Jeito Fácil)

Um menu lateral recolhível é uma ótima maneira de fornecer acesso fácil a links e conteúdos importantes, mantendo o design do seu site limpo e organizado.

Esse recurso permite que os usuários expandam e recolham o menu, dando-lhes controle sobre a experiência de navegação.

Notamos que muitos sites grandes, lojas de comércio eletrônico e sites com layouts mais complexos o utilizam para facilitar a navegação.

Neste artigo, mostraremos como criar facilmente um menu lateral recolhível no WordPress.

O Que É um Menu Lateral Recolhível? (E Quando Usar Um)

Os menus mais amigáveis ao usuário fornecem acesso fácil a todos os links que os visitantes precisam. No entanto, isso pode ser complicado para sites WordPress que têm muitas páginas ou um layout mais complexo. 

Pense em uma grande loja de comércio eletrônico que tem dezenas de categorias e subcategorias de produtos, como a Amazon. 

Exibir cada categoria de produto em um menu padrão não seria uma boa ideia. Os compradores provavelmente precisariam rolar o menu para encontrar a categoria em que estão interessados. 

É aqui que entram os menus recolhíveis. Esses menus organizam o conteúdo em uma abordagem de 'pai-filho'. Isso significa que, se o visitante clicar em um item pai em um menu recolhível, ele se expandirá para exibir todo o conteúdo filho desse item pai. 

Um exemplo disso é o portal de notícias Guardian, que usa um menu recolhível para seu site móvel.

Menus laterais recolhíveis às vezes também são chamados de menus expansíveis. Isso ocorre porque suas diferentes seções se expandem quando um visitante clica nelas. 

Por padrão, menus recolhíveis ocultam muito conteúdo e complexidade dos visitantes. Isso é muito mais amigável do que rolar por uma longa lista de categorias e subcategorias em seu blog WordPress.

Dito isso, vamos dar uma olhada em como você pode facilmente criar um menu lateral recolhível em seu site WordPress.

Como Criar um Menu Lateral Colapsável no WordPress

Você pode criar um menu lateral recolhível no WordPress usando o plugin Bellows Accordion Menu.

Ele fornece um shortcode útil para colocar seu menu recolhível em qualquer página, post ou área de widget, incluindo sua barra lateral.

Primeiro, você precisará instalar e ativar o plugin Bellows Accordion Menu. Se precisar de ajuda, consulte nosso guia para iniciantes sobre como instalar um plugin WordPress.

Após a ativação, visite a página Aparência » Menus no seu painel do WordPress. 

Para começar, digite um nome para o seu menu no campo 'Nome do Menu'. Observe que os visitantes do seu site não verão este nome, pois ele é apenas para sua referência.

Você pode então clicar no botão ‘Criar Menu’. 

Em seguida, escolha as páginas que você deseja adicionar ao menu lateral recolhível. Por padrão, o WordPress exibe apenas suas páginas mais recentes.

Se você quiser ver uma lista de todas as páginas do seu site, clique na aba ‘Ver Tudo’. 

Alternativamente, você pode clicar em ‘Selecionar Tudo’. Isso adicionará todas as suas páginas ao menu recolhível.

Assim que estiver satisfeito com sua seleção, clique no botão ‘Adicionar ao Menu’. Você também pode selecionar posts e categorias de blog ou adicionar links personalizados. Para mais detalhes, consulte nosso guia sobre como adicionar um menu de navegação no WordPress.

Após adicionar todas as suas diferentes páginas da web ao menu, você pode movê-las arrastando e soltando. Isso mudará a ordem em que essas páginas aparecem em seu menu recolhível. 

Menus recolhíveis são sobre relações pai-filho.

Quando um visitante clica em um item pai em seu menu recolhível, ele se expandirá para revelar todo o conteúdo filho.

Para criar essa relação, basta usar arrastar e soltar para organizar todas as páginas de seus filhos abaixo de seus pais.

Em seguida, pegue cada filho e arraste-o um pouco para a direita. Você pode então soltar esta página. Isso indentará o item e o transformará em uma página filha. 

Não se esqueça de clicar no botão 'Salvar Menu' quando terminar.

Agora, queremos adicionar este menu recolhível à barra lateral do WordPress. Para fazer isso, usaremos alguns shortcodes que o Bellows Accordion cria automaticamente. 

Para obter o shortcode, vá para a página Aparência » Menu Bellows no painel do WordPress. Se ainda não estiver selecionada, certifique-se de selecionar a guia 'Mostrar Tudo'.

Agora você pode clicar na caixa Shortcode, que deve destacar todo o código. Agora, copie este código usando o atalho de teclado Command + c ou Ctrl + c. 

O próximo passo é colar este shortcode em um widget, então vá para a página Aparência » Widgets na área de administração.

Isso exibirá todas as áreas de widget em seu tema atual. As opções que você vê podem variar, mas a maioria dos temas modernos do WordPress apresentam uma barra lateral.

Depois de encontrar a área da barra lateral, clique nela. Esta seção agora se expandirá.

Para adicionar um bloco, clique no ícone + e comece a digitar 'Shortcode'. Quando ele aparecer, selecione o bloco 'Shortcode'. 

Agora, basta colar seu shortcode de menu recolhível neste bloco. Para publicar seu menu, você precisará clicar no botão 'Atualizar' na parte superior da sua tela. 

Agora, quando você visitar seu site, deverá ver um novo menu lateral recolhível. 

O plugin Bellows Accordion também torna super fácil personalizar este menu padrão. Por exemplo, você pode alterar seu esquema de cores para refletir melhor a marca do seu site. 

Se você quiser ajustar o menu padrão, basta ir para a página Aparência » Bellows Menu no seu painel do WordPress. 

Este menu tem todas as configurações que você precisa para personalizar seu menu recolhível. Há muitas configurações para explorar. No entanto, você pode querer começar indo para Configuração Principal » Configuração Básica.

Aqui, você pode alternar entre várias cores de menu diferentes. Você também pode escolher se os visitantes podem expandir vários submenus ao mesmo tempo usando as configurações de 'Accordion Folding'. 

Para alterar o alinhamento e a largura do menu, clique na aba 'Layout & Posição'.

Se você preferir visualizar suas alterações em tempo real, pode editar o menu lateral recolhível no Personalizador do WordPress.

Para fazer isso, vá para a página Aparência » Personalizar na área de administração e selecione a aba 'Bellows' na coluna da esquerda.

Aqui, você encontrará muitas configurações diferentes para sua barra lateral. Isso inclui alterar sua largura, alinhamento e a cor do seu menu lateral recolhível. 

Bônus: Truques de Barra Lateral do WordPress para Obter Resultados Máximos

Depois de criar um menu lateral recolhível, você pode usar outras dicas para gerar mais leads com a ajuda da sua barra lateral.

Por exemplo, você pode tornar seu widget da barra lateral fixo para que ele fique visível na página mesmo quando o usuário rola para baixo.

Além disso, você pode adicionar um formulário de contato ou um formulário de inscrição por e-mail em sua barra lateral para construir sua lista de e-mails. Para fazer isso, você pode usar o WPForms, que é o melhor plugin de formulário de contato do mercado.

No WPBeginner, nós o usamos para criar formulários de contato e pesquisas anuais, e nós o adoramos. Para saber mais, veja nossa análise completa do WPForms.

Você simplesmente precisará criar um formulário e, em seguida, adicioná-lo à sua barra lateral usando o bloco WPForms no menu de blocos.

Para mais detalhes, você pode ver nosso tutorial sobre como criar um formulário de contato no WordPress.

Além disso, você pode exibir seus posts mais populares na barra lateral, adicionar imagens, mostrar ícones de mídias sociais e exibir prova social. Isso incentivará os usuários a explorar mais seu site e aumentará suas conversões.

Para mais dicas, você pode ver nossa lista dos melhores truques de barra lateral do WordPress para obter resultados máximos.

Tutorial em Vídeo

Se você não prefere instruções escritas, então apenas assista ao nosso tutorial em vídeo.

Inscreva-se no WPBeginner

Esperamos que este artigo tenha ajudado você a aprender como criar um menu de barra lateral recolhível no WordPress. Para mais dicas sobre como editar o design do seu site WordPress, você também pode consultar nossos guias sobre como personalizar o cabeçalho do seu WordPress e os widgets mais úteis do WordPress para o seu site. 

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.