# Tutorial: WordPress-Header bearbeiten Bei WordPress handelt es sich um das meist genutzte [Content Management System (CMS)](https://www.ionos.de/digitalguide/hosting/cms/cms-vergleich/ "CMS Vergleich") der Welt. Als Open-Source-Projekt lässt sich eine WordPress-Installation komplett vom Benutzer bearbeiten. Die Flexibilität von WordPress ist an sich ein großer Vorteil. Jedoch erfordert so gut wie jede WordPress-Site einige Anpassungen, um wirklich erfolgreich zu werden. Möchte man beispielsweise Google Analytics oder ein vergleichbares Tracking-Script einbinden, benötigt man einen Weg, um **Code-Schnipsel in das vom Theme vorgegebene Gerüst zu integrieren**. Einer der häufigsten administrativen Aufgaben besteht deshalb darin, den WordPress-Header zu bearbeiten. Wie man dabei am besten vorgeht, erklären wir in diesem Artikel. ## Was ist der WordPress-Header, und welche Elemente enthält er? Der Begriff WordPress-Header führt oft zu Verwirrungen. Im Zusammenhang mit einer Website bezeichnet der Header den **sichtbaren Kopfbereich einer Seite**. Dort befinden sich beispielsweise das Logo und ein Menü — fast jede Seite weist diesen Bereich auf. Andererseits umfasst ein HTML-Dokument, umgangssprachlich als „Seite“ bezeichnet zwei Komponenten: Den **HTML-Head** (<head>) und den HTML-Body (<body>). Sichtbare Elemente stehen ausschließlich im HTML-Body, während im HTML-Head ausschließlich unsichtbare Elemente vorkommen. In der Tat **umfasst der WordPress-Header sowohl den HTML-Head als auch den Kopfbereich der Seite**. Wenn wir davon sprechen, den Header zu bearbeiten, geht es in WordPress also um zwei Arten von Elementen: 1. Unsichtbare Elemente im HTML-Head 2. Sichtbare Element im Seiten-Header Wir gehen im Folgenden auf beide Arten von Elementen im Detail ein. ### Unsichtbare Elemente im HTML-Head Die Elemente im **HTML-Head sind für den menschlichen Seitenbesucher nicht sichtbar**. Sie werden stattdessen vom Browser und von Suchmaschinen ausgewertet. Zu den am häufigsten im HTML-Head anzutreffenden Elementen gehören: - Links zu **Stylesheets** - Links zu **Script-Dateien** - Links zu **Schriftarten** - Links zu **Favicons** - Verschiedene Arten von **Meta-Tags** --- ### Hinweis Im HTML-Head platzierte Script-Tags führen unter Umständen. zu Performance-Einbußen beim Laden der Seite. Je nach Anwendungsfall lässt sich dem Problem mit modernen Attributen wie ‚async‘ und ‚defer‘ Herr werden. Ansonsten ist es oft empfehlenswert, Script-Tags im [WordPress-Footer](https://www.ionos.de/digitalguide/hosting/blogs/wordpress-footer-bearbeiten/ "WordPress-Footer bearbeiten") unterzubringen. --- ### Sichtbare Elemente im Seiten-Header Der **Seiten-Header enthält sichtbare Elemente am Anfang der Seite**. Seit [HTML5](https://www.ionos.de/digitalguide/websites/web-entwicklung/was-ist-html5/ "Was ist HTML5?") ist es gebräuchlich, den Seiten-Header mit einem <header>-Element zu realisieren. Dies ist jedoch nicht zwingend vorgeschrieben. Prinzipiell lässt sich auch ein <div>-Element dafür einsetzen. Im Seiten-Header findet man oft die folgenden Elemente: - Logo - Menü - Header-Image - Suchmaske ## Wie kann man den WordPress-Header bearbeiten? Wie eingangs erklärt, gilt es zu unterscheiden: Geht es darum, zusätzlichen Code im HTML-Head unterzubringen, oder möchte man das visuelle Erscheinungsbild der Site verändern? Wir konzentrieren uns hier auf das **Einbinden zusätzlicher nicht-visueller Elemente im HTML-Head**. **Visuelle Änderungen am Seiten-Header sind deutlich komplexer**. Wie genau man dabei vorgeht, hängt vom eingesetzten Theme ab. Ferner erfordern diese Änderungen in der Regel Design-Kenntnisse und Coding-Fertigkeiten. --- ### Hinweis Auf Ihrer Site eingebundene Script-Tags erfordern eventuell die Zustimmung der Nutzer, bevor sie auf der Seite geladen werden dürfen. Das ist insbesondere dann der Fall, wenn die Prozesse Cookies setzen oder persönliche Daten sammeln. Es muss also bei jedem zusätzlichen Script mitbedacht werden, wie dieses in eine bestehende Cookie-Consent Lösung eingebunden wird. --- Die folgenden drei Wege bieten sich an, um **zusätzlichen Code im HTML-Head des WordPress-Headers zu platzieren**: 1. **Plugin** einsetzen 2. **Theme-Code** modifizieren 3. **Google Tag Manager** nutzen Die **genannten Methoden haben allesamt Vor- und Nachteile**, welche wir in der folgenden Übersicht für Sie zusammengestellt haben:
Methode Vorteil Nachteil
Plugin einsetzen einfache Bedienung Code-Snippets werden in Datenbank gespeichert; schwierig mit Cookie-Consent zu integrieren; mangelnde Kontrolle; kann Performance-Probleme verursachen
Theme modifizieren Code-Snippets werden Teil der Codebase; visuelle Änderungen möglich; perfekte Kontrolle auch für komplexe Anwendungsfälle benötigt Bearbeiten des Theme-Codes und Coding-Kenntnisse
Google Tag Manager nutzen einfache Bedienung; Code-Snippets werden zentral außerhalb der Website verwaltet; gut mit Cookie-Consent zu integrieren; prinzipiell möglich auch komplexe Anwendungsfälle zu realisieren benötigt einmalige Einrichtung
## Ein Plugin einsetzen, um den WordPress-Header zu bearbeiten Das WordPress-Plugin-Verzeichnis enthält eine Reihe von Plugins zum Einfügen von Code in den HTML-Head. Derartige Plugins eignen sich primär, um Meta-Tags, Stylesheets oder Scripte auf der Seite einzubinden. Andererseits fehlt für gewöhnlich die Möglichkeit, dem Seiten-Header visuelle Elemente hinzuzufügen. Die Plugins sind durchgehend **einfach in der Bedienung und lassen sich weitgehend ohne Coding-Kenntnisse nutzen**. Je nach Plugin ist die Kontrolle über den eingefügten Code mehr oder weniger stark beschränkt. Hier eine Übersicht breit eingesetzter Header-Code Plugins: - [Head, Footer and Post Injections](https://wordpress.org/plugins/header-footer/ "Head, Footer and Post Injections auf WordPress.org") - [Header and Footer Scripts](https://wordpress.org/plugins/header-and-footer-scripts/ "Header and Footer Scripts auf WordPress.org") - [Header Footer Code Manager](https://wordpress.org/plugins/header-footer-code-manager/ "Header Footer Code Manager auf WordPress.org") Wir zeigen hier **Schritt für Schritt, wie Sie das Plugin „Header and Footer Scripts“ nutzen**, um zusätzlichen Code im HTML-Head des WordPress-Headers zu platzieren: [![Bild: Neues WordPress-Plugin installieren](https://www.ionos.de/digitalguide/fileadmin/_processed_/6/f/csm_WordPress-footer-bearbeiten-1_4c92c0eaaa.webp "Neues WordPress-Plugin installieren")](https://www.ionos.de/digitalguide/fileadmin/DigitalGuide/Screenshots_2021/WordPress-footer-bearbeiten-1.png) Wählen Sie „Plugins“ aus dem Menü links und klicken Sie dann auf „Installieren“. [![Bild: Header and Footer Scripts Plugin suchen](https://www.ionos.de/digitalguide/fileadmin/_processed_/9/7/csm_WordPress-footer-bearbeiten-2_47a9e1a62f.webp "Header and Footer Scripts Plugin suchen")](https://www.ionos.de/digitalguide/fileadmin/DigitalGuide/Screenshots_2021/WordPress-footer-bearbeiten-2.png) Geben Sie in das Textfeld rechts „Header and Footer Scripts“ ein. [![Bild: Header and Footer Scripts Plugin installieren](https://www.ionos.de/digitalguide/fileadmin/_processed_/d/0/csm_WordPress-footer-bearbeiten-3_86f933ac9b.webp "Header and Footer Scripts Plugin installieren")](https://www.ionos.de/digitalguide/fileadmin/DigitalGuide/Screenshots_2021/WordPress-footer-bearbeiten-3.png) Klicken Sie in den Suchergebnissen auf das Plugin und dann auf „Jetzt installieren“. [![Bild: Zum Header and Footer Scripts Plugin navigieren](https://www.ionos.de/digitalguide/fileadmin/_processed_/8/6/csm_WordPress-footer-bearbeiten-4_8df83c149a.webp "Zum Header and Footer Scripts Plugin navigieren")](https://www.ionos.de/digitalguide/fileadmin/DigitalGuide/Screenshots_2021/WordPress-footer-bearbeiten-4.png) Wählen Sie „Einstellungen“ aus dem Menü links und klicken Sie dann auf „Header and Footer Scripts“. [![Bild: Ein Robots-Meta-Tag in den HTML-Head einfügen](https://www.ionos.de/digitalguide/fileadmin/_processed_/e/6/csm_wordpress-header-bearbeiten_e89c22c589.webp "Ein Robots-Meta-Tag in den HTML-Head einfügen")](https://www.ionos.de/digitalguide/fileadmin/DigitalGuide/Screenshots_2021/wordpress-header-bearbeiten.png) Kopieren Sie den Code, welchen Sie in den HTML-Head einfügen möchten, in das Textfeld „Scripts in header“ und klicken Sie dann auf „Save settings“. ## Den Theme-Code modifizieren, um den WordPress-Header zu bearbeiten Diese Methode bietet volle Kontrolle über den Inhalt des WordPress-Headers. Vorgenommene Änderungen werden Teil der Theme-Codebase und unterliegen damit der Versionskontrolle. Es handelt sich um die **präferierte Methode für erfahrene Nutzer und Admins**. Es gibt mehrere Herangehensweisen, um den Theme-Code zu modifizieren: 1. Code der **Template-Datei** header.php hinzufügen 2. Zusätzliche **Funktionen in der Datei** functions.php anlegen 3. Ein **Child-Themes** erstellen und die Änderungen dort einpflegen
Methode Vorteil Nachteil
Code in header.php hinzufügen konzeptuell leicht verständlich; exakte Kontrolle der Reihenfolge der Code-Injizierungen; funktioniert auch für visuelle Änderungen Änderungen hartkodiert; bei wiederholten Änderungen Risiko, unübersichtlich zu werden
Funktionen in functions.php anlegen saubere Trennung von Darstellung und Funktionalität; Reihenfolge der Code-Injizierung lässt sich festlegen höhere Komplexität; kann für Laien verwirrend sein
Child-Theme erstellen Änderungen sind Update-sicher, lassen sich bei Bedarf leicht rückgängig machen geringfügig höherer Aufwand; erfordert einmaligen Wechsel des Themes
### Code in header.php hinzufügen Die **direkteste Methode, Code im WordPress-Header zu platzieren**, besteht darin, die Datei header.php zu bearbeiten. Bei dieser WordPress-Datei handelt es sich um ein Standard-Template, welches in so gut wie jedem Theme vorhanden ist. Schauen wir uns am Beispiel des offiziellen Theme [„TwentyTwenty“](https://themes.trac.wordpress.org/browser/twentytwenty/1.6/header.php "Source-Code des Themes auf wordpress.org") an, wie eine typische header.php-Datei aufgebaut ist: ```none >