Björn Landmesser

Software-Entwicklung, Fotografie

WordPress wechselnde Header-Bilder pro Hauptmenüpunkt

| 9 Kommentare

Auf der Seite der Innenstadtgemeinde Itzehoe habe ich ein wenig PHP und CSS eingefügt, um dafür zu sorgen, dass unterschiedliche Seiten unterschiedliche Bilder im Header anzeigen.

Auf meiner Seite, auf der sich dieser Blog befindet, werden unterschiedliche Header mittels Artikelbildern erreicht. Das bedeutet aber, dass man für jede Seite, die ein anderes Bild als den Standard haben soll, ein eigenes Bild hoch laden muss. Auf der Innenstadtgemeinde-Seite soll aber z.B. für Gemeinde und alle Unterseiten von Gemeinde das selbe Bild erscheinen.

Um dies zu erreichen habe ich folgenden PHP-Code in die header.php eingefügt:

<p id="headerimage" class="<?php
  $tmp = substr(get_permalink(), strlen(get_bloginfo('url'))+1);
  echo substr($tmp,0, strpos($tmp,'/'));
?>" />

Zunächst verwundert vielleicht die Verwendung eines Paragraphen als Element für das Hintergrundbild. Das hängt vom gewählten Theme ab. Typischerweise benutzt man hier ein div. Ein img hat den Nachteil, dass die Bild-URL im Attribut src angegeben wird, und nicht über CSS verändert werden kann.

Dieser PHP-Code nimmt die aktuelle Seiten-URL, z.B. http://www.kirche-itzehoe.de/isg/musik/orgeln/, schneidet dort den Anfang http://www.kirche-itzehoe.de/isg/ weg (das, was get_bloginfo('url') zurückgibt) und wirft dann noch alles weg, was nach dem folgenden / kommt. Somit bleibt bei dieser URL noch musik übrig, und somit ergibt sich

<p id="headerimage" class="musik" />

Nun kann man einfach mittels CSS unterschiedliche Bilder verwenden.

#headerimage.kirchen {
  background: url('images/myheaders/altar.jpg');
}

#headerimage.musik {
  background: url('images/myheaders/orgel.jpg');
}

#headerimage.gemeinde {
  background: url('images/myheaders/empore.jpg');
}

Voraussetzung dafür, dass das funktioniert ist eine lesbare Permalink-Struktur. Dazu wählt man unter Einstellungen / Permalinks den Artikelnamen aus.

Die Bilder, die als Header verwendet werden sollen, habe ich per FTP in das Theme-Unterverzeichnis kopiert. Dadurch funktionieren die relativen Links in der CSS-Datei.

9 Kommentare

  1. Super Anleitung. Hat mir sehr geholfen.

    Vielen Dank!

  2. Hallo,

    danke für die Anleitung…

    Funktioniert das Ganze auch, wenn man statische Seiten mit unterschiedlichen Header-Bildern ausstatten möchte?

    Was muss ich in diesem Fall wo eingeben?

    Danke & schöne Grüße,
    I.

    • Verstehe ich das richtig, dass Du unterschiedliche Bilder für unterschiedliche Seiten, nicht Kategorien (Menüpunkte) willst? In diesem Fall schneidet man nicht nach dem Menünamen den Rest weg, sondern nimmt alles nach dem letzten /. Im Beispiel wird ja aus musik/orgeln dann musik. Wenn man den PHP Code ersetzt durch

      <p id="headerimage" class="<?php
        $tmp = substr(get_permalink(), strlen(get_bloginfo('url'))+1);
        // alles nach dem letzten '/'
        echo substr(strrchr($tmp, '/'), 1);
      ?>" />

      sollte orgeln rauskommen, d.h. der Seitenname kann dann als Klassenname verwendet werden statt der Kategorie.

      Hab’s nicht ausprobiert, aber müsste gehen. Eventuell ist am Ende noch ein ‚/‘ zu viel. Den müsste man dann mit substr($tmp, 0, -1); wegmachen. Siehe auch PHP Doku dazu.

      • Hallo, und was mache ich, wenn ich sowohl Seiten als auch Kategorien mit eigenen header-Bildern versehen möchte ? Irgendwas mit if – then, rate ich mal, aber ich schnall’s nicht 🙁

  3. Hallo,

    habe gerade auf deiner Seite gestöbert und genau die Lösung für mein Problem gefunden. Ich bin nur leider nicht in der Lage es anzuwenden 🙁

    Kannst du mir nochmal erklären wie ich für verschiedene Seiten unterschiedliche Header einbauen kann? Du sagst du hast einfach ein Artikelbild zugefügt. Aber wie kriege ich es fertig das ein Artikelbild im Header angezeigt wird? Ich wäre dir wirklich sehr dankbar für eine Antwort.

    Gruß
    Chris

    • Hm, das habe ich nicht explizit dazugeschrieben (Habe das gerade nachgeholt). Es handelt sich nicht um Artikelbilder. Es soll ja gerade das selbe Bild für mehrere Seiten genommen werden. Die Bilder habe ich per FTP in einen Unterordner images/myheaders kopiert. Die werden dann in der css-Datei referenziert.

      Auf dieser Webseite hier habe ich ein Theme verwendet (Yoko), was automatisch die Artikelbilder als Header nimmt. Das wäre die Alternative.

  4. Björns Eintrag vom 28, Juli 2012 21:06 Verwendung des Themes YOKO, was automatisch die Artikelbilder als Header nimmt.

    Lieber Björn,
    auch ich verwende Yoko, aber nach Veränderung des Headerbildes zeigt mir WP nun keine Artikelbilder im Header mehr an. Ganz vereinzelt bei neu eingestellten Artikeln funktioniert es noch, aber selbst dann nicht immer und überhaupt nicht bei alten Artikeln. Da ich ein absoluter Frischling in Sachen WP usw. bin, habe ich keine Ahnung wo ich die Ursache dafür suchen soll. Kannst du mir einen Rat geben?
    Danke!

  5. Pingback: header-Bilder je Kategorie im Theme Yoko von Elmastudio.de | Oh nein!

  6. Funktioniert wunderbar. Danke!

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.