Der Header (deutsch: Kopfzeile) ist der obere Bereich einer Webseite, der üblicherweise auf allen Unterseiten einer Website erscheint und typischerweise Logo, Markenname, Hauptnavigation und gegebenenfalls eine Suchleiste oder einen Call-to-Action enthält.
Was bedeutet das?
Im HTML-Standard wird der Header durch das semantische Element <header> ausgezeichnet, das mit HTML5 eingeführt wurde. Das Element kennzeichnet einleitende Inhalte und kann sowohl für den seitenweiten Kopfbereich als auch für Abschnitte innerhalb eines Artikels verwendet werden. Für Screenreader und Suchmaschinen signalisiert das <header>-Element den Beginn einer Navigationsregion und verbessert so die Zugänglichkeit und die strukturelle Lesbarkeit einer Seite.
In WordPress wird der seitenweite Header bei klassischen PHP-Themes in der Datei header.php definiert. Diese Datei wird über die Template-Funktion get_header() in jede Seite eingebunden. Sie enthält typischerweise das öffnende <html>-Element, den gesamten <head>-Bereich mit Metadaten und den Beginn des <body>-Elements. Über den Action-Hook wp_head() in der header.php stellen WordPress-Core und Plugins sicher, dass CSS-Dateien, Metadaten und weitere Ressourcen korrekt in den <head>-Bereich der Seite eingefügt werden.
Bei Block-Themes (Full Site Editing, ab WordPress 5.9) wird der Header als Template-Part in der Datei parts/header.html gespeichert. Im Site Editor kann der Header direkt im Browser visuell bearbeitet werden, ohne PHP-Kenntnisse zu benötigen. Globale Stile und Blöcke wie das Site-Logo-Block, der Navigationsblock und der Suche-Block werden im Header positioniert und via Block-Editor konfiguriert.
Viele WordPress-Themes bieten zusätzliche Header-Optionen an, zum Beispiel einen transparenten Header für die Startseite, einen klebenden Header (Sticky Header), der beim Scrollen am oberen Rand der Seite fixiert bleibt, oder unterschiedliche Header-Layouts für verschiedene Seitentypen.
Beispiel aus der Praxis
Sie überarbeiten das Design Ihrer WordPress-Website und möchten die Hauptnavigation im Header um einen auffälligen Button für die Kontaktseite ergänzen. Bei einem klassischen Theme bearbeiten Sie die Datei header.php im Child-Theme oder nutzen den Menü-Editor im Backend unter „Design > Menüs“, um einen benutzerdefinierten Link als letzten Menüpunkt anzulegen. Anschließend weisen Sie diesem Menüpunkt über CSS eine Button-Optik zu. Bei einem Block-Theme öffnen Sie den Site Editor, wählen den Header-Template-Part aus und fügen einen Schaltflächen-Block neben dem Navigationsblock ein.
Warnung
Entfernen Sie nie den Aufruf von wp_head() aus der header.php. Dieser Hook ist der Ankerpunkt, an dem WordPress und Plugins ihre Stylesheets und Skripte registrieren. Fehlt der Hook, werden keine Theme-CSS-Dateien geladen, Sicherheits-Plugins können ihre Schutzfunktionen nicht initialisieren und der Block-Editor verliert einen Teil seiner Steuerfunktionen.