4 pasos simples para agregar un menú móvil a su sitio web de WordPress

Receptivo. Compatible con dispositivos móviles. Móvil listo. Debe haber encontrado uno de estos términos mientras construye su sitio de WordPress. Un tema amigable y receptivo para dispositivos móviles es bastante imperativo, dado que casi el 50% de sus visitantes deben verlo en un dispositivo móvil. Entonces, ¿por qué debería quedarse atrás el menú de su sitio? Ahora la forma en que se muestra el menú es parte de hacer el menú receptivo. Entonces, si su menú de navegación principal tiene la forma de una lista en un dispositivo de escritorio, el mismo menú se puede mostrar como un menú de hamburguesas en un dispositivo móvil.
Tenemos un gran artículo aquí, que explica “cómo agregar el menú de navegación de push” en su tema. ¡Pero! Para que el menú sea amigable con los dispositivos móviles, es posible que desee cambiar el contenido que se muestra en el menú. Por ejemplo, ¡el sitio web de WISDMLABS! Si echa un vistazo al sitio en un dispositivo móvil (o si está en uno ahora), notará que el menú principal no es un menú Mega. Por otro lado, el menú principal en un dispositivo de escritorio es un mega menú.

Menú de navegación móvil en nuestro sitio
Ahora para mostrar un menú diferente en un dispositivo móvil, su tema debe permitirle crear un menú móvil diferente.
Cómo crear un menú móvil en su sitio de WordPress Para agregar un menú móvil específico, debe hacer lo siguiente:
Grabe un menú móvil
Cambie la pantalla de acuerdo con el ancho de la pantalla
Asegúrese de que se muestre su menú móvil
Crear y establecer un menú móvil
Todo lo que necesita, solo hay poco conocimiento sobre JQuey y algunas codificaciones de PHP y tiene infinitas posibilidades. Los archivos para los que se realizarán los cambios son los siguientes: #1 Registre un menú móvil Si su tema de WordPress aún no le ofrece un menú móvil, puede grabar uno usando el código a continuación. Puede agregar el código a las funciones.php del tema del niño o un complemento personalizado .// Registre un menú móvil
Wdm_register_mobile_mnu () function {
add_theme_support (‘menús de navegación’);
register_nav_menus (array (‘mobile-menu’ => __ (‘menú móvil’, ‘wdm’));
}
add_action (‘init’, ‘wdm_register_mobile_men’);
Una vez que haya agregado este código, debe notar una opción de “menú móvil” en la configuración del menú.
Opción de menú móvil

# 2 Cambie la pantalla del menú ahora, el menú debe mostrarse solo en un dispositivo móvil. Por lo tanto, debemos cambiar su apariencia de acuerdo con el tamaño de la pantalla o el ancho del navegador. Para hacer esto, nos divertiremos con algo jquéy.
Asegúrese de agregar este código a continuación a un archivo JS que se carga en cada página. Si no conoce uno, puede agregar el código a “Mobile-Male-Toogle.js” y puede cargarlo en cada página utilizando el código a continuación: (Agregue el código a las funciones.php de la base del niño o una personalizada complemento) // Cargue el archivo js
Wdm_mm_toggle_scripts function () {
wp_enqueue_script (‘wdm-mm-togle’, get_stylesheet_directory_uri ().
}
add_action (‘wp_enqueue_scripts’, ‘wdm_mm_togle_scripts’);
Una vez que coloque el script en su cola, se cargará en cada página. Ahora tiene que agregarle el código JS a continuación. // esconde o muestra el menú móvil
/* Consideremos que queremos cambiar el menú que se muestra en el ancho de la pantalla 800, esto es lo que debemos hacer (en consecuencia, puede reemplazar 800 con un ancho de la pantalla que necesita) ..*/
Cambio de función () {
If (jQuery (ventana). Little ()> = 800) {
jQuery (‘.nav.mobile-Menu’) .Hide ();
JQuery (‘.nav.desktop-Menu’) .show ();
} de lo contrario {
JQuery (‘.nav.desktop-Menu’) .Hide ();
JQuery (‘.nav.mobile-Menu’) .show ();
}
}
// Al cargar la página Establezca la pantalla del menú inicial
conmutación ();
// Cambiar la pantalla del menú para cambiar el tamaño del navegador
JQuery (ventana) .resize (function () {
conmutación ();
});
# 3 Asegúrese de que se muestre el menú móvil, hay un último paso que debemos seguir, para asegurarnos de que el menú se muestre perfectamente. Este paso prácticamente trata con la visualización del menú móvil, una vez que está configurado en la configuración del menú. Este código debe agregarse al encabezado.php del tema actual. Puede agregarlo debajo de la función “wp_nav_menu” después de que se haya agregado el “menú principal”. /* El siguiente código verifica que un menú móvil se establece desde la configuración del menú. Si se ha establecido un menú, se mostrará en el encabezado. O no se estableció ningún menú, luego muestra un mensaje.*/
If (function_exists (‘has_nav_men’) && has_nav_men (‘mobile-menu’)) {

wp_nav_menu (matriz (
“Profundidad” => 6,
‘sort_column’ => ‘menú_order’,
‘Container’ => ‘Ul’,
‘Menu_id’ => ‘Main-Nav’, ‘Menu_class’ => ‘Nav Mobile-Menu’,
‘Thema_location’ => ‘Menú Mobile’
));
} de lo contrario {
echo ”
El menú móvil no se ha establecido
“;
}
Asegúrese de agregar un “menú de escritorio” como una clase adicional al menú principal. Esta clase se usará para cambiar la pantalla del menú.
Por supuesto, esto debe ser compatible con un pequeño CSS. Agregue el CSS a continuación a Style.css del tema de su hijo. Mobile-Menu {
Pantalla: ninguno;
}
Pantalla solo @Media y (ancho mínimo: 800 PX) {
.Desktop-Menu {
Pantalla: Bloque importante;
}
.Mobile-Menu {
Pantalla: ¡Ninguno! Importante;
}
}
Pantalla solo @Media y (ancho máximo: 799 PX) {
.Desktop-Menu {
Pantalla: ¡Ninguno! Importante;
}
.Mobile-Menu {
Pantalla: Bloque importante;
}
}
#4 Cree y establezca el menú móvil Una vez que creamos una configuración para el menú móvil y cambie la pantalla, necesitamos crear un menú y configurarlo como un menú móvil.
Para hacer esto, cree un nuevo menú en el panel de administración de WordPress.
Crea un nuevo menú
Ahora agregue los elementos del menú y configúrelo como un menú móvil. No olvides guardar los cambios realizados.
Agregue el menú móvil