WordPress – Wechselnde Grafiken ohne PluginWordPress – Wechselnde Grafiken ohne Plugin

Wenn man in WordPress einen Beitrag schreibt, stehen einem benutzerdefinierte Felder zur Verfügung, schaut mal weiter unten auf der entsprechenden Seite. Allgemein werden diese Felder für Meta-Angaben auf der Seite genutzt oder wie ich im Web las, um z.B. den aktuellen Gemütszustand festzuhalten. Ich habe mich ein wenig näher mit diesem Feature beschäftigt und nutze dieses für individuelle Bilder in der Sidebar.

Ich erkläre hier nun, wie Du in der Sidebar zu jedem Beitrag ein eigenes Bild anzeigen lassen kannst, ohne dafür ein Plugin zu nutzen. Voraussetzung ist, dass ein gewisser Pool an Bildern vorhanden ist und diese im Ordner wp-content/sidebarbilder abgelegt werden. (Der Ordner kann beliebig genannt/platziert werden, dann musst Du den Code eben entsprechend angepassen!)

benutzerdefinierte Felder in WordPress

Schreibst Du einen Beitrag, lege beim ersten Mal den Schlüssel an (siehe Bild). Später steht der Schlüssel im linken Auswahlfeld zur Verfügung. Im rechten Feld trage den gewünschten Bildnamen ein.
Mehr ist beim Schreiben nicht notwendig.

Jetzt passe die sidebar.php (im Themeordner) an. An der gewünschten Stelle füge folgenden Code ein:

WICHTIG! Alle spitzen Klammern und Anführungszeichen im Code müssen gegen die richtigen Klammern/Anführungszeichen ausgetauscht werden!! Irgendwie konvertiert WP diese in typographische Zeichen. :-( 

‹?php if (is_array(get_post_custom_values('bild'))) { ?›

‹img src="‹?php bloginfo('url') ?›/wp-content/sidebarbilder/‹?php $mypic=get_post_custom_values('bild'); echo $mypic[0]; ?›" alt="Bild zum Beitrag" /›

‹?php } ?›

Kurze Erläuterung, was hier passiert: Die erste Zeile fragt ab, ob für den Schlüssel ‚bild‘ ein Eintrag existiert. Da ja mehrere Einträge in den benutzerdefinierten Feldern möglich sind, werden diese als Array übergeben. Darum musst Du diesen Parameter als Array abfragen. In der nächsten Zeile füge dann das Bild ein.
Den Schlüssel übergib der Variablen $mybild und da ja immer nur ein Bild eingetragen wird, steht dieses im Array an erster Stelle (Arrays beginnen immer bei Null!). Zum Schluss erfolgt die Ausgabe mittels echo. In der dritten Zeile wird mit der geschweiften Klammer die if-Abfrage beendet.

Das wars schon. Ist doch einfach, oder? Noch ein Tipp: Willst Du anstelle des benutzerdefinierten Bildes ein Standardbild anzeigen lassen, erweitere den obigen Code mit den rot hervorgehobenen Zeilen:

‹?php if (is_array(get_post_custom_values('bild'))) { ?›

‹img src="‹?php bloginfo('url') ?›/wp-content/sidebarbilder/‹?php $mypic=get_post_custom_values('bild'); echo $mypic[0]; ?›" alt="Bild zum Beitrag" /›

‹?php } else { ?›

‹img src="‹?php bloginfo('url') ?›/wp-content/sidebarbilder/standard.jpg" alt="Standardbild" /›

‹?php } ?›

Dieser Code lässt sich auch wunderbar einsetzen, um die Headergrafik auf diversen Seiten auszutauschen. Wichtig ist nur eines: Der Code muss innerhalb des Loops stehen.
Letzter Tipp: Falls Du nicht jedes Bild neu skalieren willst, in der Sidebar stehen oft nur 200 Pixel in der Breite zur Verfügung, erweitere den img-Tag um folgende Style-Anweisung oder schreibe im CSS eine eigene Klasse:

style="width: 180px; height: auto;"

Gib für den Wert width die gewünschte Breite an und setze die Höhe auf automatische Skalierung. Das funktioniert in allen herkömmlichen Browsern und Du sparst Zeit.
Viel Spaß beim probieren!

geschrieben am: 16. Juli 2007   Autor: turicon   Kategorie: Wordpress   Kommentare: 5 Stück
Kommentare
  1. plagiat meint am 29. Dezember 2007 um 02:29 :

    so was hab ich gesucht, komme aber leider (vielleicht auch wegen den quadrat-augen, die ich inzwischen habe) nicht ganz zurecht.

    ich brauche in meiner sidebar drei bilder untereinander, die mit seiten des blogs verlinkt sind.

    irgendwo ist der wurm drin und bei mir wird leider nur: „Standardbild“ angezeigt…
    Idee?

    Antwort: Ich denke mir mal, dass immer nur ein Bild zugewiesen werden kann. Lege doch im Adminbereich 3 Felder an: „bild1“, „bild2“ und „bild3“

  2. viktor hafner meint am 19. Januar 2008 um 07:45 :

    toll, so etwas will ich einbauen.
    kann man da vielleicht auch einen bildtext dazu ausgeben und einen link?

    Antwort: Das sollte kein Problem darstellen. Einfach die Schritte wiederholen und als Name „bildtext“ verwenden.

  3. pixel meint am 2. Juni 2008 um 21:14 :

    das kleine ohneplugin-code-teil sieht super aus!
    leider bringe ich es nicht zum laufen. egal, wo ich es in den sidebarcode einbaue, es tut nicht. ich benutze eine sidebar, die entweder einen „default content“ oder widgets nutzt. ich nutze die widgets. aber auch, wenn ich auf die verzichte und das default setting benutze, wird auf der Seite der Code selbst angezeigt! was mache ich verkehrt??
    grüsse vom pixel :-)

    Hallo pixel,
    erstmal sorry, ich hatte diesen Artikel aus einem stillgelegten Blog von mir übernommen und den „code“-Tag noch nicht angepasst, so dass nicht alles angezeigt wurde. Jetzt hast Du Scrollbars und der komplette Code ist zu sehen. Also kann das schon des Problems Lösung sein. Aber achte auch darauf, dass Du die Felder innerhalb des Loops benutzt! Sonst funktioniert da nix :-)

  4. pixel meint am 3. Juni 2008 um 11:08 :

    hallo & danke für deine schnelle antwort!
    leider hat’s nix gebracht – ich glaub, den code konnte ich auch schon vorher richtig kopieren. die artikel zu loops habe ich gelesen und meine modifikationen daraufhin untersucht – aber an allen stellen in der sidebar zeigt sich der code im blog so wie er ist – als nackter text. irgendwie scheint da etwas zu fehlen, damit das ganze als code erkannt wird? ich nutze die neueste version von wordpress und ein theme mit namen veryplaintext4. hast du noch eine idee, was ich machen kann? mir gefällt deine idee, kleine vorschubilder in der sidebar zu bestimmten artikeln zu zeigen…
    grüsse vom pixel :-)

    Hallo pixel,
    habe auch die neueste Version von WP und es hier noch nicht probiert. Aber ich mach das mal und melde mich dann…

    Update: OK, hatte nun die selben Probleme wie Du, aber den Fehler zum Glück gefunden. Überprüfe in den Codeschnipseln von hier die spitzen Klammern und die Anführungszeichen, ob es auch die richtigen sind. Irgendwie haut mir WordPress hier typographische Zeichen rein, ich muss mal sehen, wie ich das unterbinden kann. Aber dann – und wenn die Sidebar innerhalb des Loops aufgerufen wird – funktionierte es endlich! Ich hoffe, bei Dir klappt es auch! Viel Glück, Turicon

  5. pixel meint am 3. Juni 2008 um 20:18 :

    hallo Turicon,
    dank noch einmal für deine noch schnellere antwort! da ich php-dummi bin, war es für mich leichter, ein fertiges addon zu suchen, welches ich auch fand: Gallery Widget Pro. das läuft zwar auch nicht ganz einwandfrei, aber es tut, was dein hübsches teichen auch kann. zudem bietet es die möglichkeit auf die seite, aus der das bild stammt zu verlinken. hmmm, das gefiel mir dann doch so gut, dass ich eingebaut habe. deinen netten code werde ich nach deiner anleitung überprüfen & ggf. an einer anderen stelle einbauen. wenn ich es nutze, schicke ich dir nachricht. an dich noch einmal herzlichen dank fürs testen!!!
    grüsse vom pixel :-)