Como adicionar um menu de painel deslizante em temas do WordPress

A adição de um menu de painel deslizante ao seu site WordPress pode melhorar a navegação, especialmente em dispositivos móveis. Esse recurso oferece uma animação suave e bonita quando os usuários tocam no ícone do menu.

Um menu responsivo facilita a exploração do seu site pelos visitantes em seus telefones ou tablets. Ele garante uma experiência de navegação perfeita, mantendo seu público envolvido.

Neste artigo, vamos orientá-lo sobre como adicionar um menu de painel deslizante ao seu tema do WordPress. O melhor de tudo é que você pode fazer isso sem escrever nenhum código.

Por que adicionar um menu de painel deslizante em temas do WordPress?

Menus bem projetados ajudam os visitantes a se orientarem em seu site WordPress. Muitos dos seus visitantes usarão dispositivos móveis, portanto, é importante visualizar a versão móvel do seu site WordPress para ver como o menu de navegação fica em telas menores.

Felizmente, muitos temas do WordPress vêm com estilos integrados que mostram automaticamente menus compatíveis com dispositivos móveis quando visualizados em uma tela pequena.

No entanto, talvez você queira personalizar ainda mais a navegação móvel e adicionar um menu responsivo de tela cheia ou um menu de painel de slides animado.

Com isso em mente, vamos dar uma olhada em como adicionar um menu de painel deslizante nos temas do WordPress.

Como adicionar um menu de painel deslizante em temas do WordPress

A primeira coisa que você precisa fazer é instalar e ativar o plug-in Responsive Menu. Se precisar, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Há uma versão premium do plug-in Responsive Menu com temas extras e recursos adicionais, como lógica condicional. Mas, para este tutorial, usaremos o plug-in gratuito.

Após a ativação, navegue até Responsive Menu ” Menus no painel do WordPress. Uma vez lá, clique no botão “Create New Menu” (Criar novo menu) na parte superior da tela.

Em seguida, você verá 4 temas que podem ser usados para o seu novo menu responsivo. Outros temas estão disponíveis para compra.

Para este tutorial, usaremos o tema selecionado automaticamente. Em seguida, você pode clicar no botão “Next”.

Isso o levará à página “Menu Settings” (Configurações do menu).

Aqui, você pode inserir um nome para o seu menu responsivo e, em seguida, selecionar qual menu do WordPress deseja exibir no painel. Por exemplo, escolhemos o menu “Navigation” (Navegação).

Se precisar criar um novo menu, você pode aprender a fazê-lo seguindo nosso guia sobre como adicionar um menu de navegação no WordPress.

Também é possível ocultar o menu normal que vem com o tema do WordPress para que os usuários vejam apenas o novo menu do painel deslizante. Para isso, insira o código CSS no campo “Hide Theme Menu” (Ocultar menu do tema).

O código que você precisa inserir aqui varia de tema para tema, e você pode obter mais detalhes clicando no link “Saiba mais”.

Quando estiver satisfeito com as configurações, você deve clicar no botão “Create Menu” (Criar menu) na parte inferior da página. Isso o levará a uma página na qual você poderá concluir a personalização do menu.

Você verá uma visualização do seu site no lado direito da tela, e há botões na parte inferior para alternar entre as visualizações de telefone, tablet e desktop. Você também encontrará opções de personalização à esquerda.

Você pode notar que algum texto é exibido acima do menu. Esse é o título do menu e uma linha de texto que o plug-in chama de “conteúdo adicional”.

Você pode editar ou ocultar o texto clicando em “Mobile Menu” e depois em “Container” no menu à esquerda da página.

Além disso, você pode digitar o que quiser no campo “Title Text” (Texto do título), como “Main Menu” (Menu principal) ou “Navigation” (Navegação). Se você não quiser exibir um título, basta deslizar a chave “Title” para a posição “off”.

Depois disso, você deverá rolar para baixo até a configuração “Additional Content” (Conteúdo adicional).

A partir daqui, você pode desativar essa configuração ou digitar conteúdo alternativo. Na captura de tela abaixo, você notará que a opção foi desativada, de modo que as palavras “Add more content here…” (Adicionar mais conteúdo aqui…) agora estão ocultas.

Quando estiver satisfeito com as configurações do menu, certifique-se de clicar no botão “Update” (Atualizar) na parte inferior da página para armazenar suas configurações.

O plug-in Responsive Menu oferece muitas outras opções para alterar o comportamento e a aparência do menu do painel deslizante. Você pode explorar essas opções na página de configurações do plug-in e ajustá-las conforme necessário.

Agora, você pode acessar seu site para ver o menu em ação. Veja como ele aparece em nosso site de demonstração. Observe que, se a página atual estiver no menu, ela será destacada com uma faixa colorida.

Esperamos que este tutorial tenha ajudado você a aprender como adicionar um menu de painel deslizante nos temas do WordPress. Em seguida, talvez você também queira saber como criar um menu suspenso e como mostrar menus diferentes para usuários conectados no WordPress.

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