Den WordPress Hintergrund pro Seite ändern – wie geht das?

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. Wir zeigen, wie Sie den WordPress Hintergrund pro Seite ändern können.

WordPress Plugins: Full Background Manager und WP Backgrounds Lite

Wie für fast alle Aufgaben in der WordPress Welt gibt es auch für das Anpassen des WordPress Hintergrunds pro Seite Plugins. Der Full Background Manager bietet die Möglichkeit, für jede Seite einen eigenen Hintergrund zu definieren, sei es nun ein Bild oder eine Farbe. Die Bearbeitung erfolgt sodann im Rahmen der Bearbeitung einer Seite: Das Plugin fügt hier eine Box hinzu, über die sich die Einstellungen für diese einzelne Seite vornehmen lassen.

Allerdings: Der Entwickler empfiehlt selbst, dringlich vor der Installation eine komplette Sicherung der Website samt Datenbank vorzunehmen, weil es offenbar durchaus zu Problemen kommen kann.

Alternativ wäre da noch WP Backgrounds Lite zu nennen, die kostenfreie Variante des großen kostenpflichtigen Bruders WP Backgrounds II. Gegenüber dem Full Background Manager bietet es zudem die Anklickbarkeit der Hintergrundbilder, die auch für Beiträge (nicht nur Seiten) definiert werden können. Die kostenpflichte Vollversion kann gar Slideshows oder Youtube-Videos im Hintergrund ablaufen lassen.

Allerdings hat der Entwickler sein Plugin zuletzt vor einem Jahr aktualisiert, sprich: Die Kompatibilität mit der aktuellen WordPress Version ist nicht gesichert, und die Bewertungen der Nutzer klingen nicht allzu gut.

Selbst ist die Frau / der Mann: den WordPress Hintergrund manuell anpassen

Das Aussehen des WordPress Hintergrundes ist grundsätzlich eine Frage der CSS-Definitionen. Über Design -> Anpassen können Sie – je nach Theme unterschiedlich viele und weitgehende – Einstellungen vornehmen. Website weite Hintergrundeinstellungen sind immer dabei, und so können Sie hier die Hintergrundfarbe (oder auch das Hintergrundbild) ändern, mit der das Theme ausgeliefert wird. Im Falle von Twenty Fifteen, das im Folgenden als Grundlage dient, ist es ein helles Grau. Machen Sie daraus ein Rot, Grün oder Blau, dann ist das Ihre neue Standard-Einstellung.

Für benutzerdefiniertes CSS stellt Twenty Fifteen keine Optionen zur Verfügung. Bei Themes, die das nicht bieten, macht es viel Sinn, mit dem WordPress Plugin Simple Custom CSS (oder einem Child-Theme) zu arbeiten, damit Ihre Anpassungen das nächste Theme-Update überstehen.

Stellen wir uns vor, Sie haben eine Website mit sechs Menüeintragen: Start, Angebote, Blog, über mich, Kontakt, Impressum. Fünf dieser Einträge verweisen auf Seiten (Start, Angebote, über mich, Kontakt und Impressum), 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 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=edit

Der 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 alle Beiträge

Über das Vorgehen ist es möglich, auch eine Hintergrund-Definition für alle Beiträge zu hinterlegen. Theoretisch ist es zwar durchaus möglich, auch hier jeden einzelnen Beitrag über seine ID anzusprechen. Praktisch wäre dann aber ein anderes, weit komplexeres Vorgehen nötig, das in die PHP-Dateien eingreift.

body.single { }

spricht den Hintergrund aller Beiträge an.

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:

body.category-…

zum Ansprechen und die ID zum konkreten Auswählen, also 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 auf der Website gekachelt, also so oft wiederholt wird, 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 sehr groß sein. Da es ja zu weiten Teilen von den eigentlichen Inhalten Ihrer Website (dem Contentbereich, der Sidebar) abgedeckt wird, sollte es seine wesentliche Bildinformation vielleicht nicht gerade dort zeigen, wo sie dann kaum noch zu sehen ist – siehe Beispiele weiter unten.

Content-Bereich transparent machen

Damit Ihre neu definierten Hintergründe nun nicht völlig abgedeckt werden von den eigentlichen Inhalten Ihrer Website, sprich: dem Content-Bereich, aber auch der Sidebar oder dem Header, sollten Sie nun all diesen eine leichte Transparenz geben. Wie genau Sie diese Elemente ansprechen können, ist zwar weitgehend gleichgeschaltet. Im Zweifel müssten Sie die aber erst einmal herausfinden. Hierfür benutzen Sie am besten die Funktion Ihres Browsers Element untersuchen (heißt bei Google Chrome neuerdings Prüfen). Für das Twenty Fifteen Theme sind es mindestens die drei Elemente 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 wenige 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 alternativ immer eine Definition ohne Transparenz existieren:

background-color: rgb (255, 255, 255);

background-color: rgba (255, 255, 255, 0.8);

CSS-Definitionen für individuelle Hintergründe pro Seite und Transparenzen am Beispiel von 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

 

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 – und stellt damit vielleicht das viel größere Problem dar, als eine Handvoll CSS-Definitionen zu schreiben.


Beitragsbild: Britta Kretschmer