Schon seit Version 2.9 bringt WordPress eine ganz nützliche Funktion mit, die jetzt in WP 3.0 noch aufgebessert und erweitert wurde. Man kann für jeden Blog Post ein Artikelbild, ein Thumbnail festlegen und dieses im Template (wie z.B. hier bei mir auf der Startseite) ausgeben. Was vorher recht umständlich über Benutzderdefinierte Felder zu lösen war, geht mittlerweile mit einigen Klicks. Ich habe einfach mal eine kleine Anleitung zum Integrieren der Funktion in ein bestehende Themes geschrieben:
Anlegen und Ausgeben von Artikelbildern/Post Thumbnails
Beim Erstellen oder Bearbeiten der Artikel erscheint seit WordPress 3.0 in der rechten Seitenleiste das “Artikelbild-Widget”.
Mit einem Klick auf “Artikelbild festlegen” erhält man die folgende Auswahlmaske:
Dort einfach wie gehabt das gewünschte Bild auswählen und diesmal nicht mit “In den Artikel einfügen”, sondern “Als Artikelbild nutzen” bestätigen. Nun sollte Das gewählte Bild schon der Sidebar im Artikelbild-Widget angezeigt werden.
Um jetzt dem verwendeten Theme noch beizubringen, das Bild im Loop mit auszugeben sind einige kleine Eingriffe in den Code nötig.
In der entsprechenden Datei für die Artikelübersicht – in WordPress 2.9 ist es die index.php, im 3.0 Twentyten Theme ist es die loop.php – einfach an der gewünschten Stelle folgenden Code einfügen:
1 2 3 4 5 | <?php if ( function_exists('has_post_thumbnail') && has_post_thumbnail() ) { the_post_thumbnail(); } ?> |
Wenn gewünscht kann man nun auch noch feste Bildmaße (hier im Beispiel 250×120 Pixel) oder CSS-Klassen (z.B. alignright, post_thumbnail) vorgeben:
1 2 3 4 5 | <?php if ( function_exists('has_post_thumbnail') && has_post_thumbnail() ) { the_post_thumbnail(array(250,120), array("class" => "alignright post_thumbnail")); } ?> |
Mehr Infos zu den Parametern und Optionen zur the post thumbnail Funktion, bzw. zur in der if-Abfrage genutzen has post thumbnail Funktion gibt es im WordPress-Codex.
Was, wenn es nicht funktioniert?
Bei älteren Themes kann es erfahrungsgemäß notwendig sein, dem Theme die Artikelbildfunktion erst “beizubringen”. Dazu wird folgender Code in die functions.php des verwendeten Themes eingefügt:
1 2 3 4 5 |
Referenz: http://codex.wordpress.org/Function_Reference/add_theme_support
Edit
28.10.2010: Angaben zur Abwärtskompatibilität und Umgang mit älteren Themes eingefügt (Vielen Dank TuxX)
28.10.2010: Code-Darstellung optimiert
03.11.2010: Code und Texte überarbeitet
Hi,
ne Idee, warum immer quadratische Thumbnails ausgegeben werden, obwohl ich Breite und Höhe unterschiedlich gesetzt habe?
“alignleft post_thumbnail”));
} ? >
In dem Beispiel wird der thumbnail auf 110×110 skaliert.
Blöd. Mein PHP Code wurde etwas gekillt. Ich versuch es nochmal…
if ( function_exists(“has_post_thumbnail”) && has_post_thumbnail() ) {
the_post_thumbnail(array(170,110), array(“class” => “alignleft post_thumbnail”));
}
Sieht ok aus, bei mir siehts nicht viel anders aus.
Hast du vieleicht dem Artikelbild beim einfügen im Artikel eine andere Größe zugewiesen?
Nein. Ich habe einfach ein beliebiges Bild (größer, als es als Thumbnail sein sollte) hochgaladen und das als Thumbnail zugewisesen. Wie gesagt erscheit es ja auch, aber immer quadratisch, statt rechteckig. Wobei eben eine der von mir festgelegten Dimensionen verwendet wird.
Aus 170×110 wird dann z.B. 110×110. Wenn ich 75×75 ausgeben will, dann klappt das problemlos. Scheint irgendwie die rechteckigen Formate nicht zu mögen. Irgendeine Idee?
Wirklch sehr informativ! Werde aufjedenfall wieder kommen. Danke fuer den Beitrag.
Gruss
Andres
Also, ich hab das nun auch mal getestet, und muss sagen, es funktioniert wunderbar. Auch habe ich keine Probleme mit der Bildformatierung.
Einfach “the_post_thumbnail(array(“class” => “alignleft post_thumbnail”));” einfügen, ohne Angabe der Boldgrößen und schon nimmt Worpress genau das was als Thumbnail definiert wurde. Auch mit den jeweiligen Maßen.
In diesem Sinne…
Servus,
habe ein aktuelles wp bei mir zu liegen, jedoch finde ich das artikelbild nicht. muss ich das irgendwie zuschalten?
grüße aus b. an der s.
Hallo,
nein, du musst dem jeweiligen Artikel ein Artikelbild zuweisen und (sofern du nicht das WordPress 3.0 Standard-Theme “Twentyten” nutzt) die oben beschriebenen Änderungen am Template vornehmen, dann sollte das Artikelbild auch dargestellt werden.
Gruß, Kai
Hai Kai,
nein du hast mich falsch verstanden. ich habe beim neuen artikel schreiben rechts unter schlagwörter keine feld “artikelbild festlegen”. wie bekomme ich das sichtbar?
grüße,
grüße aus b. an der s.
Oh ok, das ist mir neu. Und du bist dir sicher, daß du ein WordPress mindestens Version 3.0 nutzt?
ja das bin ich…
ich benutzte WordPress 3.0.1.
muss man dafür vielleicht irgendwas anschalten oder installieren?
grüße
Hallo s. aus b. an der s.,
Als erstes, ne Frage. Du bist nicht zufällig der lang verschollene Zwilling von Kai? *lach*
Ok, zurück zum Thema:
Es kann durchaus sein, dass diese kleine Box, in der man das Artikelbild einstellen kann etwas weiter unten ist. Diese kann man für gewöhnlich per Drag & Drop verschieben. Also muss sie nicht zwangsläufig rechts an der Seite irgendwo “klemmen” sondern kann auch weit unter dem Editor sein.
Eine weitere Möglichkeit ein Artikelbild einzufügen hast Du direkt im Editor. Da gibt es oben so kleine graue” Buttons (Hochladen/einfügen), einer davon heißt “Bild einfügen”. Da klickst Du einfach drauf und wählst ein Bild aus. Dann statt “In Artikel einfügen” nimmst Du “Als Artikelbild festlegen”. Klappt genau so gut.
Ich hoffe ich konnte etwas weiter helfen.
@s. aus b. an der s.
In die functions.php deines Themes muss folgende Zeile eingefügt werden:
add_theme_support( ‘post-thumbnails’ );
Dann hast du die Möglichkeit ein Artikebild festzulegen.
Damit haben sich ein paar Probleme bei mir erledigt. Vielen Dank für die Hilfe!
Kann es sein, dass die Funktion nicht bei jedem Theme angezeigt wird? Wenn ich ein eigenes Theme aktiviere, fehlt die Box zum Hinzufügen eines Artikelbilds. Leider bin ich noch nicht drauf gekommen, wie man das hinbekommt. Ich kann doch nicht jedesmal auf das Standard Theme switchen um ein Bild einzufügen
Jedenfalls schon mal Danke für den informativen Beitrag!
Hallo Thomas,
richtig, grade diversen älteren Themes muss man diese Funktion oftmals erst “beibringen”.
Das Problem sollte eigentlich wie im letzten Punkt beschrieben mit dem Einfügen der Funktion add_theme_support(‘post-thumbnails’); in die functions.php behoben sein.
hab es gefunden!
Für alle, die es interessiert: Man muss bei einem eigenen Theme (oder wo es nicht vorhanden ist) eine functions.php im Theme Ordner anlegen/ editieren. Dort kommt folgender Code rein:
Damit sollte dann beim Erstellen oder Editieren eines Posts die Artikelbild Funktion angezeigt werden.
Ich war Blind, schande über mein Haupt
Kein Problem
Hallo,
das einbinden des Artikelbild Buttons hat super funktionier, wenn ich jetzt aber ein Bild als Artikelbild festlege wird das immer über dem Text angezeigt, möchte das jedoch links neben dem Text zentrieren, wie geht das denn? danke!
Vielen Dank für den Hinweis, wusste bis eben nicht das dies möglich ist… vielen Dank!
Gefällt mir gut die Seite. Könnte etwas schöner gestaltet sein, aber alles in allem – gefällt!
1a Beitrag!
Genau diesen Teil mit “Wenns mal nicht klappt” hab ich gerade gebraucht. Ich war schon am verzweifeln, weil ich 3 Blogs mit 3 gleichen Themes habe und in 2 funktionieren Artikelbilder und im letzten nicht…
Hab die Funktion in der functions.php ergänzt und schon geht es. Hab zwar keine Ahnung warum der 3. Blog diesen Zusatz braucht, obwohl er das gleiche Theme wie die anderen verwendet, aber hauptsache es geht jetzt dank deines Artikels.
super!
vielen dank!
lg Can
da kommt mir noch ne idee in den sinn..
wie könnte ich das neueste bild in groß darstellen..und alle anderen kleiner?
Um noch mal das Theme mit der Größe des Post-Thumbnails aufzugreifen. Es ist recht einfach dieses mittels einer Boardfunktion auf die richtige Größe zu bringen, als im Nachhinein beim Auslesen.
Um die Größe des Post-Thumbnails zu bestimmen, hat WordPress eine eigene Funktion.
set_post_thumbnail_size();
Beispiel:
2
3
4
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150 );
}
Diesen Code in die functions.php einfügen und die Post-Thumbnails haben eine Größe von 150×150 Pixel. Dadurch erübrigt sich das ganze Gefrickel beim Auslesen der Post-Thumbnails. Eine genaue Beschreibung der Funktion, findet ihr auf der verlinkten Seite
Danke für die Tips guter Beitrag, auch das set_post_thumbnail_size. Allerdings finde ich schade das wenn der User dann eine eigene Größe beim wählen des Thumbnail anklickt, diese genommen wird und nicht meine festgelegte.
Kai, hast du eine Ahnung, ob es eine Möglichkeit gibt, Artikelbilder festzulegen, die nicht auf dem eigenen Server liegen?
im mediathel uploader kannst du doch wählen zwischen “Vom Computer” und “Von URL”
ist das nicht das was du meinst?
lg
Ne, weil bei “Von URL” gibts nicht mehr die Option, als Artikelbild festzulegen.
jetzt wo dus sagst
und ich dachte schon ich wär schlau -.- ^^
Hallo und vielen Dank für den Artikel. Ich benutze das zBwench Theme, das offensichtlich schon Artikelbilder unterstützt. Allerdings bekomme ich immer nur einen kleinen Ausschnitt meines Bildes angezeigt – auch schon im Widget beim Bearbeiten des Artikels. Wie kann ich WordPress dazu überreden, das komplette Bild (notfalls entsprechend skaliert) anzuzeigen?
übrigens kann die funktion trotz eintrag in der functions.php auch im backend deaktiviert/aktiviert werden
wenn man einen artikel schreibt/bearbeitet gibt es ganz recht oben einen button “optionen einblenden”
dort können alle “widgets” oder funktionen eingeblendet oder eben auch ausgeblendet werden
auf dem screenshot kann man mehr erkennen
http://img560.imageshack.us/img560/7513/artikelbilder.jpg
@Klaus
vielleicht ist in der functions irgendwas anderes definiert? dass die bilder cropped..also automatisch einen ausschnitt erstellt
Hallo,
bei mir passiert nix im Frontend. Habe alle Sniptes eingefügt, aber keine Thumbs erscheinen
Gruß Daniel
Hilfe!
Ich habe den Code eingebaut und damit meinen Blog komplett zerschossen! Nichts geht mehr! Hast du eine Idee, wie ich zumindest wieder in den Admin-Bereich komme, um irgendwas zu retten?
Wenn man meine Seite aufrufen möchte (http://www.dietestfamilie.de) geht überhaupt nichts mehr – es kommt folgende Fehlermeldung:
Parse error: syntax error, unexpected ‘<' in /webspace/10/62558/dietestfamilie.de/wp-content/themes/twentyten/functions.php on line 509
Was ich gemacht habe?
Ich habe diesen Code in meine functions.php eingebunden:
Ich habe den Code ganz unten auf der functions.php eingegeben und kurz danach kam obiger Fehler. Auch nachdem ich den Code wieder gelöscht habe, kam dieser Fehler.
Jetzt kann ich nicht mal mehr in den Editor, ich gelange immer nur auf den Fehler.
Also ich komme auf deine Seite. Ich vermute, du konntest das Problem inzwischen lösen?
ja, ich habe das Problem gelöst. Allerdings kriege ich das mit den Thumbnails nicht hin. Ich habe das Twentyten 1.3.
Wo muss ich den Code denn einfügen?
“In der entsprechenden Datei für die Artikelübersicht – in WordPress 2.9 ist es die index.php, im 3.0 Twentyten Theme ist es die loop.php – einfach an der gewünschten Stelle folgenden Code einfügen:”
was ist “die gewünschte Stelle”? Ich möchte gerne, dass bei jedem Artikel in der Übersicht ein Vorschaubild erscheint, z.B. hier: http://www.dietestfamilie.de/category/neue-artikel/
Also, um das mal abzukürzen.
Bei solchen Änderungen sollte man schon etwas Ahnung von dem Ganzen haben, da diese Änderungen an Themes dazu führen können, dass danach nichts mehr funktioniert, wenn man es falsch macht.
Um die Artikelbilder in der Übersicht einzufügen muss beim TwentyTen-Theme der Code an mehreren Stellen in die loop.php eingefügt werden und zwar jeweils vor
<?php the_content(); ?>Mit andern Worten, aus
wird
2
3
4
5
6
7
if(function_exists('has_post_thumbnail') && has_post_thumbnail()) {
the_post_thumbnail('thumbnail', array("class" => "alignleft post_thumbnail"));
}
the_content();
?>
Nur als Beispiel.
Anmerkung:
Dies ist jetzt nur auf die Schnelle von mir erstellt und noch nicht genau geprüft. Aber da die loop.php wirklich nur den Artikelindex aufbaut, und je nach Posttype ausgibt, sollte das so funktionieren. Ich übernehme keine Garantie dafür und Änderungen an euerm Theme macht ihr natürlich auf kopmplett eigne Gefahr. Desweiteren würde ich dazu raten sämtliche Änderungen immer nur an einem Child-Theme durchzuführen, da somit das eigentliche Theme nicht beeinträchtigt werden kann und immer noch updatefähog bleibt. Aber dazu befragt bitte jemanden, der sich damit auskennt und weiß was er tut. Unbedacht am Code eines Themes herunexperimentieren ist selten eine gute Idee.
mit dem nichts mehr funktionieren habe ich gemerkt
Also die Loop-Datei ist ja nicht sehr groß, die sieht bei mir so aus:
?>
<div id="post-” >
” . __( ‘Pages:’, ‘twentyten’ ), ‘after’ => ” ) ); ?>
<?php edit_post_link( __( 'Edit', 'twentyten' ), '’, ” ); ?>
Wie ich bereits sagte:
Ein Kommentarformular eines Blogs ist keine ausreichende Plattform um so etwas zu analysieren und so auch zu einem ordentlichen Ergebnis zu gelangen. Das mag bei Leuten funktionieren, die “die selbe Sprache” sprechen, also Leute, die mit solchem Code auch etwas anzufangen wissen.
ok, ich geb’s auf und suche nach einem Plugin, damit komme ich besser klar
Danke für deine Mühe, den Code einem daU zu erklären