WordPress Header Größe ändern – Wie Sie den Header an Ihr Bild anpassen

Dieser Beitrag ist älter als zwei Jahre. Es kann also sein, dass auch der Inhalt - zumindest in Teilen - bereits veraltet ist.
WordPress Header Größe (Twenty Seventeen)

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(https://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

WordPress Header Größe ändern für zwei Krokodile

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

Anpassung für Mobilgeräte des Headerbildes, das zwei Krokodile zeigt

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

8 Gedanken zu „WordPress Header Größe ändern – Wie Sie den Header an Ihr Bild anpassen

  1. Dieser Tage kam anonym die Frage rein, ob sich die Anleitung auch für das Theme Twenty Fifteen umsetzen lässt.

    Grundsätzlich halte ich es nicht für sinnvoll, Twenty Fifteen ein solches Kopfzeilenbild zu verpassen. Theoretisch könnte man zwar in der header.php oberhalb des Bereiches mit der ID page ein neues DIV einfügen und dafür per CSS ein Hintergrundbild definieren, das die volle Fensterbreite nutzt. Aber dann verhält sich die Sidebar noch immer wie bisher, was in dem neuen Kontext nicht wirklich gut aussieht.
    Da stellt sich doch die Frage, ob es nicht günstiger ist, gleich ein Theme zu benutzen, das mit einem Kopfzeilenbild in voller Breite arbeitet. Twenty Fifteen lebt ja gerade davon, dass es seine Elemente etwas anders anordnet.

    LG, bk

  2. Guten Tag
    Ich bin absoluter WordPress-Neuling :) nach zwei Tagen herumprobieren und etlichen Ich-schmeiss-den-Computer-an-die-Wand-Momenten, habe ich es dank Ihrer Anleitung geschafft, den Header meinem Bild anzupassen. Wohoo erste Erfolgserlebnisse :) :)
    Nun sitze ich seit geraumer Zeit daran, diesen an die mobile Ansicht anzupassen. Dies will mir aber nicht gelingen. Mein ursprüngliches Bild hat die Masse 2016 x 1504. Vielleicht könnten Sie mir sagen, wie ich den obigen Code an meine Masse anpasse?
    Es dankt Ihnen eine frustrierte Mama, die sich zwischen Flasche und Windel an WordPress versucht.
    Liebe Grüsse
    Corina

  3. Hallo Britta,
    erstmal vielen Dank, Sie haben mir mit diesem Post sehr bei der Lösung meines Probelms geholfen.
    Eine Frage hätte ich jedoch: Könnten Sie mir vielleicht erklären, wie ich es schaffe, dass der von mir selbst erstellte Header nur auf der Homepage erscheint?

    Wenn Sie mir dabei noch helfen könnten, wäre ich Ihnen äußerst dankbar
    LG, Ivan

  4. hallo und guten Tag,

    danke – sehr interessanter Artikel.

    bei meinem Einsatz des Theme 2017 stelle ich fest dass die Grafik nicht mehr via css kontrollierbar ist:

    – die beiden featured Images sind jetzt in der Höhe nicht mehr richtig kontrollierbar geworden – vll. dadurch dass ich das
    Theme 2017 im Customizer auf „zweispaltig“ gestellt habe.

    Also, im ernst ich hab den Eindruck dass ich jetzt über CSS-Kommandos in dem Customizer nicht mehr kontrollierend „rankomme“.
    Vielleicht hab ich aber auch insges. auch „gegenläufige“ und sich gewissermaßen „widersprechende“ CSS – Befehle im Customzier drinne.

    wie gesagt: die Featured-Images: sind nicht abstimmbar…

    hier ist in beiden Bildern a. und b. die Proportion irgendwie abhandengekommen – Ich fänd es gut wenn die Bilder etwas kleiner bzw. vor allen Dingen
    “ niedriger “ wären.

    Interessanterweise ist es so dass wenn man die Seite auf dem Handy ansieht – dann sehend die beiden Bilder a. und b. in den Proportionen – u. vor
    allen Dingen in der Höhe (!) besser aus. Sie sind da (also auf dem Handy – z.B. mit Android) nicht mehr parallaxed-like – d.h. sie haben nicht
    mehr ein Parallax-Verhalten beim scrollen, was mich nicht sonderlich stört – und sie sind in

    a. Höhe ,,,
    b. Proportion und
    c. Lesbarkeit des Textes bzw. der Schrift

    Nebenbei; hier, also im Android-Handy ist die Headergrafik etwas zu groß.
    Zusammengefasst wär es schön, wenn ich auf dem Notebook oder Desktop – Schirm eine Darstellung der Bilder erreichen würde, die die Bilder insges. etwas
    kleiner darstellt und lesbar..

    Freue mich von Dir wieder zu hoeren

    Viele Grüße
    Matze

  5. Hallo Martin,

    eines ist mal sicher: Das ist sicher einer der längsten Kommentare, den auf diesem Blog je jemand geschrieben hat. Nur mag er gar nicht zu diesem Beitrag passen. Auch kann ich die Probleme – sofern ich sie trotz der vielen Worte überhaupt verstehe – mit den Beitragsbildern im Rahmen von Twenty Seventeen nicht nachvollziehen.

    Aber immerhin: Der Kommentar hat mich dazu gebracht, diesen Beitag intensiv zu überarbeiten. Und wie hoffe, damit auch zu verbessern. Das ist doch auch schon mal was…

    LG, bk

  6. Vielen Dank für die wertvollen Tipps: Eine Frage noch zum Thema „Bildergröße ändern“: ich hab ein Bild im Theme 2020 implementiert – das irgendwie zu groß ist. Bin derzeit am Überlegen wie ich das kleiner machen kann u. versuche das im Moment auch via Chrome-Explorer herauszubekommen – die Page: https://www.f-s-j.de – Würde mich über einen Tipp freuen – VG Martin

Schreibe einen Kommentar

Die im Rahmen der Kommentare angegebenen Daten werden von mir dauerhaft gespeichert. Cookies speichere ich nicht. Für weitere Informationen siehe bitte meine Datenschutzerklärung.

Deine E-Mail-Adresse wird nicht veröffentlicht.

Nach oben scrollen