Dorayaki WordPress-Theme vom Elmastudio um eine feststehende Menüleiste erweitern

Gerade auf längeren WordPress-Seiten mit viel scrollbarem Inhalt finde ich persönlich eine fixierte Menüleiste immer sehr praktisch. So kann der Seitenbesucher jederzeit eine andere Auswahl treffen, ohne erst wieder bis an den Anfang der Seite scrollen zu müssen. Jetzt kann man zwar die Menüleiste mit einem „Position: fixed“ sehr leicht an die obere Position des Browsers kleben, aber in der Regel hat man im Dorayaki-Theme auch eine Header-Überschrift, ein Grafiklogo oder sogar die Header-Info-Textboxen eingebaut. Wenn ich jetzt einfach diesen ganzen Block fixiere, nimmt das unter Umständen relativ viel Platz vom Browserfenster weg. Besser finde ich, wenn der Header aus dem Bild scrollt und nur das Menü ab einer bestimmten Position stehen bleibt.

Schritt 1. Wo finde ich den passenden JavaScript-Code?

Um das hinzubekommen, benötigt man etwas JavaScript und eine zusätzliche Zeile CSS in seinem WordPress-Theme. Jetzt ist natürlich nicht jeder ein Spezialist in Sachen JavaScript und kann sich das mal schnell selber programmieren. Aber das muss auch nicht sein. Im Internet findet man dazu einige Seiten, die einem den benötigten JS-Code zur Verfügung stellen. Ich bin zum Beispiel hier fündig geworden. Natürlich müssen wir die Angaben ein wenig anpassen, damit sie auch mit unserem Theme von Elmastudio zusammen funktionieren.

Schritt 2. JavaScript-Code entsprechend anpassen

Also fangen wir mit dem Anpassen von dem JavaScript-Code an. Damit das funktioniert, müssen wir die Bezeichnung der Navigation in den JavaScript anpassen. Also ändern wir das „.nav-container“ in die Bezeichnung um, die der aktuelle Menü-Container in unserem WordPress-Theme hat. Diese Bezeichnung setzt sich normalerweise so zusammen, dass zuerst das Wort menu kommt, dann kommt die Bezeichnung, die man selber dem Menü im Backend von WordPress gegeben hat – in meinem Fall einfach menue, gefolgt von dem Wort container und das alles mit einem Bindestrich voneinander getrennt. Dabei kommt dann bei mir „.menu-menue-container“ heraus und das ersetzt in dem JS-Code die Bezeichnung „.nav-container“. Man kann auch mit den Werkzeugen der Browser zum Untersuchen von Internetseiten einfach den Menü-Container anwählen und sieht dann genau die aktuelle Bezeichnung, wie sie auf dem folgenden Bild zu sehen ist.

Und der für mich angepasste JS-Code lautet:
Ihr werdet es bestimmt schon erkannt haben, das scrollTop()> 136 sorgt für das Auslösen der Funktion, sobald die Seite sich um 136 Pixel nach oben bewegt hat. Diesen Wert muss man natürlich an seine eigene Situation anpassen, je nachdem wie groß der Header ist und ab wann man die Menüleiste fixieren möchte. Wenn man sich einen Screenshot seines aktuellen Seiten-Headers macht und ein Grafikprogramm wie Paint nutzt, kann man die genaue Pixel-Position recht einfach herausfinden.

Schritt 3. JavaScript-Code in das WordPress-Theme einbinden

Jetzt müssen wir noch dem Theme diese JavaScript-Funktion auch zur Verfügung stellen. Das geht am einfachsten, wenn man sich in die custom.js – findet man im Ordner JS im Dorayaki-Theme-Ordner – mit einträgt. Ja man kann natürlich auch eine eigene JS-Script-Datei erstellen und diese in das Theme zusätzlich einbinden, aber ich möchte hier den einfachsten Weg aufzeigen, ohne dass man sich noch lange in die JS-Technik einarbeiten muss. Wer möchte, kann natürlich jederzeit später die JS-Funktion auch auslagern. Und natürlich kann man auch ein Child-Theme nutzen, wenn man das möchte.

UND GANZ WICHTIG!
Wie immer gilt bei einer Änderung am WordPress Theme, macht unbedingt eine aktuelle Datensicherung, bevor Ihr Dateien verändert, damit Ihr im Fall eines Tippfehlers immer wieder auf die Ursprungsdatei zurück wechseln bzw. Eure WordPress-Seite wiederbeleben könnt. Also kein Basteln ohne aktuelle Datensicherung!

Nach dem Einfügen des Codes in die custom.js sollte das in etwa so aussehen:

An besten fügt Ihr den Code direkt am Anfang oder am Ende der Textdatei ein, so verhindert Ihr ein versehentliches Verändern einer schon enthaltenen JS-Funktion.

Jetzt die Datei speichern und mit Eurem FTP-Programm in den passenden Theme-Ordner (…wp-content/themes/dorayaki/js) laden. Ich ändere immer die Live-Datei um, bevor ich das mache, also zum Beispiel in custom_alt, dann kann ich bei einem Fehler oder Problem immer sofort wieder auf die mal funktionierende Version zurückwechseln.

Schritt 4. Per CSS die Funktion im Theme ermöglichen

Wenn die custom.js erfolgreich hochgeladen worden ist, müssen wir als Nächstes noch eine Zeile CSS hinzufügen. Diese Zeile wird nur durch die JS-Funktion aktiviert und sorgt dafür, dass unsere Menüleiste sich ab einem bestimmten Punkt fest an den oberen Fensterrand des Browsers heftet.

Auf der Quellseite findet Ihr dafür die Zeile „.f-nav“, diese kann man einfach im Dorayaki-Theme in den Theme-Options unter Custom CSS hinzufügen. Wenn das fixierte Menü genauso aussehen soll wie das nicht feststehende Menü, dann müsst Ihr noch die CSS-Einstellungen wie Background etc. hinzufügen. Wichtig ist aber noch, dass Ihr diese Zeile in einen @media screen Container packt, damit das Fixieren nur in der Desktopversion Eures Themes ausgelöst wird.

Bei mir sieht das dann wie folgt aus:
Sollte je nach Aufbau Eurer WordPress-Seite sich nicht der ganze Inhalt direkt brav unter das Menü schieben, dann kann ein zusätzlicher Eintrag (#site-nav {z-index:999;}) in der custom CSS unter Umständen das Problem lösen. Wenn alles so weit funktioniert hat, dann sollte nach einer Aktualisierung des Browsers Dein Menü ab einem bestimmten Scroll-Punkt jetzt stehen bleiben. Wenn nicht schon erledigt, dann heißt es jetzt noch den gewünschten Haltepunkt (scrollTop()>) einzustellen. Dazu muss man leider die custom.js immer wieder verändern und so lange per FTP hochladen, bis das Ergebnis den eigenen Wünschen entspricht. Wie schon erwähnt, mit dem Programm Paint kann man das recht genau ausmessen und so die Versuche deutlich reduzieren.

Wie das Ganze am Ende aussehen kann bzw. funktioniert, kann man auf dieser Seite sehen.

Theoretisch kann man diese Funktion auch für jedes andere WordPress-Theme nutzen, wo ein horizontales Menü zum Einsatz kommt. Man muss halt nur die Bezeichnung des NAV Containers entsprechend ändern und natürlich die CSS-Ergänzung der eigenen Optik des Themes anpassen.

Fazit

Wie eingangs schon erwähnt, finde ich eine feste Menüleiste besonders bei langen Seiten, die zum Beispiel auch mit Infinite Scroll arbeiten, also das endlose Aneinanderreihen von Beiträgen, enorm praktisch. Nichts ist nerviger, finde ich, wenn man inmitten von hunderten von Beiträgen das Menü wieder erreichen möchte, gerade auf einem Tablet, und man dafür einige Sekunden lang scrollen muss. Natürlich bietet diese JavaScript-Funktion auch reichlich andere Möglichkeiten, um sie zu nutzen. So kann man damit zum Beispiel auch einen Footer oder ein Werbebanner ab einem bestimmten Punkt mit der CSS-Funktion „Display“ ein- oder ausblenden lassen.