Titelgrafik im CSS per page-id ändern.
Wird WordPress als CMS für Websites genutzt, sollen oft verschiedenen Seiten unterschiedliche Titel (-Grafiken) anzeigen. Wenn z.B. das Blog anders heißt, als die Hauptseite (wie hier bei textverfassung).
Um die Header-Grafik zu wechseln, gibt es verschiedene Lösungswege. Per PHP lässt sich dies direkt in der header.php oder über die functions.php steuern.
Eine einfachere, saubere und individuelle Lösung ist die per CSS*.
Einzelne Seiten oder Artikel per CSS über ihre Seiten-ID ansteuern
In einem fertigen Template sucht man sich zunächst – am besten mithilfe des Firefox-Plugins Firebug – den korrekten CSS-Eintrag (class= / id=) für diese Position heraus. In den meisten WordPress-Templates heißen diese CSS-Klassen oder IDs „title“ und „description“. Dort werden der Seitentitel und die Beschreibung angezeigt, die im Verwaltungsbereich (Backend) unter Einstellungen eingetragen wurden.
Viele neuere Templates bieten die Möglichkeit, den Titel entweder als Text oder Grafik anzeigen zu lassen bzw. eine eigene Header-Grafik hochzuladen.
1) Standardeinstellung: Text anzeigen.
Effekt: Auf den Seiten (Pages) werden Titel und Beschreibung als Text angezeigt, im Blog (Blog-Page) sowie auf den einzelnen Artikelseiten (Single Posts) eine separate Blog-Grafik.
Im folgenden Beispiel hat die Blog-Seite die ID 5 (die Seite muss zuvor manuell angelegt werden und nutzt das eigene Blog-Template), die Hintergrundfarbe ist Rot #800000. Abstand (margin) und Mindesthöhe (min-height) sind je nach Größe und Position der Grafik unterschiedlich.
Eintrag im CSS:
/*** Different Image Header *******************/
.page-id-5 #title,
.page-id-5 #description {display: none;}
.page-id-5 #title-area {
background: #800000 url(images/blogbild.png) no-repeat;
min-height: 50px;
margin: 15px;
}
.single-post #title,
.single-post #description {display: none;}
.single-post #title-area {
background: #800000 url(images/blogbild.png) no-repeat;
min-height: 50px;
margin: 15px;
}
2) Standardeinstellung: Titelgrafik anzeigen
Effekt: Unterschiedliche Titelgrafik für Seiten, Blog und Artikel.
Eintrag im CSS:
/*** Different Header for Pages, Blog and Single Posts ********************/
.header-image #header #title-area {
background: url(images/seitenbild.png) left top no-repeat;
}
.header-image.page-id-5 #header #title-area {
background: url(images/blogbild.png) left top no-repeat;
}
.header-image.single-post #header #title-area {
background: url(images/blogbild.png) left top no-repeat;
}
.header-image.page-id-xy #header #title-area {
background: url(images/eigeneseite.gif) left top no-repeat;
}
Das wars schon. Ganz ohne php.
- *Aktuelle Infos über CSS: w3.org/style/CSS