Je nach Kategorie oder Seite anderes Bild im Header
Wie kann man je nach Kategorie oder je nach statischer Seite ein anderes Headerbild in WordPress anzeigen lassen. Beispiele.
WordPress bietet ganz einfach die Möglichkeit viele unterschiedliche Header Bilder anzuzeigen. Wichtig dabei ist, dass diese Bilder alle gleich hoch und gleich breit sind. Damit Du Dich besser auskennst und nicht den überblick verlierst, ist es ratsam, die Bilder nach deren Verwendung zu benennen.
Hier gleich so ein Code:
<div id="header" style="background: url('<?php
bloginfo('stylesheet_directory');
if (is_home()) { // Startseite
echo "/images/h-home.jpg";
} elseif (is_single()) { // Postings
echo "/images/h-single.jpg";
} elseif (is_archive()) { // Archiv
echo "/images/h-archive.jpg";
} elseif (is_page()) { // Page
echo "/images/h-page.jpg";
} else { // Alle was sonst nicht passt
echo "/images/h-else.jpg";
} ?>
'); .....All die anderen notwendigen Style Angaben-- je nach Theme sind die anders ;">Das heißt ausgesprochen:
Wenn (if) die Startseite aufgerufen wird, dann zeige (echo) Bild h-home.jpg.
Und wenn (frei übersetzt:elseif) ein Posting aufgerufen wird, dann zeige das Bild h-single.
Und wenn ein Archiv aufgerufen wird, dann zeige das Bild h-archive.
Und wenn eine statische Seite aufgerufen wird, dann zeige das Bild h-page.
Und wenn sonst irgendwas aufgerufen wird (Suche, etc) dann zeige das Bild h-else.
Du hast 3 Kategorien und möchtest bei jeder ein anderes Bild.
<div id="header" style="background: url('<?php
bloginfo('stylesheet_directory');
if (is_home()) { // Startseite
echo "/images/h-home.jpg";
} elseif (is_category('feiern')) { //Feiern
echo "/images/h-feiern.jpg";
} elseif (is_category('lieben')) { // Lieben
echo "/images/h-lieben.jpg";
} elseif (is_category('verflixt')) { // Verflixt
echo "/images/h-verflixt.jpg";
} else { // Alle was sonst nicht passt
echo "/images/h-else.jpg";
} ?>
'); .....All die anderen notwendigen Style Angaben-- je nach Theme sind die anders ;">Ich bin mir sicher, dass Du anhand dieser zwei Beispiele das System erkennst.
Meist ist der Code in der header.php gut aufgehoben.
Wie immer Code bitte nicht kopieren.
Bei Fragen, einfach fragen..
Impressum-Datenschutz
How to...
Hätte ich doch gleich mal ne Frage zu, wo käme der Code hin kann ich doch auch mit einem Headerbild machen, ist das so nicht besser als wenn ich den Header in der css anzeige.
Gruß Sylvia
Sylvia04.05.06 13:11 | # |
wenn Du nur ein Headerbild hast , ist das unnötig, es ergeben sich nur zusätzliche Abfragen,die das Blog unnötig verlangsamen.
lg
texto04.05.06 16:38 | # |
Hallo Monika,
wirklich ne nette Spielerei, die ich selbstverständlich ausprobieren wollte.
Leider scheint es bei mir nicht zu funktionieren. Kannst Du mir einen Tipp geben, wo in der header.php der Code untergebracht werden muss? Oder ist dies eigentlich egal und ich habe den Fehler möglicherweise woanders produziert?
Derzeit wird bei mir einfach nur der Code auf der Seite ausgegeben, zwar auf jeder entsprechenden Seite korrekt, aber eigentlich möchte ich ja das Bild sehen.
Hast Du einen Tipp?
Vielen Dank im voraus.
Gruß Stephan
Stephan18.12.06 16:46 | # |
Hi Stephan
wenn der code ausgegeben wird, dann stimmt am Code was nicht,
vergiss nicht ans Ende der obigen Beispiele zu scrollen und background-position etc auch noch anzugeben,
so in der Ferne kann ich nicht mehr helfen
lg
texto18.12.06 19:50 | # |
Hi Monika,
ich versuche das erste Mal von Dir zu lernen…
Daher, klär mich bitte auf, warum ich den Code nicht kopieren darf…
Nun habe ich Deinen Code so in die style.css meines wordpress themes gepackt (weiß gar nicht, ob ich ein php-script in die css-datei bringen darf:
Wäre für Hilfe sehr dankbar!
Beste Grüße
Volker
Volker06.11.07 21:19 | # |
Mist, der Scriptteil im background: url()-Element fliegt raus. Er sieht so aus, hat zwischen “<” und “php” und am Ende aber noch die Fragezeichen:
Schau mer mal, ob es jetzt klappt.
Volker06.11.07 21:24 | # |
Na wieder nichts. Ich gebe es auf. Ist einfach praktisch Dein Code. Sorry für die vielen Posts, wäre Dir über Hilfe sehr dankbar!
Volker06.11.07 21:25 | # |
Hi Volker der Code da oben ist eindeutig nur für die Datei header.php.
also zu 99,9999% heißt die so in einem WP Theme.
Für die style.css ist das nichts, da geht nicht.
Ich tät gern mehr helfen, wenn ich wüßt was Du machen möchtest.
Kopieren ist deshalb schwer, weil ich hier ja ein Programm verwende, damit ich den Code anzeigen kann und er nicht ausgeführt wird.
Sonst würden sich ja hier auf Texto.de auch ständig die HeaderBilder ändern
Aber diese Codeumwandlungssache killt oft die Anführungszeichen oder die Hochkommata und dann kommen Fehlermeldungen, daher hilft meist das Abtippen.
lg
texto07.11.07 00:24 | # |
Hi Monika,
vielen Dank für die schnelle Antwort. Hab ein bisschen weiter auf Deiner Seite gesucht und nun das Leere Theme gefunden. Alles klar, das werde ich verwenden. Und da passt das mit den unterschiedlichen Hintergünden sehr gut, wenn ich es einfach in das body-tag einbaue. Das Prob ist also gelöst.
Da kommt aber gleich das nächste: Wie bekomme ich denn die Inhalte mittig zentriert auf zum bspl. 800px?
Selbst bei anderen free themes, die eigentlich schon mittig sind, kommt der ganze Inhalt wieder nach links, wenn ich dein script in den body einfüge. Wie kommt das?
Thanx
Volker
Volker08.11.07 00:48 | # |
hi Volker
aus der Ferne kann ich nur spekulieren…
unterschiedliche css Angaben ..?
lg
texto09.11.07 11:51 | # |
Mein Problem hat sich erledigt. Es lag an den Bildern. Ich habe nämlich Bilder verwendet, die ich zuvor von gif. auf jpg. umgewandelt habe – ich glaube zumindest dass es daran lag. Wenn ich es gleich als .jpg abspeichere, klappt es. Wahrscheinlich müssen die Bilder nicht nur gleich groß und hoch sein sondern auch genau der gleich Dateityp. Also danke nochmal für den Code, er ist der einzige, der funktioniert.
Simone
Simone18.11.07 12:01 | # |
Hi Simone freut mich
lg
texto19.11.07 02:28 | # |
Hoi, Monika,
ich bin grade auch am Basteln, und an sich funktioniert deine Technik – nur werden Headerbilder einer Kategorie *nur* in der Kategorienansicht angezeigt.
Ich haette gerne auch fuer einen *einzelnen* Blogeintrag je nach Kategorie, zu der er gehoert, das “Kategorienbild”. Klar, dass ein Eintrag zu mehreren kategorien gehoeren kann, aber die erste der zugeordneten Kategorien wuerd schon reichen (faktisch waer in meinem aktuellen Fall ohnehin jedes Post in einer und nur einer Kategorie).
Sprich: ich hab die Kategorie X und dazu Bild a.jpg. Rufe ich Kategorie X auf, wird a.jpg angezeigt. Nun schreibe ich Beitrag 1 und ordne ihn der Kategorie X zu. In der Kategorienansicht von X hab ich dann Bild a.jpg ueber dem Teaser von Beitrag 1. Rufe ich jetzt Beitrag 1 auf, ist a.jpg weg – ist das aber irgendwie machbar, dass das auch in der Beitragsansicht noch im Header erscheint?
Gruss und thx,
Korrupt
Korrupt22.11.07 21:36 | # |
Hi Korrupt ja das geht,
hier der Code aus dem Codex von WP
Umgesetzt auf obiges
<div id="header" style="background: url('<?php $post = $wp_query->post; bloginfo('stylesheet_directory'); if (in_category('2')) { // Startseite echo "/images/h-home.jpg"; } elseif (in_category('3')) { // Postings echo "/images/h-single.jpg"; } else { // Alle was sonst nicht passt echo "/images/h-else.jpg"; } ?> '); ;"></div>habs getestet hat funktioniert,
hilft das weieter?
lg
texto22.11.07 23:09 | # |
Hallo, wirklich sehr hilfreich dein Blog.
Versuche gerade mit Wordpress neben meinem “normalen” Blog auch eine Art “Mainpage” mit Wordpress zu realisieren da alle bekennanten CMS nichts für mich sind.
Dein leeres Template ist schon ein super Schritt dahin *g*
Zur eigentlichen Frage…
Wie kann ich diesen Code hier (Headerbilder) auf Seiten anwenden?
Anders…
Ich möchte für meine Seiten Kategorien einrichten.
Diese SEITENkategorien, sollen eigene Headerbilder erhalten.
Wie würde die if Funktion dann aussehen?
Ich müsste dann ja für jede Seitenkategorie eine definierte if haben, aber wie zum Henker schimpfen die sich?
A. Wachert03.01.08 23:12 | # |
Hi
wenn Du Seiten kategorien machst, dann sind dies meist einfach statische Seiten, die Unterseiten haben.
da ist das was Du suchst
also is_page und in Klammer zwischen den Hochkomma der Postslug -der letzte Teil der URL
lg
texto04.01.08 02:14 | # |
Hi texto,
habe header soweit eingebaut, die Bilder werden auch mit no-repeat alleine und nicht nebeneinander angezeigt, jetzt hab ich ein problem mit meinem Header background, welcher nicht mehr angezeigt wird. Kannst du mir kurz sagen , welche Style angaben in der letzten Zeile einzufügen sind? aus welcher php soll ich diese übernehmen?
lg lampros
lampros08.01.08 20:23 | # |
Hallo Monika,
melde mich nochmals, da ich es nicht so schaffe wie ich möchte mit den Headerbildern. Das Theme ist ocean mist, hier die style-css einträge. Kann es sein, dass das Problem an der Rubrik mainpic liegt? Es wird nämlich im header.php header und mainpic abgerufen.
über deine Hilfe würde ich mich sehr freuen.
Gruß lampros
lampros16.01.08 14:22 | # |
MmmmmmmmH?
Ich hab da sowas hübsches nur mit HTML + css.
Kleines Problem: Wie kann ich das in Wordpress umsetzen? Die Menüpunkte verweisen auf statische
XHTML-Seiten, die nix mit Wordpress zu tun haben.
Schau mal unter index.htm und dann unter blog.
Natürlich nur wenn Du magst und Zeit hast.;-)
Grüßlis
kadabra
kadabra28.04.08 23:05 | # |
Hat sich erledigt. Ich war zu blöd den richtigen pfad in php anzugeben.
Wenn Du trotzdem guckst freu ich mich.
Vielleicht gehts ja eleganter. ;-D
kadabra29.04.08 00:41 | # |
hi monika,
auch ich muss es jetzt mal sagen: unzählige male hast du mir schon mit deinen tipps und tricks auf deiner website geholfen.
seit gestern aber sitze ich auf der leitung (leider kann ich dir keinen link schicken, da ich die seite gerade erst lokal aufbaue): im kubrick theme verschwand plötzlich mein headerbild, bei den pages war es vorhanden, nicht so bei kategorien oder archiven. (stunden verbrachte ich wiedereinmal vor dem schirm). lösung habe ich keine gefunden. nur indirekt sozusagen durch dich.
eben weil ich vielleicht auch verschiedene headerbilder einbauen möchte versuchte ich es mit obigem code. das hat im prinzip wunderbar geklappt, bloss mit den style anweisungen komme ich nicht ganz klar: wie genau muss ich “no-repeat” einbauen, damit das bild auch wirklich nicht wiederholt wird?
das ganze schaut bei kubrick so aus:
jetzt hoffe ich, dass ich nicht zu lange geschwafelt habe, verneige mich vor dir und danke herzlich.
beste grüsse horst
ps: ideal wäre, wenn das headerbild anklickbar wäre und immer zur startseite führen würde, so wie es der tun würde, ich bin schon betriebsblind, sorry. (letzte rettung: schreibe monika, bevor du den computer aus dem fester schmeisst…)
horst15.09.08 11:29 | # |
Hi code posten geht kaum – zuviele Angriffe böser Natur..
nur Du machst damit ein Hintergrundbild, die so nicht verlinkbar sind,
damit es anklickbar wird müßtest Du ein 1×1 px gif machen und dies verlinken, das kannst Du ja dann dehnen und strecken wie Du es brauchst
Anleitung dazu habe ich Header verlinken
bei Kubrick steht ja schon no-repeat dabei
Du kannst aber auch
angeben
ich bin bald auf Kurzurlaub -also antworten dauern
lg
texto16.09.08 02:57 | # |
immel. Via Referrer grade wieder hier gelandet und festgestellt, dass ich nicht Danke gesagt hab. Ist nicht meine Art, sorry dafuer. Und Danke – ja, hat geholfen
Korrupt15.12.08 22:32 | # |
Hi Monika,
ich habe es geschafft die Headerbilder zuzuordnen aber das Problem das in kommentar 13 von korrupt benannt wurde, nämlich das kategorienbild auch dem ganzen artikel zuzuordnen, habe ich in deiner erklärung 14 nicht verstanden…
welcher teil muß wo hin?
Steph15.12.08 22:41 | # |
hurra, habe den anderen thematischen artikel gelesen: 7 headerbilder 7 kategorien
das gleiche was is_category muß darutner nochmal in_category sagt lars in kommentar 11
dann klappts!
vielen Dank! Super Blog! Ist eine tolle Hilfe!
Steph15.12.08 22:53 | # |
Hi Korrupt und Steph
freut mich, dass es klappte und Danke für die Rückmeldung
lg
texto15.12.08 23:29 | # |
Vielen Dank für diese gute Erklärung. Es hat auf Anhieb bei mir im Blog geklappt. Und das heisst was bei mir, sonst klappt da selten was beim ersten Versuch.
Der Blog ist echt eine große Hilfe beim Umgang mit Wordpress!
Michael2419.12.08 19:44 | # |
Wäre so etwas mit .swf Dateien als Hintergrundbild möglich?
Green309.03.09 17:35 | # |
Hi Grüner
ja , ob es dann jedoch einfacher wäre, jede Abfrage einzeln zu tippen müßt man ausprobieren – rein wegen des Überblicks, weil man diese Dateien ja anders einbindet
lg
texto10.03.09 01:07 | # |
Hallo Monika,
ich habe das Theme Adventure-Yuma und dort wird das Headerbild über die functions.php aufgerufen.
Muss ich dort also den Code eingeben…???
Grüße
Lefdi
Lefdi25.05.09 12:26 | # |
Hi Lefdi
ich weiß nicht wie dies dort geschieht,
doch ich denke einfacher wäre es, wenn Du dies so ändern könntest, dass Du obiges 1:1 übernehmen kannst,
weil ich vermut, dass dies in der functions.php so nicht einfach gehen wird.
lg
texto25.05.09 19:44 | # |
hi, hab den code jetzt bei unserer intranet seite eingebaut, funktioniert echt super, danke!!
John07.07.09 11:50 | # |
Vielen dank für den hack, das ist genau das was ich suchte, wollte schon wordpress aufgeben…jetzt aber nicht!
Alex15.07.09 12:10 | # |
Hallo,
hab vielen Dank für deinen Post. Er hat mir sehr geholfen!!!
Ich habe noch eine Frage:
Insgesamt möchte ich in meinem Blog nur zwei verschiedene header einbinden. Daher habe ich folgendes probiert:
“<?php if (is_page(’Impressum’)) or (is_category(’Umland’)) { …”
Die beiden Bedingungen so zu verbinden funktioniert leider nicht. Habt ihr vielleicht eine Idee, wie ich das hinbekomme?!
Habt vielen Dank,
tellerschnecke
tellerschnecke15.08.09 23:30 | # |
hi tellerschnecke nimm mal nur eine Bedingung – und schreibe den Postslug – also klein , dann teste die andere Bedingung, dann verknüpfe sie
und was ..funktioniert wie nicht ?
lg
texto16.08.09 11:14 | # |
Hallo, genau das hab ich auch schon mal versucht zu realiesieren, dann war es mir zu Kompliezert und ich habs gelassen und jetzt hab ich diese Anleitung gefunden, vielen Dank. Gruß Roland
Ferdi07.10.09 13:36 | # |
Wow, da muß man sich aber erstmal richtig rein lesen, bevor man da irgendwas versteht. Aber nach zweimaligen Durchlesen habe ich es dann auch kapiert, der Artikel ist echt hilfreich.
Gruß Markus
markus21.10.09 13:06 | # |
Hast Du auch eine Idee dazu, wie ich Kategorien verschiedene Designs geben kann?
Gruß
Malte!
Malte14.12.09 20:16 | # |
ja nutz den body tag , der gibt dir dann pro Kategorie eine andere CSS class,die du zum Designen nutzen kannst:
zb die Kategorie Texte hat folgende CSS Klassen
body class=”archive category category-texte”
mit
.category-texte .entry zb kannst du anders stylen
lies Dich in CSS Hierarchien – in die Cascade von CSS ein,
oder erstell ein category-ID.php Template
lg
texto15.12.09 00:49 | # |
category-ID.php Template, gibt es da irgendwo eine Anleitung?
Und, danke!
M.
Malte16.12.09 22:34 | # |
öffne die archive.php oder category-php deines Themes speicher sie als category-id.php ab, also die ID der Kat findest Du
Admincenter==>Artikel==>Kategorien mit der Maus über den Namen der Kat fahren und in der Statuszeile des Browers unten steht dann die ID
lg
texto16.12.09 23:45 | # |
Danke und Frohes Fest
Malte17.12.09 12:56 | # |