In früheren Blogbeiträgen hatten wir uns mit den Fragen beschäftigt, wie sich dank WordPress Plugins individuelle Headerbilder für Seiten und Beiträge oder die Seitenleiste bearbeiten lassen. Beide Ansätze gingen von dem Bedürfnis aus, unterschiedliche Themenbereiche einer Website gestalterisch voneinander abzugrenzen: Individuelle Headerbilder machen auf den ersten Blick kenntlich, worum es in diesem Bereich inhaltlich geht. Eine zudem angepasste Seitenleiste sorgt für die inhaltlich passenden Zusatzinformationen. Heute nun schauen wir uns die individuelle Gestaltung des Hintergrundes pro Seite einer WordPress Website an. Standardgemäß zeigt WordPress immer dieselbe Hintergrundfarbe oder dasselbe Hintergrundbild. Das muss aber nicht sein. Ich zeige Ihnen, wie Sie den WordPress Hintergrund pro Seite ändern können.
Update: Im Folgenden geht es nach wie vor erst einmal um Plugins und grundlegende Erkenntnisse in Hinblick auf das Arbeiten mit individuellen Hintergrundbildern pro Seite.
Nach dem konkreten Vorgehen für das Theme Twenty Fifteen folgen dann – neu – konkrete Angaben für die beiden Standardthemes Twenty Twenty und Twenty Twenty-One.
WordPress Plugins für das Ändern des WordPress Hintergrunds pro Seite
Als ich seinerzeit an dieser Stelle zwei Plugins nannte, die den Job übernehmen sollen, tat ich dies bereits halbherzig. Der Full Background Manager und WP Backgrounds Lite mochten mich beide nicht wirklich überzeugen. Vor allem aber werden sie heute – genauso wie damals – offensichtlich nicht regelmäßig gepflegt.
Für beide gibt WordPress den Hinweis aus, dass sie
»nicht mit den jüngsten drei Hauptversionen von WordPress getestet« wurden. »Es wird möglicherweise nicht mehr gewartet oder unterstützt und kann Kompatibilitätsprobleme haben, wenn es mit neueren Versionen von WordPress verwendet wird.«
Davon sollte man also die Finger lassen. Alternativ gäbe es dann noch das Plugin Simple Full Screen Background. Das bietet die individuellen Hintergrundbilder pro Seite oder Beitrag allerdings nur in seiner Bezahlversion.
Vergessen wir also Plugins und bleiben wir beim Sinn dieses Beitrags. Hier ging es auch schon 2016 darum, wie man das Ganze selbst umsetzen kann.
Selbst ist die Frau / der Mann: den WordPress Hintergrund manuell anpassen
Über Design -> Customizer können Sie – je nach Theme unterschiedlich viele und weitgehende – Einstellungen vornehmen. Website-weite Hintergrundeinstellungen sind fast immer dabei. Und so können Sie hier fast immer die Hintergrundfarbe (oder auch das Hintergrundbild) ändern, mit der das Theme ausgeliefert wird.
Auch für weitergehende Änderungen der Darstellung, für solche also, die benutzerdefiniertes CSS betreffen, bietet WordPress im Customizer eine Option.
Für benutzerdefiniertes CSS stellt seit WordPress 4.7 die Option Design > Customizer > Zusätzliches CSS zur Verfügung. Hier können Sie Ihre Definitionen updatesicher hinterlegen. Nur wenn Sie darüber hinaus Änderungen vornehmen wollen, also zum Beispiel in Templates wie der single.php, benötigen Sie ein Child-Theme.
Grundlegendes: WordPress Hintergrund pro Seite ändern
Stellen wir uns vor, Sie haben eine Website mit sechs Menüeintragen: Start, Angebote, Blog, über mich, Kontakt, Impressum/Datenschutz. Fünf dieser Einträge verweisen auf Seiten (Start, Angebote, über mich, Kontakt und Impressum/Datenschutz), einer ruft die Blogseite ab und zeigt entsprechend Ihre Beiträge.
Sie haben es nun also mit fünf Seiten, einer Blogseite und den Beiträgen zu tun. Wollten Sie für die jeweils einen individuellen Hintergrund erstellen, müssten Sie insgesamt mindestens sieben CSS-Definitionen hinterlegen: Fünf für die Seiten, eine für die Blogseite und einen für alle Beiträge.
Individuelle Hintergründe für einzelne Seiten
Um den WordPress Hintergrund pro Seite festzulegen, brauchen Sie zwei Informationen: Erstens müssen Sie wissen, wie Sie den Hintergrund als solches ansprechen können. Zweitens brauchen Sie die ID der konkreten Seite.
Der Hintergrund als solches lässt sich ansprechen mit
body.page-id-… { }Hinzu kommt die jeweilige ID. Wenn Sie eine Seite zum Bearbeiten öffnen, erscheint die ID als Teil der URL dieser Seite in der Adresszeile Ihres Browsers:
http://domain.de/wp-admin/post.php?post=3238&action=editDer Hintergrund für die Seite mit der ID 3238 lässt sich also wie folgt ansprechen:
body.page-id-3238 { }Jede Seite (und jeder Beitrag) hat eine eigene ID. Bevor Sie weitermachen, finden Sie erst die IDs der fünf Seiten heraus, denen Sie individuelle Hintergründe geben wollen.
Individueller Hintergrund für die Blogseite
WordPress bietet für die Blogseite eine eigene Klasse, die heißt schlicht .blog. Wenn Sie also den Hintergrund für die Blogseite definieren wollen, lautet die Angabe:
body.blog { }Individueller Hintergrund für Beiträge
Über das Vorgehen ist es möglich, auch eine Hintergrund-Definition für alle Beiträge zu hinterlegen:
body.single { }Auch ist es möglich, einzelne Beiträge über ihre ID anzusprechen. Wie bei den Seiten finden Sie die ID eines Beitrags über das Bearbeiten desselben heraus. Die ID steht dann ebenfalls als Teil der URL in der Adresszeile. Das Vorgehen lautet zum Beispiel:
body.postid-12957 { }Auch möglich: Individuelle Hintergründe für einzelne Kategorien
Auch Kategorien können individuelle Hintergründe zeigen. Und auch hier brauchen Sie zwei Informationen. Die erste dient den Kategorien als solche:
body.category-…Und mit der ID sprechen Sie eine konkrete Kategorie an. Denn natürlich hat auch jede einzelne Kategorie ihre eigene ID. Herausfinden können Sie diese durch das Bearbeiten der Kategorie. Zum Beispiel:
body.category-132 { }Allerdings gilt diese Definition tatsächlich nur für diese eine Kategorie-Seite und nicht für die Beiträge dieser Kategorie!
Farbe, Muster oder Bild?
Fehlt noch die Angabe dessen, was die einzelnen Seiten oder die Beiträge als ihren jeweiligen Hintergrund anzeigen sollen: eine individuelle Farbe, ein Muster oder doch ein großes Bild?
Am einfachsten ist sicherlich die Definition der Farbe. Handelsüblich macht das mit dem sogenannten HEX-Wert (#123456;). Es geht aber auch anders, zum Beispiel mit rgb-Angabe (rgb (255, 0, 255);). Und selbst die Benennung der Farbe auf Englisch (red;) ist möglich, wenn auch nicht besonders spezifisch.
Muster setzt voraus, dass Sie ein kleines Bild haben. Das wird auf der Website gekachelt ausgegeben, also so oft wiederholt, bis der gesamte Hintergrund gefüllt ist. Im Beispiel unten ist das Bild ein orangefarbiges Quadrat mit einem 1 Pixel breiten weißen Rahmen. Weit komplexere und hübschere Muster sind sicherlich denkbar…
Schließlich gibt es noch die Option, ein großes Bild zu zeigen. Nur bedenken Sie: Das Bild an sich muss nicht nur recht groß (Pixelmaße) sein. Wichtig ist hier vor allem die wesentliche Bildinformation. Da das Bild ja zu weiten Teilen von den Inhalten Ihrer Website (dem Contentbereich, der Sidebar) abgedeckt wird, sollte es seine wesentliche Bildinformation nicht gerade dort zeigen, wo sie dann kaum noch zu sehen ist. Siehe hierzu die Beispiele weiter unten.
Content-Bereich (halb)transparent machen
Damit Ihre neu definierten Hintergründe nun nicht völlig abgedeckt werden von den eigentlichen Inhalten Ihrer Website, sollten Sie nun all diesen eine leichte Transparenz geben. Sprich: Das Hintergrundbild sollte wie durch Milchglas gerade noch zu sehen sein, während Ihre Texte noch lesbar sind.
Wie genau Sie diese Elemente ansprechen können, ist zwar weitgehend gleichgeschaltet. Im Zweifel müssten Sie dies aber erst einmal herausfinden. Hierfür benutzen Sie am besten die Funktion Ihres Browsers Element untersuchen. Für das Theme Twenty Fifteen sind es mindestens body:before, .hentry und .page-header.
Mit der Eigenschaft background-color: und dem Wert rbga (rot blau grün alpha) definieren Sie eine mehr oder weniger transparente Farbe.
background-color: rgba(255, 255, 255, 0.8);steht dabei für ein nur leicht transparentes Weiß. Da ältere Browser mit dieser Angabe nichts anzufangen wissen, sollte für sie aber alternativ immer eine Definition ohne Transparenz existieren:
background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 0.8);CSS für Theme Twenty Fifteen
/* Transparenz von Seitenspalte, Contentbereich und Seitentitel */
body:before {
background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 0.8);
}
.hentry {
background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 0.8);
}
.page-header {
background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 0.8);
}
/* Hintergrund der einzelnen Seiten, definiert per ID */
/* Hintergrundfarbe: helles Lila */
body.page-id-3238 {
background-color: #b3a2c7;
}
/* Hintergrundbild: Flamingos */
body.page-id-2641 {
background-image: url("https://domain.de/wp-content/uploads/2016/03/bild1.jpg");
background-repeat: no-repeat; /* sorgt dafür, dass das Bild nicht wiederholt wird */
background-attachment: fixed; /* sorgt dafür, dass das Bild nicht mitscrollt */
}
/* Hintergrundkachel: Orange mit weißem Rahmen */
body.page-id-2866 {
background-image: url("https://domain.de/wp-content/uploads/2016/03/bild2.gif");
background-repeat: repeat; /* wiederholt das kleine Bild horizontal und vertikal */
}
/* Hintergrundbild für Kategorie Zoo */
body.category-132 {background-image: url("https://domain.de/wp-content/uploads/2016/03/bild3.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
}
/* Hintergrundbild für alle Beiträge */
body.single {
background-image: url("https://domain.de/wp-content/uploads/2016/03/bild4.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
}Beispiele für individuelle Hintergründe pro Seite bei Theme Twenty Fifteen
Die Beispiele zeigen: Nicht jedes Bild ist geeignet. Was bei den Flamingos noch recht gut funktioniert (sie verteilen sich über die komplette Breite des Bildes, wirken fast wie ein Muster, sodass das Auge den abgedeckten Bereich zu ergänzen weiß), klappt bei den Tigern oder dem Erdmännchen schon nicht mehr so gut. Die Tiger als eigentliche Bildaussage sind komplett abgedeckt, der Erdmann weitgehend. Es ist also gar nicht so leicht, passende Bilder zu finden. Somit stellt die Suche nach dem passenden Bild vielleicht das viel größere Problem dar, als eine Handvoll CSS-Definitionen zu schreiben.
Mobile Anpassung: Kein Hintergrundbild auf Mobilgeräten
Unberücksichtigt blieb bislang die Frage, ob Hintergrundbilder auf Mobilgeräten überhaupt Sinn machen. Viel zu sehen ist davon nicht, warum sollte man es auf einem Phone dann überhaupt laden müssen?
Ein wenig CSS schafft da Abhilfe. Nur auf Geräten, die mehr als 768 Pixel breit sind, sind mit dieser Definition die Hintergrundbilder zu sehen. Bei allem, was kleiner als ein Tablet im Porträtmodus ist, bleibt der Hintergrund folglich schlicht weiß.
@media screen and (max-width:767px) {
body, body.custom-background {background-image:none !important;}
}Diese Angabe gilt dann auch für die beiden folgenden Standardthemes.
WordPress Hintergrund pro Seite ändern: Twenty Twenty und Twenty Twenty-One
Im Zuge der Überarbeitung alter Beiträge geht es im Folgenden also darum, wie das Vorgehen für die letzten drei Standardthemes Twenty Nineteen / Twenty / Twenty-One aussieht.
Im konkreten Fall belassen wir es bei den letzten beiden Twenty Themes. Denn nur die stellen im Customizer die Option des Hintergrundbildes zur Verfügung. Wenn Sie dennoch für das 2019er WordPress Theme den Hintergrund pro Seite ändern wollten, müssten Sie Twenty Nineteen erst einmal grundsätzlich auf Hintergrundbilder einstimmen. Das funktioniert natürlich auch mit CSS, body {background-image: ...} wäre da ein Anfang. Aber dann muss noch eine ganze Menge mehr passieren, bis das Ganze ansatzweise gut aussieht. Die Macher des Themes haben sich schon was dabei gedacht, dass sie Hintergrundbilder gar nicht eingeplant haben.
Anders sieht das hingegen bei Twenty Twenty und Twenty Twenty-One aus. Für beide gibt es die Option des Website-weiten Hintergrundbildes. Beide brauchen dann aber eben auch Anpassungen, sollen die Texte noch lesbar sein.
WordPress Hintergrund pro Seite ändern: Theme Twenty Twenty
Wie bei Theme Twenty Fifteen braucht es auch für Twenty Twenty Halb-Transparenzen, damit das Hintergrundbild noch durchscheint, die Texte aber lesbar bleiben.
Bei Twenty Twenty lässt sich über #site-content dafür sorgen, dass das Hintergrundbild wie durch Milchglas erscheint. Das allein reicht aber nicht. Nur wenn .entry-content, .hentry und article ebenfalls für Milchglas sorgen, lässt sich der Text noch weitgehend lesen.
Zudem braucht es noch einige Anpassungen für Abstände, ohne die es zu unschönen Effekten kommt.
Geht es nun darum, den WordPress Hintergrund pro Seite zu ändern, funktionieren dann auch die oben gemachten Angaben: body.page-id-..., body.postid-..., etc..
/* Keine Hintergrundbilder für Mobilgeräte (Twenty Twenty und Twenty-One) */
@media screen and (max-width:767px) {
body, body.custom-background {background-image:none !important;}
}
/* Leichte Transparenz für die gesamte Seite */
@media screen and (min-width:768px) {
#site-content {
background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 0.5);
}
/* Transparenz für Content-Bereich */
.entry-content, .hentry, article {
background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 0.6);
padding: 2em;
}
/* Anpassungen Abstände */
.entry-content padding: 2em;}
.post-inner {padding-top:0 !important;}
.footer-top-visible .footer-nav-widgets-wrapper, .footer-top-hidden #site-footer {
margin-top:0;
}WordPress Hintergrund pro Seite ändern: Theme Twenty Twenty-One
Bei Theme Twenty Twenty-One ist das Vorgehen komplexer als bei Twenty Twenty. Das liegt vor allem daran, dass das aktuelle Standardtheme mit zwei Modi daherkommt: dem hellen und dem dunklen. Der Modus lässt sich von jedem/r Nutzer/in jederzeit ändern, sodass man das Ganze nicht einfach großzügig ignorieren kann. Es sei denn, man deaktiviert ihn im Customzier ganz. Wer ihn aber beibehalten möchte, muss nun auch Definitionen für ihn schreiben.
Bei Twenty Twenty-One lässt sich der gesamte Bereich mit der Klasse .site ansprechen. Ein vorangestelltes .is-dark-theme sorgt fortan dafür, dass auch der dunkle Modus weiß, was zu tun ist.
Darüber hinaus gibt es eine ganze Reihe von Elementen, die alle zudem den Milchglas-Effekt brauchen, damit ihre Informationen lesbar erscheinen. Betroffen davon sind .site-header, .page-header, .widget-area, .site-footer, .site-main > article > * und .comments-area.
Und auch hier gilt, dass für die individuellen Hintergrundbilder das oben genannte Prinzip funktioniert. body.page-id-..., body.postid-..., etc..
/* Keine Hintergrundbilder für Mobilgeräte (Twenty Twenty und Twenty-One) */
@media screen and (max-width:767px) {
body, body.custom-background {background-image:none !important;}
}
/* Leichte Transparenz für die gesamte Seite */
@media screen and (min-width:768px) {
.site {
background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 0.5);
}
/* Transparenz für die gesamte Seite im dunklen Modus */
.is-dark-theme .site {background-color: rgb(40, 48, 61);
background-color: rgba(40, 48, 61, 0.8);}
}
/* Transparenz für Header, Widget-Bereich, Footer und Content-Element */
.site-header, .page-header, .widget-area, .site-footer, .site-main > article > *, .comments-area {
background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 0.8);
padding: 1em;
}
/* Transparenz für Header, Widget-Bereich, Footer und Content-Element im dunklen Modus */
.is-dark-theme .site-header, .is-dark-theme .page-header, .is-dark-theme .widget-area, .is-dark-theme .site-footer, .is-dark-theme .site-main > article > *, .is-dark-theme .comments-area {
background-color: rgb(40, 48, 61);
background-color: rgba(40, 48, 61, 0.8);
padding: 1em;
color: #fff;
}Beitragsbild: Britta Kretschmer
Schreibe einen Kommentar