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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Einmal getan, Änderungen speichern, und besuchen Sie Ihre Website von einem mobilen Gerät aus. Sie werden sehen, dass das Menü nicht angezeigt wird.
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.
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.
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.
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.
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.
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.
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.
