Deseja criar um menu responsivo do WordPress para dispositivos móveis? Os usuários móveis já superaram os usuários de desktop em muitos sites. Adicionar um menu móvel personalizável facilita a navegação dos usuários no site. Neste artigo, mostraremos como criar facilmente um menu responsivo do WordPress pronto para dispositivos móveis.
Este é um tutorial detalhado. Mostraremos o método complementar para iniciantes (sem codificação) e o método de codificação para nossos usuários mais avançados.
No final deste tutorial, você aprenderá como criar um menu pop-up deslizante, um menu pop-up suspenso e um menu pop-up alternado.
Pronto? Comecemos.
Vídeo tutorial
Inscrever-se no WPBeginner
Se você não gostar do vídeo ou precisar de mais instruções, continue lendo.
Método 1: Adicione um menu responsivo no WordPress usando um plug-in
Este método é mais fácil e recomendado para iniciantes, pois não requer codificação personalizada.
Nesse método, criaremos um menu de hambúrguer que desliza na tela do celular.
A primeira coisa que você deve fazer é instalar e ativar o plug-in do menu responsivo. Para mais detalhes, consulte o nosso guia o a o sobre como instalar um plugin do WordPress.
Após a ativação, o plug-in adicionará um novo item de menu chamado "Menu Responsivo" à sua barra de istração do WordPress. Clicar nele leva você à página de configuração do plugin.
Você deve primeiro inserir a largura da tela, quando o plug-in começará a exibir um menu responsivo. O padrão é 800 px, o que deve funcionar na maioria dos sites.
Depois disso, você precisa selecionar o menu que deseja usar para o menu responsivo. Se você ainda não criou um menu, pode criar um visitando Aparência »Menus. Consulte o nosso guia sobre como adicionar o menu de navegação no WordPress para obter instruções detalhadas.
A última opção na tela é fornecer uma classe CSS para o seu menu sem resposta atual. Isso permitirá que o plug-in oculte seu menu que não responde em telas menores.
Não se esqueça de clicar no "Atualizar opções" para armazenar suas configurações.
Agora você pode visitar o site e redimensionar a tela do navegador para ver o menu responsivo em ação.
O plug-in de menu responsivo vem com muitas outras opções que permitem alterar o comportamento e a aparência do seu menu responsivo. Você pode explorar essas opções na página de configuração do plug-in e ajustá-las conforme necessário.
Método 2: Adicione um menu de seleção suspenso usando um plug-in
Outra maneira de adicionar um menu responsivo é adicionando um menu de seleção suspensa. Este método não requer nenhuma habilidade de codificação, por isso é recomendado para iniciantes.
A primeira coisa a fazer é instalar e ativar o plug-in do menu de seleção responsiva. Para mais detalhes, consulte o nosso guia o a o sobre como instalar um plugin do WordPress.
Após a ativação, você deve visitar Aparência »Seleção Responsiva para definir as configurações do plug-in.
Você deve rolar para baixo até a seção "Ativar locais do tema". Por padrão, o plug-in é ativado em todos os locais do tema. Você pode alterar isso ativando-o seletivamente para locais temáticos específicos.
Não se esqueça de clicar no botão Salvar todas as configurações para armazenar suas alterações.
Agora você pode visitar o site e redimensionar a tela do navegador para ver o menu de seleção responsivo em ação.
Método 3: Crie um menu compatível com dispositivos móveis responsivo com efeito de alternância
Um dos métodos mais amplamente utilizados para exibir um menu em telas móveis é o uso do efeito de alternância.
Este método requer que você adicione código personalizado aos seus arquivos do WordPress. Se você não fez isso antes, consulte nosso guia sobre como colar snippets da Web no WordPress.
Você deve primeiro abrir um editor de texto como o bloco de notas e colar este código.
(function () {
var nav = document.getElementById ('site-navigation'), botão, menu;
if (! nav) {
Retorna;
}
button = nav.getElementsByTagName ('button') (0);
menu = nav.getElementsByTagName ('ul') (0);
if (botão!) {
Retorna;
}
// Botão Ocultar se o menu estiver ausente ou vazio.
if (! menu ||! menu.childNodes.length) {
button.style.display = 'nenhum';
Retorna;
}
button.onclick = function () {
E se (-1 === menu.className.indexOf ('menu de navegação')) {
menu.className = 'menu de navegação';
}
E se (-1 ! == button.className.indexOf ('alternado')) {
button.className = button.className.replace ('alternado', '');
menu.className = menu.className.replace ('alternado', '');
} outro {
button.className + = 'alternado';
menu.className + = 'alternado';
}
};
}) (jQuery);
Agora você precisa salvar este arquivo como navigation.js na área de trabalho.
Em seguida, você precisa abrir um cliente FTP para fazer deste arquivo para a pasta / wp-content / themes / your-theme-dir / js / no seu site WordPress.
Substitua o diretório do tema pelo diretório do tema atual. Se o diretório do tema não tiver uma pasta js, será necessário criá-lo.
Depois de carregar o arquivo JavaScript, a próxima etapa é garantir que seu site WordPress carregue esse JavaScript. Você precisará adicionar o seguinte código ao arquivo functions.php do seu tema.
wp_enqueue_script ('wpb_togglemenu', get_template_directory_uri (). '/js/navigation.js', array ('jquery'), '20160909', true);
Agora precisamos adicionar o menu de navegação ao nosso tema WordPress. Normalmente, o menu de navegação é adicionado ao arquivo header.php de um tema.
