Después de construir elSitio web de 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 () {
    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 que se haya establecido en la configuración 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 se ha establecido el menú, 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; }
    }
}

alcanzar 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.

Contacte con nosotros
?No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de peque?as empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres