Como adicionar um menu de painel deslizante em temas do WordPress

Gostaria de adicionar um menu de painel deslizante ao seu site WordPress?

A adição de um menu responsivo facilitará a navegação dos usuários no seu site quando estiverem usando dispositivos móveis. Quando eles tocarem no ícone do menu, um menu de painel deslizará para a tela usando uma bela animação.

Neste artigo, mostraremos a você como adicionar um menu de painel deslizante em temas do WordPress sem escrever nenhum código.

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

Menus bem projetados ajudam os visitantes a encontrar o caminho 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 exibem 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. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Há uma versão premium do 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é a página Responsive Menu ” Menus. Ao chegar lá, clique no botão “Create New Menu” (Criar novo menu) na parte superior da tela.

Você verá quatro 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.

Para fins deste tutorial, escolhemos o menu “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”.

Os usuários da versão Pro têm algumas configurações adicionais. Por exemplo, os usuários da versão Pro podem selecionar os dispositivos e as páginas em que o menu deve ser exibido.

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.

Observe que há algum texto exibido acima do menu. Esse é o texto do 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.

Você pode digitar o que quiser no campo “Title Text” (Texto do título), como “Main Menu” (Menu principal) ou “Navigation” (Navegação). Se não quiser exibir um título, basta deslizar o botão “Title” para a posição desligada.

Depois disso, você precisa rolar para baixo até a configuração “Additional Content” (Conteúdo adicional). 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…” 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 vem com muitas outras opções que permitem 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. Você também pode querer saber como rastrear os visitantes do seu site WordPress ou conferir nossa lista de plug-ins obrigatórios para expandir seu site.

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.