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..
Sylvia
04.05.06 um 13:11Hä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
texto
04.05.06 um 16:38wenn Du nur ein Headerbild hast , ist das unnötig, es ergeben sich nur zusätzliche Abfragen,die das Blog unnötig verlangsamen.
lg
Stephan
18.12.06 um 16:46Hallo 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
texto
18.12.06 um 19:50Hi 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
Volker
06.11.07 um 21:19Hi 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
Volker
06.11.07 um 21:24Mist, 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.
Volker
06.11.07 um 21:25Na wieder nichts. Ich gebe es auf. Ist einfach praktisch Dein Code. Sorry für die vielen Posts, wäre Dir über Hilfe sehr dankbar!
texto
07.11.07 um 00:24Hi 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
Volker
08.11.07 um 00:48Hi 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
texto
09.11.07 um 11:51hi Volker
aus der Ferne kann ich nur spekulieren…
unterschiedliche css Angaben ..?
lg
Simone
18.11.07 um 12:01Mein 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
texto
19.11.07 um 02:28Hi Simone freut mich
lg
Korrupt
22.11.07 um 21:36Hoi, 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
texto
22.11.07 um 23:09Hi 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
A. Wachert
03.01.08 um 23:12Hallo, 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?
texto
04.01.08 um 02:14Hi
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
lampros
08.01.08 um 20:23Hi 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
lampros
16.01.08 um 14:22Hallo 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
kadabra
28.04.08 um 23:05MmmmmmmmH?
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
kadabra
29.04.08 um 00:41Hat 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
horst
15.09.08 um 11:29hi 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…)
texto
16.09.08 um 02:57Hi 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
Korrupt
15.12.08 um 22:32immel. 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
Steph
15.12.08 um 22:41Hi 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?
Steph
15.12.08 um 22:53hurra, 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!
texto
15.12.08 um 23:29Hi Korrupt und Steph
freut mich, dass es klappte und Danke für die Rückmeldung
lg
Michael24
19.12.08 um 19:44Vielen 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!
Green3
09.03.09 um 17:35Wäre so etwas mit .swf Dateien als Hintergrundbild möglich?
texto
10.03.09 um 01:07Hi 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
Lefdi
25.05.09 um 12:26Hallo 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
texto
25.05.09 um 19:44Hi 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
John
07.07.09 um 11:50hi, hab den code jetzt bei unserer intranet seite eingebaut, funktioniert echt super, danke!!
Alex
15.07.09 um 12:10Vielen dank für den hack, das ist genau das was ich suchte, wollte schon wordpress aufgeben…jetzt aber nicht!
tellerschnecke
15.08.09 um 23:30Hallo,
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
texto
16.08.09 um 11:14hi 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
Ferdi
07.10.09 um 13:36Hallo, 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
markus
21.10.09 um 13:06Wow, 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
Malte
14.12.09 um 20:16Hast Du auch eine Idee dazu, wie ich Kategorien verschiedene Designs geben kann?
Gruß
Malte!
texto
15.12.09 um 00:49ja 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
Malte
16.12.09 um 22:34category-ID.php Template, gibt es da irgendwo eine Anleitung?
Und, danke!
M.
texto
16.12.09 um 23:45ö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
Malte
17.12.09 um 12:56Danke und Frohes Fest
Hans Peters
03.05.10 um 15:53Ein wirklich sehr interessater Artikel!
Ich bitte um mehr Infos zu diesem Thema …
Vielen Dank!
Alex
09.05.10 um 19:36Ich habe das nun schon eine halbe Stunde gesucht und bin hier endlich fündig geworden.
Garnicht so schwer mit der Anleitung, herzlichen Dank für den Tipp, der hoffentlich auch gleich in meinen Blogs eingebaut werden kann!
Yea!
Alex
Jannik
09.05.10 um 21:32Vielen Dank für die Anleitung, mal sehen ob ich das auch mit einem swf Hintergrund hinbekomme!
Lara
28.05.10 um 02:50Vielen Dank für die Anleitung Texto!
Habs gleich mal getestet. It works (+:!
Jane
20.06.10 um 14:09Ich möchte auf der Startseite etwas spezielles zusätzlich in der sidebar.php ausgeben und habe es mit if (is_home()) versucht.
Allerdings funktioniert das bei mir nicht. Kann es daran liegen, dass ich eine statische Seite als Startseite festgelegt habe?
LG, Jane
texto
20.06.10 um 15:45ja kann sein, da wäre if is_front_page hilfreicher oder Du suchst Dir die ID der Seite und sagst: if is_page(‘ID’)….
lg
Jane
20.06.10 um 18:15Herzlichen Dank für die rasche Antwort und den Lösungsansatz! Super! Nun funktioniert es.
LG, Jane
Green3
28.06.10 um 15:43Hi again,
ich hatte die Idee unterschiedliche Header bei unterschiedlicher Uhrzeit einzubinden. Hast du einen Codevorschlag für mich?Gre
texto
28.06.10 um 19:51Hallo Grüner der dritten Art
sagen wir von 8:00 bis 10:00 Header a…
so fragst Du die Zeit ab…
Green3
28.06.10 um 20:17ES IST GREEN TREE! Grüner Baum, verdammt.
Boah. Du bist unglaublich. Vielen, vielen Dank.
texto
28.06.10 um 21:16Gern geschehen,
scnr
also nix 42
Green3
05.07.10 um 15:45Jetzt bräuchte ich aber die aktuelle Zeit des Betrachters. Wie kann ich current_time(‘mysql’) einbinden und ist so etwas ähnliches wie das möglich:
if(($currTime > “13:00″ && $currTime “11:00″ && $currTime <= "12:00"))
Nein auch nicht 42. Eher so was wie 3Rad.
Green3
05.07.10 um 19:16aaah Korrektur ich meinte eher
if(($currTime > “13:00″ && $currTime “11:00″) ||( $currTime > “22:00″ && $currTime “23:00″))
also zwei Optionen.
Green3
10.07.10 um 19:15Ok habe es gelöst mit Javascript in, meiner Meinung nach, elegantesten Form.
Quelle: [link]http://forum.jswelt.de/javascript/17363-stylesheet-wechseln.html[/link]
Chris88
07.12.10 um 19:15Das funktioniert auch mit css Dateien. Ich lade immer abhängig vom Item / Kategorie verschiedene css nach. Damit kann man die Ladezeit der Startseite etwas beschleunigen..
Mephista
09.12.10 um 21:42Hallo Texto,
ich habe mal versucht dein Beispiel für die Footerzeile umzusetzen, da ich gerne verschiedene Footerbilder haben möchte.
Nun habe ich die footer.php geöffnet und finde folgenden text:
Wohin kommt denn nun die php-if-else Schleife, um die verschiedenen Footer einzubinden?
Ich hoffe, du kannst mir helfen…
Vielen vielen Dank
Mephista
09.12.10 um 21:43ohh der hat der Quelltext verschluckt
“”"”"
“”"”"”
Hoffe, das klappt jetzt…
Danke nochmal…
texto
10.12.10 um 12:01Du magst das FooterBild in das Div id footer geben,
dann muss der Text dorthin
immer genau in das div, dass Du mit dem Bild *bestücken* magst
Mephista
10.12.10 um 12:55Ja klingt irgendwie logisch
Hoffe es klappt…
Vielen Dank!
Kann ich dich nochmals “belästigen” falls es nicht klappen sollte (warum auch immer?!)
LG M.
texto
10.12.10 um 14:01logisch -belästigst ja nicht
Christoph
21.12.10 um 16:38hallo texto,
und schon wieder eine nützliche information auf Deinem Blog gefunden! wie machst Du das nur, dass ich hier sehr oft die antwort auf meine fragen finde!
bist Du hellseherin?
danke und mach weiter so!
LG
texto
22.12.10 um 00:03und schon wieder eine nützliche information auf Deinem Blog gefunden! wie machst Du das nur, dass ich hier sehr oft die antwort auf meine fragen finde!
bist Du hellseherin?
danke und mach weiter so!
LGChristoph
aber sicher bin ich Hellseherin, ich sah 2006 als ich den Artikel schrieb, dass Christoph am 21.12.2010 gegen 16:38 genau nach diesem Thema suchen könnt –
jetzt biste buff!
sandrine
31.12.10 um 14:45Hallo, finde deinen Blog seeehr nützlich!!!
Ich würde gerne auf jeder Seite (statisch) ein anderes Hintergrundbild einsetzen, habe aber keine Ahnung wo ich den Code einsetzen muss!?
Vielleicht erbarmt sich ja jemand und hilft mir auf die Sprünge???
ahja und —> GUTEN RUTSCH ins neue Jahr!!!!!
lg sandrine
sandrine
31.12.10 um 14:53bzw. kann ich dem body eine div vergeben??
texto
31.12.10 um 19:47eine div nicht, aber eine Klasse oder ID
ebenfalls guten Rutsch!
Martin
29.01.11 um 22:36Hallo Texto, ich will mich in WP einarbeiten und habe Version 3.0.1.
Ich will das Theme TewntyTen umbauen. Ich will zu jeder Seite ein anderes Bild im header. Wo muß ich in der header.php den ganz oben angegebenen Code einbinden?
Elfe
04.02.11 um 12:24Liebe Monika,
leider finde ich keine Möglichkeit anders anzufragen.
Kannst du mir vielleicht sagen, wie man einen dynamischen Werbebanner im Header einfügen kann?
Sonst würde ich es mit javascript machen:
var image_01 = new Image();
image_01 = “datei”;
var image_02 = new Image();
image_02.src = “datei”;
var image_03 = new Image();
image_03.src = “bilder/banner/banner_gruen.gif”;
var images = new Array(image_01.src,image_02.src,image_03.src);
var currentImage = 01;
function changeImages() {
currentImage++;
if(currentImage == images.length) {
currentImage = 01;
}
document.logo_1.src = images[currentImage];
var timer = setTimeout(‘changeImages()’, 2000);
//Die 1000 ist die Aktualisierungsrate in Millisekunden
}
window.onload = changeImages;
Funkt das im WordPress auch?
Wenn ja, wie?
Danke für deine Hilfe
Kann man eigentlich selber bei dir einen neuen Thread eröffnen?
Danke und LG
Elfe
texto
06.02.11 um 23:30hallo Elfe
ne eigne Artikel kann man bei mir so nicht schreiben,
doch js funktioniert auch in WP