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]

Deseja criar um menu móvel responsivo no seu blog WordPress?

Atualmente, os usuários móveis superam os usuários de desktop. A adição de um menu responsivo para celular facilita a navegação dos usuários no site.

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

Mas antes, se você nunca instalou o WordPress, descubra Como instalar um blog WordPress passos 7 et Como encontrar, instalar e ativar um tema WordPress em seu blog

Então, voltemos ao porquê de estarmos aqui.

Isso será aprofundado, mostrando a você o método com um plug-in para iniciantes e o método de codificação para usuários avançados.

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

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

Neste método, criaremos 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 plug-in, o plug-in adicionará um novo item no menu, intitulado " menu de Responsive ". Ao clicar nele, você será levado à página de configurações do plugin.

Menu ágil, wordpress

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

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

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

Não se 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 Plugins WordPress 10 para criar menus no seu blog

Agora você pode visitar seu site e redimensionar a tela do 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 seu 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 um menu móvel manualmente

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

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

Em um dos 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 este 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.

Em seguida, você precisa abrir um cliente FTP para baixar esse arquivo no local "/ wp-content / themes / your-theme / js /" no site do WordPress.

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

Após o download do arquivo JavaScript, a próxima etapa é 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>

Assumimos que o local do menu definido pelo seu tema WordPress seja chamado " primário ". Caso contrário, use o local definido pelo seu tema WordPress.

A última etapa é adicionar CSS para que nosso menu use as classes CSS corretas para alternar quando exibidas 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á invertendo.

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 também alguns plugins premium do WordPress

Você pode usar outros plugins do WordPress para dar uma aparência moderna e otimizar a aderência do seu blog ou site.

Oferecemos a você aqui alguns plugins premium do WordPress que ajudarão você a fazer isso.

1. UberMenu

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

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

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

Descarregar | Demo | hospedagem na web

2. LMM

O Liquida Mega Menu ainda chamado LMM é um plugin do WordPress projetado para usuários e desenvolvedores. Ele possui uma interface simples e intuitiva, integrada ao painel do WP, permitindo criar e personalizar 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 recursos, oferece entre outros: integração automática e manual, suporte para vários sites, suporte para temas infantis, estilo totalmente personalizável para menus, localizações personalizáveis ​​de menu, menu fixo, etc ...

Descarregar | Demo | hospedagem na web

3. 8Degree Fly Menu

O 8Degree Fly Menu é um plugin premium do WordPress que permite adicionar um menu de tela no seu site, para dar uma aparência que destaca e simplifica 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 menu, um cabeçalho de pseudo-agrupamento e uma descrição longa.

Ele também vem com um editor WYSIWYG para ajudá-lo a entender sua descrição longa de uma maneira fácil de usar.Com este editor, você também pode usar códigos de acesso.

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]

Descarregar | Demo | hospedagem na web

Outros recursos recomendados

Também convidamos você a consultar os recursos abaixo para aprofundar o controle e controle do seu site e blog.

Conclusão

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

No entanto, você também poderá consultar nossos Ressources, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress.

Mas enquanto isso, conte-nos sobre o seu Comentários e sugestões na seção dedicada.

...

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". Encontrei a folha de estilos css, mas 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.

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