So verbergen Sie Ihr mobiles WordPress-Menü

Mit der Zahl von mobile Internetnutzer übertreffen Desktop-Nutzer, ist es keine Überraschung, dass Website-Designer alles tun, um sie zu erfüllen. Eine mobile Version einer Website zu haben oder sogar eine Website in eine mobile App umzuwandeln, ist zur Norm geworden. Der Grund dafür ist einfach: unterschiedliche Seitenverhältnisse und unterschiedliche Auflösungen erfordern unterschiedliche Anzeigemodi für unterschiedliche Funktionen, oder ganz andere Funktionen. Das nennt man Responsive Design: verschiedene Versionen für unterschiedliche Bildschirmgrößen. Und eine der Funktionen, die Designern und Benutzern von Handheld-Geräten Probleme bereiten, ist das Menü.

Menüs können für mobile Benutzer, die aufgrund ihrer Geräte nur über begrenzten Bildschirmplatz verfügen, groß, kompliziert und umständlich sein. Aus diesem Grund sind viele Premium-WordPress-Themes mit mobilen Menüs ausgestattet. Möglicherweise haben Sie jedoch ein Thema, das genau so aussieht und funktioniert, wie Sie es möchten, dem diese Option einfach fehlt. Wenn Sie also Ihr mobiles Menü ausblenden oder durch ein anderes ersetzen möchten, können Sie uns dabei unterstützen. Darüber werden wir sprechen:

So verbergen Sie Ihr WordPress Mobile-Menü mit Code

Als erstes möchten wir Ihnen zeigen, wie Sie ein Menü oder Teile eines Menüs auf mobilen Geräten mit CSS ausblenden. Dies erfordert ein wenig Codierung von Ihrer Seite und auch die Verwendung des Prüftools, aber es ist in beiden Fällen keine große Sache.

Um das gesamte Menü auszublenden, müssen Sie den Bezeichner und die CSS-Klasse Ihres Menüs herausfinden. Das kann von Thema zu Thema unterschiedlich sein, und hier kommt das Prüfwerkzeug zum Einsatz. Klicken Sie einfach mit der rechten Maustaste auf eine beliebige Stelle auf Ihrer Website, sofern Sie das Klicken mit der rechten Maustaste nicht deaktiviert haben, und wählen Sie Prüfen aus dem Dropdown-Menü. Sie können auch die Taste F12 drücken.

Prüfen

Nachdem Sie das Prüftool aktiviert haben, können Sie nach unten scrollen Elemente Registerkarte, um die Elemente in der Hauptansicht hervorzuheben. Sie können das Menü leicht in der Desktop-Version Ihrer Website finden, aber es ist nicht das, das Sie ausblenden müssen. Stattdessen müssen Sie die Größe Ihres Bildschirms ändern, um die schmalere Ansicht anzuzeigen, indem Sie den vertikalen Rand Ihres Fensters ziehen. Die Klasse, die wir auf der mobilen Version unserer Website ausblenden möchten, heißt Menü-Button-Container. Beachten Sie, dass die Klasse auf Ihrer Website möglicherweise anders benannt wird.

Schmales Menü

Um diese spezielle Version des Menüs von der mobilen Version der Website auszublenden, müssen Sie Ihrer Website CSS hinzufügen. Navigieren Sie zu Aussehen/Anpassen aus deinem WordPress-Dashboard und wähle die Zusätzliche CSS Abschnitt und die Handy, Mobiltelefon Version der Webseite. Im Menü unten links können Sie zwischen den verschiedenen Versionen Ihrer Website wechseln. Klicken Sie auf das Handy-Symbol, um die mobile Version der Website zu bearbeiten.

Zusätzliches CSS Mobile

Der Code, den Sie in die eingeben müssen Zusätzliche CSS Feld ist:

.menu-button-container {
display:none;
}

Sobald Sie dies getan haben, können Sie sehen, dass das Menü aus dem Vorschaufenster verschwunden ist. Um Ihre Änderungen zu speichern, müssen Sie auf das Veröffentlichen Schaltfläche, und Ihr mobiles Menü wird nicht in der mobilen Version Ihrer Website angezeigt.

Verwandt :  So fügen Sie Ihrem WooCommerce-Shop Abonnements hinzu
Verstecktes Menü

Natürlich müssen Sie die ersetzen Menü-Button-Container mit der Klasse Ihres eigenen mobilen Menüs.

So verbergen Sie Elemente Ihres mobilen WordPress-Menüs mit Code

Aber was ist, wenn Sie nicht das gesamte Menü ausblenden möchten? Wenn Sie nur ein paar Elemente ausblenden, wird es kürzer und für Besucher, die mobile Geräte verwenden, einfacher navigierbar.

Um ein Element auszublenden, müssen Sie wiederum CSS zum Menü hinzufügen. Navigieren Sie zuerst zu Aussehen/Menüs Klicken Sie in Ihrem WordPress-Dashboard auf Bildschirmoptionen oben rechts und überprüfen Sie CSS-Klassen.

Bildschirmoptionen

Sagen wir jetzt, wir wollen das verstecken Team Element aus unserem Hauptmenü für mobile Benutzer. Wenn Sie jetzt darauf klicken, sehen Sie, dass Sie ein Feld mit der Bezeichnung . aktiviert haben CSS-Klassen (optional). Hier können Sie einem Menüelement eine Klasse zuordnen. Wir werden die Klasse zuweisen auf dem Handy verstecken zum Team Element und Speichern Unser Menü.

Sie können Ihre Klassen innerhalb dieser Benennungsregeln nach Belieben benennen: Eine Klasse muss mit einem Buchstaben (Groß- oder Kleinbuchstaben) beginnen und im Rest des Namens Buchstaben, Ziffern, Unterstriche und Bindestriche verwenden.

Auf dem Handy ausblenden

Dies bezeichnet lediglich die Team Element in unserem Hauptmenü als zur Klasse gehörend auf dem Handy verstecken. Um tatsächlich alle Elemente dieser Klasse aus der mobilen Version der Website auszublenden, müssen wir – Sie haben es erraten – etwas Code zu unserer Website hinzufügen. Navigieren Sie zu Aussehen/Anpassen aus deinem WordPress-Dashboard und wähle die Zusätzliche CSS Sektion.

CSS hinzufügen

Der Code, den Sie in die hinzufügen müssen Zusätzliche CSS Feld ist dieses:

@media (max-width: 767px){
.hide-on-mobile{
display: none !important;
}
}

Dieser Code verbirgt alle Elemente, die zum . gehören auf dem Handy verstecken Klasse, wenn die Breite der Website 767 Pixel oder weniger beträgt. Natürlich können Sie dies für jedes einzelne Menüelement tun und verschiedene Elemente für verschiedene Geräte ein- oder ausblenden.

So verbergen Sie Ihr WordPress Mobile-Menü mit einem Plugin

Wenn ein Theme nicht ganz so funktioniert, wie es Ihnen gefällt, können Sie es wie üblich mit einem Plugin ergänzen. Das Plugin, das wir verwenden werden, ist WP Mobile-Menü. Beachten Sie jedoch, dass es viele responsive Menü-Plugins zur Auswahl gibt.

Nachdem Sie das Plugin installiert und aktiviert haben, werden Sie automatisch zu einem Bildschirm weitergeleitet, in dem Sie aufgefordert werden, einige zusätzliche Sicherheitsfunktionen desselben Entwicklers zu akzeptieren. Wir werden sie überspringen.

Mobile Menü-Plugin

Sie werden dann zum Konfigurationsbildschirm des Plugins weitergeleitet. Der erste Abschnitt ist der Hauptoptionen Sektion. Dort müssen Sie einfach sowohl das linke als auch das rechte Menü deaktivieren. Im Sichtbarkeitseinstellungen weiter unten müssen Sie die Nur in Mobilgeräten aktivieren umschalten zu Auf.

Sichtbarkeit des mobilen Menüs

Weiter unten, im Original-Theme-Menü ausblenden Abschnitt müssen Sie sicherstellen, dass alle Menüelemente so aktiviert sind, dass sie vom Plugin ausgeblendet werden.

Original ausblenden

Je nach verwendetem Theme müssen Sie möglicherweise die Element suchen Suche, falls eines deiner Menüelemente ungewöhnlich benannt ist und das Plugin es nicht erkennt. Dies kann von Thema zu Thema variieren, daher können wir nicht genauer sein, aber die meisten Themen verwenden konventionelle Elemente.

Verwandt :  Die 9 beliebtesten Arten von Blogs für 2021

Einmal getan, Änderungen speichern, und besuchen Sie Ihre Website von einem mobilen Gerät aus. Sie werden sehen, dass das Menü nicht angezeigt wird.

Vorschau des mobilen Menüs

Aber was ist, wenn Sie nur eine andere Version eines Menüs für mobile Geräte wünschen? Eigentlich ist das die Hauptfunktion dieses Plugins. In diesem Fall müssen Sie ein Menü für die mobile Version Ihrer Website erstellen. Wir werden hier nicht auf die Details der Erstellung eines neuen Menüs eingehen. Wenn Sie Hilfe beim Erstellen eines Menüs benötigen, haben wir ein vollständiges Tutorial zum Hinzufügen von Menüs in WordPress. Denken Sie daran, zu überprüfen Linkes Handy-Menü oder Rechtes Handy-Menü beim Erstellen eines mobilen Menüs.

Wir werden diesen Platz dennoch nutzen, um zu sagen, dass ein mobiles Menü so reduziert wie möglich sein sollte, bis hin zu den Grundlagen. Wir empfehlen Ihnen, nur die grundlegenden Navigationsoptionen für die mobile Version Ihres Menüs zu verwenden. Ihre mobilen Nutzer verwenden eher eine Suchleiste, wenn sie nach einer bestimmten Seite suchen.

Nachdem Sie ein Menü erstellt und gespeichert haben, navigieren Sie zu Mobile Menüoptionen aus Ihrem WordPress-Dashboard.

Mobile Menüoptionen

Hier, im Hauptoptionen Abschnitt müssen Sie Ihr mobiles Menü für die Anzeige auswählen. Wir haben unsere benannt Mobiles Menü, aber Sie können Ihren Namen benennen, wie Sie möchten. Sie können auch umschalten, um das linke und rechte Menü zu aktivieren. Beachten Sie, dass Sie die Menüanzeigeposition auf dem Menüerstellungsbildschirm überprüfen lassen müssen.

Menü Konfig

Als nächstes haben Sie die Sichtbarkeitsoptionen Sektion. Diese regeln die Bedingungen, unter denen das mobile Menü erscheint. Um Ihr mobiles Menü anzuzeigen, müssen Sie es für mobile Geräte sichtbar machen.

Sichtbarkeitsoptionen

Als nächstes in der Original-Theme-Menü ausblenden Abschnitt können Sie auswählen, welche Menüelemente in der mobilen Version ausgeblendet werden sollen. Dies ist eine effektive Möglichkeit, eine mobile Version eines Menüs zu erstellen, wenn Sie sich mit seiner Struktur auskennen. Die meisten gebräuchlichen Menüelemente sind standardmäßig auf Ausblenden geprüft.

Originalmenü ausblenden

Weiter unten finden Sie verschiedene und erweiterte Optionen, mit denen Sie Ihr mobiles Menü weiter anpassen können. Wir gehen hier nicht auf die Details ein, da sie für das Ein- oder Ausblenden von mobilen Menüs nicht relevant sind.

Du wirst brauchen Änderungen speichern Sobald Sie mit der Konfiguration Ihres Menüs fertig sind.

Änderungen speichern

Und unser mobiles Menü, das nur die Grundlagen enthält, erscheint in der mobilen Version unserer Website. Ihr ursprüngliches mobiles Menü wird ausgeblendet und ein neues befindet sich an seiner Stelle.

Bridge Mobile Menüvorschau

Abschließend

Wie wir gezeigt haben, erfordert das Erstellen, Ein- und Ausblenden von mobilen Menüs und das Erstellen alternativer Versionen von Menüs nur wenig Arbeit, und es gibt sogar Plugins, die die meiste Arbeit für Sie erledigen können. Unabhängig von der Art der Website, die Sie betreiben, besteht die Möglichkeit, dass ein Großteil Ihrer Besucher mobile Geräte verwendet. Während das Erstellen einer kompletten alternativen Version Ihrer Website für Sie zu umständlich sein kann, ist eine kleine Anpassung überhaupt kein Problem. Kein Grund also, es nicht zu schaffen.

Moyens Staff
Moyens I/O-Personal. motivierte Sie und gab Ratschläge zu Technologie, persönlicher Entwicklung, Lebensstil und Strategien, die Ihnen helfen werden.