So fügen Sie ein Slide Panel-Menü in WordPress-Designs hinzu

Wenn Sie ein WordPress-Entwickler oder ein WordPress-Theme-Designer sind, möchten Sie möglicherweise ein benutzerdefiniertes Menü in Ihrem Theme-Editor hinzufügen, um die Menüoptionen zu steuern. Das WordPress-Admin-Dashboard verfügt jedoch standardmäßig nicht über eine Menüoption für das Slide-Panel . Das bedeutet, dass Sie sich an ein Plugin oder eine Vorlage eines Drittanbieters wenden müssen, um diese Funktion zu Ihren Themen hinzuzufügen. Deshalb werden wir heute erklären, wie man ein Slide-Panel-Menü in WordPress-Themes hinzufügt.

Slide-Panel-Menü in WordPress-Designs: Warum es einschließen?

Es gibt viele Gründe, warum der Einbau einer Seitenwand wichtig sein kann. Der erste Grund ist, dass es Besuchern leichter fällt, auf Ihrer WordPress-Seite zu navigieren, wenn Sie sich die Zeit nehmen, intuitive Menüs zu entwickeln. Der zweite Grund ist, dass Slide Panels für mobile Geräte notwendig sind. Daher müssen Sie sicherstellen, dass Sie sie haben, wenn Sie möchten, dass Ihre Website auf Mobilgeräten gut funktioniert . Wenn jedoch viele Ihrer Website-Benutzer mobile Geräte verwenden, ist es wichtig, das Layout des Menüs auf diesen kleineren Displays zu testen, bevor Sie mit WordPress live gehen. Glücklicherweise zeigen die Standardstile vieler WordPress-Themes bei der Anzeige auf einem Mobilgerät mobilfreundliche Menüs an. Ein responsives Menü im Vollbildmodus oder ein dynamisches Slide-Panel-Menü in WordPress-Designs könnte eine nette Geste sein, um Ihre mobile Navigation weiter zu personalisieren. Lassen Sie uns aus diesem Grund die Integration eines Sliding-Panel-Menüs in WordPress-Themes untersuchen.

Schritt Eins: Installieren Sie das Responsive Menu Plugin

Die Installation und Aktivierung des Responsive Menu-Plugins ist der erste Schritt. Es gibt zwei verschiedene Versionen dieses Plugins, eine kostenpflichtige und eine kostenlose Version . Während die kostenpflichtige Version von Responsive Menu einige nette Extras wie bedingte Logik und mehr Themenoptionen bietet, verwenden wir für dieses Tutorial das Open-Source-Plugin. Gehen Sie nach dem Einschalten des responsiven Menüs zu Responsive Menü > Menüs. Sobald Sie dort sind, gehen Sie zur Symbolleiste und klicken Sie auf die Schaltfläche „Neues Menü erstellen“. Geben Sie Ihrem neuen Menü einen Namen und speichern Sie Ihre Arbeit. Machen Sie sich keine Sorgen, wenn es sagt, dass es leer ist.

Schritt zwei: Wählen Sie das Thema

Das neue responsive Menü bietet Ihnen dann vier verschiedene Gestaltungsmöglichkeiten. Sie können weitere Themen kaufen, wenn Sie möchten. Dieses Tutorial verwendet das vom System ausgewählte Design. Dann können Sie fortfahren, indem Sie die Option „Weiter“ auswählen. Wenn Sie dies noch nicht getan haben, geben Sie Ihrem responsiven Menü einen Namen und wählen Sie dann den Menütyp aus Ihrem WordPress-Dashboard aus, der in der Seitenleiste angezeigt werden soll. Für dieses Tutorial haben wir die Option „Navigation“ ausgewählt.

Wenn Sie möchten, dass Ihre Besucher nur das neue Slide-Panel-Menü sehen, können Sie auch das Standardmenü verbergen, das mit Ihrem WordPress-Theme angezeigt wird. Verwenden Sie dazu den Bereich mit der Bezeichnung „Hide Theme Menu“ , um CSS-Code einzugeben. Klicken Sie auf die Schaltfläche „Mehr erfahren“, um weitere Informationen zur Eingabe des entsprechenden Codes für Ihr ausgewähltes Thema zu erhalten. Die Pro-Edition fügt dem Benutzer einige weitere Anpassungsoptionen hinzu.

Schritt drei: Richten Sie es ein

Nachdem Sie die Parameter nach Ihren Wünschen angepasst haben, können Sie Ihr Menü erstellen, indem Sie auf die Schaltfläche „Menü erstellen“ klicken. Nachdem Sie dies getan haben, finden Sie rechts eine Vorschau Ihrer Website mit Optionen zum Wechseln in den Mobil-, Tablet- oder Desktop-Modus unten unten . Auf der linken Seite sehen Sie weitere Einstellungen zur Personalisierung. Beachten Sie die Sprache, die über den Menüoptionen angezeigt wird. Hier werden sowohl der Menütitel als auch eine Zeile „Zusätzlicher Inhalt“, wie das Plug-in es bezeichnet, angezeigt.

Wählen Sie „Mobiles Menü“ und dann „Container“ aus dem Seitenmenü, um Änderungen am Text vorzunehmen oder den Text auszublenden. Im Titeltextbereich können Sie alles eingeben, von „Hauptmenü“ bis „Navigation“. Um die Titelleiste zu deaktivieren, schalten Sie einfach den Schalter mit der Bezeichnung „Titel“ in die Aus-Position. Sobald Sie dies getan haben, gehen Sie zur Option „Zusätzlicher Inhalt“. Sie haben die Möglichkeit, diese Funktion zu deaktivieren oder den Text durch etwas anderes zu ersetzen. Wenn Sie mit der Anpassung des Menüs fertig sind, vergessen Sie nicht, unten auf der Seite auf die Schaltfläche „Aktualisieren“ zu klicken.

Bevor Sie live gehen, ist es wichtig, einige Vorabtests durchzuführen. Um sicherzustellen, dass alles ordnungsgemäß funktioniert, möchten Sie möglicherweise einen anderen Browser verwenden als die, die Sie normalerweise für den Zugriff auf Ihre Website verwenden. In diesem Beispiel haben wir den Google Chrome-Browser verwendet. Um auf die Website auf mobilen Geräten zuzugreifen, haben wir eine App namens „ Internet Explore for Android“ heruntergeladen. Wir haben die URL für diese Seite kopiert und in die App eingefügt, und die Ergebnisse waren verblüffend. Wir haben festgestellt, dass das Menü sowohl im Quer- als auch im Hochformat richtig formatiert war und alle Links wie erwartet funktionierten. Ihre Laufleistung kann jedoch bei Mobilgeräten variieren. Wir empfehlen Ihnen, Ihr Menü auf so vielen Geräten und Browsern wie möglich zu testen, bevor Sie es live stellen. Wenn Sie Probleme finden, ist es jetzt an der Zeit, sie zu beheben.

Schritt fünf: Live gehen

Sobald das Menü getestet wurde und Sie zufrieden sind, dass alles wie geplant funktioniert, ist es an der Zeit, es der Öffentlichkeit zugänglich zu machen. Klicken Sie auf das Menüsymbol in der oberen rechten Ecke Ihrer Website und wählen Sie „Menüeinstellungen“ aus dem Dropdown-Menü. Oben in der Liste sehen Sie eine Liste mit Elementen mit dem Titel „Mobile-Menü“ . Hier geben Sie die Webadresse für Ihre Mobile Menu Plugin-Seite ein. Klicken Sie anschließend auf „Änderungen speichern“ und warten Sie einige Sekunden, bis die Änderungen wirksam werden. Das ist es!

Fazit

Jetzt, da Sie wissen, wie Sie ein Slide-Panel-Menü in WordPress-Designs hinzufügen, probieren Sie es auf Ihrer eigenen Website aus. Und wenn Sie Ihre Website jemals mit zusätzlichen Menüs aktualisieren möchten, wissen Sie jetzt, wie es geht . Hoffentlich hat Ihnen dieser Artikel dabei geholfen, eine neue Fähigkeit zu erlernen, und Sie nicht überwältigt zurückgelassen.