Header

0:01
Ja Hallo zusammen, ich möchte euch zeigen, wie der Header angepasst werden kann und grundsätzlich ist es so. WordPress verwaltet den Header üblicherweise innerhalb eines sogenannten Template Parts, es ist also ein ein globaler Bereich innerhalb der Templates, der sozusagen über alle Templates hinweg, also Startseite, normale Seiten, Blog Posts und so weiter hinweg global gepflegt werden kann, weil der Header ja üblicherweise auf all diesen Unterseiten identisch gestaltet werden soll.

0:28
Ja, und wir haben Pattern vorbereitet für verschiedene Arten von Headern. Es gibt, ich sage mal, sehr einfache Header, die in unserem Parent Theme mit integriert sind, die sozusagen vollständig mit den Möglichkeiten von wordpress selbst umgesetzt sind. Und dann haben wir ein Paar etwas komplexere Header komplex insofern, dass sie Multi Level Navigation ermöglichen, die eben auch die ganzen Aspekte der Barrierefreiheit, also Tastatur, steuerbarkeit per Escape schließt das Menü wieder und so weiter diese ganzen Aspekte eben berücksichtigt und.

0:58
Weil das eine Anforderung ist, die wir in unseren Projekten eigentlich durch die Bank weg immer haben. Okay gut, ich habe jetzt hier die lokale WordPress Installation und ich möchte euch kurz zeigen wie wir vorgehen. Ich gehe einfach einmal hierüber und gehe im Design in den Editor, also in den Zeit Editor wo ich mit Admin Berechtigung die Seite gestalten kann und.

1:20
Und hier gibt es den Bereich Vorlagen in der deutschen Version und hier oben sehen wir eben die Template Parts. Da wäre zum Beispiel der Header und der Footer, jetzt hier vorkonfiguriert in unserem Design System Theme und auf der rechten Seite sehen wir die ganzen Pattern, die eben hier mitgeliefert werden. Aktuell sind das 179 Stück in Kombination von Parent und Child Theme das.

1:45
So, und wenn ich jetzt hier einfach mal nach Header suche, dann würde ich auch sehen, was es da alles so gibt. Also wir haben hier Header, 12345 und so weiter und hier gibt es auch 2 Woo Commerce Header, die hier momentan einen kleinen Fehler anzeigen, ganz einfach weil Woo Commerce hier momentan in der Installation noch nicht eingerichtet ist. Und deswegen sagt dieser Header hier hey ich sehe da ist so ein Warenkorb Block eingebaut, aber den finde ich gerade gar nicht, deswegen sind diese beiden jetzt etwas auszuklammern okay.

2:12
Gut, dann gehen wir einfach mal in unseren Template Part rein. Hier in den Header und schauen uns an, was da momentan eingerichtet ist. So ich weiß wie das funktioniert, kann das abbrechen und wir sehen jetzt hier, da ist unser Standard Header, den wir sozusagen als Header 1 standardmäßig im Parent Theme vorkonfiguriert haben und wenn ich mir hier einfach mal angucke, was gibt es denn da, dann seht ihr, das ist von uns so vorbereitet, dass wir Skiplinks gebaut haben.

2:39
Da gibt es einen Standard in wordpress, den haben wir deaktiviert und nutzen sozusagen eigene Skipplinks, ganz einfach, weil wir die dann besser steuern können. Und ich sag mal, mehr Möglichkeiten haben, an verschiedene Stellen der Seite zu springen. So, und dann kommt eben das Header Pattern und hier ist eben mit den ganz normalen Blöcken jetzt hier der Header eben aufgebaut worden, dann mit der Navigation und allem drum und dran so und wenn ich jetzt dieses Pattern tauschen möchte gegen einen anderen Header, dann mache ich eigentlich nichts anderes als dieses Pattern rauslöschen.

3:10
Und dann füge ich das gewünschte Pattern eben unterhalb der Skiplinks ganz wichtig ein. Also ich sage jetzt hier danach hinzufügen, so und dann kann ich mir einen der Header aussuchen, ich gehe hier in die Pattern, suche nach header, ich kann dann natürlich auch in der Dokumentation nachschauen, da haben wir ein bisschen detaillierter beschrieben, wie die Header funktionieren und man kann sich das auch in so einer Responsiven Preview anschauen.

3:35
Ja, einfach wie der Header aussieht und was für Inhaltselemente der hat. Und ich würde jetzt hier zum Beispiel hingehen und sagen, ich nehme einfach mal Header, nehmen wir einfach mal Header 3 oder so etwas so und dann baue ich den hier ein und anschließend habe ich eben hier Skip Links und den Header und der besteht jetzt ebenfalls aus ganz normalen Blöcken, aber er hat an verschiedenen Stellen hier id s die wir mitgegeben haben und er hat auch eine CSS Klasse.

4:03
Hier unten unter erweitert Header 3 beispielsweise über diese Klassen steuern wir ein bisschen Layout, das ist immer bei unseren Child Theme Headern der Fall und über diese id s hier steuern wir das Java Script, um beispielsweise Menüs auf und Zuklappbar zu machen und solche Sachen, da werden auch die Area Attribute dann drüber angewendet.

4:26
Gut, dann kann ich das hier eigentlich auch schon direkt speichern. Ihr seht, da sind jetzt Standardmenüpunkte vorbereitet und dann kann ich hier wieder rausgehen und mir die Seite eigentlich mal anschauen und dann sehe ich, ah, hier oben ist jetzt mein Header mit vorbereiteten Menüpunkten und eben einer vorbereiteten Multi Level Navigation. Das Logo gibt es aktuell noch nicht, weil wir noch keins eingebaut haben, dann habe ich hier die Suche und Kontakt und so eine Servicenavigation jetzt möchte ich natürlich normalerweise ein Logo einbauen.

4:54
Das machen wir dann jetzt auch mal eben. Ich gehe also zurück hier in meinen Template Part wieder in den Header, wieder hier rein und wähle einfach das Logo aus. Wir sehen jetzt hier so eine kleine Vorschau an der Stelle, wo eben das Logo erwartet wird, das ist der ganz normale Logo, Website Logo, Block von wordpress, dann wähle ich das Logo eben aus, muss jetzt natürlich 1 haben, ich habe hier eine kleine png vorbereitet und.

5:20
In Wirklichkeit wäre das wahrscheinlich eher eine SVG. Aber wordpress erlaubt aktuell das Hochladen von SV GS nicht standardmäßig und deswegen zeige ich das jetzt hier mit einer png. Aber ihr könnt natürlich ein Plugin installieren, um svg Uploads zu erlauben und anschließend könnt ihr natürlich ein SVG Logo hochladen. Ok, dann füge ich das hier ein, könnte ich hier die Größe anpassen und so weiter das möchte ich jetzt alles gar nicht tun und dann speichere ich das einfach.

5:45
Und gucke mir das Ganze an. Ich würde hier normalerweise natürlich auch dieses Logo mit der Startseite verlinken, das ist hier vorkonfiguriert und anschließend, wenn ich neu lade, sieht das Ganze eben so aus. Ja, ich kann auch mit der Tastatur natürlich durchgehen, so mit Escape wieder schließen, also das funktioniert alles out of the Box und erfüllt alle Anforderungen die wir normalerweise haben okay was haben wir noch, wir haben natürlich hier eine Demo Navigation die.

6:14
Wir gegen eine echte Navigation tauschen möchten und auch dafür gehe ich jetzt einfach wieder hier rein und schaue mir ich klick einfach mal hier in so einen Menüpunkt rein und öffne dann hier links diese Dokumentübersicht und schaue einfach mal, wo bin ich denn da gerade und dann sehe ich hier, da gibt es den Navigationsblog und sobald ich den anklicke sehe ich hier auf der Seite eben auch die ganzen Menüpunkte und vorbereitet haben wir das, damit wir eben auch diese Multi Level Navigation testen können und solche Sachen.

6:43
Einfach mit statischen Links ist also einfach ein statisch zusammengebautes Menü und der einfachste Weg jetzt ein Custom Menü hier zu integrieren wäre wahrscheinlich, dass ich hingehe und sage hier oben auf dem kleinen Pünktchen neues Menü erstellen, jetzt ist es komplett leer.

7:02
Und anschließend gehe ich hin und baue das sozusagen von Grund auf neu auf. Das heißt, dieser Platzhalter ist jetzt verschwunden und wir bauen unser eigenes Menü, ich füge also etwas hinzu, da diese standardinstallation jetzt nahezu keinen Inhalt hat, außer hier unserer Beispielseite würde ich dann zum Beispiel hier hingehen und würde sagen, Beispielseite soll hinzugefügt werden, dann ist die eben hier und dann füge ich noch eine zweite Seite hinzu, zum Beispiel eine, die ich jetzt gerade erst erstelle, oder ich füge einfach mal zweimal die gleiche hinzu.

7:32
Um ein bisschen zeigen zu können, dass da überhaupt ein Menü ist. Und ihr seht, dann baut sich eben hier dieses Menü auf. Hier oben gibt es noch 1. Wäre das gleiche Prinzip, ja also da würde ich auch dann auf diese zweite Navigation gehen und würde die dann austauschen. Also diese Custom links gegen echte Links tauschen, Impressum, Kontakt was auch immer dann hier passieren soll und hier dieser Kontakt Button, das ist ein ganz normaler Button, auch der würde dann natürlich hier.

8:00
Mit der Seite verlinkt, die verlinkt werden soll oder einfach gelöscht. Ok, ich lasse es jetzt mal so wie es ist, speichere das einfach und dann sehen wir es werden 2 Bereiche in unserer Website aktualisiert, einmal unser Header und unser Navigationsmenü, das speichere ich einfach mal. Schauen wir noch mal an bei neu laden wie es jetzt im Browser aussieht, dann haben wir natürlich hier wie erwartet unsere Navigation und ganz entscheidend ist jetzt eben, wenn ich mir das mal hier im Quelltext angucke.

8:28
Und zwar ich brauche jetzt hier gar nicht die Ansicht so, sondern ich möchte hier einfach einmal kurz die Stelle finden, wo die Navigation als Nav Element im html Korb liegt. So ich hoffe man kann das jetzt sehen, ich Zoom mal ein Stückchen ran, wir haben ja ein Area Label und da steht Menü und dieses Area Label das ist wichtig für die Barrierefreiheit und das ist

8:53
insbesondere dann sehr wichtig, wenn es mehr als eine Navigation gibt, weil dann muss ich die identifizieren können, das wäre jetzt hier standardmäßig der Fall, wir haben hier unten ein paar Demo Installations Navigation und wir haben hier oben diese Service, Navigation und so weiter und da steht jetzt einfach nur Menü oder Menü, das passt ihr an. Ich gehe hier wieder raus indem ihr diesem Menü einen Namen gebt und ich gehe wieder in die oberste Ebene des Zeit Editors hier gibt es auch den Menüpunkt Navigation und.

9:22
Und da sehen wir jetzt unsere Installation und unser Menü, was wir gerade angelegt haben. Und wenn ich da rein gehe, dann hätte ich auch hier die Möglichkeit das zu bearbeiten, also Menüpunkte, externe Links, whatever hinzuzufügen und hier habe ich auch die Möglichkeit das umzubenennen, also zum Beispiel zu sagen, das ist meine Hauptnavigation so speichern und wenn ich anschließend hier neu lade, dann steht hier als Area Label eben auch.

9:50
Hauptnavigation und das wäre relativ wichtig, dass ihr darauf achtet, dass da kein unglücklicher Begriff steht. Das für die Barrierefreiheit wichtig und genau so könnt ihr den Standard Header gegen das gewünschte Pattern austauschen und anschließend solltet ihr natürlich das Logo einfügen und die Navigation customizen.