Después de construir elSitio web WordPressDespués de eso, porque si se trata de un sitio de blog o un sitio de la tienda; la mayoría de los usuarios son de móvil. Por eso es importante añadir un menú de teléfono móvil en su sitio web WordPress.

Por qué debe abandonarse el menú de su sitio web

A la hora de crear un sitio web en WordPress, es fundamental contar con un tema adaptado a dispositivos móviles, ya que casi el 50% de los visitantes verán el sitio desde un dispositivo móvil. Es posible que haya que hacer ajustes en la forma en que se muestran los menús, especialmente en los dispositivos móviles. Por ejemplo, un menú de navegación principal que adopta la forma de una lista en un dispositivo de sobremesa puede mostrarse como un menú hamburguesa en un dispositivo móvil. Por este motivo, tu tema debería permitirte crear diferentes menús para móviles.

Cómo crear un menú móvil en un sitio web WordPress

Paso 1: Registrarse en el menú móvil

Si tu tema de WordPress aún no ofrece un menú móvil, puedes suscribirte a uno utilizando el siguiente código. Añade el código al tema hijo o al plugin personalizado de funciones.php Documentación.

// registrar un menú móvil
function wdm_register_mobile_menu() {
    add_theme_support( 'nav-menus' ); register_nav_menus( array('mobile-menu' => __( 'Mobile Menu', 'wdm_register_mobile_menu' ))
    register_nav_menus( array('mobile-menu' => __( 'Menú móvil', 'wdm' ) ); }
}
add_action( 'init', 'wdm_register_mobile_menu' );

Después de añadir este código, observará que la configuración del menú tiene un "Menú móvil"Opciones.

Paso 2: Conmutar la visualización del menú

Para cambiar la visualización del menú en función del tamaño de la pantalla, es necesario utilizar algo de jQuery. añada el siguiente código al archivo JS que se carga en cada página. Por ejemplo, puedes añadir el código al archivo mobile-menu-toggle.js empezando por funciones.php Carga:

// cargar el archivo JS
function wdm_mm_toggle_scripts() {
    wp_enqueue_script( 'wdm-mm-toggle', get_stylesheet_directory_uri() . '/js/mobile-menu-toggle.js', array('jquery') );
}
add_action( 'wp_enqueue_scripts', 'wdm_mm_toggle_scripts' );

Luego, en el mobile-menu-toggle.js Añada el siguiente código al archivo

// ocultar o mostrar el menú móvil
function toggle() {
    if ( jQuery( window ).width() >= 800 ) {
        jQuery( '.nav.mobile-menu' ).hide();
        jQuery( '.nav.desktop-menu' ).show(); } else { jQuery( '.nav.desktop-menu' ).show()
    } else {
        jQuery( '.nav.desktop-menu' ).hide(); jQuery( '.nav.desktop-menu' ).show(); } else {
        jQuery( '.nav.mobile-menu' ).show();
    }
}

// al cargar la página establecer la visualización del menú inicialmente
toggle();

// cambiar la visualización del menú al cambiar el tamaño del navegador
jQuery( window ).resize( function () {
    resize( function () { toggle(); } ); jQuery( window ).resize( function
} ); }

Paso 3: Asegúrese de que aparece el menú móvil

En el tema actual de header.php añada el siguiente código para asegurarse de que el menú móvil se muestra después de haberlo configurado en los ajustes del menú:

/* El siguiente código comprueba si se ha establecido un menú móvil desde el back-end en la configuración del menú. Si el menú ha sido configurado, se muestra en la cabecera. En caso contrario, si el menú no está configurado, se muestra un mensaje. */
if ( function_exists ( 'has_nav_menu' ) && has_nav_menu( 'mobile-menu' ) ) {
    wp_nav_menu( array (
       'depth' => 6 ,
       'sort_column' => 'menu_order' ,
       'container' => 'ul' ,
       'menu_id' => 'main-nav' ,
       'menu_class' => 'nav mobile-menu' ,
       'theme_location' => 'mobile-menu'
    ) );
} else {
    echo "
 No hay menú móvil establecido 
" ;
}

Asegúrese de que "Menú de escritorio" se añade como una clase adicional al menú principal para alternar la visualización del menú.

Paso 4: Crear y configurar el menú móvil

Por último, cree un nuevo menú y configúrelo como menú móvil. en tu panel de administración de WordPress:

1. Cree un nuevo menú.

Crear un nuevo menú

2. Añada un elemento de menú y configúrelo como menú móvil.

3. Guarde los cambios realizados.

Añadir menú móvil

Soporte CSS

Añada el siguiente CSS al tema hijo style.css para poder cambiar la visualización del menú:

.mobile-menu{
    display: none;
}
@media only screen and (min-width: 800px){
    .desktop-menu{
        display: block !important; }
    }
    .mobile-menu{
        display: none !important; }
    }
}

@media only screen and (max-width: 799px){
    .desktop-menu{
        display: none !important;
    }
    .mobile-menu{
        display: block !important; }
    }
}

llegar a un veredicto

Con estos pasos, puedes añadir un menú móvil a tu tema de WordPress para que tu sitio web ofrezca una gran experiencia de usuario en distintos dispositivos. Si no quieres codificarlo tú mismo, puedes buscar la ayuda de expertos en WordPress que se aseguren de que tu sitio web está optimizado para cargarse rápidamente tanto en dispositivos móviles como en ordenadores de sobremesa.