Cómo crear un menú de WordPress receptivo listo para dispositivos móviles

¿Desea crear un menú de WordPress sensible para dispositivos móviles? Los usuarios móviles ya han superado a los usuarios de escritorio en muchos sitios web. Agregar un menú móvil adaptable facilita a los usuarios navegar por su sitio web. En este artículo, le mostraremos cómo crear fácilmente un menú de WordPress receptivo listo para dispositivos móviles.


Crear un menú de WordPress adaptable a dispositivos móviles

Este es un tutorial en profundidad. Mostraremos tanto el método de complemento para principiantes (sin codificación) como el método de codificación para nuestros usuarios más avanzados..

Al final de este tutorial, aprenderá cómo crear un menú móvil deslizable, un menú móvil desplegable y un menú móvil de alternar.

Listo? Empecemos.

Video Tutorial

Suscríbase a WPBeginner

Si no le gusta el video o necesita más instrucciones, continúe leyendo.

Método 1: Agregue un menú receptivo en WordPress usando un complemento

Este método es más fácil y recomendado para principiantes ya que no requiere codificación personalizada.

En este método, crearemos un menú de hamburguesas que se desliza en la pantalla del móvil.

Demostración de plugin de menú receptivo

Lo primero que debe hacer es instalar y activar el complemento Responsive Menu. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Tras la activación, el complemento agregará un nuevo elemento de menú etiquetado como “Menú receptivo” a su barra de administración de WordPress. Al hacer clic en él, accederá a la página de configuración del complemento..

Ajustes del menú receptivo

Primero debe ingresar el ancho de la pantalla, en cuyo punto el complemento comenzará a mostrar un menú receptivo. El valor predeterminado es 800 px, que debería funcionar para la mayoría de los sitios web.

Después de eso, debe seleccionar el menú que desea utilizar para su menú receptivo. Si aún no ha creado un menú, puede crear uno visitando Apariencia »Menús. Consulte nuestra guía sobre cómo agregar el menú de navegación en WordPress para obtener instrucciones detalladas.

La última opción en la pantalla es proporcionar una clase CSS para su menú actual que no responde. Esto permitirá que el complemento oculte tu menú que no responde en pantallas más pequeñas.

No olvides hacer clic en el botón “Actualizar opciones” para almacenar tu configuración.

Ahora puede visitar su sitio web y cambiar el tamaño de la pantalla de su navegador para ver el menú receptivo en acción.

Demostración de plugin de menú receptivo

El complemento de menú receptivo viene con muchas otras opciones que le permiten cambiar el comportamiento y la apariencia de su menú receptivo. Puede explorar estas opciones en la página de configuración del complemento y ajustarlas según sea necesario.

Método 2: Agregar un menú de selección desplegable usando un complemento

Otra forma de agregar un menú receptivo es agregando un menú desplegable de selección. Este método no requiere ninguna habilidad de codificación, por lo que se recomienda para principiantes..

Menú de selección receptivo

Lo primero que debe hacer es instalar y activar el complemento Responsive Select Menu. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Tras la activación, debe visitar Apariencia »Responsive Select configurar los ajustes del complemento.

Seleccionar configuraciones de menú

Debe desplazarse hacia abajo hasta la sección “Activar ubicaciones de temas”. Por defecto, el complemento se activa en todas las ubicaciones de temas. Puede cambiar eso activándolo selectivamente para ubicaciones de temas específicos.

No olvides hacer clic en el botón Guardar todas las configuraciones para almacenar tus cambios.

Ahora puede visitar su sitio web y cambiar el tamaño de la pantalla del navegador para ver el menú de selección receptivo en acción.

Método 3: Crear un menú receptivo amigable para dispositivos móviles con efecto de alternancia

Uno de los métodos más comunes utilizados para mostrar un menú en pantallas móviles es mediante el uso del efecto de alternar.

Este método requiere que agregue código personalizado a sus archivos de WordPress. Si no ha hecho esto antes, eche un vistazo a nuestra guía sobre cómo pegar fragmentos de la web en WordPress.

Primero debes abrir un editor de texto como el bloc de notas y pegar este código.

(función () {
var nav = document.getElementById (‘navegación del sitio’), botón, menú;
if (! nav) {
regreso;
}

button = nav.getElementsByTagName (‘botón’) [0];
menu = nav.getElementsByTagName (‘ul’) [0];
if (! button) {
regreso;
}

// Ocultar botón si falta el menú o está vacío.
if (! menu ||! menu.childNodes.length) {
button.style.display = ‘ninguno’;
regreso;
}

button.onclick = function () {
if (-1 === menu.className.indexOf (‘nav-menu’)) {
menu.className = ‘nav-menu’;
}

if (-1! == button.className.indexOf (‘activado / activado’)) {
button.className = button.className.replace (‘activado’, ”);
menu.className = menu.className.replace (‘activado’, ”);
} más {
button.className + = ‘activado / activado’;
menu.className + = ‘activado’;
}
};
}) (jQuery);

Ahora necesita guardar este archivo como navigation.js en su escritorio.

A continuación, debe abrir un cliente FTP para cargar este archivo en la carpeta / wp-content / themes / your-theme-dir / js / en su sitio de WordPress.

Reemplace su directorio de tema con el directorio de su tema actual. Si su directorio de temas no tiene una carpeta js, entonces necesita crearlo.

Después de cargar el archivo JavaScript, el siguiente paso es asegurarse de que su sitio de WordPress cargue este JavaScript. Deberá agregar el siguiente código al archivo functions.php de su tema.

wp_enqueue_script (‘wpb_togglemenu’, get_template_directory_uri (). ‘/js/navigation.js’, array (‘jquery’), ‘20160909’, verdadero);

Ahora necesitamos agregar el menú de navegación a nuestro tema de WordPress. Por lo general, el menú de navegación se agrega al archivo header.php de un tema.

Menú
<?php wp_nav_menu (array (‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’)); ?>

Asumimos que la ubicación del tema definida por su tema se llama primaria. Si no es así, utilice la ubicación del tema definida por su tema de WordPress.

El paso final es agregar CSS para que nuestro menú use las clases de CSS correctas para alternar para trabajar cuando se ve en dispositivos móviles.

/* Menú de Navegación */
.Navegación Principal {
margen superior: 24px;
margen superior: 1.714285714rem;
alinear texto: centro;
}
.navegación principal li {
margen superior: 24px;
margen superior: 1.714285714rem;
tamaño de fuente: 12px;
tamaño de fuente: 0.857142857rem;
altura de línea: 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 {
pantalla: ninguno;
}

.main-navigation ul.nav-menu.toggled-on,
.alternar menú {
pantalla: bloque en línea;
}

// CSS para usar en dispositivos móviles

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

.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
borde inferior: 1px sólido # terminado;
borde superior: 1px sólido # terminado;
display: inline-block! important;
alinear texto: izquierda;
ancho: 100%;
}
.navegación principal ul {
margen: 0;
sangría de texto: 0;
}
.navegación principal li a,
.navegación principal li {
pantalla: bloque en línea;
decoración de texto: ninguno;
}
.main-navigation li a {
borde inferior: 0;
color: # 6a6a6a;
altura de línea: 3.692307692;
transformación de texto: mayúscula;
espacio en blanco: nowrap;
}
.navegación principal li a: hover,
.main-navigation li a: focus {
color: # 000;
}
.navegación principal li {
margen: 0 40px 0 0;
margen: 0 2.857142857rem 0 0;
posición: relativa;
}
.navegación principal li ul {
margen: 0;
relleno: 0;
posición: absoluta;
Top 100%;
índice z: 1;
altura: 1px;
ancho: 1px;
desbordamiento: oculto;
clip: rect (1px, 1px, 1px, 1px);
}
.navegación principal li ul ul {
arriba: 0;
izquierda: 100%;
}
.main-navigation ul li: hover > ul,
.navegación principal ul li: foco > ul,
.main-navigation .focus > ul {
borde izquierdo: 0;
clip: heredar;
desbordamiento: heredar;
altura: heredar;
ancho: heredar;
}
.navegación principal li ul li a {
fondo: #efefef;
borde inferior: 1px sólido # terminado;
bloqueo de pantalla;
tamaño de fuente: 11px;
tamaño de fuente: 0.785714286rem;
altura de línea: 2.181818182;
relleno: 8px 10px;
relleno: 0.571428571rem 0.714285714rem;
ancho: 180 px;
ancho: 12.85714286rem;
espacio en blanco: normal;
}
.navegación principal li ul li a: hover,
.main-navigation li ul li a: focus {
fondo: # e3e3e3;
color: # 444;
}
.main-navigation .current-menu-item > una,
.main-navigation .current-menu-ancestor > una,
.main-navigation .current_page_item > una,
.main-navigation .current_page_ancestor > una {
color: # 636363;
peso de fuente: negrita;
}
.alternar menú {
pantalla: ninguno;
}

}

Ahora puede visitar su sitio web y cambiar el tamaño de la pantalla de su navegador para ver su menú de alternancia receptivo en acción.

Alternar vista previa del menú

Solución de problemas: Dependiendo de su tema de WordPress, es posible que deba ajustar el CSS. Utilice la herramienta de inspección de elementos para descubrir los conflictos de CSS con su tema.

Método 4: Agregue un menú móvil deslizable en WordPress

Otra técnica común para agregar un menú móvil es mediante el uso de un menú de panel deslizable (como se muestra en el Método 1).

El Método 4 requiere que agregue código a sus archivos de tema de WordPress, y es solo una forma diferente de lograr los mismos resultados que el Método 1.

Primero, debe abrir un editor de texto sin formato como el Bloc de notas y agregar el siguiente código a un archivo de texto en blanco.

(función ($) {
$ (‘# alternar’). alternar (
función () {
$ (‘# popout’). animate ({left: 0}, ‘slow’, function () {
$ (‘# alternar’). html (‘cerca‘);
});
},
función () {
$ (‘# popout’). animate ({left: -250}, ‘slow’, function () {
$ (‘# alternar’). html (‘cerca‘);
});
}
);
}) (jQuery);

No olvide reemplazar example.com con su propio nombre de dominio y su tema con su directorio de temas real. Guarde este archivo como slidepanel.js en su escritorio.

Ahora necesitará una imagen que se utilizará como icono de menú. Un ícono de hamburguesa se usa más comúnmente como ícono de menú. Encontrará toneladas de imágenes de diferentes sitios web. Usaremos el ícono de menú de la biblioteca de Google Material Icons.

Una vez que encuentre una imagen que quiera usar, guárdela como menu.png.

A continuación, debe abrir un cliente de cliente FTP y cargar el archivo slidepanel.js en la carpeta / wp-content / your-theme / js /.

Si su directorio de temas no tiene la carpeta JS, entonces necesita crear tit y luego cargar su archivo.

Después de eso, debe cargar el archivo menu.png en / wp-content / themes / your-theme / images / folder.

Una vez que se cargan los archivos, debemos asegurarnos de que su tema cargue el archivo JavaScript que acaba de agregar. Lo lograremos colocando el archivo JavaScript.

Agregue este código al archivo functions.php de su tema.

wp_enqueue_script (‘wpb_slidepanel’, get_template_directory_uri (). ‘/js/slidepanel.js’, array (‘jquery’), ‘20160909’, verdadero);

Ahora necesitamos agregar el código real en el archivo header.php de su tema para mostrar el menú de navegación. Debes buscar un código similar a este:

<?php wp_nav_menu (array (‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’)); ?>

Desea ajustar el menú de navegación existente con el código HTML para mostrar el menú del panel de diapositivas en pantallas más pequeñas.

mostrar

<?php wp_nav_menu (array (‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’)); ?>

Observe que el menú de navegación de su tema todavía está allí. Acabamos de envolverlo en HTML que necesitamos para activar el menú del panel.

El último paso es agregar CSS para ocultar el icono de la imagen del menú en pantallas más grandes. También deberá ajustar la posición del icono del menú..

Aquí hay un ejemplo de CSS que puede usar como punto de partida:

@media screen y (min-width: 769px) {
#toggle {
pantalla: ninguno;
}

}

@media screen y (ancho máximo: 768px) {
#popout {
posición: fija;
altura: 100%;
ancho: 250 px;
fondo: rgb (25, 25, 25);
antecedentes: rgba (25, 25, 25, .9);
color blanco;
arriba: 0px;
izquierda: -250px;
desbordamiento: auto;
}

#toggle {
flotar derecho;
posición: fija;
arriba: 60px;
derecha: 45 px;
ancho: 28px;
altura: 24px;

}

.nav-menu li {
borde inferior: 1px sólido #eee;
acolchado: 20px;
ancho: 100%;
}

.nav-menu li: hover {
fondo: #CCC;
}

.nav-menu li a {
color: #FFF;
decoración de texto: ninguno;
ancho: 100%;
}
}

Dependiendo de su tema de WordPress, es posible que deba ajustar el CSS para evitar conflictos.

Así es como se veía en nuestro sitio web de demostración:

Menú deslizable receptivo en WordPress

Esperamos que este artículo te haya ayudado a aprender cómo crear un menú de WordPress receptivo listo para dispositivos móviles. Es posible que también desee ver nuestra guía sobre cómo agregar un menú receptivo a pantalla completa en WordPress

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map