Gostaria de criar um menu responsivo no seu blog WordPress?

Os usuários de celular superam os de desktop atualmente. Adicionar um menu móvel responsivo torna mais fácil para os usuários navegar em seu site.

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

Mas antes, se você nunca instalou o WordPress, descubra Quantos plugins instalar no WordPress. et Como encontrar, instalar e ativar um tema WordPress em seu blog 

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

Como criar um menu de wordpress móvel responsivo

Aqui, será uma questão de 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: 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.

crie um menu responsivo


A primeira coisa que você precisa fazer é instalar e ativar o Plug-in de menu responsivo do WordPress . 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á direcionado para a página de configurações do WordPress Plugin.

Plug-in de menu do painel responsivo para WordPress

Você deve primeiro inserir o tamanho a partir do qual o menu móvel deve aparecer. O padrão é 800px, 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 o menu que não responde em telas pequenas.

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

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 modificar o comportamento e a aparência de seu menu responsivo. Você pode explorar essas opções na página de configurações do plug-in e ajustá-las conforme necessário.

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

Um dos métodos mais comuns usados ​​para exibir um menu em telas de dispositivos 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.

Primeiro você precisa 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 WordPress atual. Se o diretório do seu tema não tiver uma pasta js, você precisará criar uma.

Depois de fazer o upload do arquivo JavaScript, a próxima etapa é certificar-se de que seu site WordPress carregará os arquivos JavaScript. Você precisará adicionar o seguinte código ao " 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 precisamos adicionar o menu de navegação em nosso tema WordPress. Normalmente o menu de navegação é adicionado no “ header.php Do seu tema WordPress.

<nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle">Menu</button>
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>

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

A última etapa é adicionar algum CSS para que nosso menu use as classes CSS corretas para alternar quando visualizado em dispositivos móveis.

/* Navigation Menu */
.main-navigation {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    text-align: center;
}
.main-navigation li {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 1.42857143;
}
.main-navigation a {
    color: #5e5e5e;
}
.main-navigation a:hover,
.main-navigation a:focus {
    color: #21759b;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
    display: none;
}

.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
    display: inline-block;
}

// CSS to use on mobile devices

@media screen and (min-width: 600px) {

.main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
        border-bottom: 1px solid #ededed;
        border-top: 1px solid #ededed;
        display: inline-block !important;
        text-align: left;
        width: 100%;
    }
    .main-navigation ul {
        margin: 0;
        text-indent: 0;
    }
    .main-navigation li a,
    .main-navigation li {
        display: inline-block;
        text-decoration: none;
    }
    .main-navigation li a {
        border-bottom: 0;
        color: #6a6a6a;
        line-height: 3.692307692;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .main-navigation li a:hover,
    .main-navigation li a:focus {
        color: #000;
    }
    .main-navigation li {
        margin: 0 40px 0 0;
        margin: 0 2.857142857rem 0 0;
        position: relative;
    }
    .main-navigation li ul {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        z-index: 1;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
    }
    .main-navigation li ul ul {
        top: 0;
        left: 100%;
    }
    .main-navigation ul li:hover > ul,
    .main-navigation ul li:focus > ul,
    .main-navigation .focus > ul {
        border-left: 0;
        clip: inherit;
        overflow: inherit;
        height: inherit;
        width: inherit;
    }
    .main-navigation li ul li a {
        background: #efefef;
        border-bottom: 1px solid #ededed;
        display: block;
        font-size: 11px;
        font-size: 0.785714286rem;
        line-height: 2.181818182;
        padding: 8px 10px;
        padding: 0.571428571rem 0.714285714rem;
        width: 180px;
        width: 12.85714286rem;
        white-space: normal;
    }
    .main-navigation li ul li a:hover,
    .main-navigation li ul li a:focus {
        background: #e3e3e3;
        color: #444;
    }
    .main-navigation .current-menu-item > a,
    .main-navigation .current-menu-ancestor > a,
    .main-navigation .current_page_item > a,
    .main-navigation .current_page_ancestor > a {
        color: #636363;
        font-weight: bold;
    }
    .menu-toggle {
        display: none;
    }
    
    }

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

Balançar-menu do wordpress-tutorial

Descubra também alguns plugins premium do WordPress  

Você pode usar outro WordPress plugins para dar uma aparência moderna e otimizar o manuseio do seu blog ou site.

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

1. UberMenu

UberMenu é um WordPress Plugin dedicado a criar um megamenu altamente personalizável, responsivo e acessível ao usuário. Fica funcional após a sua instalação, sem necessidade de qualquer configuração particular.

Ubermenu Wordpress Mega Menu Plugin

É um plugin fácil de usar, mas poderoso o suficiente para criar mega layouts de menu altamente personalizáveis ​​e criativos.

Veja também nosso 9 plugins do WordPress para criar tabelas de preços em um blog

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

Descarregar | Demo | hospedagem na web

2. LMM

Liquida Mega Menu também chamado de LMM é um WordPress Plugin projetado para usuários e desenvolvedores. Possui uma interface simples e intuitiva, integrada ao dashboard do WP, permitindo criar e personalizar uma quantidade ilimitada de mega menus, sem nenhum conhecimento de programação.

Mega menu responsivo do Lmm wordpress baseado em bootstrap

Ele vem com dezenas de recursos, seja para usuários regulares ou avançados. Como funcionalidades oferece entre outras: integração automática e manual, suporte para multisite, cuidando de temas infantis, estilo completamente personalizável para menus, locais de menu personalizáveis, menu fixo, etc…

Descarregar | Demo | hospedagem na web

3. 8Degree Fly Menu

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

Plugin de menu de tela responsivo de 8 graus para Wordpress

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.

Leia também: 10 plugins do WordPress para otimizar barras laterais e cabeçalhos

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.

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

Então ! É isso para este tutorial, espero que ele permita que você crie um menu para usuários móveis. sinta-se livre para 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 seu Comentários e sugestões na seção dedicada.

...