WordPress-Header bearbeiten: Design anpassen und Code in den HTML-Head einfügen

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 gibt es hier eine gute Anleitung, wie du mit dem Plugin UpdraftPlus ein Back-Up erstellen und im Notfall auch wieder einspielen kannst.

Anleitung: So installierst du ein WordPress-Plugin
  1. Klicke in deinem WordPress-Backend (das ist die Seite, die du siehst, wenn du dich bei deiner WordPress-Website anmeldest) links in der Seitenleiste auf „Plugins
  2. Klicke auf den Installieren-Button direkt neben der Überschrift
  3. Gib rechts oben in die Suchleiste den Namen des gewünschten Plugins ein
  4. Jetzt werden dir passende Plugins zu deiner Suche vorgeschlagen. Wähle das richtige Plugin aus (also das mit dem richtigen Titel) und klicke rechts oben im entsprechenden Kasten auf „Jetzt Installieren
  5. Anschließend klicke auf „Aktivieren“ (an der gleichen Stelle wie der Button bei Punkt 4)
  6. Wenn du willst, kannst du jetzt noch die Einstellungen des Plugins prüfen und ggf. ändern. (Links aus „Plugins“ -> „Installierte Plugins“ -> Das neue Plugin -> Einstellungen).

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.

  1. 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.

Anleitung: So wechselst du dein WordPress-Theme
So findest du heraus, welches Word-Press-Theme du benutzt:
  1. Melde dich bei deiner WordPress-Seite an.
  2. Gehe im Dashboard links in der Seitenleiste auf den Punkt „Design“, dann „Themes
  3. Hier siehst du alle Themes, die auf deiner Website installiert sind. Das aktive Theme ist extra hervorgehoben und vor dem Namen steht „aktiv:“
So kannst du dein Theme wechseln:

Wichtig: Wenn du dein Theme wechselst, ändert sich das Design deiner kompletten Website, daher solltest du das niemals unüberlegt tun und dir dafür ausreichend Zeit nehmen. Ich empfehle dir, auf jeden Fall vorher ein Back-Up zu machen.

Schritt 1: Theme auswählen und herunterladen

  1. Überlege dir, was dir an einem Theme wichtig ist (z.B. viele Design-Optionen, niedriger Preis/kostenlos, Aktualität, guter Support, …) und suche dir entsprechend deiner Kriterien ein WordPress Theme aus, das du verwenden möchtest. Auch dafür hilft eine kleine Internet-Recherche.
  2. Wenn nötig/möglich, lade dir dein gewünschtes Theme als zip-Datei herunter

Schritt 2: Theme hinzufügen

  1. Klicke auf deiner Website im Dashboard im Bereich „Design“ -> „Themes“ auf den „Theme hinzufügen“-Button neben der Überschrift
  2. Hier bekommst du verschiedene Themes vorgeschlagen. Wenn du dir dein gewünschtes Theme nicht bereits heruntergeladen hast, kannst du es hier über die Suchleiste oben rechts danach suchen und es per Klick installieren.
  3. Hast du dein Theme bereits heruntergeladen, kannst du es hier über den Button „Theme hochladen“ (neben der Überschrift) hochladen. Wähle dazu im entsprechenden Feld die ZIP-Datei auf deinem Rechner aus und klicke dann auf „Jetzt installieren“.

Schritt 3: Theme aktivieren und anpassen

  1. Du findest dein Theme jetzt im Bereich „Design“ -> „Themes“ und kannst es aktivieren, indem du es auswählst und auf „Aktivieren“ klickst.
  2. Unter dem Punkt „Design“ -> „Customizer“ (oder „Anpassen“) kannst du jetzt die Design-Einstellungen deiner Website, wie z.B. Schriftarten, Farben etc., anpassen
  3. Wenn du damit fertig bist, prüfe alle Seiten deiner Website, ob alles aussieht, wie es soll und korrigiere ggf. noch Einstellungen, wo nötig.

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.

Wenn dir eine Einstellung besonders wichtig ist, kann es sich lohnen, vorher kurz die Suchmaschine deiner Wahl zu befragen, ob es diese Einstellung für dein gewünschtes Theme 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) .

Wordpress Header mit Theme Customizer bearbeiten

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.

Wordpress Logo hochladen

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.

Wordpress Menü anpassen

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.

Wordpress Hautptmenü festlegen

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“.

Inzwischen ist die mobile Version einer Website wichtiger als die Desktop-Version. Wenn du feststellen solltest, dass deine ganze Website am Handy nicht richtig angezeigt wird und du dafür keine Einstellungen findest, dann würde ich dir auf jeden Fall dazu raten, dein Theme zu wechseln.

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. Plugins, die dafür gerne verwendet werden, sind z.B. Borlabs Cookie, Complianz oder DSGVO-Pixelmate.

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.

Google Analytics ID in Borlabs hinterlegen Beispiel

Auch wenn es theoretisch möglich ist, Tracking-Codes auch ohne Cookie-Consent-Plugin in deinen HTML-Head einzufügen, ist das laut EU-DSGVO nicht erlaubt. Wenn du bisher keinen oder nur einen sehr einfachen Cookie-Banner verwendest, solltest du spätestens jetzt zu einem Cookie-Consent-Plugin mit entsprechender Funktionalität wechseln!

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 „SEO“, dann „Allgemein“
  2. Wähle den Reiter „Webmaster-Tools“
  3. Füge den Code in das entsprechende Feld ein

Besonderheit für Pinterest:

  1. Wähle im WordPress-Dashboard den Punkt „SEO“, dann „Social“
  2. Wähle den Reiter „Pinterest“
  3. Füge deinen Pinterest-Bestätigungscode in das entsprechende Feld ein
    Webmaster IDs in Yoast SEO hinterlegen

    Mit dem Plugin Rank Math SEO

    1. Wähle im WordPress-Dashboard den Punkt „Rank Math“, 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 Insert Headers and Footers. Nach der Installation findest du im WordPress-Dashboard unter „Einstellungen“ den Punkt „Insert Headers and Footers“. Dort kannst du dann jeden beliebigen Code in das entsprechende Feld einfügen und speichern.

    Alternativ dazu kannst du das Plugin Head, Footer and Post Injections nutzen. Dieses bietet etwas mehr Funktionalität, die du im Normalfall aber nicht brauchst.

    Insert Headers and Footers Code hinzufügen

    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.

    Wordpress header.php bearbeiten

    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.

    Aha-Momente statt Technik-Frust!

    Dir hat dieser Beitrag geholfen und du wünschst dir mehr verständliche Anleitungen für Wordpress, Newsletter-Tools und andere Technik-Themen im Online Business?

    Dann trage dich am besten gleich ein für den Newsletter. So erfährst du direkt davon, wenn es hier neue hilfreiche Beiträge und Anleitungen gibt. Außerdem erwarten dich exklusive Tipps, Einblicke hinter die Kulissen und das ein oder andere Überraschungsgeschenk.

    Bist du dabei?

    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.

    0 Kommentare

    Einen Kommentar abschicken

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

    Du willst noch mehr Tipps und Inspiration?

    Wer schreibt hier?

    Sarah Osenberg

    Hi, ich bin Sarah und mein Ziel ist es, dir zu zeigen, dass die Technik hinter deinem Online-Business nicht frustrierend sein muss, sondern richtig Spaß machen kann. In mir steckt eine kleine Technik-Nerdin und die liebt es, technische Herausforderungen zu meistern. 

    Wenn du auf der Suche bist nach jemandem, der deine ganzen Ideen im Online-Business auch technisch umsetzen kann oder du gerade ein Technik-Frust-Thema hast, bei dem du einfach nicht weiterkommst, dann melde dich gerne bei mir und ich schaue, wie ich dir helfen kann.

    Du willst noch mehr Tipps?

    Melde dich an für den Newsletter, um keine neuen Beiträge zu verpassen. Außerdem erwarten dich exklusive Tipps, Motivation, schonungslos ehrliche Einblicke hinter die Kulissen und auch die ein oder andere Überraschung.

    Danke