Unterschiedliche WordPress Themes gehen auf unterschiedliche Weise mit Beitragsbildern um. Die meisten Themes geben sie sowohl auf Archivseiten als auch auf Beitragsseiten aus. Nur wenige nutzen sie nur auf Archivseiten. Und manche von denen, die es auf Beitragsseiten ausgeben, nutzen das Beitragsbild dann riesengroß im Rahmen des Headers. Das mag nicht immer gefallen. Aber nur Themes mit umfangreichen Anpassen-Optionen bieten manchmal auch die Wahl, ob Sie das WordPress Beitragsbild nicht im Beitrag anzeigen lassen wollen – oder eben doch.
Standardthemes wie Twenty Sixteen oder Twenty Fifteen verzichten auf derlei Optionen. Sie zeigen dieses Bild auf jeden Fall. Das bedeutet aber nicht, dass sich die Darstellung nicht beeinflussen ließe.
Auch die Standardthemes Twenty Nineteen / Twenty / Twenty-One bieten keine Wahl. Sie geben ihr Beitragsbild immer auf Beitragsseiten aus. Im Fall von Twenty Nineteen sogar in der beschriebenen Form des großen Headerbildes.
Die Überarbeitung dieses Beitrags bietet nun also auch Anleitungen für das Bearbeiten dieser drei Standardthemes.
WordPress Beitragsbild vs. andere Bilder
Das WordPress Beitragsbild nimmt im Gegensatz zu allen anderen Bildern, die Sie in einen Beitrag (oder auf einer Seite) einbinden, eine Sonderrolle ein. Es dient als das Bild, das auf Archivseiten für Ihren Beitrag wirbt. So vor allem auf Ihrer Blogseite, aber auch auf allen weiteren: Kategorie, Schlagwort, Autor und Datum.
Je nach Theme erscheint das Beitragsbild in voller Spaltenbreite oberhalb des Beitragstitels. Oder darunter. Oder in voller Fensterbreite im Header. Auf Archivseiten wird es vielleicht als mittelgroßes Bild links von Überschrift und Teasertext angezeigt. Oder rechts davon.
So oder so sollte das Beitragsbild inhaltlich zu Ihrem Beitrag passen, ihn bestenfalls repräsentieren.
Das Beitragsbild auf der Beitragsseite
Wenn Leser das Beitragsbild gar nicht auf der Beitragsseite angezeigt bekommen, wirkt das schon irritierend. Immerhin haben sie sich vielleicht gerade wegen des Bildes für den Beitrag entschieden. Also geben die meisten Themes das Beitragsbild automatisch auch auf Beitragsseiten aus. Wo genau es auf der Beitragsseite erscheint, steht in der content.php oder in der content-single.php des Themes.
Nun ist es aber oft der Fall, dass man dieses Beitragsbild zwar auf der Beitragsseite zeigen möchte, aber vielleicht nicht gerade vorneweg. Oder so prominent groß. Vielleicht macht es inhaltlich erst an einer späteren Stelle Sinn. Das geht jedenfalls mir oft so. Deshalb bin ich ganz glücklich, dass mein Theme auf die automatische Ausgabe verzichtet.
Unabhängig davon, wo genau ich es ausgeben möchte, muss ich das entsprechende Bild also zweimal anfassen: Zum einen muss ich es als Beitragsbild definieren. Zum anderen binde ich es im Text noch einmal als normales Bild ein. Das Bild mit dem lackierten Daumennagel passt zum Beispiel erst an späterer Stelle im Text, wenn es um das Vorschaubild (thumbnail) geht.
Das WordPress Beitragsbild im Beitrag durch Entfernen nicht anzeigen
Die konsequenteste Lösung, wenn Sie das WordPress Beitragsbild nicht im Beitrag anzeigen wollen, ist, den entsprechenden Aufruf in der PHP-Datei zu löschen. Dafür braucht es aber ein Child Theme, sonst wäre das Bild nach dem nächsten Theme Update wieder da.
Sie erstellen also für Ihr Child Theme eine Datei mit entsprechendem Namen und kopieren dort den Inhalt der PHP-Datei, die Sie ersetzen möchten, hinein. Vor dem Speichern und Hochladen auf den Server in das Child Theme Verzeichnis müssen Sie nur noch den Aufruf des Beitragsbildes löschen. Und das geht so:
Twenty Sixteen
Bei Twenty Sixteen finden Sie die zu löschenden Angabe in der content-single.php:
<?php twentysixteen_post_thumbnail(); ?>Twenty Fifteen
Das Twenty Fifteen Theme arbeitet hingegen ohne eine content-single.php. Hier finden Sie die zu löschende Angabe in der content.php:
<?php
// Post thumbnail.
twentyfifteen_post_thumbnail(); ?>WordPress Beitragsbild nicht im Beitrag anzeigen – aktuelle Standardthemes
Twenty Twenty-One
Auch bei Twenty Twenty-One ist es die content-single.php, die für die Ausgabe des Beitragsbildes auf Beitragsseiten sorgt. Der zu löschende Aufruf des Beitragsbilds findet sich in Zeile 18 und lautet:
<?php twenty_twenty_one_post_thumbnail(); ?>Mehr ist nicht zu tun. Was das betrifft, ist Twenty Twenty-One sehr nutzerfreundlich.
Bei den Themes Twenty Nineteen und Twenty Twenty gestaltet sich das Vorgehen hingegen komplexer. Bei Twenty Twenty müsste man die Ausgabe der Beitragsbilder auf Beitragsseiten im Gegensatz zu der Ausgabe auf Archivseiten gar erst einmal auseinanderdröseln. Weshalb ich für beide Themes nur empfehlen kann, auf das Entfernen des Beitragsbildes zu verzichten und es stattdessen einfach auszublenden – siehe weiter unten.
Twenty Nineteen
Das Entfernen ist für Twenty Nineteen machbar, wenngleich alles andere als unaufwändig. In der Theme Header Datei header.php verändern Sie die Zeile 33. Dort machen Sie aus dem is_singular ein is_page. Aus
<?php if ( is_singular() && twentynineteen_can_show_post_thumbnail() ) : ?>wird also
<?php if ( is_page() && twentynineteen_can_show_post_thumbnail() ) : ?>Diese kleine Änderung führt dazu, dass nur noch Seiten ihr Beitragsbild im aufwändigen Header ausgeben. Beitragsseiten tun dies nun nicht mehr.
Allerdings geben Beitragsseiten nun auch nicht mehr ihren Beitragstitel aus. Zudem braucht diese Änderung ein wenig CSS. Ohne eine geringere Mindesthöhe (min-heigt:150px;) haben Sie es auf Beitragsseiten sonst mit einer großen leeren Fläche zu tun. Außerdem würde der Bereich hellgrau erscheinen, es braucht also einen Farbwert für den Hintergrund (background-color: #...;). Schließlich sorgen Sie mit overflow:visible; dafür, dass ihr Untermenü sichtbar bleibt. Das CSS hierzu lautet:
.single .site-header.featured-image {min-height: 150px; background-color: #FARBWERT; overflow:visible;}Nun habe ich ohnehin schon mal gezeigt, wie man den Beitrags-Header von Twenty Nineteen auf nette Weise verändern kann. In dem Beitrag finden Sie auch das Vorgehen, mit dem Sie den Beitragstitel wieder ausgeben können.
Das WordPress Beitragsbild im Beitrag durch Ausblenden nicht anzeigen
Wer kein Child Theme hat und es nur wegen dieser einen Änderung nicht einrichten möchte, kann das Beitragsbild auch einfach per CSS ausblenden. Dazu hinterlegen Sie Ihre Definitionen im Customizer > Zusätzliches CSS. Dies Vorgehen stellt sicher, dass Ihre Änderungen immer erhalten bleiben. Sie werden also nicht vom Update des Parent Themes überschrieben.
Ansprechen lässt sich das Beitragsbild über seine Klasse und den Selektor. Bei den Themes Twenty Sixteen und Twenty Fifteen sind dies: .post-thumbnail img (thumbnail = Daumennagel). Würde man hierfür aber ganz allgemein ein display:none; angeben, würde das Beitragsbild auch nicht mehr auf Archivseiten erscheinen. Also braucht die Definition noch eine Einschränkung: Ein vorangestelltes .single sorgt dafür, dass es nur auf Beitragsseiten nicht angezeigt wird.
CSS für Twenty Sixteen und Twenty Fifteen
.single .post-thumbnail img {display:none;}Für Twenty Fifteen gilt jedoch, dass ohne Abstandsdefinition der Beitragstitel unangenehm nah am oberen Rand des Containers klebt. Twenty Fifteen hat jedoch eine Definition für Beitragscontainer mit Beitragsbild, die sich hierfür gut nutzen lässt.
.single .hentry.has-post-thumbnail {padding-top: 25px;}Wiederum sorgt das vorangestellte .single dafür, dass dieser Innenabstand (padding) nur für Beiträge, nicht aber für Seiten gilt. Denn die arbeiten ja auch mit Beitragsbildern und für diese braucht es keinen 25 Pixel breiten Abstand nach oben.
CSS für Twenty Twenty-One
Auch beim Theme Twenty Twenty-One funktioniert das Ausblenden des Beitragsbildes auf Beitragsseiten sehr einfach:
.single .post-thumbnail {display: none;}Wie gesagt: In dieser Hinsicht ist Twenty Twenty-One regelrecht pflegeleicht.
CSS für Twenty Nineteen
Sie können auch für Twenty Nineteen durch Ausblenden dafür sorgen, dass WordPress das Beitragsbild nicht länger im Beitrag anzeigen wird. Allerdings müssen Sie dann auch hier wieder dafür sorgen, dass der Bereich nicht länger die volle Höhe einnimmt (min-height:150px;). Außerdem braucht es eine Hintergrundfarbe: background-color: #FARBWERT; . Wobei Sie für #FARBWERT den Farbwert wählen, den Sie im Theme nutzen. overflow:visible; sorgt dafür, dass Ihr Untermenü noch in voller Schönheit zu sehen ist.
.single .site-header.featured-image .site-featured-image {display: none;}
.single .site-header.featured-image {min-height: 150px; background-color: #FARBWERT; overflow:visible;}CSS für Twenty Twenty
Und nun endlich zum Twenty der Twenty-Themes. Hier hatte ich gesagt, dass das Entfernen nicht wirklich eine Option ist. Zumindest nicht für Einsteiger. Aber das Ausblenden ist machbar.
.single .featured-media {display: none;}Diese Definition gilt sowohl für das Standardtemplate als auch für das Template für weite Breite. Für das Cover-Template gilt sie nicht. Aber das muss sie ja auch nicht. Wenn Sie Ihr Beitragsbild nicht als großes Coverbild ausgeben wollen – wählen Sie diese Vorlage halt nicht!
Beitragsbild: Britta Kretschmer
Schreibe einen Kommentar