Como criar um menu de navegação responsivo no WordPress
Publicados: 2021-07-22O caminho para criar um menu de navegação responsivo no WordPress é aberto. Existem inúmeras maneiras de fazer isso graças à flexibilidade oferecida pelo WordPress.
Hoje, mostrarei como criar um menu de navegação responsivo e enxuto. Lean porque vamos conseguir tudo isso em menos de 8 kilobytes, e significa porque será um menu de navegação incrivelmente eficiente. Vamos simplesmente espelhar seu menu de navegação atual para que você não precise manter dois menus diferentes. Ao matar dois coelhos com uma cajadada só, criaremos um menu para governar todos eles.
Antes de começarmos, sugerimos que você tenha algum conhecimento básico de desenvolvimento front-end. (Nós só exigimos familiaridade e não proficiência, então, por favor, não entre em pânico.) Conhecimento básico de HTML, CSS, jQuery e WordPress seria o ideal. Este é um tutorial do iniciante ao intermediário, pois envolve a modificação dos arquivos de tema do WordPress.
Você também precisará acessar os seguintes arquivos de tema do WordPress:
-
functions.php -
header.php -
footer.php -
Style.css
Antes de fazer qualquer modificação, certifique-se de executar um backup do seu site ou testar as alterações em um ambiente local primeiro. Você sempre quer ter uma maneira de reverter para seus arquivos originais.
Vamos usar bigSlide.js, um pequeno plugin jQuery para criar painéis de slides fora da tela. No site do plug-in, ele é descrito como “um plug-in jQuery minúsculo (~ 1kb compactado) para criar navegação de painel de slides fora da tela”. Isso está de acordo com nossa meta de navegação responsiva enxuta e média.
Vamos começar a trabalhar.
1. Baixe a versão compactada mais recente do bigSlide.js. Copie o arquivo para a pasta /js do seu tema.
2. Abra functions.php em seu editor de código preferido. Procure wp_enqueue_script . Você provavelmente verá várias instâncias, pois wp_enqueue_script é a maneira padrão de adicionar scripts ao WordPress.
3. Logo após a última instância de wp_enqueue_script , inclua o trecho a seguir e salve.
wp_enqueue_script( 'my-responive-menu', get_template_directory_uri() . '/js/bigSlide.min.js', array(), '20161214', true ); 4. Abra header.php e adicione a classe push ao primeiro div logo após a tag body. Esta seção normalmente se parece com isso:
<body <?php body_class(); ?>><div class="hfeed site">.Então, depois de adicionar, você deve terminar com:
<div class="hfeed site push">. 5. Ainda dentro do header.php procure por site-navigation . Isso será uma classe ou um id, dependendo do seu tema. Na maioria dos temas do WordPress, deve ser algo assim:
&amp;amp;amp;amp;amp;amp;lt;nav class="site-navigation primary-navigation" role="navigation"&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;?php wp_nav_menu( array( 'theme_location' =&amp;amp;amp;amp;amp;amp;gt; 'primary', 'menu_class' =&amp;amp;amp;amp;amp;amp;gt; 'nav-menu', 'menu_id' =&amp;amp;amp;amp;amp;amp;gt; 'primary-menu' ) ); ?&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;/nav&amp;amp;amp;amp;amp;amp;gt; 6. Adicione o seguinte trecho antes </nav> . Você deve terminar com isso:
&amp;amp;amp;amp;amp;amp;lt;nav class="site-navigation primary-navigation" role="navigation"&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;?php wp_nav_menu( array( 'theme_location' =&amp;amp;amp;amp;amp;amp;gt; 'primary', 'menu_class' =&amp;amp;amp;amp;amp;amp;gt; 'nav-menu', 'menu_id' =&amp;amp;amp;amp;amp;amp;gt; 'primary-menu' ) ); ?&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;a href="#responsive-menu" class="menu-link"&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;#9776;&amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;/nav&amp;amp;amp;amp;amp;amp;gt;Aqui estamos criando um ícone de hambúrguer que será usado para acionar o menu do celular.
7. Abra footer.php e procure por <?php wp_footer(); ?> <?php wp_footer(); ?> . Logo após esta linha, adicione o seguinte trecho:
&amp;amp;amp;amp;amp;amp;lt;div class="panel mobile-menu"&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;?php wp_nav_menu( array('theme_location' =&amp;amp;amp;amp;amp;amp;gt; 'primary',) );?&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;script&amp;amp;amp;amp;amp;amp;gt; jQuery('.menu-link').bigSlide({ menu: '.mobile-menu', speed: 300, side:"right", easyClose:true});&amp;amp;amp;amp;amp;amp;lt;/script&amp;amp;amp;amp;amp;amp;gt;Basicamente, estamos criando um menu de navegação duplicado oculto no rodapé.
8. Por fim, abra style.css e logo após a última linha, adicione o seguinte trecho de código:
.panel{ position: fixed; right: -15.625em; width: 15.625em; background:#222;} .push{position:relative;} .menu-link{display:none;color:#fff;background:#333;border-radius:4px;padding:2px 12px;float:right;} .mobile-menu a{display:block;color:#fff;padding:10px 15px;} .mobile-menu a:hover{background-color:#555;} .mobile-menu li{border-bottom:1px #444 solid;} @media only screen and (max-width:900px) { #primary-menu{display:none;} .mobile-menu #primary-menu{display:block;} .menu-link{display:inline-block;} }Eu usei um esquema de cores escuras aqui, mas sinta-se à vontade para alterar as cores para atender às suas necessidades.
Essa abordagem funcionará em quase todos os temas padrão do WordPress. Mas, devido aos diferentes casos de uso e layouts de cabeçalho existentes, talvez seja necessário fazer alguns ajustes.
Em última análise, os fundamentos permanecem os mesmos. A lógica é que em um tamanho de tela de 900px ou inferior, você ocultará a navegação principal padrão e mostrará o ícone de hambúrguer.
Ao clicar ou tocar no ícone do hambúrguer, o menu que duplicamos no rodapé se abre como um aplicativo como o painel lateral.
Se acontecer de você ficar preso, por favor, deixe um comentário abaixo. Terei o maior prazer em ajudar. Boa codificação!