Bereitstellen von Menüs

Seiten werden in WordPress nicht in die chronologische Reihenfolge eingefügt, sondern sie stehen neben dieser Reihenfolge und sind für statische Informationen gedacht. Beispielsweise ist es sinnvoll eine statische Seite für ein Impressum oder eine ,,Über-mich“-Seite anzulegen. Weil Seiten aus der Reihenfolge herausfallen, müssen diese auf eine andere Art von dem Besucher der Webseite ansprechbar sein. Hierbei ist es möglich, ein Widget in die Sidebar einzubauen. Schöner ist es jedoch, ein Menü auf der Seite einzublenden.

Die Menüentwicklung beginnt damit, dass der neue Menüort WordPress innerhalb der functions.php zunächst einmal mitgeteilt wird. Dies geschieht mit der Funktion register_nav_menu(), deren erster Parameter das Menü-Slug und der zweite Parameter einen Namen darstellt, welcher innerhalb des Administrationsinterfaces angezeigt wird:

Nun ist es möglich, innerhalb des Administrationsinterfaces ein Menü zu erstellen und dieses Menü der gerade angelegten Menüposition zuzuweisen, wie unten zu sehen ist:

Nun kann das Menü genutzt werden. Es wird innerhalb der Datei header.php innerhalb des <header>-HTML5-Tags eingebunden. Folgender Code wird der header.php-Datei hinzugefügt:

Ins Auge fällt die Funktion wp_nav_menu(). Diese bekommt ein Array an Parametern übergeben. Der wichtigste Parameter ist der Parameter menu. Dieser enthält den zuvor definierten Menünamen topmenu, so dass genau das soeben im Administrationsinterface definierte Menü hier eingefügt wird. In den Parametern container* werden Angaben über den HTML-Container gemacht. In den Parametern menu* werden Angaben über das Menüelement gemacht. Menüeinträge werden als Listenelemente ausgegeben. items_wrap legt fest, wie sie eingebunden werden.

Von Zeile 2 bis 4 erstreckt sich ein weiteres div-Element. Dieses Element beinhaltet ein Icon, welches aus drei übereinanderliegenden Strichen besteht und im mobilen Smartphoneumfeld ein Menü symbolisiert. Dieses Icon ist mit einem JavaScript-Kommando hinterlegt. In folgender Datei menu.js befindet sich der passende JavaScript-Code:

Der JavaScript-Code sorgt bei seiner Ausführung durch einen Klick oder Touch auf das Icon, dass die Klassennamen der Elemente des Menüs sich ändern. Damit ändern sich CSS-Informationen, so dass das Menü aus einem auf mobilen Endgeräten ehemals unsichtbaren Zustand sich aufklappt.

Damit der JavaScript-Code ausgeführt werden kann, muss er zunächst einmal eingebunden werden. Dies geschieht, indem in den <head>-HTML-Tag der header.php folgende Zeile ergänzt wird:

Nachdem nun auf diese Weise das Menü Eingang in unsere WordPress-Seite gefunden hat und auch mit Funktionalität hinterlegt worden ist, muss das passende CSS hinzugefügt werden, damit das Menü das korrekte Aussehen erhält. Würde das CSS nicht hinzugefügt, so würde das Menü als eine Aufzählung angezeigt werden, sowie das Ein- und Ausklappen des Menüs im mobilen Modus nicht funktionieren. Zusätzlich würde auch kein responsives, sich abhängig von der Bildschirmauflösung veränderndes Design vorhanden sein. Folgender Code wird zur style.css hinzugefügt. Erklärungen über die Funktion der einzelnen CSS-Beschreibungen sind im Quellcode hinterlegt:

In folgender Abbildung ist das Ergebnis der Einbindung auf großen Bildschirmen, wie etwa Desktop-PCs, zu sehen:

Die Abbildung unten zeigt das Ergebnis auf einem Smartphone zunächst im eingeklappten und dann auch im ausgeklappten Zustand:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen