Es heißt, es ist wichtig, einen guten ersten Eindruck zu hinterlassen. Wenn Besucher auf deiner Website ankommen, beginnt der erste Eindruck ganz oben – in der Kopfzeile der Seite.
Die Entwickler von WordPress-Themes sind nicht verpflichtet, eine Kopfzeilenvorlage zu erstellen, aber es ist selten, dass eine Website keine hat. Seit den Anfängen des Internets ist „Header“ der gängige Begriff für einen HTML-Block, der die wichtigsten Elemente enthält, die Besucherinnen und Besucher am Anfang einer Seite erwarten. Dazu gehören oft:
- Das Branding: Dies kann den Namen der Website und häufig auch ein Logo beinhalten. Die Verwendung von Farben, Bildern oder Videos im Header kann dieses Branding verstärken.
- Die Hauptnavigation: Wenn deine Website mehr als eine Seite hat, werden die Besucher wahrscheinlich nach einem Navigationsmenü oben auf jeder Seite suchen.
- Sekundäre Navigation: Die sekundäre Navigation kann aus Links bestehen, die unabhängig von der aktuellen Position des Nutzers in der primären Menühierarchie sind. Denk an eine „Login“-Schaltfläche und Icons, die zu sozialen Medienkonten oder einem Warenkorb führen.
- Suche: Wenn deine Website eine Suche unterstützt, muss das Eingabefeld für die Suche nicht in der Kopfzeile stehen, aber die Besucher/innen werden es sicher nicht in der Fußzeile suchen.
Das WordPress CMS kann Komponenten wie Kopfzeilen dynamisch generieren, indem es das Markup in Theme-Vorlagen mit Inhalten aus einer Datenbank kombiniert – wie Links zu einem Logo und Menüeinträgen – und sie in jede Seite einfügt.
Das WordPress-Theme-Ökosystem bietet eine große Auswahl an Designs für fast jede Website. Bei zehntausenden von Themes, die auf verschiedenen Marktplätzen zur Auswahl stehen, kann es schwierig sein, das beste für deine Zwecke auszuwählen.
Wenn du ein Theme auswählst und installierst, musst du zumindest einige Komponenten – wie den Header – anpassen, um der Seite deinen Stempel aufzudrücken und sie zu deinem eigenen zu machen.
Schauen wir uns an, wie man das macht.
Block vs. Klassisch: Eine Geschichte von zwei Themes
Wie du den Header deiner WordPress-Website anpasst, hängt davon ab, wie das Theme aufgebaut ist (und manchmal auch davon, wie viel du anpassen möchtest). Es gibt drei Möglichkeiten, den Header einer WordPress-Website anzupassen:
- Mit dem Seiteneditor: Mit WordPress 5.0 wurde ein Block-Editor für Website-Inhalte eingeführt, der als Gutenberg bekannt ist. Mit der Veröffentlichung von WordPress 5.9 wurde das Blockkonzept auf das Theming ausgeweitet und zu einer robusten Option für die vollständige Bearbeitung von Websites. Der Site-Editor und die Möglichkeit, die verschiedenen Teile eines Website-Themes mit HTML-basierten Komponenten aufzubauen, brachten eine noch nie dagewesene Flexibilität in die native WordPress-Anpassung.
- Den WordPress Customizer verwenden: Wir wollen nicht, dass du dich alt fühlst, aber Themes, die nur mit dem einst bahnbrechenden Customizer und den dazugehörigen Widgets angepasst werden können, werden „klassische“ Themes genannt. Trotz des retro klingenden Namens werden immer wieder neue Themes im klassischen Stil veröffentlicht, die zu den Tausenden hinzukommen, die es bereits auf dem Markt gibt. Im Vergleich zu den Site Editor- und Block-Themes bieten die Customizer- und Classic-Themes weniger Optionen für die Anpassung des Headers.
- Direkte Bearbeitung von Themedateien: Du (oder jemand, den du um Hilfe bittest) brauchst ein paar Grundkenntnisse in PHP, um den Code in den klassischen WordPress-Theme-Dateien zu bearbeiten, aber das ist eine Lösung, wenn der Customizer nicht das liefert, was du für den Header deiner Website brauchst.
Was wir hier nicht behandeln, ist die Anpassung des Headers in WordPress-Seitenerstellungsprogrammen von Drittanbietern wie Divi oder eine Reihe von Plugins, die speziell für die Gestaltung von Website-Headern (und Footern) entwickelt wurden. Diese Plugins könnten sich für dich lohnen, wenn du die Theme-Dateien direkt bearbeiten musst und die PHP-Programmierung vermeiden willst.
So bearbeitest du einen Block-Theme-Header
Wenn du Gutenberg zum Erstellen von Inhalten verwendet hast, weißt du, dass WordPress mit einer großen Sammlung von Blöcken ausgeliefert wird, die du auf Seiten platzieren kannst, um alles von Überschriften, Absätzen und Listen bis hin zu Medien, Navigation und Formularen zu erstellen. Es gibt eine Klasse von Blöcken, die Aufgaben wie Widgets in klassischen Themes übernehmen, z. B. Links zu den neuesten Beiträgen und Kommentaren generieren, eine Tag-Cloud anzeigen oder einen Kalender einfügen.
Mehrere Blöcke können kombiniert, gestylt und als Muster gespeichert werden. Du kannst diese Komponenten auch zu den Teilen eines WordPress-Themes hinzufügen, die das Seitenlayout bestimmen, z. B. Kopfzeilen.
Wie einzelne Blöcke können auch Vorlagenteile in HTML-Dateien definiert werden. Block-Themes lassen sich leicht anpassen, weil die Informationen, die diese Änderungen beschreiben, in der WordPress-Datenbank gespeichert und beim Erstellen einer Seite auf die verschiedenen Komponenten angewendet werden.
Wenn wir also von der „Bearbeitung“ eines Headers in einem Block-Theme sprechen, meinen wir selten die Bearbeitung einer Datei, die in einem WordPress-Theme-Verzeichnis gespeichert ist.
Unter der Haube: Ein Block-Theme-Header
Ein Blick auf den HTML-Code hinter einem Vorlagenteil wie dem Header hilft zu verstehen, was passiert, wenn du ein Theme anpasst.
Für dieses Tutorial verwenden wir das Seedlet-Theme, das es als Seedlet (Blocks) und als das ältere Seedlet (Classic) gibt. Seedlet (Blocks) verwendet das Blockbase-Theme als übergeordnetes Theme, und das ist der gesamte Inhalt der Datei header.html in den Seedlet-Theme-Verzeichnissen:
<!-- wp:pattern {"slug":"blockbase/header-centered"} /-->
<!-- wp:spacer {"height":60} -->
<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->Der größte Teil der Magie hinter WordPress-Blöcken steckt in den HTML-Kommentaren. Kommentare können während des Seitenaufbaus Styling-Informationen und andere Direktiven weitergeben. Der obige HTML-Kommentar fügt unserem Standard-Header einen vertikalen Abstand hinzu, aber die wichtigste Aktion ist die Aufforderung, ein Muster in das Blockbase-Theme aufzunehmen, das sich (nachdem .html angehängt wurde) in der Datei header-centered.html befindet.
Das Verzeichnis für Vorlagenteile innerhalb des Blockbase-Themas enthält diese Dateien, die sich auf eine Kopfzeile beziehen:
header-centered.html
header-default.html
header-linear.html
header-minimal.html
header-rounded-logo.html
header-wide.htmlDie Datei header-rounded-logo.html enthält zum Beispiel einen HTML-Kommentar, der eine CSS-Klasse für das kreisförmige Beschneiden des Logobildes hinzufügt. Wenn wir auf diese Weise vorgehen wollen, könnten wir unsere Seedlet-Datei header.html so bearbeiten, dass sie header-rounded-logo.html statt header-centered.html enthält. Aber das müssen wir nicht, denn wir können diesen Vorlagenteil im WordPress-Site-Editor anwenden und die Themedateien auf der Festplatte unangetastet lassen.
Den Site-Editor zur Anpassung der Kopfzeile verwenden
Wenn ein Block-Theme auf unserer Website aktiv ist, können wir den Site-Editor im WordPress-Admin-Panel aufrufen, indem wir Erscheinungsbild > Editor wählen:
Die erste Ansicht im Seiteneditor ist ein ganzseitiges Layout, das die Kopf- und Fußzeile sowie alle anderen Vorlagenteile enthält, die der Entwickler des Themes bereits hinzugefügt hat. Wir können auf den Kopfzeilenbereich klicken, um sofort mit der Bearbeitung zu beginnen.
Unten enthält unsere Kopfzeile einen Platzhalter für ein Logo und zeigt bereits den Namen der Website und die Hauptnavigation an (die jetzt nur aus „Über uns“ und „Beispielseite“ besteht). Wenn wir einen Slogan zu unseren grundlegenden Website-Informationen hinzufügen, wird er auch hier erscheinen.
Diese Elemente der Website-Identität erscheinen bereits in unserer Kopfzeile, da der oben erwähnte Teil der Vorlage header-centered.html diese Kommentare enthält:
<!-- wp:site-logo {"align":"center","width":128} /-->
<!-- wp:site-title {"textAlign":"center","style":{"spacing":{"padding":{"top":"30px","bottom":"20px"}}}} /-->
<!-- wp:site-tagline {"textAlign":"center","fontSize":"small"} /-->Die Hauptnavigation wird durch diesen Kommentar erzeugt:
<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"center","orientation":"horizontal"}} /-->Lass uns unser Logo hinzufügen:
- Wähle den Logo-Platzhalter aus.
- Klicke auf die Schaltfläche Medien hinzufügen.
- Wähle dein Logo in der WordPress-Mediathek aus oder lade es von der Festplatte hoch.
Die Anpassung eines Website-Headers durch Hinzufügen eines Logos ist eine so alltägliche Aufgabe, dass sogar die meisten klassischen WordPress-Themes diese Aufgabe im Customizer einfach machen. Fügen wir also einen Block hinzu, der nicht bereits in der Vorlage vorgesehen ist: ein sekundäres Menü am oberen Rand der Seite mit dem Eintrag: Shop.
Zuerst schalten wir die Anzeige des Block-Inserters um, indem wir auf das Umschaltsymbol in der oberen linken Ecke des Site Editors klicken:
Wenn der Blockeinfüger aktiv ist:
- Finde den Navigationsblock (du kannst nach ihm suchen).
- Ziehe den Block an den oberen Rand der Kopfzeile.
Jetzt bearbeiten wir den Navigationsblock, indem wir einen benutzerdefinierten Link (losgelöst von der Hauptnavigation) erstellen, der den Text Shop anzeigt und die URL unserer E-Commerce-Subdomain enthält:
Standardmäßig ist alles in dieser Kopfzeilenvorlage auf der Seite zentriert. Wir wollen, dass der Shop-Link rechts schwebt. Um das zu erreichen:
- Klicke auf den neuen Navigationsblock.
- Klicke in der Symbolleiste auf das Symbol Artikelausrichtung ändern.
- Wähle Artikel rechts ausrichten.
Hier ist die fertige Kopfzeile:
So änderst du einen klassischen Theme-Header mit dem Customizer
Als die erste Version des Theme Customizer 2012 zusammen mit WordPress 3.4 veröffentlicht wurde, war das ein großer Fortschritt, denn damit konnten Administratoren das Aussehen ihrer Websites ohne Programmierkenntnisse verändern.
Seitdem wurde der Customizer erheblich verbessert, aber eines ist geblieben: Der Entwickler eines Themes bestimmt, was mit dem Tool angepasst werden kann und was nicht. Das steht im Gegensatz zu den freien Möglichkeiten, die Websitebetreiber mit dem blockbasierten Site Editor haben.
Den WordPress-Theme Customizer verwenden
Wenn ein klassisches Theme, das den Customizer unterstützt, auf einer Website aktiv ist, kannst du ihn im WordPress-Admin-Panel unter Darstellung > Anpassen aufrufen.
Im Hauptmenü des Customizers wählen wir Site Identity aus, um die anpassbaren Komponenten im Header zu erreichen:
Im Abschnitt Site Identity dieses Themes können wir ein Logo hinzufügen oder ändern und den Titel der Website und einen Slogan bearbeiten. (Der Seitentitel und der Slogan werden zunächst durch Einträge auf der Seite Allgemeine Einstellungen im Admin-Panel festgelegt).
Dieses Theme platziert auch die Hauptnavigation der Website in der Kopfzeile. Außerdem gibt es einen Platz für die Navigation in der Fußzeile und für ein Menü mit Links zu sozialen Medien. Im Customizer kannst du auswählen, welches Menü du jedem dieser Bereiche zuweisen möchtest, aber die Bereiche selbst sind im Wesentlichen fest.
Nach einem Klick auf die oben hervorgehobene Schaltfläche Logo auswählen können wir ein Logo aus der WordPress-Mediathek auswählen oder ein neues von der Festplatte hochladen.
Unten, wenn wir ein Logo hinzugefügt haben, können wir das Bild im Customizer entfernen oder durch ein anderes ersetzen:
Unter der Haube: Was kann der Customizer anpassen?
Wie stellt der Customizer fest, ob wir ein Logo hochladen können und wo es dann platziert werden soll?
Es beginnt mit diesem Eintrag im functions.php Skript des Themes:
/**
* Add support for core custom logo.
*
* @link https://codex.wordpress.org/Theme_Logo
*/
add_theme_support(
'custom-logo',
array(
'height' => 240,
'width' => 240,
'flex-width' => false,
'flex-height' => false,
)
);Dieser Codeblock aktiviert die Schaltfläche Logo auswählen auf der Registerkarte Website-Identität im Customizer und den Link zu den Funktionen der Medienbibliothek.
Dann wird im PHP-Code, mit dem der Header der Website erstellt wird, dieser kurze Codeschnipsel an der Stelle eingefügt, an der das Logo erscheinen soll:
<div class="site-logo"><?php the_custom_logo(); ?></div>Das Ergebnis:
Ändern eines WordPress-Headers durch Bearbeiten der Theme-Dateien
Als wir oben den Header in einem Block-Theme mit dem Site Editor angepasst haben, haben wir ein sekundäres Menü mit einem Shop-Link hinzugefügt. Wir konnten diesen Navigationsblock überall in der Kopfzeile platzieren, wo wir wollten. In unserer klassischen Version des Themes ist kein Platz für ein solches Menü vorgesehen, also müssen wir den PHP-Code für die Kopfzeile bearbeiten, um die Änderung vorzunehmen.
Wir könnten einfach die entsprechende Themedatei öffnen und den HTML-Code für unser sekundäres Menü manuell hinzufügen, aber das wäre zu kurz gedacht. Später möchten wir vielleicht den Text unseres Einkaufslinks (Jetzt einkaufen?) aktualisieren, seine URL ändern oder einen weiteren Menüpunkt hinzufügen (Anmelden?).
Wir wollen der Kopfzeile eine neue Navigation hinzufügen, die im Customizer registriert ist, damit der Inhalt des sekundären Menüs im WordPress-Menü-Editor geändert werden kann, ohne dass wir zum Theme-Code zurückkehren müssen.
Bevor du beginnst: Backup
Wenn du in den PHP-Code deines klassischen WordPress-Themes eingreifst, um den Header deiner Website anzupassen, wird das oft als Bearbeitung der Datei header.php beschrieben. Das ist bei vielen Themes der Fall, aber andere kombinieren mehrere Dateien, um einen einzigen Header zu erstellen.
Bevor du Änderungen an den Themadateien vornimmst, solltest du Sicherungskopien erstellen. Hier erfährst du, wie du Backups erstellst und wie du sie wiederherstellen kannst.
Auch mit Backups kann es zu Problemen kommen, wenn ein Update eines fremden Themes deine Änderungen überschreibt. Deine Änderungen könnten von der Website verschwinden, bis du deine geänderten Themadateien aus einem Backup wiederherstellen kannst. Deshalb empfehlen wir dringend, ein Child-Theme nur für deine geänderten Dateien zu erstellen und die Aktualisierungen auf einer provisorischen WordPress-Website zu testen.
Bearbeiten eines WordPress-Headers in einem klassischen Theme
Unser klassisches Beispiel-Theme hat im Header einen Platz für die Hauptnavigation reserviert. Im Customizer können wir das WordPress-Menü auswählen, das wir an dieser Stelle platzieren möchten. In unserem Fall heißt dieses Menü praktischerweise „Primäres Menü“.
Es gibt im Theme auch Plätze für die Fußzeile und die Social-Link-Navigation, aber du kannst unten sehen, dass diese derzeit nicht aktiviert sind:
Wenn wir einen Blick auf das functions.php Skript des Themas werfen, sehen wir, wo diese Menüpunkte zuerst referenziert werden:
// This theme uses wp_nav_menu()
register_nav_menus(
array(
'primary' => __( 'Primary Navigation', 'seedlet' ),
'footer' => __( 'Footer Navigation', 'seedlet' ),
'social' => __( 'Social Links Navigation', 'seedlet' ),
)
);Unten fügen wir diesem Block einen Eintrag für unser neues Menü „Sekundärnavigation“ hinzu:
// This theme uses wp_nav_menu()
register_nav_menus(
array(
'primary' => __( 'Primary Navigation', 'seedlet' ),
'secondary' => __( 'Secondary Navigation', 'seedlet' ),
'footer' => __( 'Footer Navigation', 'seedlet' ),
'social' => __( 'Social Links Navigation', 'seedlet' ),
)
);Wenn wir zum Customizer zurückkehren, wird die neue Option Sekundäre Navigation im Bereich Menüpositionen angezeigt:
Wir können unserem Menü einen Namen geben (Sekundäres Menü) und damit beginnen, ihm Links hinzuzufügen. Wie beim Site Editor im blockbasierten Theme erstellen wir einen Eintrag für Shop.
In der Themedatei für die Kopfzeile haben wir einen Code hinzugefügt, der bestätigt, dass das sekundäre Navigationsmenü existiert und dass es mindestens einen Eintrag in der Liste der Links hat. Dann analysieren wir den Inhalt des Menüs und zeigen ihn an:
<?php if ( $has_secondary_nav && $has_secondary_nav_items ) : ?>
<div id="secondary-navigation" class="secondary-navigation" role="navigation">
<?php
// Get menu slug
$location_name = 'secondary;
$locations = get_nav_menu_locations();
$menu_id = $locations[ $location_name ];
$menu_obj = wp_get_nav_menu_object( $menu_id );
wp_nav_menu(
array(
'theme_location' => 'secondary',
'menu_class' => 'menu-wrapper',
'container_class' => 'secondary-menu-container',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
)
);
?>
</div><!-- #secondary-navigation -->
<?php endif; ?>
<div class="menu-button-container">
<?php if ( $has_secondary_nav && $has_secondary_nav_items ) : ?>
<button id="secondary-open-menu" class="button open">
<span class="dropdown-icon open"><?php _e( 'Menu', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'menu' ); ?></span>
<span class="hide-visually expanded-text"><?php _e( 'expanded', 'seedlet' ); ?></span>
</button>
<?php endif; ?>
</div>In der Kopfzeile befindet sich nun unser Shop-Link (unten rot hervorgehoben) an der von uns bevorzugten Stelle für die Sekundärnavigation.
Mit diesem Ansatz können wir den Ankertext für unseren Shop-Link ändern – oder sogar zusätzliche Menüpunkte zur sekundären Navigation hinzufügen – indem wir einfach unser sekundäres Navigationsmenü im WordPress Admin-Dashboard bearbeiten.
Zusammenfassung
Wenn du den Header deiner WordPress-Website ändern möchtest, ohne auf Plugins oder Page Builder von Drittanbietern zurückgreifen zu müssen, bieten blockbasierte Themes in Kombination mit dem Site Editor nahezu unbegrenzte Flexibilität. Mit dem Seiteneditor kannst du eine Vielzahl von Blöcken fast überall im Seitenlayout platzieren. Änderungen, die du an den Blockdefinitionen und am Styling vornimmst, werden in der WordPress-Datenbank gespeichert, sodass du die Themedateien auf der Festplatte nicht ändern musst.
Der Customizer, den wir seit über einem Jahrzehnt für die Verwaltung klassischer Themes verwenden, erlaubt Änderungen an Elementen, die der Entwickler eines Themes als „anpassbar“ gekennzeichnet und registriert hat. Wenn du Änderungen vornehmen willst, die über diesen Rahmen hinausgehen, musst du möglicherweise die Themedateien bearbeiten und – mit ziemlicher Sicherheit – ein Grundverständnis der Skriptsprache PHP haben.
Suchst du nach einer besseren Möglichkeit, WordPress-Seiten zu erstellen? Schau dir das Docker-basierte DevKinsta an, eine kostenlose lokale Entwicklungssuite, die von 60,000+ Entwicklern, Webdesignern und Freiberuflern genutzt wird.
Steve Bonisteel is Technical Editor bij Kinsta. Hij begon zijn schrijverscarrière als verslaggever en achtervolgde ambulances en brandweerwagens. Sinds eind jaren negentig schrijft hij over internetgerelateerde technologie.
Schreibe einen Kommentar