Cómo crear un menú de navegación receptivo en WordPress
Publicado: 2021-07-22El camino para crear un menú de navegación receptivo en WordPress está abierto. Hay innumerables formas de hacerlo gracias a la flexibilidad que ofrece WordPress.
Hoy, le mostraré cómo crear un menú de navegación ágil y con capacidad de respuesta. Lean porque vamos a lograr todo esto en menos de 8 kilobytes, y mean porque será un menú de navegación increíblemente eficiente. Simplemente vamos a reflejar su menú de navegación actual para que no tenga que mantener dos diferentes. Al matar dos pájaros de un tiro, crearemos un menú para gobernarlos a todos.
Antes de comenzar, le sugerimos que tenga algunos conocimientos básicos de desarrollo front-end. (Solo requerimos familiaridad y no competencia, así que no se asuste). El conocimiento básico de HTML, CSS, jQuery y WordPress sería ideal. Este es un tutorial para principiantes e intermedios, ya que implica la modificación de los archivos de temas de WordPress.
También necesitará acceso a los siguientes archivos de temas de WordPress:
-
functions.php -
header.php -
footer.php -
Style.css
Antes de realizar cualquier modificación, asegúrese de ejecutar una copia de seguridad de su sitio o pruebe primero los cambios en un entorno local. Siempre desea tener una forma de volver a sus archivos originales.
Vamos a usar bigSlide.js, un pequeño complemento de jQuery para crear paneles deslizantes fuera de la pantalla. En el sitio web del complemento, se describe como "un complemento jQuery diminuto (~ 1kb comprimido) para crear navegación de panel deslizante fuera de la pantalla". Esto está en consonancia con nuestro objetivo de navegación ágil y sensible.
Pongámonos a trabajar.
1. Descargue la última versión comprimida de bigSlide.js. Copie el archivo en la carpeta /js de su tema.
2. Abra functions.php en su editor de código preferido. Busque wp_enqueue_script . Es probable que vea varias instancias, ya que wp_enqueue_script es la forma estándar de agregar scripts a WordPress.
3. Justo después de la última instancia de wp_enqueue_script , agregue el siguiente fragmento y guárdelo.
wp_enqueue_script( 'my-responive-menu', get_template_directory_uri() . '/js/bigSlide.min.js', array(), '20161214', true ); 4. Abra header.php y agregue la push de clase al primer div justo después de la etiqueta del cuerpo. Esta sección normalmente se ve así:
<body <?php body_class(); ?>><div class="hfeed site">.Entonces, después de agregar, deberías terminar con:
<div class="hfeed site push">. 5. Mientras aún está dentro de header.php busque site-navigation . Esto será una clase o una identificación dependiendo de su tema. En la mayoría de los temas de WordPress, debería verse así:
&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. Agregue el siguiente fragmento de código justo antes de </nav> . Deberías terminar con esto:
&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;Aquí estamos creando un ícono de hamburguesa que se usará para activar el menú móvil.
7. Abra footer.php y busque <?php wp_footer(); ?> <?php wp_footer(); ?> . Justo después de esta línea, agregue el siguiente fragmento:
&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;Básicamente, estamos creando un menú de navegación duplicado oculto en el pie de página.
8. Finalmente, abra style.css y justo después de la última línea, agregue el siguiente fragmento 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;} }Aquí he usado un esquema de colores oscuros, pero siéntete libre de cambiar los colores para adaptarlos a tus necesidades.
Este enfoque funcionará en casi todos los temas estándar de WordPress. Pero, debido a los diferentes casos de uso y diseños de encabezado que existen, es posible que deba hacer algunos ajustes.
En última instancia, los fundamentos siguen siendo los mismos. La razón es que en un tamaño de pantalla de 900 px o menos, ocultará la navegación principal predeterminada y mostrará el icono de la hamburguesa en su lugar.
Al hacer clic o tocar el ícono de la hamburguesa, el menú que duplicamos en el pie de página se abre como un panel lateral similar a una aplicación.
Si te quedas atascado, deja un comentario a continuación. Estaré más que feliz de ayudar. ¡Feliz codificación!