Auf Twitter hat mich die Frage erreicht, wie man es erreichen kann das im Kopfbereich pro Kategorie unterschiedliche Hintergrundgrafiken eingeblendet werden. Wenn man keine Berührungsängste vor einem Codeeditor hat, dann ist die Lösung sehr einfach und man kann damit auf ein zusätzliches Plugin verzichten.
Der öffnende body-Tag…
Als erstes öffnest du die header.php deines Themes und dort erweiterst du den öffnenden body-Tag, damit es nachher so ausschaut:
<body <?php body_class(); ?>>Hiermit haben wir den einleitenden
body-Tag um den Template-Tag body_class(); erweitert. In Abhängigkeit davon, wo man sich innerhalb der WordPress-Website befindet wird später im Quelltext das Klassen-Attribut mit unterschiedlichen Werten ausgegeben: home für die Startseite oder page für eine Seite.
So weit so gut. Befindet man sich auf einem Kategorie-Archiv, dann wird als Wert folgendes ausgegeben: category-kategoriename. Im Archiv der Kategorie WordPress wäre dies category-wordpress.
Daher könnte man nach folgendem Schema in der CSS-Datei vorgehen:
#kopfbereich {background: url(...);}
.category-123 #kopfbereich {background: url(...);}
.category-xyz #kopfbereich {background: url(...);}
.category-bla #kopfbereich {background: url(...);}Bei jeder neuen Kategorie gibt es lediglich eine neue Zeile in der CSS-Datei. Ist in meinen Augen ein vertretbarer Aufwand … außer man fügt täglich 3-4 Kategorien pro Blog ein. 🙂
Wie schaut es bei Artikeln einer bestimmten Kategorie aus?
Wie schon bereits erwähnt, funktioniert das ganze nur im jeweiligen Kategorie-Archiv. Möchte man aber pro Kategorie-Archiv und für jeden Artikel einer bestimmten Kategorie ein extra Hintergrundbild haben – z. B. Kategorie WordPress und alle Artikel die dort eingeordnet sind – dann muss man body_class(); erweitern. Folgendes bitte in die functions.php des Themes eintragen:
// Kategorie-Namen im body und Artikel
function category_id_class($classes) {
global $post;
foreach((get_the_category($post->ID)) as $category)
$classes[] = $category->category_nicename;
return $classes;
}
add_filter('post_class', 'category_id_class');
add_filter('body_class', 'category_id_class');Mit diesem Code werden sowohl bei body_class(); wie bei post_class(); der klein geschrieben Kategorie-Name als Wert eingetragen, also nicht mehr category-wordpress sondern nur wordpress.
Wenn man jetzt .wordpress #kopfbereich {background: url(...);} einträgt, dann bekommt das jeweilige Kategorie-Archiv und alle Artikel dieser Kategorie ein anderes Hintergrundbild zugewiesen.
Der Nachteil
[adrotate banner=”19″]
Bei der zweiten, also bei der erweiterten Lösung, gibt es allerdings ein Problem. Der öffnende body-Tag bekommt den Attributs-Wert auch spendiert wenn man sich, auch außerhalb einer Kategorie befindet, zum Beispiel im Datumsarchiv. Nicht verstanden? Hier ein Beispiel.
Nehmen wir mal an, der aktuellste Artikel wurde in die Kategorie WordPress einsortiert. Dann bekommt das Attribut class, des öffnenden body-Tags den Wert wordpress spendiert und zwar nicht nur dann wenn man die Kategorie WordPress ansteuert oder einen Artikel aufruft, der in diese Kategorie einsortiert wurde sondern in allen Archiven (Datum, Jahr, Tags etc.) wo dieser besagte Artikel oben erscheint. Erscheint auf der Startseite, wie auf den meisten Weblogs auch, die Auflistung der aktuellen Artikel, dann ist die Startseite von diesem Problem auch betroffen.
Aber das ist kein Beinbruch, einfach die CSS-Datei um folgende Regel erweitern:
.author #kopfbereich,.date #kopfbereich,
.home #kopfbereich, .tag #kopfbereich {
background: url(standard-grafik.jpg);
}Diese Regel notiert man nach den anderen Regeln, die die wechselnden Hintergrundbilder betreffen, damit in Bedarfsfall die Standardgrafik, die Kategorie-Hintergrundbilder überschreibt.
So, dass wars. Ich hoffe ich habe mich verständlich ausgedrückt. Wenn nicht einfach das Kommentar-Formular anschmeißen. 🙂
Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.
Klappt leider nicht!
body-Tag ist erweitert, scheint auch richtig zu sein, wenn ich mir den Seitenquelltext ansehe.
Die CSS habe ich entsprechend erweitert, Bild ist auch hochgeladen.
So habe ich erweitert:
/* ####################### Seiten-Kopf #################### */#kopf h1 {
padding : 10px 5px 10px;
margin : 0;
font : normal 3.0em/1.0 "Times New Roman", "Times Roman", Times, serif;
text-align : center;
background-image: url(Altstadt_v.jpg);
}
.category-efi #kopf {
background-image: url(wue-amb-hell.jpg);
}
@herb37,
du musst die Regel auch folgendermaßen schreiben:
.category-efi #kopf h1 {background-image: url(wue-amb-hell.jpg);
}
weil du ja vorher auch
#kopf h1ansprichst. Die Grafik wue-amb-hell.jpg ist auf dem Server nicht vorhanden.Danke, teilweise bereinigt. Es fuktioniert nun. Bild noch im falschen Verzeichnis. Lade heute Abend hoch.
Oder: Man erstellt z.B. mit dem Plugin “Verve Meta Boxes” ein Meta Field und lässt es im Theme als Bild ausgeben. Man kann zusätzlich dazu über eine PHP-Abfrage ein Default-Bild definieren. So kann der Kunde sogar das Bild selbst im Backend definieren und austauschen.
Ich sehe da noch den Nachteil, dass immer das falsche Bild angezeigt wird, wenn man einen Artikel in mehrere Kategorien steckt, da man die Reihenfolge der Kategorien nicht beeinflussen kann. Aber da dürften sich die Plugins auch mit rumärgern.
Ansonsten aber klasse Anleitung, überlege die Umsetzung 🙂
Danke. Ich bin begeistert. Nun funktioniert es auch mit dem Bild bei mehreren Kategorien.
Mein Ansatz ist: Ich möchte eine Webseite, die mehrere unterschiedliche Eingänge hat. Dazu lenke ich die eigentliche Domain um auf eine Kategorie und so werden nur die Artikel angezeigt, die auch im Artikel mit der entsprechenden Kategorie versehen sind. Das Kopfbild wird durch die Kategorie bestimmt (aus dem CSS), so kann ich auch einen Artikel mehreren Kategorien zuordnen.
Wenn ich z.B. anspringe, werden alle Artikel gezeigt, die mit der Kategorie “EFI” gekennzeichnet sind und es wird auch das von mir gewünschte Kopfbild angezeigt.
Im Augenblick habe ich für mich keinen weiteren Handlungsbedarf, außer, dass ich die Webseite nun auf den gewünschten Stand und das gewünschte Layout bringen muss. Das war bisher eine Vorarbeit, die aber voll gelungen ist.
Danke.
Danke. Prima Tip. Werde ich direkt gleich mal ausprobieren und hoffe, dass es problemlos klappt!
Darf ich in diesem Zusammenhang noch eine Frage an die Experten stellen?
Dieser Code
gibt die Beschreibung aus. Das möchte ich gern ändern, dafür soll der Name der Kategorie ausgegeben werden. Trial and Error waren bisher erfolglos. Entweder kommt nichts oder Fehlermeldungen. Bin eben kein WP-Experte, sondern nur ein normaler User mit eine wenig PHP-Kenntnissen. Danke für jeden Tipp im Voraus.
Viele Grüße
sendet
Herbert
PS: in der Vorschau sehe ich den code nicht. 😉
Warum wird der Code nicht angezeigt?
Das ist der Code
@herb37,
du musst die Code-Zeichen “entschärfen”:
Zitat:
“Code-Beispiele: damit die Code-Beispiele richtig angezeigt werden müssen die Sonderzeichen maskiert werden (z. B.
<zu<).”bloginfo(‘description’)
bloginfo('description')gibt die Beschreibung aus, ich möchte aber den Namen der Kategorie.
In der Header.php an der Stelle von
bloginfo('description')ändern in:
single_cat_title()so ging es dann. War mehr als 2 Stunden Sucherei, egal. War erfolgreich. 😛
[…] WordPress: wechselnde Bilder im Kopfbereich pro Kategorie17. January 2011 […]
[…] um von Seite zu Seite wechselnde Bilder im WP-Kopf anzuzeigen. Ein Hinweis darauf wurde im Blog https://www.perun.net/2011/01/17/wordpress-wechselnde-bilder-im-kopfbereich-pro-kategorie/ gefunden, in einem Benutzer Kommentar. Artikel Überschrift war: WordPress: wechselnde Bilder im […]
Hallo Vladimir,
das ist super verständlich, vielen Dank. Kannst Du evtl. auch erklären, wie man für nur eine Kategorie aus dem Loop ausbrechen kann? Mich interessiert, wie man das abfragt. Ich möchte für eine Kategorie unterbinden, dass Zusatzinfos, wie z.B. “”veröffentlicht von:” , “abgelegt unter:” ausgegeben werden. Das ist nicht ganz einfach, oder? Vielleicht hast Du Lust dazu auch einen Artikel zu schreiben? Das wäre toll. Vielen Dank und viele Grüße.
Ina.
[…] Perun steht übrigens, wie man das Ganze auch mit CSS und der funktions.php umsetzen […]