Kennen Sie das auch? Das Theme an sich ist attraktiv, doch sein Header hat ein Format, für das Sie einfach keine Bilder haben. Nehmen Sie zum Beispiel das gute alte Twenty Thirteen. Sein Header verlangt Bilder mit den Abmessungen von 1.600 x 230 Pixeln. Das mag gut funktionieren, wenn einem Tapetenmuster der Siebzigerjahre gefallen. Für Fotos aber gestaltet sich bei dieser Vorgabe die Bildauswahl extrem schwierig. Oder nehmen Sie das aktuelle Twenty Seventeen. Auf dessen Problematiken in Sachen Header bin ich schon eingegangen. Was also tun, wenn Sie den Header an Ihr Bild anpassen wollen? Wie lässt sich die WordPress Header Größe ändern?
Update 04.06.2020
Ein Kommentar, der zu diesem Beitrag eigentlich gar nicht passt, hat mich darauf aufmerksam gemacht, dass dieser Beitrag eine Überarbeitung nötig hat.
Die Idee bleibt: Wer das eigene Headerbild nicht an die Vorgaben von Theme Twenty Seventeen anpassen kann oder will, schafft über einen kleinen Eingriff in die header.php des Child Themes die Grundlage für einen eigenen Headerbereich.
Neu sind nun vor allem die CSS-Angaben, die das Ganze besser und zeitgemäßer aussehen lassen.
Ausgangssituation: Die falsche WordPress Header Größe
Sagen wir, Sie haben wie ich ein Bild mit den Maßen 1.200 x 400. Meine Krontaube könnte ich hochladen und in den vorhandenen Header einbinden. Dann kann ich mich zwar entscheiden, ob ich das Bild zuschneiden will oder nicht. Die Wahl spielt aber keine große Rolle. Wenn wie bei Twenty Thirteen nur 230 Pixel in der Höhe zur Verfügung stehen, bleibt von der Taube nicht allzu viel übrig. Und wenn ein Theme wie Twenty Seventeen das Bild einfach aufbläht, sieht man das dem Bild eben auch an. Aus 1.200 x 400 Pixeln lassen sich einfach nicht die 2.000 x 1.200 Pixel machen, die das aktuelle Standardtheme voraussetzt.
Einen eigenen Header schaffen
Nun kann man sicherlich an dem vorhandenen WordPress Header so lange herumdoktern, bis es irgendwie passt. Die Einstellungen dafür finden sich allerdings nicht nur in der style.css des Themes. Oft gibt es auch Definitionen in Dateien wie der functions.php, der extras.php oder der custom-header.php. Das ist dann alles schon recht komplex und lässt oft nicht mal eben so modifizieren. Von daher ist es vielleicht nicht die dümmste Idee, einfach einen eigenen Header zu erstellen.
Mit dieser Strategie machen Sie sich unabhängig von den Vorgaben des Themes. So müssen Sie nicht mühsam die vorhandene WordPress Header Größe ändern, sondern planen und erstellen einen Header, der von vornherein zu Ihrem Bild passt.
Dafür braucht es tatsächlich gar nicht so viel. Tatsächlich sind nur drei Schritte erforderlich: Erstens richten Sie den passenden Bereich ein. Zweitens laden Sie das Bild Ihrer Wahl in die Mediathek. Und drittens hinterlegen Sie ein wenig CSS, über das Sie auch festlegen, welches Bild in dem zuvor angelegten Bereich angezeigt werden soll.
Die folgende Anleitung geht von dem Theme Twenty Seventeen aus. Weiter unten gehe ich auch auf Twenty Thirteen ein. Und wie so oft braucht es ein Child Theme, damit die Änderungen nach dem nächsten Update nicht verloren gehen.
1. Schritt: Den passenden Bereich einrichten
Der Header eines Themes wird – wie könnte es auch anders sein – über die header.php aufgerufen. In dieser Datei passiert eine ganze Menge mehr, uns interessiert aber nur der Teil, bei dem der Template Part aufgerufen wird, der mit dem Header zu tun hat.
Umschließen Sie diesen nun mit einem DIV mit der Klasse .headerimg
.
<div class="headerimg">
<?php get_template_part( 'template-parts/header/header', 'image' ); ?>
</div>
Das war es schon in Sachen HTML. Mehr braucht es nicht.
Update 04.06.2020: Alternatives Vorgehen für die WordPress Header Größe im Theme Twenty Seventeen
Alternativ lässt sich der eigene Headerbereich auch mit folgendem Vorgehen erstellen:
<div class="headerimg">
<?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
</div>
Der Unterschied liegt im Template Part. Im ersten Fall ruft die header.php an dieser Stelle den Template Part auf, der für das Einbinden des Custom Headers zuständig ist. Also für das Bild, das Sie über Design > Header festgelegt haben. Das bedeutet aber auch, dass Sie dort kein Bild auswählen dürfen. Sonst wird dies immer Ihre eigenen Bemühungen überlagern.
Das alternative Vorgehen überspringt nun einfach diesen Template Part. Stattdessen rufen wir nun den Template Part auf, der für die Ausgabe des Site Brandings sorgt. Also für Website Titel, die Website Beschreibung und auch das Website Logo.
Hauptnavigation erscheint so immer oberhalb des Headerbildes
Wenn man nun also nicht den Template Part header-image.php aufruft, sondern die site-branding.php, sorgt man aber nicht nur dafür, dass ein im Customizer hinterlegtes Headerbild keine Rolle mehr spielt. Auch sorgt dieses Vorgehen dafür, dass die Menüzeile nun direkt am oberen Fensterrand erscheint. Und dort auch fixiert bleibt.
Das passende Bild in die Mediathek laden
Bei diesem Vorgehen legen Sie das Headerbild nicht über die Funktion Design > Header fest. Vielmehr sollten Sie hier nur angeben, dass der Twenty Seventeen Header kein Bild anzeigt.
Welches Bild der gerade angelegte DIV-Bereich mit der Klasse .headerimg
anzeigen soll, hinterlegen wir gleich im Rahmen der passenden CSS-Definition. Dafür müssen Sie Ihr Wunschbild aber erst einmal über Medien > Datei hinzufügen hochladen und sich den Link zu Ihrem Bild merken. Der lautet im Allgemeinen:
http://IhreDomain.de/wp-content/uploads/JAHR/MONAT/dateiname.jpg
Die CSS-Angaben für den .headerimg
-Bereich
Nun gilt es, den neuen Bereich zu definieren. Die folgenden Angaben können Sie im Rahmen des zusätzlichen CSS hinterlegen. Als erstes legen wir die WordPress Header Größe fest: Mit einer Breite von 1.200 Pixeln und einer Mindesthöhe von 400 Pixeln entspricht dies den Maßen meines Bildes. Wenn Ihr Bild andere Maße aufweist, ersetzen Sie hier meine Vorgaben. Dann fügen Sie das Hintergrundbild durch seinen Link ein und sorgen dafür, dass es sich nicht wiederholt (no-repeat
). Die Bildposition ist horizontal wie vertikal zentriert. Dies bedeutet, dass immer das Zentrum des Bildes im Fokus bleibt. Sollte sich die wesentliche Bildinformation im oberen linken oder unteren rechten Bildbereich befinden, wählen Sie als Wert top left
oder bottom right
. Die Bildgröße passt sich automatisch an. Mit dem Außenabstand margin: 0 auto
legen Sie fest, dass das Bild horizontal zentriert erscheint.
.headerimg {
width:1200px;
min-height:400px;
background: url(http://IhreDomain.de/wp-content/uploads/JAHR/MONAT/dateiname.jpg) no-repeat;
background-position: center center;
background-size: auto;
margin: 0 auto;
}
Update 04.06.2020: Das Headerbild in voller Breite ausgeben
Das bisherige Vorgehen geht davon aus, dass das eigene Headerbild nur in der Größe ausgegeben werden soll, die es tatsächlich hat. Im Beispiel ging es um eine Breite von 1.200px. Die sollten nicht einen Bereich füllen, der weit größer ist. Der Effekt ist dann schlimmstenfalls nämlich, dass Ihr Bild unscharf aussieht.
Sagen wir nun aber mal, Ihr Bild hat Abmessungen wie meine Krokodile. Da sind es immerhin 1.600px x 667px. Da kann man schon mal auf die Idee kommen, sie in der vollen zur Verfügung stehenden Breite auszugeben. Dafür braucht es andere CSS-Angaben.
CSS-Angaben für die Ausgabe der neuen WordPress Header Größe
.headerimg {
background: url(https://IhreDomain.de/wp-content/uploads/JAHR/MONAT/dateiname.jpg) no-repeat;
background-position: left bottom;
background-size: cover;
margin: 0 auto;
max-width: 100vw;
width: 100vw;
min-height:600px;
}
/* Nur bei Aufruf des Template Parts Site Branding! */
@media screen and (min-width: 30em) {
.site-branding {
padding: 10em 0 3em;
}
}
Die Breite (width und max-width) gibt nun vor, dass das Bild die volle Fensterbreite nutzen soll. Bei der Höhe (min-height) habe ich es bei mindestens 600px belassen. Die Krokodile erscheinen nun also auch in voller Breite, wenn mehr als 1.600px Breite zur Verfügung stehen. Auf einem riesigem Bildschirm kann das aber – wie gesagt – zu dem unschönen Effekt führen, dass das Bild nicht mehr gestochen scharf erscheint. So oder so orientiert sich die Ausgabe immer an der festgelegten Bildposition (background-position) links unten (left bottom).
Wenn man nun nicht das Template für den Custom Header, sondern das für das Site-Branding nutzt, braucht es noch eine kleine Anpassung für diesen Bereich (.site-branding). Andernfalls erscheinen Website Titel etc. zu weit oben.
Mobile Darstellung
Nun braucht es eigentlich nur noch die Anpassung für die mobile Ansicht. Mein Ziel ist es dabei, dass von dem immer Bild möglichst viel zu sehen ist.
@media screen and (max-width: 1024px) {
.headerimg {
width:100%;
margin: 0;
}
}
@media screen and (max-width: 767px) {
.headerimg {
min-height:250px;
background-size:800px auto;
}
}
@media screen and (max-width: 480px) {
.headerimg {
min-height:150px;
background-size:480px auto;
}
}
Das war es auch schon!
Update 04.06.2020: Anpassungen für die Ausgabe auf Mobilgeräten
Ausgehend von der neuen CSS-Definition für die Ausgabe Ihres Headerbildes in voller Fensterbreite braucht es für die Darstellung auf Mobilgeräten nun andere CSS-Angaben.
@media screen and (max-width: 1024px) {
.headerimg {
min-height:350px;
margin: 0;
}
}
@media screen and (max-width: 768px) {
.headerimg {
min-height:300px;
}
}
@media screen and (max-width: 767px) {
.headerimg {
min-height:200px;
}
}
@media screen and (max-width: 480px) {
.headerimg {
min-height:120px;
}
}
Vorteile und Nachteile dieses Vorgehens
Ein großer Vorteil dieses Vorgehens ist, dass es vergleichsweise wenig Code braucht, um die WordPress Header Größe an Ihre Bedürfnisse anzupassen. Dabei bleibt der Header des Themes mit seiner Funktionalität vorhanden. Mit anderen Worten: Beim Scrollen springt die Navigationsleiste an den oberen Fensterrand und bleibt dort fix stehen. Ebenso bleibt die mobile Navigation unberührt.
Der Nachteil ist sicherlich, dass Sie das Bild nicht im Rahmen der WordPress Funktionalität austauschen können. Wenn Sie es austauschen wollen, müssen Sie das neue eben wieder in der Mediathek hochladen und dann den Link zu dem Bild im CSS ändern. Weitere Änderungen des CSS wären nötig, wenn Ihr neues Bild andere Bildmaße mitbringt.
Das Vorgehen funktioniert ganz sicher nicht pauschal bei jedem Theme. Bei Twenty Thirteen allerdings greift es grundsätzlich sehr gut. Hier würden Sie den DIV-Bereich in der header.php nur etwas mehr Code umschließen lassen:
<div class="headerimg">
<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</a>
</div>
Update 13.08.2018:
Was tun, wenn das Bild nur auf der Startseite erscheinen soll?
Im Rahmen der Kommentare kam jüngst die Frage auf, was zu tun ist, damit das Headerbild nur auf der Startseite erscheint. Da diese Frage vielleicht auch andere interessiert, hier der Tipp.
Mittels der Klasse .home
lässt sich die Startseite ansprechen. Wenn nun die oben genannte Definition für die Klasse .headerimg
nur für die Startseite gelten soll, lautet es:
.home .headerimg {
width:1200px;
min-height:400px;
background: url(https://IhreDomain.de/wp-content/uploads/JAHR/MONAT/Dateiname.jpg) no-repeat;
background-position: center center;
background-size: auto;
margin: 0 auto; }
Dasselbe gilt für die mobile Darstellung: vor jedes .headerimg
ein .home
– und schon gelten auch diese Definitionen nur für die Startseite.
Alle anderen Seiten, also auch jene, die Beiträge, Kategorien etc. darstellen, verhalten sich dann so, wie Twenty Seventeen es für Seiten ohne Header vorsieht. Denn: Das Theme geht ja ohnehin davon aus, dass es gar kein Headerbild gibt.
Ein Problem kann nun nur noch mit dem Seitentitel und der Seitenbeschreibung entstehen. Wenn zum Beispiel das Bild dunkel ist und eine weiße Schrift für die Betitelung gut aussieht, ist diese auf weißem Grund dann natürlich nicht mehr sichtbar. Auch hier lässt sich der Unterschied treffen:
.home .site-title a, .home .site-description {
color: #f2f2f2; }
sorgt dafür, dass die Betitelung auf der Startseite fast weiß ist, während
.site-title a, .site-description {color: #a2a2a2; }
für alle anderen Seiten die Betitelung in einem Grauton ausgibt.
Beitragsbild: Britta Kretschmer
Schreibe einen Kommentar