Como ocultar o menu móvel do WordPress

Com o número de usuários de internet móvel superando os de desktop, não é surpresa que os designers de sites se esforcem para atendê-los. Ter uma versão móvel de um site ou mesmo converter um site em um aplicativo móvel tornou-se a norma. A razão para isso é simples: diferentes relações de aspecto e diferentes resoluções requerem diferentes modos de exibição para diferentes recursos, ou recursos totalmente diferentes. Isso é chamado de design responsivo: diferentes versões para diferentes tamanhos de tela. E um dos recursos que apresenta problemas para designers e usuários de dispositivos portáteis é o menu.

Os menus podem ser grandes, complicados e incômodos para usuários móveis que, pela própria natureza de seus dispositivos, têm espaço limitado na tela. É por isso que muitos temas premium do WordPress são equipados com menus móveis. Ainda assim, você pode ter um tema que parece e funciona exatamente da maneira que você deseja, mas simplesmente não tem essa opção. Portanto, se você deseja ocultar o menu do seu celular ou talvez substituí-lo por outro, temos que ajudá-lo com isso. É sobre isso que falaremos:

Como ocultar o menu móvel do WordPress usando código

A primeira coisa que gostaríamos de mostrar a você é como ocultar um menu ou partes de um menu em dispositivos móveis usando CSS. Isso exigirá um pouco de codificação de sua parte e também o uso da ferramenta de inspeção, mas não é grande coisa de qualquer maneira.

Para ocultar todo o menu, você precisa descobrir o identificador e a classe CSS do seu menu. Isso pode variar de tema para tema, que é onde a ferramenta de inspeção é útil. Basta clicar com o botão direito em qualquer lugar do seu site, desde que você não tenha desativado o clique com o botão direito, e selecione Inspecionar no menu suspenso. Você também pode pressionar o botão F12.

Agora, tendo ativado a ferramenta de inspeção, você pode rolar para baixo no Elementos guia para destacar os elementos na visualização principal. Você pode encontrar facilmente o menu na versão desktop do seu site, mas não é esse o que você precisa ocultar. Em vez disso, você precisa redimensionar a tela para mostrar a visão mais estreita, arrastando a borda vertical da janela. A classe que queremos ocultar na versão móvel do nosso site é chamada menu-botão-recipiente. Observe que em seu site a classe pode ter nomes diferentes.

Para ocultar esta versão específica do menu da versão móvel do site, você precisa adicionar alguns CSS ao seu site. Navegar para Aparência / Personalizar no painel do WordPress e selecione o CSS Adicional seção e o Móvel versão do site. Você pode alternar entre as diferentes versões do seu site no menu inferior esquerdo. Clique no ícone móvel para editar a versão móvel do site.

O código que você precisa inserir no CSS Adicional campo é:

.menu-button-container {
display:none;
}

Depois de fazer isso, você pode ver que o menu desapareceu da janela de visualização. Para salvar suas alterações, você precisa clicar no Publicar botão, e seu menu móvel não aparecerá na versão móvel do seu site.

Claro, você precisará substituir o menu-botão-recipiente com a classe do seu próprio menu móvel.

Como ocultar elementos do menu móvel do WordPress usando código

Mas e se você não quiser ocultar o menu inteiro? Ocultar apenas alguns elementos o tornará mais curto e mais facilmente navegável para os visitantes que usam o dispositivo móvel.

Para ocultar qualquer elemento, você precisará, novamente, adicionar algum CSS ao menu. Primeiro, navegue para Aparência / Menus no painel do WordPress, clique em Opções de tela no lado superior direito, e verifique Classes CSS.

Agora, digamos que queremos esconder o Equipe elemento do nosso menu principal para usuários móveis. Clicando nele agora, você verá que habilitou um campo rotulado Classes CSS (opcional). Aqui, você pode atribuir uma classe a um elemento de menu. Vamos atribuir a classe esconder no celular ao Equipe elemento e Salve  nosso menu.

Você pode nomear suas classes como quiser, dentro destas regras de nomenclatura: uma classe deve começar com uma letra (maiúscula ou minúscula) e usar letras, dígitos, sublinhados e hifens no resto do nome.

Isso simplesmente rotula o Equipe elemento em nosso menu principal como pertencente à classe esconder no celular. Para realmente ocultar todos os elementos dessa classe da versão móvel do site, precisamos adicionar – adivinhou – algum código ao nosso site. Navegar para Aparência / Personalizar no painel do WordPress e selecione o CSS Adicional seção.

O código que você precisa adicionar ao CSS Adicional campo é este:

@media (max-width: 767px){
.hide-on-mobile{
display: none !important;
}
}

Este código esconde todos os elementos pertencentes ao esconder no celular classe quando a largura do site é de 767 pixels ou menos. Claro, você pode fazer isso para qualquer elemento individual do menu, ocultando ou mostrando diferentes elementos para diferentes dispositivos.

Como ocultar o menu móvel do WordPress usando um plug-in

Como é muito comum, se um tema não funcionar exatamente do jeito que você gosta, você pode complementá-lo com um plugin. O plugin que usaremos é Menu WP Mobile. Lembre-se, porém, de que existem vários plug-ins de menu responsivos para você escolher.

Depois de instalar e ativar o plug-in, você será levado automaticamente a uma tela solicitando que aceite alguns recursos de segurança adicionais do mesmo desenvolvedor. Vamos ignorá-los.

Você será levado para a tela de configuração do plugin. A primeira seção acima é o Opções Principais seção. Lá, você simplesmente precisa desativar o menu esquerdo e direito. No Configurações de visibilidade mais abaixo, você precisa alternar o Habilitar apenas em dispositivos móveis alternar para Sobre.

Mais abaixo, no Esconder o Menu do Tema Original seção, você precisa ter certeza de que todos os elementos do menu estão marcados para serem ocultados pelo plugin.

Dependendo do tema que você está usando, pode ser necessário usar o Encontre o elemento pesquise caso um dos elementos do seu menu tenha um nome não convencional e o plugin não o reconheça. Isso pode variar de tema para tema, então não podemos ser mais específicos, mas a maioria dos temas usará elementos convencionais.

Uma vez feito, Salvar alteraçõese visite seu site a partir de um dispositivo móvel. Você verá que o menu não aparece.

Mas e se você quiser apenas uma versão diferente de um menu para dispositivos móveis? Na verdade, essa é a função principal deste plugin. Nesse caso, você precisará criar um menu para a versão móvel do seu site. Não entraremos em detalhes sobre a criação de um novo menu aqui. Se precisar de ajuda para criar um menu, temos um tutorial completo sobre como adicionar menus no WordPress. Lembre-se de verificar Menu esquerdo do celular ou Menu móvel direito ao criar um menu móvel.

No entanto, usaremos este espaço para dizer que um menu móvel deve ser o mais reduzido possível, até o básico. Aconselhamos você a usar apenas as opções de navegação básicas para a versão móvel do seu menu. É mais provável que seus usuários móveis usem uma barra de pesquisa se estiverem atrás de uma página específica.

Depois de criar e salvar um menu, navegue até Opções do menu móvel no painel do WordPress.

Aqui no Opções Principais seção, você precisa selecionar o menu do seu celular para exibição. Nós nomeamos o nosso Menu móvel, mas você pode nomear o seu como quiser. Você também pode alternar para habilitar os menus esquerdo e direito. Lembre-se de que você precisará ter a posição de exibição do menu verificada na tela de criação do menu.

Em seguida, você tem o Opções de Visibilidade seção. Eles governam as condições sob as quais o menu móvel aparece. Para mostrar o menu do seu celular, você precisa torná-lo visível para dispositivos móveis.

Em seguida, no Esconder o Menu do Tema Original seção, você pode escolher quais elementos de menu ocultar da versão móvel. Esta é uma forma eficaz de criar uma versão móvel de um menu, se você souber como lidar com sua estrutura. Os elementos de menu mais comuns são verificados para ocultação por padrão.

Mais abaixo estão algumas opções diversas e avançadas que permitem personalizar ainda mais o menu do seu celular. Não entraremos em detalhes aqui, pois eles não são relevantes para mostrar ou ocultar menus móveis.

Você vai precisar Salvar alterações assim que terminar de configurar seu menu.

E o nosso menu mobile, com apenas o básico, aparece na versão mobile do nosso site. Seu menu móvel original está oculto e um novo está em seu lugar.

Para concluir

Como mostramos, criar, mostrar e ocultar menus móveis e criar versões alternativas de menus dá pouco trabalho e existem até plug-ins que podem fazer a maior parte do trabalho para você. Seja qual for o tipo de site que você opera, é provável que uma grande parte dos visitantes esteja usando dispositivos móveis. Embora criar uma versão alternativa completa do seu site possa ser muito complicado para você, fazer um pequeno ajuste não é problema. Não há razão, então, para não fazer isso.