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

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?

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.

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;
}

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!

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

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

  • 8. September 2017 um 12:05
    Permalink

    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

  • 3. August 2018 um 18:01
    Permalink

    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

  • 6. August 2018 um 13:37
    Permalink

    Hallo Corina,
    es kommt nicht nur auf die Maße, sondern vor allem auf den Bildinhalt an. Ohne weitere Info lässt sich dazu nichts Hilfreiches sagen.
    LG, bk

  • 10. August 2018 um 0:35
    Permalink

    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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.