Nach dem Bau desWordPress-WebsiteDenn egal, ob es sich um eine Blog- oder eine Shopseite handelt, die meisten Nutzer kommen vom Handy. Deshalb ist es wichtig, ein Handy-Menü auf Ihrer WordPress-Website hinzuzufügen.

Warum Ihr Website-Menü aufgegeben werden sollte

Bei der Erstellung einer WordPress-Website ist ein mobilfreundliches, responsives Theme von entscheidender Bedeutung, da fast 50% der Besucher die Website über ein mobiles Gerät aufrufen werden. Möglicherweise müssen Anpassungen an der Art und Weise vorgenommen werden, wie Menüs angezeigt werden, insbesondere auf mobilen Geräten. So kann beispielsweise ein Hauptnavigationsmenü, das auf einem Desktop-Gerät die Form einer Liste hat, auf einem mobilen Gerät als Hamburger-Menü angezeigt werden. Aus diesem Grund sollte Ihr Theme die Möglichkeit bieten, verschiedene mobile Menüs zu erstellen.

Wie man ein mobiles Menü auf einer WordPress-Website erstellt

Schritt 1: Registrierung für das mobile Menü

Wenn Ihr WordPress-Theme noch kein mobiles Menü anbietet, können Sie sich mit dem unten stehenden Code dafür anmelden. Fügen Sie den Code in das Child-Theme oder das benutzerdefinierte Plugin in funktionen.php Dokumentation.

// Registrierung eines mobilen Menüs
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' );

Nachdem Sie diesen Code hinzugefügt haben, werden Sie feststellen, dass die Menüeinstellungen ein "Mobiles Menü"Optionen.

Schritt 2: Umschalten der Menüanzeige

Um die Anzeige des Menüs je nach Bildschirmgröße umzuschalten, müssen Sie etwas jQuery verwenden. Fügen Sie den folgenden Code zu der JS-Datei hinzu, die auf jeder Seite geladen wird. Zum Beispiel können Sie den Code in die Datei mobiles-menu-umschalten.js beginnend mit funktionen.php Laden:

// Laden der JS-Datei
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' );

Dann, in der mobiles-menu-umschalten.js Fügen Sie den folgenden Code in die

// Ausblenden oder Anzeigen des mobilen Menüs
function toggle() {
    wenn ( 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();
    }
}

// beim Laden der Seite die Anzeige des Menüs initial einstellen
toggle();

// Umschalten der Anzeige des Menüs bei Größenänderung des Browsers
jQuery( window ).resize( function () {
    resize( function () { toggle(); } );; jQuery( window ).resize( function
} ); }

Schritt 3: Sicherstellen, dass das mobile Menü angezeigt wird

Im aktuellen Thema der header.php fügen Sie den folgenden Code hinzu, um sicherzustellen, dass das mobile Menü angezeigt wird, nachdem es in den Menüeinstellungen festgelegt wurde:

/* Der folgende Code prüft, ob ein mobiles Menü vom Backend aus in den Menüeinstellungen festgelegt wurde. Wenn das Menü eingestellt ist, wird es in der Kopfzeile angezeigt. Andernfalls, wenn das Menü nicht eingestellt ist, wird eine Meldung angezeigt. */
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 "
 Kein mobiles Menü eingestellt 
" ;
}

Stellen Sie sicher, dass "Desktop Menu" als zusätzliche Klasse zum Hauptmenü hinzugefügt wird, um die Anzeige des Menüs umzuschalten.

Schritt 4: Erstellen und Einrichten des mobilen Menüs

Erstellen Sie schließlich ein neues Menü und legen Sie es als mobiles Menü fest. in Ihrem WordPress-Administrationsbereich:

1. ein neues Menü erstellen.

Neues Menü erstellen

2. einen Menüpunkt hinzufügen und ihn als mobiles Menü festlegen.

3. speichern Sie die vorgenommenen Änderungen.

Mobiles Menü hinzufügen

CSS-Unterstützung

Fügen Sie das folgende CSS in das Child-Theme ein style.css um die Umschaltung der Menüanzeige zu unterstützen:

.mobile-menu{
    Anzeige: keine;
}
@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; }
    }
}

zu einem Urteil gelangen

Mit diesen Schritten können Sie ein mobiles Menü zu Ihrem WordPress-Theme hinzufügen, um Ihre Website auf verschiedenen Geräten benutzerfreundlich zu gestalten. Wenn Sie es nicht selbst programmieren möchten, können Sie die Hilfe von WordPress-Experten in Anspruch nehmen, die sicherstellen können, dass Ihre Website so optimiert ist, dass sie sowohl auf mobilen Geräten als auch auf dem Desktop schnell lädt.