7 Kategorien – 7 Header Bilder

7 Kategorien wollen 7 verschiedene Header Bilder – oder besser Marcus mag so. ;) und zwar im WUCOCOTheme. Aber die Methode funktioniert bei wirklich fast jedem WordPress Theme .;)

Wie kann man unterschiedliche Header also unterschiedliche Headerbilder pro Kategorie anzeigen wird hier von mir erklärt, auch wenn die Erklärung für ein bestimmtes Theme war, sie funktioniert immer noch in jedem Theme.

.

Das Theme hat mehrere style.css und so öffnete ich jede und sah nach, ob irgendwo irgendwas zu #header steht.

Diese Angaben schrieb ich mir ab, weil sie ab jetzt direkt in der header.php stehen müssen.
Die Bilder nannte ich cat1.jpg,cat2.jpg – nach den ID der jeweiligen Kategorien.

Admincenter==>Verwaltung==>Kategorien ==> dort findet man die ID der jeweiligen Kategorie.

Wichtig:

Die Bilder müssen alle gleich hoch und gleich breit sein, am besten so wie das Origianlheader Bild.

Alles ab


 } ?>');background-position:50% 0%

und vor

<div class="nav">

muss in einer Zeile stehen! Ich weiß, dass dies im hauseigenen Themeeditor von WP irgendwann ‚umbricht‘ in mehrere Zeilen, aber einfach ohne Abstand nebeneinander tippen reicht schon.

Ich erkannte sonst ‚muckt‘ dies ein wenig.;)

Hier der Code und ob copy and paste funktioniert weiß ich nie genau. Bei mir tat es dies, aber wer weiß.


<div id="header" style="background: url('<?php

    bloginfo('stylesheet_directory');

    if (is_home()) { // Startseite

        echo "/images/header.jpg";

    } elseif (is_category('1')) {        // cat id1

        echo "/images/cat1.jpg";

    } elseif (is_category('2')) {        // cat id 2

        echo "/images/cat2.jpg";
  
     } elseif (is_category('3')) {        // cat id 3

        echo "/images/cat3.jpg";
    
      } elseif (is_category('4')) {        // cat id 4

        echo "/images/cat4.jpg";
     
      } elseif (is_category('5')) {        // cat id 5

        echo "/images/cat6.jpg";
     
      } elseif (is_category('6')) {        // cat id 6

        echo "/images/cat6.jpg";
   
     } elseif (is_category('7')) {        // cat id 7

        echo "/images/cat7.jpg";


          } elseif (is_page()) {        // Page

        echo "/images/header.jpg";

    } else {                        // Alle was sonst nicht passt

        echo "/images/header.jpg";

    } ?>');background-position:50% 0%;background-repeat:no-repeat; position: relative;height: 200px;margin: 0 auto 0 auto;padding: 15px 0 15px 0;">
	  <div class="nav">
	   <?php /* CUSTOMIZE HEADER LINKS HERE */ ?>
           |&nbsp;&nbsp;<a href="<?php echo get_settings('home'); ?>">home</a>&nbsp;&nbsp;|&nbsp;&nbsp;
	   <a href="">link 1</a>&nbsp;&nbsp;|&nbsp;&nbsp;
	   <a href="">link 2</a>&nbsp;&nbsp;|&nbsp;&nbsp;
	   <a href="">link 3</a>&nbsp;&nbsp;|&nbsp;&nbsp;
	   <a href="">link 4</a>&nbsp;&nbsp;|&nbsp;&nbsp;
	   <a href="">link 5</a>&nbsp;&nbsp;|&nbsp;&nbsp;
	   <?php /* END HEADER LINKS */ ?>
	  </div>
	  <?php /* UNCOMMENT THE LINE BELOW IF YOU WISH TO SEE YOUR BLOG'S TITLE IN THE HEADER */ ?>
	  <!-- <div id="blogtitle"><h1><?php echo get_bloginfo ( 'name' );  ?></h1></div> -->
	  <div class="searchform"><?php include (TEMPLATEPATH . '/searchform.php'); ?></div>
	</div>


Ergänzung:

man kann statt:


(is_category('1'))

auch:


(is_category('allgemein'))



schreiben, dann sollte man aber die Bilder auch nach dem Namen der Kategorie benennen- zwecks ‚Überblick bewahren‘.

viel Freude mit Deinem Blog,
33

33 Beiträge zu “7 Kategorien – 7 Header Bilder

  1. Kommentar Autor
    magoo
    Kommentar

    wie muss man das denn in dem K2 theme einbauen? kriegs einfach nicht hin :-C

  2. Kommentar Autor
    Monika
    Kommentar

    magoo
    ich weigere mich das K2 Theme zu beservicen.
    es ist meiner Meinung nach einfach fürchterlich programmiert.
    all die Fehler dort auszubessern möge der tun, der diese Codewüste erfang.

    sorry für dich-ehrlich- aber meine Lust meine Zeit für dieses Theme zu verwenden hält sich echt in verdammt sehr engen Grenzen.

    lg

  3. Kommentar Autor
    hans
    Kommentar

    ich habe eine frage:
    ich nutze einen dreispaltigen header. ist es möglich, auch dort wechselnde header einzublenden?

  4. Kommentar Autor
    Monika
    Kommentar

    ja auch dreispaltig geht es, Du musst nur die jeweiligen Angaben im CSS mit den obigen zusammnfügen.

    also hat Spalte 1 css Angabe header1 dann eben für den die einzelnen Bildeteile
    hat Spalte 2 css Angabe header 2 dann dies

    lg

  5. Kommentar Autor
    Neuling
    Kommentar

    Hallo! Geht das auch mit normalen SEITEN statt KATs?!

    VIELEN DANK!

  6. Kommentar Autor
    Monika
    Kommentar

    Hi Neuling

    man kann statt

    (is_category('1'))

    auch

    (is_single('1'))

    und in der Klammer, die ID der Single Seite eintragen oder auch

    (is_page('1'))

    für statische Seiten nehmen

    lg

  7. Kommentar Autor
    Simone
    Kommentar

    Hallo,
    danke für diese Anleitung. Immerhin kann ich damit schonmal das Header-Bild auf bestimmten Seiten anzeigen. Allerdings kann ich nur die Datei images/header.jpg anzeigen – alle Dateien wie header2.jpg, header3.jpg usw. werden gar nicht angezeigt. Ich nutze Vertigo, wo das header-Bild in der css-definiert wird. Auch wenn ich den betreffenden Teil in der css lösche oder header dort in header2 usw. umbenenne klappt es nicht.
    Es wäre super, wenn du mir helfen könntest.
    Simone

  8. Ping Zitronen : Gesund und taeglich frisch auf frische-zitronen.de

  9. Kommentar Autor
    Phunk
    Kommentar

    geht dieses tut auch fürs grid focus theme? wenn ja, wie baue ich das ein?

  10. Kommentar Autor
    Monika
    Kommentar

    hi Phunk das weiß ich nicht, ich kenne das Theme nicht, frage doch im forum.wordpress.deutschland.org, da kennt dieses Theme vielleicht wer

    lg

  11. Kommentar Autor
    Lars
    Kommentar

    Hallo,

    danke für diesen Tipp. Die Headerbilder für die einzelnen Kategorien und Pages zu ändern war kein Problem. Aber wenn ich eine Kategorie „Presse“ habe, dann sollten auch alle Single-Einträge unter „Presse“ das selbe Headerbild haben, wie die Kategorie. Das funktioniert so nicht oder?

    MfG

  12. Kommentar Autor
    Chris
    Kommentar

    Hi,
    schöne Anleitung, aber gibts hierfür eigentlich auch ein plugin? Habe eher keine Lust, dauernd die css zu verändern.

    Grüße Chris

  13. Kommentar Autor
    Monika
    Kommentar

    Hi Chris ich kenne keines, weil jedes Theme hat andere Angaben in der CSS und somit wäre so ein Plugin vermutlich aufwändig mit Adminoptions und man muß dann doch in die css

    lg

  14. Kommentar Autor
    Stefanie
    Kommentar

    Hallo,

    bei mir funktioniert es leider nicht. Es taucht höchstens der Codetext auf dem immer gleichen Headerbild auf. Ich benutze Ocean_Mist 1.2. Im Stylesheet steht ein Code, bei dem ich mich frage, ob er dafür verantwortlich ist.
    /* main image */
    #mainpic {position: absolute; bottom: 0; float: left; background: url(images/mainpic01.jpg) no-repeat; display: block; width: 736px; height: 229px; margin: 0 7px; border-top: 3px solid #88AAB9; border-bottom: 3px solid #67939B;}
    Reichen diese Informationen, ich bin leider absoluter Neuling? Wäre prima, wenn Du mir weiterhelfen könntest.

  15. Kommentar Autor
    Monika
    Kommentar

    hi Stefanie
    normalerweise gewinnt die Angabe im Quelltext gegenüber dem Style.css. Da aber der Code auftaucht könnte das php falsch angegeben worden sein.

    hast du dies in die header.php reingetippt?

    lg

  16. Kommentar Autor
    Armin
    Kommentar

    Hallo texto :D

    Vielen Dank für die sehr gute Anleitung. Das hat geklappt, als würde ich nichts anderes machen. Muss auch mal sein. ;-)

    Ich habe noch folgenden Wunsch. Den Hintergrund der Seite würde ich auch gleichzeitig mit ändern. Wie lässt sich das machen? Hier wird doch nur der Header angesprochen. Muss ich die Anweisungen ein weiteres mal in den Header einfügen und dann den Hintergrund ansprechen?

    Viele Grüße aus Worpswede

    Armin

  17. Kommentar Autor
    Monika
    Kommentar

    Armin das geht fast genauso im body tag

    also direkt im template body style=“………..

    lg

  18. Kommentar Autor
    Armin
    Kommentar

    … und wie das geht … :D

    Vielen Dank und ebenso viele Grüße

    Armin

  19. Kommentar Autor
    Martin
    Kommentar

    Also den Tipp finde ich genial! Werde ich beim nächsten Projekt ausprobieren. Jetzt hätte ich dennoch eine andere Frage: Habe eine Joomla Webseite die ich umbauen sollte. Es sollte jetzt aber nun mit WordPress laufen aber mit dem gleichen Templates. Wer hätte mir hier einen guten tipp???

  20. Kommentar Autor
    Monika
    Kommentar

    mit den gleichen Templates bedeutet sicher mit denselben Design –also das HTML und CSS nach WP transferieren

    suche heir nach *How to design your…* oder *Schritt für Schritt zum..* dann müßtest du die hilfreichen Artikel dazu finden

    lg

  21. Kommentar Autor
    Detlef
    Kommentar

    Hi,
    habe es nun auch (fast) geschaft verschiedene Bilder im Header anzuzeigen.
    Hab nur ein Problem.
    Wenn ich sie Seite „Radhersteller“ aufrufe, dann kommt das entsprechende Bild.
    Rufe ich aber dann einen Radhersteller auf, kommt der normale Header vom Start.
    So sieht mein Code bislang aus:
    <div id=“splash“ style=“background: url(“);“>

    Müsste doch eigentlich so stimmen…..???

    LG

  22. Kommentar Autor
    Detlef
    Kommentar

    Hi,

    ok habs gefunden.
    Hab aus der Abfrage is_category in_category gemacht und nun geht es.

    Vielen Dank für deine Hilfe

    LG

  23. Kommentar Autor
    peter Körffer
    Kommentar

    Wuah, ganz schön abenteuerlich! Aber schon kurz, nachdem ich das kapiert hatte, isses auch schon geflutscht!

    Eine Frage bleibt natürlich: Nach dem nächsten Backup ist alles futsch, oder?

    Trotzdem 1000 Dank für ein hervorragendes Tutorial!

  24. Kommentar Autor
    Monika
    Kommentar

    Hi Peter,
    wenn Du das Theme vom Backend aus erneuerst dann vermutlich ziemlich sicher, daher ist es ratsam, die Theme Dateien in einen Ordner am PC aufzuheben, und sich vor einem Theme-Backup alles genau nochmals anzusehen,

    wenn Du WordPress erneuerst ändert dies an Deinem Theme nichts, weil man da niemals den Ordner wp-content löscht ;)

    lg

  25. Kommentar Autor
    Stephen
    Kommentar

    Hallo zusammen,

    ich stelle mich gerade glaube ich extrem dumm an aber ich weiß nicht wo ich den Code eintragen soll.

    Mein Code:

    <meta http-equiv="Content-Type" content="; charset=“ />

    » Blog Archive

    <meta name="generator" content="WordPress “ />

    <link rel="stylesheet" href="“ type=“text/css“ media=“all“ />
    <link rel="stylesheet" href="/print.css“ type=“text/css“ media=“print“ />
    <link rel="alternate" type="application/rss+xml" title=" RSS Feed“ href=““ />
    <link rel="pingback" href="“ />

    <a href="/“>

    <a href="/“ title=“Home“>Home


  26. Kommentar Autor
    Stephen
    Kommentar

    ok da fehlt ein ganzes Stück ich den code irgendwie anfers vieleicht posten?

    Danke

    LG

  27. Kommentar Autor
    Monika
    Kommentar

    Stephen schick mir eine Email und häng deinen Code ineiner Textdatei ran

    mts ät Domainname von hier ;)

  28. Kommentar Autor
    Harry
    Kommentar

    Hallo,

    das ist ja mal echt interessant. Ich bin schon froh, das ich überhaupt eine eigene Headergrafik habe, die sonst keiner hat.
    Wenn ich für jede Kategorie ne eigene Grafik hätte würde ich wohl voll abdrehen.

  29. Kommentar Autor
    Ralf
    Kommentar

    Hmmm…sehr interessantes Thema – ich habe die ehrenvolle Aufgabe auch pro Kat den beschreibenden Text und ein individuelles Pic zu setzen…hab den Code mit Cut&Paste übernommen und bekomme nun folgende Fehlermeldung:

    Warning: main(/homepages/35/d67266106/htdocs/blog_katalog_com/wp-content/themes/roundHover/searchform.php) [function.main]: failed to open stream: No such file or directory in /homepages/35/d67266106/htdocs/blog_katalog_com/wp-content/themes/roundHover/header.php on line 172

  30. Kommentar Autor
    Monika
    Kommentar

    ja dann ;) kopier den Code ohne die searchform hinein, ;)

    lesen – ganz am Ende des Codes, findest Du den Teil, den Du nicht brauchst