Ir para o conteúdo principal

Como criar um menu sensível para WordPress móvel

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Você gostaria de criar um menu móvel responsivo em seu blog WordPress?

Usuários móveis superam em número os usuários de desktops hoje em dia. A adição de um menu responsivo para dispositivos móveis facilita a navegação dos usuários no seu site.

Se você ainda não instalou um site no WordPress, sugerimos que você Como instalar um blog WordPress em etapas 7.

Neste tutorial, mostraremos como criar facilmente um menu responsivo no WordPress.

Isso vai aprofundar, mostrando a você o método com um plugin para iniciantes e o método de codificação para usuários avançados.

Primeiro método: criar um menu móvel com um plugin do WordPress

Este método é mais fácil e recomendado para iniciantes, porque não requer nenhuma habilidade especial na codificação.

Neste método, vamos criar um menu (com um ícone de hambúrguer) que desliza na tela do celular.

demonstração de menu-anfitriões

A primeira coisa que você precisa fazer é instalar e ativar o Plugin do WordPress Responsive Menu . Para mais detalhes, confira nosso guia sobre como instalar um plugin do WordPress .

Depois de ativar o plugin, o plugin irá adicionar um novo item no menu, intitulado " menu de Responsive ". Clicando nele, você será levado à página de configurações do plugin.

Menu ágil, wordpress

Você deve primeiro inserir o tamanho do qual o menu móvel será exibido. O valor padrão é 800 px, que deve funcionar para a maioria dos sites.

Depois disso, você deve selecionar o menu que deseja usar no celular.

A última opção na tela permite que você forneça uma classe CSS para o seu menu. Isso permitirá que o plug-in oculte seu menu não responsivo em telas menores.

Não esqueça de clicar em « update Options Para salvar suas configurações.

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

Sugerimos também que você descubra nossa 10 WordPress plugins para criar menus no seu blog

Agora você pode visitar seu website e redimensionar a tela do seu navegador para ver o menu responsivo em ação.

Site-em-ação-menu sensível-móvel

O plugin « menu de Responsive Oferece muitas outras opções que permitem alterar o comportamento e a aparência do menu responsivo. Você pode explorar essas opções na página de configurações do plug-in e ajustar conforme necessário.

Método 2: Como adicionar manualmente um menu móvel

Um dos métodos mais usados ​​para exibir um menu em telas de dispositivos móveis é usar a alavancagem.

Este método requer que você adicione um código personalizado aos seus arquivos do WordPress.

Em um de nossos tutoriais anteriores, mostramos a você como criar um plugin para WordPress.

Você deve primeiro abrir um editor de texto como o Bloco de notas e colar esse código.

(Function () {nav = document.getElementById ( 'Site-navegação'), botão, menu de var; if (NAV) {return ;!} Botão = nav.getElementsByTagName ( 'botão') [0] = menu de navegação. getElementsByTagName ( 'ul') [0] se {return;} (botão!) // Ocultar botão se menu é ausente ou vazio if (|| menu de menu.childNodes.length!) = {button.style.display. 'none'; retorno;} button.onclick = function () {if (-1 === menu.className.indexOf (nav-menu de ')) {menu.className = nav-menu de';} if (- ! == 1 button.className.indexOf ( 'ser alternado')) {button.className button.className.replace = ( 'ser alternado', ''); menu.className menu.className.replace = ( 'alternado -on '' ');} else {button.className + =' alternado-on '; menu.className + =' alternado-on ';}};}) (jQuery);

Agora você precisa salvar este arquivo com o nome " Navigation.js Na sua mesa.

Então você precisa abrir um cliente FTP para baixar este arquivo para o local "/ wp-content / themes / your-theme / js /" no seu site WordPress.

Substitua a expressão " your-theme Com o nome da pasta do seu tema atual do WordPress. Se o diretório do seu tema não tiver uma pasta js, você deverá criar uma.

Depois de baixar o arquivo JavaScript, o próximo passo é garantir que o site do WordPress carregue os arquivos JavaScript. Você precisará adicionar o seguinte código ao arquivo functions.php Do seu tema WordPress.

Descubra outra coisa O que você pode fazer com o arquivo functions.php?

 wp_enqueue_script ( 'bpc_togglemenu' get_template_directory_uri () '/js/navigation.js', de matriz (' jquery '), 20160909', verdadeiro.);

Agora temos que adicionar o menu de navegação no nosso tema WordPress. Normalmente, o menu de navegação é adicionado ao arquivo " header.php Do seu tema WordPress.

<nav id = "navegação pelo site" classe = "navegação principal" role = "navegação"> <botão classe = "menu-alternar"> Menu </ button> <? php wp_nav_menu (array ('theme_location' => ' primary ',' menu_class '=>' menu de navegação ')); ?> </ nav>

Presumimos que o local do menu definido pelo seu tema WordPress é chamado " primário ". Se não, use o local definido pelo seu tema WordPress.

O último passo é adicionar CSS para que o nosso menu use as classes CSS certas para alternar quando exibido em dispositivos móveis.

/ * Menu de Navegação * / .main-navigation {margin-top: 24px; margem superior: 1.714285714rem; texto-alinhar: centro; } .main-navigation li {margin-top: 24px; margem superior: 1.714285714rem; tamanho da fonte: 12px; tamanho da fonte: 0.857142857rem; altura da linha: 1.42857143; } .main-navigation a {color: #5e5e5e; } .main-navegação a: hover, .main-navigation a: focus {cor: #21759b; } .main-navegação ul.nav-menu, .main-navegação div.nav-menu> ul {display: none; } .main-navigation ul.nav-menu.toggled-on, .menu-toggle {exibição: inline-block; } // CSS é a utilização de dispositivos móveis @media screen e (min-width: 600px) {ul.nav .main menu de navegação do menu div.nav .main-navegação> ul {border-bottom: solid # 1px ededed; border-top: sólido 1px #ededed; display: inline-block! important; texto-alinhar: esquerda; largura: 100%; } .main-navigation ul {margin: 0; recuo de texto: 0; } .main-navegação li a, .main-navegação li {display: inline-block; text-decoration: nenhum; } .main-navigation li a {borda inferior: 0; cor: #6a6a6a; altura da linha: 3.692307692; text-transform: maiúscula; espaço branco: nowrap; } .main-navigation li a: hover, .main-navigation li a: foco {cor: #000; } .main-navigation li {margem: 0 40px 0 0; margem: 0 2.857142857rem 0 0; posição: relativa; } .main-navegação li ul {margin: 0; preenchimento: 0; posição: absoluta; top: 100%; z-index: 1; height: 1px; largura: 1px; estouro: oculto; clipe: rect (1px, 1px, 1px, 1px); } .main-navigation li ul ul {início: 0; esquerda: 100%; } .main-navigation ul li: hover> ul, .main-navigation ul li: foco> ul, .main-navegação .focus> ul {borda esquerda: 0; clipe: herdar; estouro: herde; altura: herdar; largura: herdam; } .main-navegação li ul li {background: #efefef; border-bottom: 1px sólido #ededed; display: bloco; tamanho da fonte: 11px; tamanho da fonte: 0.785714286rem; altura da linha: 2.181818182; preenchimento: 8px 10px; preenchimento: 0.571428571rem 0.714285714rem; largura: 180px; largura: 12.85714286rem; espaço-branco: normal; } .main-navigation li li li: hover, .main-navigation li li li: foco {segundo plano: #e3e3e3; cor: #444; } .Current-item-menu de navegação .main> tem .Current-antepassado-menu de navegação .main> tem .main-navegação .current_page_item> tem-navegação .main .current_page_ancestor> a {color: #636363; font-weight: negrito; } .menu-toggle {display: nenhum; }}

Agora você pode visitar seu site e redimensionar a tela do navegador para ver se o menu responsivo está mudando.

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

Balançar-menu do wordpress-tutorial

Descubra outros plugins WordPress que também podem ajudá-lo a criar menus responsivos em seu site ou blog WordPress.

1. UberMenu

O UberMenu é um plugin WordPress dedicado à criação de um megamenu altamente personalizável, responsivo e acessível aos usuários. É funcional após a instalação, sem qualquer configuração especial.

É um plugin fácil de usar, mas poderoso o suficiente para criar configurações altamente personalizáveis ​​e criativas de mega-menu.

Você encontrará, entre outros: modelos de menu 3, layout totalmente responsivo, compatibilidade com dispositivos móveis (iPhone, iPad, Android), suporte ao toque, etc ...

Download | Demonstração | Web Hosting

2. LMM

Liquida Mega Menu ainda chamado LMM é um plugin para WordPress projetado para usuários e desenvolvedores. Ele possui uma interface simples e intuitiva, incorporada ao painel do WP, permitindo que você crie e personalize uma quantidade ilimitada de mega menus, sem nenhuma habilidade de programação.

Ele vem com dezenas de recursos, seja para usuários regulares ou avançados. Como características, oferece entre outros: integração automática e manual, suporte multi-site, suporte para temas infantis, estilo completamente personalizável para menus, localizações de menus personalizáveis, o menu pegajoso, etc ...

Download | Demonstração | Web Hosting

3. 8Degree Fly Menu

8Degree Fly Menu é um plugin WordPress premium que permite que você adicione um menu de tela em seu site, para dar uma aparência que destaca e simples suas informações. Ele usa a função de menu padrão do WordPress para criar seus menus.

Você poderá adicionar elementos adicionais aos itens de menu padrão, como ícones, slogans de menus, um cabeçalho de pseudo-agrupamento e uma descrição longa.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

Ele também vem com um editor WYSIWYG para ajudá-lo a entender sua longa descrição de maneira amigável ao usuário.Com esse editor, você também pode usar códigos de acesso.

Download | Demonstração | Web Hosting

Outros recursos recomendados

Também convidamos você a consultar os recursos abaixo para ir mais longe na aderência e controle do seu site e blog.

Conclusão

É isso! É isso para este tutorial, espero que ele permita que você crie um menu para usuários móveis. Não hesite em compartilhe a dica com seus amigos em suas redes sociais.

Se você tiver alguma sugestão ou comentário, será bem-vindo. Também convidamos você a consultar nosso recursos se você é um blogueiro iniciante.

...

Este artigo contém comentários 2
  1. Olá

    obrigado pela sua informação

    Não consigo encontrar "uma classe CSS para o seu menu". Eu encontrei o CSS folha de estilo, mas eu não sei o que copiar e colar

    agradeço antecipadamente por sua ajuda

    bom fim de semana

    michel

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

Cool WordPress temas que eu encontrei em
E há mais temas e modelos 50 000 para você escolher!

De volta ao topo
5 ações
ação4
chilrear
Enregistrer1
Whatsapp