Wechselnde Headerbilder mit “Dynamic Headers”

Hinweis: Dieser Artikel ist nicht mehr aktuell! Für wechselnde Headerbilder stehen mittlerweile aktuellere Plugins zur Verfügung, wie z.B. Extended Custom Headers von Justin Teadlock.

Mit dem Plugin „Dynamic Headers“ könnt ihr jedem Artikel oder jeder Seite ein eigenes Headerbild zuweisen. Die Installation ist einfach. Eine Möglichkeit ist es, das Plugin über das Backend installieren. Hierzu auf Plugins und den Menupunkt „Installieren“ gehen. In das Suchfeld den Begriff „Dynamic Headers“ eingeben und es erscheint dann eine Pluginbeschreibung mit Installationslink:

Man kann das Plugin auch manuell installieren, indem man es aus dem Plugin Repository bei wordpress.org herunterlädt, entpackt und per ftp in den wp-content/plugins hochlädt. Nun muss es noch aktiviert werden und es müssen noch ein paar Einstellungen vorgenommen werden.

Zunächst muss im Ordner wp-content ein neues Verzeichnis header-images angelegt werden. Dies muss die vollen Schreibrechte (CHMOD 777) bekommen. Die Schreibrechte kann man über das ftp-Programm setzen.

Nun muss in dem WordPress Theme, in dem die wechselnden Headerbilder gezeigt werden sollen, eine Codezeile eingefügt werden, über die die Headerbilder aufgerufen werden. Hier wird der Headerbereich gewöhnlich in der Datei header.php angesprochen.

<?php if (function_exists(’show_media_header‘)) { show_media_header(); } ?>

Mit dieser Zeile wird geprüft, ob das Plugin dynamic headers installiert ist und wenn ja, dann wird das dynamische Headerbild eingefügt.

Zunächst sichern wir die ursprüngliche header.php, um sie bei Bedarf wiederherstellen zu können. Nun suchen wir den Bereich, in den die Headerbilder eingefügt werden sollen. Dies kann von Theme zu Theme unterschiedlich sein. Gegebenenfalls muss man einen Bereich für das Headerbild neu definieren und per CSS gestalten.

Im Backend findet sich jetzt unten ein neuer Menupunkt „headers“. Hier lassen sich Headerbilder hochladen, die dann bei „Artikel bearbeiten“ oder bei „Seite bearbeiten“ ziemlich weit unten in einem neuen Feld „Nicasio Dynamic Header“ für jeden Inhalt einzeln ausgewählt werden:

24 Antworten
  1. Aondio Johann
    Aondio Johann says:

    Das Plugins, ein wunderschöne Sache. Habe aber ein kleines Problem. das Headerbild erscheint pro Seite, aber nicht am richtigen Ort , wo das Original Bild steht, sondern über diesem und nicht in der Mitte des Headers, sondern am linken Seitenanfang..
    Das Themes ist mit Artisteer erstellt worden.
    Da ich erst mich mit WordPress befasst habe, kenne ich mich mit php und css nicht gut aus (bin Laie).
    Wo kann ich und mit welchem Code das ändern, dass das Bild an der richtigen Stelle erscheint?
    Bitte um Hilfe.

    Antworten
  2. digitalauge
    digitalauge says:

    Hallo,
    ich habe genau das gleich Problem wie Aondio Johann und finde leider nirgend wo im Netz eine gute Anleitung zu dem Problem.

    „Gegebenenfalls muss man einen Bereich für das Headerbild neu definieren und per CSS gestalten.“

    Ich den mal das muss gemacht werden, aber wie und wo weiß ich leider nicht

    Einen Link kann ich gerne dann senden. Möchte die Seite jetzt natürlich nicht falsch online lassen

    Antworten
    • photoshophexe
      photoshophexe says:

      Hallo, am besten ist es, den Quellcode mit dem Firefox Add-On Firebug anzuschauen. Dann kannst du genau sehen, welche html-Tags und welche CSS Befehle für die einzelnen Bereiche des Themes verantwortlich sind. Falls es sich bei dem Theme um deine Website handelt, das Theme ist ein mit Artisteer erstelltes Theme und wie bei den meisten automatisiert erstellten Themes findet man unter der Haube Gruselcode (verschachtelte divs noch und nöcher). Ich habe hier mal einen Screenshot von deinem Header gemacht. Dort kannst du das div sehen, das für dein Headerbild zuständig ist. Dort gehört dann auch die Codezeile für die dynamic Headerbilder rein: http://screencast.com/t/SUT0ehKdo

      Antworten
  3. René
    René says:

    Hallo Hexe,

    habe das Plugin installiert, Ordner erstellt, mit 777 ausgestattet, Bilder hochgeladen, den Code so in die header.php eingefügt

    Ergebnis – keine Headergrafik mehr. Außerdem frage ich mich, wie ich die Grafik auf die Index-Seite bekomme, da sie ja im WordPress nicht als einzelne Seite bearbeitbar ist. Gibt es da eine Lösung?

    René

    Antworten
  4. photoshophexe
    photoshophexe says:

    Hallo René, das ist gut geworden auf deiner Seite! Dies ist der Code, der im Header eingefügt werden muss: < ?php if (function_exists(‘show_media_header’)) { show_media_header(); } ?>
    Was für einen Fehler meinst du?

    Antworten
  5. René
    René says:

    ////

    Offensichtlich dürfen die Lücken im Code nicht sein – zumindest wolte es mit Deinem Codeschnipsel nicht funktionieren – ich habe es mir dann aus dem Settingsbereich geholt…

    Egal – feines Plugin – DANKE!

    Antworten
  6. Mike
    Mike says:

    Hallo Photohexe,

    ich würde Dynamic Headers gerne in eine WebSeite für eine Gemeinde einbauen.
    Wir würden gerne das (Header-) Bild über die Seite inaus laufen lassen (siehe http://ehingen.byte-world.de )aber egal, wo ich den Schnippsel reinbau in die header.php – das Bild fängt immer wo anders an.

    Das Theme wurde mit Aristeer gemacht – ich weiss schon – allerlei durcheinander 🙁

    Könntest Du Dir das eventuell mal anschauen??

    Danke im Voraus
    Mike

    Antworten
  7. photoshophexe
    photoshophexe says:

    Hallo Mike, bei deinem Theme wird das Headerbild zweimal im Header als Hintergrundbild eingebunden. Einmal in div id=“art-header-bg“ (das ist der breite Teil außen)
    und dann noch mal in div class=“art-header“ (das ist nochmal der innere Teil)

    Das Plugin header-images bindet die Bilder nicht als Hintergrundbild ein sondern fügt sie als Bild in den Inhalt ein. Du könntest versuchen die Funktion zweimal einzufügen (einmal in das äußere div und einmal in das Innere). Das Bild müsste beidemale zentriert eingefügt werden, damit die Bilder nachher identisch übereinander liegen. Aber was bei einem Hintergrundbild relativ einfach ist, ist beim Einfügen als Bild dann doch etwas schwieriger. Da musst du mal schauen, wie du das css-mäßig hinkriegst. Ist natürlich schon eine kleine Herausforderung …
    Ich wünsche dir jedenfalls viel Erfolg!
    Hexe

    Antworten
  8. Simon
    Simon says:

    Hallo Photoshop Hexe,

    zunächst einmal vielen Dank für die tollen Informationen! Alles sehr hilfreich, speziell hier hat mich das schon sehr weit gebracht.

    Ich habe nun das Problem, dass der neue Header nicht direkt auf dem anderen sitzt. Habe das Theme mit Artisteer gebaut und wollte jetzt mit dem Plugin den Header rübersetzen, das Bild sitzt aber ca. 4 Pixel über dem anderen. Woran liegt das und kann man da irgendetwas gegen tun? Meine CSS-Kentnisse sind leider nicht hinreichend, um es da zu versuchen, wie könnte so ein Befehl aussehen?

    Der Link zu der Seite mit neuem Header ist los.ciconsultants.de/uber-uns/dr-uthgenannt.

    Vielen Dank für die Hilfe und Entschuldigung für die Ahnungslosigkeit,

    Simon

    Antworten
    • photoshophexe
      photoshophexe says:

      Hi Simon, dein Headerbildbereich ist in der style.css mit 222px Höhe festgelegt, dein Bild aber nur 218px hoch, deshalb schaut unten der alte Hintergrund durch. Am einfachsten ist es wohl, dein Bild auf 222px zu vergrößern oder du müsstest die Höhe des Headers abändern. Artisteercode ist aber meist Gruselcode ;), d.h. die Höhe des Headers ist in deinem Theme an mehreren Stellen festgelegt, da ist die Anpassung der Hintergrundbilder sicherlich einfacher. Viel Erfolg! Hexe

      Antworten
  9. Klaus
    Klaus says:

    Hallo hexe
    …auf meiner Seite funktioniert es nicht mit dem plugin „dynamic headers“. Auf meinen einzelnen Seiten erscheint unten die Auswahlbox für die unterschiedlichen „header-images“.
    Aber egal wo ich in meinem header.php (Theme „twentyten“) den Codeschnipsel einbaue, es
    wird kein anderes Header image angezeigt.

    Bin leider noch sehr unerfahren mit WordPress. Hoffe aber Du kannst mir weiterhelfen.

    Liebe Grüße aus Nidda, Hessen, BRD, Welt, Galaxie, den Rest

    Klaus

    Antworten
    • photoshophexe
      photoshophexe says:

      Hallo Klaus,
      beim twentyten kannst du den folgenden Code löschen
      < ?php
      //check if this is a post or page, if it has a thumbnail, and if it's a big one
      if ( is_singular() && current_theme_supports( 'post-thumbnails' ) &&
      has_post_thumbnail( $post->ID ) &&
      ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
      $image[1] >= HEADER_IMAGE_WIDTH ) :
      // Houston, we have a new header image!
      echo get_the_post_thumbnail( $post->ID );
      elseif ( get_header_image() ) : ?>

      < ? p h p endif; ?>
      und stattdessen die Zeile von dynamic headers einfügen. Dann sollte es klappen.
      Aber aufpassen, dass du nur den code zwischen

      < ?php // Check if this is a post or page, if it has a thumbnail, and if it's a big one

      und

      < ? endif; ?>

      löschst. Am besten vorher eine Sicherheitskopie der Datei header.php machen.
      Viel Erfolg,
      Hexe

      Antworten
  10. Albert
    Albert says:

    Hallo,

    ich benutze auch den Theme Twenty Ten.

    Habe alles nach Anleitung gemacht, bekomme aber immer wieder einen Parse Error oder es wird gar keine Grafik mehr im Header angezeigt.

    Kann vielleicht mal jemand bei dem es geklappt hat den fertigen Quellcodeabschnitt der header.php Datei hier posten?

    Danke und Grüße

    Antworten

Hinterlassen Sie einen Kommentar

Wollen Sie an der Diskussion teilnehmen?
Feel free to contribute!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

19 + dreizehn =