Comment créer et optimiser un menu mobile pour votre site web WordPress

Après avoir construit leSite web WordPressEnsuite, parce que, qu'il s'agisse d'un site de blog ou d'un site de vente en ligne, la plupart des utilisateurs sont des mobinautes. C'est pourquoi il est important d'ajouter un menu pour téléphone portable sur votre site WordPress.

Pourquoi le menu de votre site web devrait être abandonné

Lors de la création d'un site web WordPress, il est essentiel d'opter pour un thème adapté aux mobiles, car près de 50% des visiteurs consulteront le site sur un appareil mobile. Il peut s'avérer nécessaire d'adapter l'affichage des menus, en particulier sur les appareils mobiles. Par exemple, un menu de navigation principal qui prend la forme d'une liste sur un ordinateur de bureau peut s'afficher sous la forme d'un menu hamburger sur un appareil mobile. C'est pourquoi votre thème doit vous permettre de créer différents menus mobiles.

Comment créer un menu mobile sur un site web WordPress

Étape 1 : S'inscrire au menu mobile

Si votre thème WordPress ne propose pas encore de menu mobile, vous pouvez vous inscrire pour en avoir un en utilisant le code ci-dessous. Ajoutez le code à la page d'accueil du thème enfant ou du plugin personnalisé. functions.php Documentation.

// enregistrer un menu mobile
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' => __('Mobile Menu', 'wdm' ) ) ; }
}
add_action( 'init', 'wdm_register_mobile_menu' ) ;

Après avoir ajouté ce code, vous remarquerez que les paramètres du menu ont un "Menu mobile"Options.

Étape 2 : Afficher le menu

Afin de modifier l'affichage du menu en fonction de la taille de l'écran, vous devez utiliser un peu de jQuery. Ajoutez le code suivant au fichier JS qui est chargé sur chaque page. Par exemple, vous pouvez ajouter le code au fichier JS mobile-menu-toggle.js commençant par functions.php Chargement :

// charger le fichier 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' ) ;

Ensuite, dans le mobile-menu-toggle.js Ajoutez le code suivant au fichier

// cacher ou afficher le menu mobile
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() ;
    }
}

// au chargement de la page, définir l'affichage initial du menu
toggle() ;

// bascule l'affichage du menu en cas de redimensionnement du navigateur
jQuery( window ).resize( function () {
    toggle() ; } ); ; jQuery( window ).resize( function () {
} ) ; }

Étape 3 : S'assurer que le menu mobile est affiché

Dans le thème actuel de header.php ajoutez le code suivant pour vous assurer que le menu mobile s'affiche après avoir été défini dans les paramètres du menu :

/* Le code suivant vérifie si un menu mobile a été défini à partir du back-end dans les paramètres du menu. Si le menu a été défini, il est affiché dans l'en-tête. Sinon, si le menu n'est pas défini, un message est affiché. */
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 mobile menu set 
" ;
}

Veillez à ce que la classe "Desktop Menu" soit ajoutée au menu principal pour basculer l'affichage du menu.

Étape 4 : Créer et configurer le menu mobile

Enfin, créez un nouveau menu et définissez-le comme un menu mobile. dans le panneau d'administration de WordPress :

1. créer un nouveau menu.

Créer un nouveau menu

2. ajouter un élément de menu et le définir comme menu mobile.

3. enregistrer les modifications apportées.

Ajouter un menu mobile

Support CSS

Ajoutez la feuille de style CSS suivante à la section style.css afin de permettre la commutation de l'affichage du menu :

.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 ; }
    }
}

rendre un verdict

Avec ces étapes, vous pouvez ajouter un menu mobile à votre thème WordPress pour que votre site web offre une excellente expérience utilisateur sur différents appareils. Si vous ne souhaitez pas coder vous-même, vous pouvez demander l'aide d'experts WordPress qui peuvent s'assurer que votre site web est optimisé pour se charger rapidement à la fois sur les appareils mobiles et sur les ordinateurs de bureau.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.