Zu einer typischen Website gehören ein Kopf- und ein Fußbereich. Mit einem ansprechenden Header (Kopfbereich) erreichst du einen guten ersten Eindruck. Den Kopfbereich veränderst du in WordPress in wenigen Schritten. Erfahre jetzt, wie du das Design per Backend, Code und Plugin optimierst.
Woher kommen die Daten für den Header?
WordPress arbeitet mit einem Vorlagensystem, die Anzeige beruht auf einem sogenannten Theme. Sämtliche Inhalte für den Kopfbereich sind in der Datei header.php gespeichert. Die Datei befindet sich im Ordner der verwendeten Vorlage. Deine Seiten und Beiträge rufen diese zuerst auf, daher erfolgt hier die Gestaltung des Kopfbereichs. Der Inhalt besteht aus HTML- und PHP-Code.
Tipp: Wenn du auf jeder Seite ein anderes Bild im Header anzeigen möchtest, hilft dir dabei zum Beispiel das Plugin WP Header Images.
Der WordPress Header hat zwei Teile
Der obere Bereich ist der Meta-Header-Bereich, hier bringst du Meta-Data-Tags für SEO unter und platzierst Links zu den Stylesheets des Templates. Der untere Bereich enthält Informationen wie den Namen deiner Website und zeigt das Logo an.
WordPress Header bearbeiten mit Bordmitteln
Für viele Aufgaben musst du die Datei header.php nicht öffnen und löst diese über das Backend.
Seitentitel und Seitenbeschreibung
Klicke zum Ändern des Seitentitels im Backend auf Einstellungen > Allgemein. Bei Bedarf trägst du auch eine Seitenbeschreibung ein.
Customizer für weitere Anpassungen
In der Regel findest du im Backend unter Design > Customizer weitere Anpassungsmöglichkeiten.
Zum Beispiel bietet dir das beliebte und kostenlose Multipurpose-Theme Astra zum Bearbeiten des WordPress Headers die folgenden Punkte.
- Website-Identität: Logo und Website-Icon auswählen, Titel und Untertitel der Website festlegen
- Primärer Header: Layout, Rand und Farbe am unteren Rand des Headers aussuchen
- Primäres Menü: Konfiguration und Design des Menüs vornehmen
- Transparenter Header: Bei Bedarf für komplette Website aktivieren oder deaktivieren
WordPress Header bearbeiten per Code
Damit Änderungen am Template-Code bei einem Update nicht verloren gehen, erstellst du zuerst ein Child-Theme.
Child-Theme anlegen
Ein Child-Theme „erbt“ die Funktionen und das Design vom Parent-Theme. Es ist der empfohlene Weg, um ein existierendes Theme anzupassen. Verbinde dich per FTP mit deinem Server (zum Beispiel mit FileZilla). Die Zugangsdaten, bestehend aus Servername, FTP-Benutzername und FTP-Passwort, bekommst du von deinem Provider.
Beispiel für das Theme Twenty Nineteen:
- Navigiere zur WordPress-Installation und dem Ordner wp-content.
- Öffne den Ordner Themes und erstelle dort einen neuen Ordner mit passendem Namen wie twentynineteen-child.
- Erstelle und speichere im Ordner die Datei css mit folgendem Inhalt:
/*
Theme Name: Der Name für dein Theme
Description: die Beschreibung
Author: dein Name
Author URI: deine URI
Template: twentynineteen
Version: 1.0
Text Domain: twenty-nineteen-child
*/ - Erstelle und speichere die Datei php. Hier trägst du ein, dass erst das Stylesheet des Original-Themes und anschließend das Stylesheet des Child-Themes geladen wird:
/**
* Erst Parent-Theme einbinden, dann Child-Theme
*/
function child_theme_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-theme-css', get_stylesheet_directory_uri() .'/style.css' , array('parent-style'));
}
add_action( 'wp_enqueue_scripts', 'child_theme_styles' );?>
Gehe im Backend zu Design > Themes und aktiviere das Child-Theme.
Hinweis: Kopiere in den Ordner eine Bilddatei mit einem Screenshot des Templates, die du unter screenshot.png abspeicherst. Das Bild wird in der Theme-Vorschau angezeigt.
Mit WordPress den Code bearbeiten
Die Dateien lassen sich weiter extern bearbeiten und per FTP hochladen oder du greifst auf diese direkt über WordPress zu. Öffne dafür im Backend Design > Theme-Editor und wähle die Datei aus.
Wichtig: Kopiere den Code vor Veränderungen in eine Datei, damit stellst du bei Problemen das Original wieder her.
Öffne die style.css, um das Design mit CSS-Code anzupassen. Beispiel:
.header
Die Codezeile ändert die Hintergrundfarbe in Weiß.
WordPress Header bearbeiten mit Plugin
Der einfache Weg zum individuellen Header ist die Verwendung eines WordPress-Plugins – ganz ohne Code. Wähle eine für deine Anforderungen geeignete Erweiterung aus.
Head, Footer and Post Injections
Das Plugin Head, Footer and Injections lässt dich Custom-Code leicht vor und hinter dem Header einfügen. Hauptsächlich geht es um das Hinzufügen von Codeblöcken von Google Analytics und anderen Anbietern wie Facebook-Pixel an einem zentralen Punkt. Zudem fügst du bei Bedarf für die Desktop- und Mobil-Ansicht unterschiedlichen Code hinzu. Mit 200.000 aktiven Installationen ist es recht beliebt.
Insert Headers and Footers
Die Erweiterung Insert Headers and Footers bietet vergleichbare Funktionen, um Code zum Header hinzuzufügen. Mit 900.000 aktiven Installationen ist es die beliebtere Alternative mit einfacher Bedienung. Auch hier verfügst du über eine zentrale Stelle, an der du den WordPress Header bearbeiten und Skripte einbinden kannst.
Zusammenfassung
Besucher deiner Website sehen den Kopfbereich zuerst, entsprechend wichtig ist eine gelungene Darstellung. Mit den Bordmitteln kannst du den WordPress Header bearbeiten und zum Beispiel den Seitentitel ändern. Weitere Veränderungen sind über die Customize-Einstellungen des Themes möglich. Zusätzlich lässt sich der Header per Code und mit den Header-Plugins anpassen.
Bildnachweis: Unsplash
