Du hast eine Website mit WordPress erstellt und möchtest jetzt den Header bearbeiten?

Oder du hast irgendwo gelesen, dass du irgendwelchen Code in den Head deiner Website integrieren sollst und fragst dich jetzt, was damit gemeint ist?

Was immer dich hierhergeführt hat, beide Themen sind schnell erledigt, wenn man weiß, wie es geht. Und egal, ob du den HTML-Head oder den Header deiner WordPress-Seite bearbeiten willst (zum Unterschied kommen wie gleich noch), beides findest du hier erklärt. Suche dir einfach den Teil aus, der dich gerade interessiert und los geht’s.

Header deiner Website vs. HTML-Head – Was ist was?

Wie du vielleicht schon festgestellt hast, kann der Begriff Header in WordPress verschiedene Dinge meinen. Wenn du dir nicht ganz sicher bist, was du brauchst, kann ich vielleicht etwas Licht ins Dunkel bringen:

Zum einen ist da der Header deiner Website, also auf gut deutsch die Kopfzeile. Bei den meisten Websites findest du an dieser Stelle ein Logo und das Menü der Seite, manchmal auch noch die Suchfunktion oder Links zu den Social Media Kanälen.

Um diesen Header zu bearbeiten, reicht es meistens, einen Blick in die Design-Einstellungen deines Themes zu werfen. Was das ist und wie das geht, erfährst du weiter unten.

Dann gibt es noch den HTML-Head, der oftmals mit dem Header verwechselt oder sogar ebenfalls als solcher bezeichnet wird. Dabei handelt es sich allerdings nicht um ein sichtbares Element auf deiner Website, sondern um Code im Hintergrund.

Das ist zum Beispiel interessant, wenn du auf deiner Website ein Tracking (z.B. Google Analytics) einrichten oder deine Seite für Suchmaschinen (z.B. Google oder Pinterest) optimieren möchtest. Keine Angst, in der Regel brauchst du keine Programmierkenntnisse, um deinem HTML-Code etwas hinzuzufügen. Alles, was du können musst, ist Text kopieren und einfügen.

Bevor du irgendetwas an deiner Seite verändest…

…empfehle ich dir auf jeden Fall, ein Back-Up zu machen.

Tipp: Wenn du nicht weißt, wie das geht, dann habe ich auf dem Blog von Jane von Klee eine ausführliche Anleitung geschrieben, wie du mit dem Plugin UpdraftPlus ein Back-Up erstellen und im Notfall auch wieder einspielen kannst.

Wenn du nicht weißt, wie du ein Plugin auf deiner Website installieren kannst, findest du hier eine Anleitung.

Design-Anpassungen der Kopfzeile

Die grundlegende Funktion, die du brauchst, um deinen WordPress-Header zu bearbeiten, ist der Theme Customizer. Diesen findest du in deinem WordPress-Dashboard (die Seite auf die du kommst, wenn du dich anmeldest) links in der Seitenleiste unter dem Punkt „Design“, dann „Customizer“. Je nach WordPress-Version und Theme heißt dieser Punkt bei dir evtl. auch „Anpassen“.

Bevor wir uns anschauen, wie du die Elemente deines WordPress-Headers bearbeiten kannst, braucht es aber noch ein ganz klein wenig Theorie.

Was dein WordPress-Theme mit deinem (Header-)Design zu tun hat

Alle Design-Einstellungen, die du in WordPress vornehmen (oder eben nicht vornehmen) kannst, hängen von deinem gewählten Theme ab. Wenn du eine Einstellung bei dir nicht findest, dann kann das zwei Möglichkeiten haben:

1. Die Einstellung heißt in deinem Theme einfach anders.

Schau dir nochmal alle verfügbaren Einstellungen an: Vielleicht gibt es etwas, das so ähnlich heißt oder das Gleiche meinen könnte?

Sonst suche einfach in der Suchmaschine deiner Wahl „Theme-Name  + gewünschte Einstellung“ (z.B. „Divi Logo anpassen“), das sollte dir weiterhelfen.

2. Diese Einstellung gibt es bei deinem Theme einfach nicht.

Auch das ist möglich. In diesem Fall gibt es leider nicht viel, was du tun kannst, außer dein Theme zu wechseln (dazu unten mehr) oder dein Theme manuell anzupassen, was ich dir nur raten würde, wenn du zumindest über ein paar Basis-HTML- und CSS-Kenntnisse verfügst.

In der Regel hast du bei kostenpflichtigen Themes mehr Einstellungsmöglichkeiten als bei kostenlosen. Auch das ist aber keine Garantie, dass es bei dir alle Einstellungen gibt.

Aussehen deines WordPress-Headers anpassen

Um generelle Einstellungen der Kopfzeile in WordPress vorzunehmen, öffne den Theme Customizer (unter Design -> Customizer). Suche nach einem Punkt mit dem Namen „Header“ oder „Kopfzeile“.

Je nach Theme kannst du an dieser Stelle z.B. Hintergrundfarbe, Textfarbe, Linkfarbe, Schriftgröße oder Schriftart für deinen Header einstellen.

Außerdem kannst du auswählen, welche Elemente deines Headers, wie z.B. Logo, Menü, Suchleiste, etc., angezeigt werden und welche nicht. Wenn dein Theme diese Funktion bereitstellt, kannst du hier auch Social Media Profile hinzufügen und verlinken.

Alle Änderungen, die du im Customizer vornimmst, sind zunächst nur für dich sichtbar. Du kannst also gefahrlos ein bisschen herumprobieren. Wenn du fertig bist, vergiss nicht, deine Änderungen vor dem Schließen des Customizers auch zu veröffentlichen oder zumindest zu speichern (über den Button ganz oben in der Customizer-Leiste) .

Logo für den Header hinterlegen

Dein Logo kannst du normalerweise ebenfalls im Theme Customizer hinterlegen. Die Stelle, an der du das tun kannst, variiert allerdings je nach Theme.

Wenn du bei den Header-Einstellungen keine Möglichkeit findest, dein Logo zu hinterlegen, suche im Theme Customizer den Punkt „Allgemeine Einstellungen“, „Website-Identität“ o.ä.

Einige Themes haben im Dashboard eigene Seiten mit Theme-Optionen. Danach kannst du Ausschau halten, wenn du im Theme Customizer nichts findest, um dein Logo hochzuladen. Suche dazu im Dashboard in der linken Seitenleiste einen Menüpunkt mit dem Namen deines Themes und klicke dich durch die vorhandenen Optionen.

Menüpunkte anpassen

Je nachdem, welches Theme du verwendest, gibt es möglicherweise direkt im Theme Customizer eine Einstellung, mit der du dein Menü anpassen kannst.

Wenn das nicht der Fall ist, schließe den Theme Customizer (über den Pfeil oben links – Speichern nicht vergessen). Du bist jetzt wieder im WordPress-Dashboard und findest dort unter „Design“ die Einstellung „Menüs“.

Hier kannst du entweder ein neues Menü anlegen oder deine bestehenden Menüs verwalten. Wenn du mehr als ein Menü hast, kannst du über die Dropdown-Liste oben auswählen, welches Menü du bearbeiten willst.

Auf der linken Seite kannst du jetzt auswählen, welche Seiten (oder andere Ressourcen) du zu deinem Menü hinzufügen willst. Rechts siehst du die Struktur deines Menüs. Wenn du dort auf einen Menüpunkt klickst, kannst du weitere Einstellungen vornehmen, z.B. den angezeigten Namen der Seite ändern.

Die Menüpunkte kannst du ganz einfach umsortieren, indem du sie mit der Maus hin- und herschiebst. Rückst du einzelne Punkte dabei nach innen ein, kannst du auf diese Weise Unterpunkte erstellen. Bist du zufrieden mit deinem Menü, kannst du dieses über den Button unten rechts speichern.

Damit dein erstelltes Menü auch wirklich im Header angezeigt wird, musst du ihm noch die entsprechende Position zuweisen. Dazu gehst du ebenfalls bei „Design“ -> „Menüs“ oben auf den Reiter „Positionen verwalten“.

Hier siehst du, an welchen Stellen du dein Menü überall anzeigen lassen kannst. Dass dein Menü im Header angezeigt wird, solltest du es hier beim Punkt „Hauptmenü“ hinterlegen.

Den WordPress-Header bearbeiten für die Ansicht am Handy

Vermutlich ist dir bereits aufgefallen, dass dein Header in der mobilen Ansicht (also am Tablet oder Handy) etwas anders aussieht als am Desktop. Auch diese Ansicht kannst du im Normalfall im Theme Customizer anpassen.

Oft findest du das direkt bei den Einstellungen für den Header. Möglicherweise gibt es dafür aber auch eine extra Theme Customizer Einstellung, die in der Regel einen Namen trägt wie „Mobiles Design“, „Mobile Ansicht“ oder „Responsive(s) Design“.

Code in dem HTML-Head einfügen

Wenn du zu den Menschen gehörst, die bereits bei dem Wort „Code“ zusammenzucken, dann kann ich dich an dieser Stelle beruhigen: Du musst definitiv nicht programmieren können, um deiner Website Code hinzuzufügen.

Wenn du diesen Artikel liest, ist die Wahrscheinlichkeit groß, dass du irgendwo an anderer Stelle gelesen hast, dass du ein „Code-Snippet“ in den Header deiner Website einfügen sollst. Im Normalfall steht besagter Code bereits fertig zum Kopieren in der nächsten Zeile.

Alles, was du tun musst, ist also diesen Code zu kopieren und an der richtigen Stelle – welche das ist erfährst du gleich – wieder einzufügen. Normalerweise kannst du dieses Code-Snippet auch genauso leicht wieder entfernen wie du es hinzugefügt hast. D.h. selbst wenn mal etwas nicht funktionieren sollte, ist das kein Weltuntergang.

Trotzdem würde ich dir unbedingt dazu raten, nur Code von Seiten einzufügen, denen du vertraust und nicht jeden x-beliebigen Code aus dem Internet zu kopieren. Skeptisch werden solltest du vor allem dann, wenn das Code-Snippet unverhältnismäßig lang ist. Code für deinen HTML-Head sollte im Normalfall nicht länger als ein paar Zeilen sein.

Code zum HTML-Head hinzufügen mit Plugin

Die einfachste (und sicherste) Möglichkeit, deinem HTML-Head Code hinzuzufügen ist, ein Plugin dafür zu verwenden. Je nachdem, was genau du vorhast, kann es sogar sein, dass du dafür kein neues Plugin installieren musst, sondern bereits installierte Plugins verwenden kannst.

Wenn du ein Plugin zum Schutz deiner Website vor fremden Angriffen verwendest (z.B. Wordfence), kann es passieren, dass beim Speichern des eingefügten Codes ein Alarm oder eine Warnung angezeigt wird. Diese kannst du in diesem Moment ignorieren bzw. bestätigen, dass du die Änderung selbst vorgenommen hast.

Für alles, was mit Tracking zu tun hat: Cookie-Consent-Plugins

Wenn du Code für das Facebook Pixel, Google Analytics, den Google Tag Manager oder ähnliche Programme auf deiner Website hinzufügen möchtest, dann solltest du das auf jeden Fall mit Hilfe deines Cookie-Consent-Plugins tun.

Das Cookie-Consent-Plugin ist das Plugin, über das auch dein Cookie-Banner generiert wird, so dass deine Website-Besucher:innen auswählen können, welche Cookies sie zulassen oder auch nicht. Mein persönliches Lieblings-Plugin dafür ist Borlabs Cookie*.

Das Gute an den Cookie-Consent-Plugins ist, dass du in der Regel für die bekanntesten Tracking-Plugins gar keinen Code hinzufügen musst. Alles, was du tun musst, ist deine entsprechenden IDs zu hinterlegen (z.B. deinen Facebook-Pixel oder deine Google-Analytics-ID) und alles andere übernehmen die Tools dann für dich.

Da die Vorgehensweise hier je nach Tool etwas unterschiedlich ist, kann ich dir auch hier wieder nur empfehlen, mit deiner Lieblings-Suchmaschine nach „Plugin + Tracking-Tool“ zu suchen und die entsprechenden Anleitungen zu befolgen.

Für alles, was mit Suchmaschinen zu tun hat: SEO-Plugins

Relativ häufig wird Code im HTML-Head deiner Seite außerdem dazu verwendet, deine Website für die sogenannten Webmaster-Tools der Suchmaschinen, wie z.B. die Google Search Console, zu verifizieren.

An dieser Stelle kannst du auf dein SEO-Plugin zurückgreifen und hier den entsprechenden Code einfügen:

Mit dem Plugin Yoast SEO

1. Wähle im WordPress-Dashboard den Punkt „Yoast SEO“, dann „Einstellungen“
2. Wähle den Punkt „Website-Verbindungen“
3. Füge den Code in das entsprechende Feld ein

Mit dem Plugin Rank Math SEO*

1. Wähle im WordPress-Dashboard den Punkt „Rank Math SEO“, dann „Allgemeine Einstellungen“
2. Wähle links in der Leiste „Webmaster-Tools“
3. Füge den Code in das entsprechende Feld ein

Für alles andere

Wenn du kein SEO-Plugin verwendest oder deinem HTML-Head anderen Code hinzufügen möchtest, dann kannst du dazu ebenfalls ein Plugin verwenden.

Ein sehr einfaches Plugin für diesen Zweck ist WPCode. Nach der Installation findest du im WordPress-Dashboard unter „Einstellungen“ den Punkt „Code-Snippets“. Unter „Header und Footer“ kannst du jeden beliebigen Code in das entsprechende Feld einfügen und speichern. 

Code zum HTML-Head hinzufügen ohne Plugin

Einige WordPress-Themes wie z.B. Divi, bieten die Möglichkeit, deinem HTML-Head auch ohne Plugin Code hinzuzufügen. Prüfe dazu am besten die Theme-Einstellungen, ob du eine entsprechende Möglichkeit findest.

Funktioniert das nicht, kannst du deinen HTML-Head anpassen, indem du die Datei „header.php“ bearbeitest und den entsprechenden Code in den Bereich zwischen <head> und </head> einfügst. Dies kannst du entweder direkt im Theme Builder (im WordPress Dashboard unter „Design“ -> „Theme Builder“ bzw. „Theme Editor“) oder über FTP tun.

Beide Varianten würde ich dir aber nur empfehlen, wenn du zumindest über HTML-Grundkenntnisse verfügst. Der Nachteil an dieser Stelle ist auch, dass der eingefügte Code mit jedem Theme-Update wieder verschwindet. Damit dies nicht passiert, kannst du die Verwendung eines sogenannten Child-Themes in Betracht ziehen.

Fazit: WordPress-Header bearbeiten ist eigentlich ganz einfach

WordPress ist ein unheimlich umfangreiches Tool. Dadurch lässt es sich leider nicht immer vermeiden, dass manche Einstellungen etwas versteckter sind, als man das intuitiv erwarten würde. Wenn du weißt, wo du suchen musst, ist es aber ganz einfach, deinen Header in WordPress zu bearbeiten oder deinem HTML-Head Code hinzuzufügen.

Ich hoffe, ich konnte dir mit diesem Artikel weiterhelfen. Wenn du noch Fragen dazu oder zu anderen Technik-Themen in deinem Online-Business hast, dann schreibe sie mir gerne hier in die Kommentare.