¿Te gustaría crear un menú receptivo en tu blog de WordPress?
Los usuarios móviles superan en número a los usuarios de escritorio en estos días. Agregar un menú móvil receptivo facilita a los usuarios navegar por su sitio web.
En este tutorial, le mostraremos cómo crear fácilmente un menú receptivo en WordPress.
Pero antes, si nunca has instalado WordPress, descubre Cuántos complementos instalar en WordPress. et ¿Cómo encontrar, instalar y activar un tema de WordPress en tu blog
Luego de vuelta a por qué estamos aquí.
Aquí será cuestión de profundizar mostrándote tanto el método con plugin para principiantes como el método de codificación para usuarios avanzados.
Primer método: crear un menú móvil con un complemento de WordPress
Este método es más fácil y recomendado para principiantes porque no requiere ninguna habilidad especial de codificación.
En este método, crearemos un menú (con un icono de hamburguesa) que se desliza en la pantalla del móvil.
Lo primero que debe hacer es instalar y activar el Complemento de menú receptivo de WordPress . Para más detalles, consulte nuestra guía sobre cómo instalar un complemento de WordPress .
Después de activar el complemento, el complemento agregará un nuevo elemento en el menú, titulado " Menú sensible ". Al hacer clic en él, accederá a la página de configuración del Plugin de WordPress.
Primero debe ingresar el tamaño desde el cual debe aparecer el menú móvil. El valor predeterminado es 800px, que debería funcionar para la mayoría de los sitios web.
Después de eso, debe seleccionar el menú que desea usar en el móvil.
La última opción en la pantalla le permite proporcionar una clase CSS para su menú. Esto permitirá que el complemento oculte su menú que no responde en pantallas pequeñas.
No olvides hacer clic en « Las opciones de actualización Para guardar su configuración.
También te sugerimos que descubras nuestro Complementos de 10 WordPress para crear menús en tu blog
Ahora puede visitar su sitio web y cambiar el tamaño de la pantalla de su navegador para ver el menú de respuesta en acción.
El complemento « Menú sensible »Ofrece muchas otras opciones que le permiten modificar el comportamiento y la apariencia de su menú de respuesta. Puede explorar estas opciones en la página de configuración del complemento y ajustarlas según sea necesario.
Método 2: Cómo agregar un menú móvil manualmente
Uno de los métodos más comunes que se utilizan para mostrar un menú en las pantallas de los dispositivos móviles es utilizar el apalancamiento.
Este método requiere que agregue código personalizado a sus archivos de WordPress.
En uno de nuestros tutoriales anteriores, te mostramos cómo crear un complemento de WordPress.
Primero debe abrir un editor de texto como el Bloc de notas y pegar este código.
(function () {nav var = document.getElementById ('site-navigation'), button, menu; if (! nav) {return;} button = nav.getElementsByTagName ('button') [0]; menu = nav. getElementsByTagName ('ul') [0]; if (! button) {return;} // Ocultar botón si falta el menú o está vacío si (! menu ||! menu.childNodes.length) {button.style.display = 'none'; return;} button.onclick = function () {if (-1 === menu.className.indexOf ('nav-menu')) {menu.className = 'nav-menu';} if (- 1! == button.className.indexOf ('toggled-on')) {button.className = button.className.replace ('toggled-on', ''); menu.className = menu.className.replace ('toggled -on ',' ');} else {button.className + =' toggled-on '; menu.className + =' toggled-on ';}};}) (jQuery);
Ahora debe guardar este archivo con el nombre " navigation.js En tu escritorio
Luego debe abrir un cliente FTP para descargar este archivo a la ubicación "/ wp-content / themes / your-theme / js /" en su sitio web de WordPress.
Reemplace la expresión " Su tema » con el nombre de la carpeta de tu tema de WordPress Actual. Si su directorio de temas no tiene una carpeta js, entonces necesita crear una.
Después de cargar el archivo JavaScript, el siguiente paso es asegurarse de que su sitio web de WordPress cargue los archivos JavaScript. Deberá agregar el siguiente código al " functions.php " de su tema de WordPress.
Descubre algo mas ¿Qué puedes hacer con el archivo functions.php?
wp_enqueue_script ( 'bpc_togglemenu' get_template_directory_uri () '/js/navigation.js', array (' jquery '), 20160909', true.);
Ahora necesitamos agregar el menú de navegación en nuestro tema de WordPress. Por lo general, el menú de navegación se agrega en el " header.php De tu tema de 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>
Suponemos que la ubicación del menú definida por su tema de WordPress se llama “ primario ". De lo contrario, use la ubicación definida por su tema de WordPress.
El último paso es agregar algo de CSS para que nuestro menú use las clases de CSS adecuadas para cambiar cuando se ve en dispositivos móviles.
/* 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;
}
}
Ahora puede visitar su sitio web y cambiar el tamaño de la pantalla de su navegador para ver si su menú sensible cambia.
Descubre también algunos complementos premium de WordPress
Puedes usar otros plugins de WordPress para dar una apariencia moderna y optimizar el manejo de tu blog o sitio web.
Aquí le ofrecemos algunos complementos premium de WordPress que lo ayudarán a hacerlo.
1. UberMenu
UberMenu es un Plugin de WordPress dedicado a crear un megamenú altamente personalizable, receptivo y accesible para el usuario. Es funcional tras su instalación, sin necesidad de ninguna configuración particular.
Es un complemento fácil de usar, pero lo suficientemente potente como para crear diseños de megamenús altamente personalizables y creativos.
Vea también nuestro 9 plugins de WordPress para crear cuadrículas de precios en un blog
Encontrarás entre otros: 3 plantillas de menú, diseño totalmente responsive, compatibilidad con dispositivos móviles (iPhone, iPad, Android), soporte táctil, etc ...
Descargar | Demo | alojamiento web
2. LMM
Liquida Mega Menu también llamado LMM es un Plugin de WordPress Diseñado para usuarios y desarrolladores. Tiene una interfaz sencilla e intuitiva, integrada en el panel de WP, que te permite crear y personalizar una cantidad ilimitada de mega menús, sin necesidad de conocimientos de programación.
Viene con docenas de funciones, ya sea para usuarios regulares o avanzados. Como funcionalidades, ofrece entre otras: integración automática y manual, soporte para multisitio, cuidando los temas infantiles, estilo completamente personalizable para menús, ubicaciones de menú personalizables, menú fijo, etc.
Descargar | Demo | alojamiento web
3. Menú 8Degree Fly
8Degree Fly Menu es un complemento premium de WordPress que le permite agregar un menú de lienzo en su sitio web, para darle un aspecto que resalte y fácilmente su información. Utiliza la función de menú predeterminada de WordPress para crear sus menús.
Podrá agregar elementos adicionales a los elementos de menú predeterminados, como iconos, lemas de menú, un encabezado de pseudogrupación y una descripción larga.
Lea también: 10 complementos de WordPress para optimizar barras laterales y encabezados adhesivos
También viene con un editor WYSIWYG para ayudarlo a comprender su descripción larga de una manera fácil de usar. Con este editor también puede usar códigos cortos.
Descargar | Demo | alojamiento web
Otros recursos recomendados
También lo invitamos a consultar los recursos a continuación para avanzar en el control y agarre de su sitio web y blog.
- Cómo cambiar el nombre de imágenes en un blog de WordPress
- Cómo crear un menú flotante en WordPress
- Los complementos de 8 WordPress para crear un megamenú en tu blog
- Algunos consejos para crear menús modernos para tu blog
- Complementos de 6 WordPress para administrar categorías y subcategorías en tu blog
Conclusión
Listo ! Eso es todo por este tutorial, espero que le permita crear un menú para usuarios móviles. no dude en comparte el consejo con tus amigos en tus redes sociales.
Sin embargo, también podrá consultar nuestra Recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress.
Pero, mientras tanto, cuéntenos sobre su comentarios y sugerencias en la sección dedicada.
...
¡Hola
gracias por tu información
Parece que no puedo encontrar "una clase CSS para su menú". Encontré la hoja de estilo CSS pero no sé qué copiar y pegar
gracias de antemano por su ayuda
buen fin de semana
michel
Hola,
¿Tienes una captura de pantalla?