WordPress Vorschaubild oder Thumbnails für Artikel

Heute habe ich mich mal damit beschäftigt, wie man bei der Artikelübersicht in WordPress ein Vorschaubild oder auch Thumbnail genannt integrieren kann. Das Prinzip ist ziemlich einfach. Je nach dem was man für ein Thema oder Theme benutzt, muss dies dann noch angepasst werden.

Funktion für das Thumbnail aktivieren

Um ein Vorschaubild zu integrieren, muss man erst einmal  die Theme-Funktionen (functions.php) öffnen. Dafür gibt es 2 Möglichkeiten. Entweder man öffnet diese lokal über einen php Editor, ich nehme dafür Eclipse. Die andere Möglichkeit ist über Design im Adminbereich den integrierten Editor anzuklicken und in diesem die functions.php zu öffnen. Sollte diese nicht vorhanden sein, legt sie einfach an.

Editor
Editor

Um nicht durcheinander zu kommen, habe ich zum Ende der Datei gescrollt. Dort muss dann folgender Code eingegeben werden.
 
 
 
 
 
 
 

add_theme_support(‚post-thumbnails‘);

Wenn man sich mit php ein wenig auskennt, kann man dies auch noch erweitern. Hier habe ich um genau zu sein folgendes eingegeben.

add_theme_support(‚post-thumbnails‘, array(‚post‘));

Da ich die Vorschaubilder nur für die Artikelübersicht haben möchte und nicht auch auf anderen Seiten, habe ich es für Artikel begrenzt.

Wenn jetzt ein neuer Artikel erstellt wird, oder ein alter bearbeitet wird, sieht man im rechten Bereich Artikelbild (Wenn man die Standard Einstellungen gelassen hat).

Artikelbild
Artikelbild

Klickt man auf Bild hinzufügen, wird ein Overlay geöffnet und es kann ein Bild aus der Mediathek genutzt werden oder man fügt ein neues Bild hinzu.

Dies war nun der erste Teil, der erledigt werden muss, um ein Vorschaubild für die Artikelübersicht in WordPress zu haben.

Vorschaubild im Blog anzeigen

Als nächstes muss noch ein weiterer Code in die index.php, page.php und archive.php eingefügt werden. Der Code lautet folgendermaßen.

<?php the_post_thumbnail('thumbnail'); ?>

Damit die Thumbnails auch in der Artikelübersicht angezeigt werden. Wir haben das noch etwas spezifiziert mit folgendem Code.

<?php the_post_thumbnail(array(150,150)); ?>

Da wir das Vorschaubild auf die Größe 150 x 150 Pixel begrenzen wollten.

  • Warum muss der Code auf den 3 php Seiten eingefügt werden?
    index.php = die Startseite, damit werden die Thumbnail auf dieser angezeigt.
    archive.php = die Archivübersicht für z.B. die einzelnen Monate, nun werden auch dort die Vorschaubilder angezeigt.
    page.php = z.B. die Übersicht, wenn man in die einzelnen Kategorien klickt, auch hier funktionieren jetzt die Vorschaubilder sobald dieser Code eingegeben und abgespeichert ist.

Wenn man es richtig machen möchte sollte eine Abfrage prüfen, ob für einen Artikel ein Vorschaubild angelegt worden ist. Ein Beispiel seht ihr hier.

<?php if(has_post_thumbnail()) { the_post_thumbnail(array(150,150)); }?>

Design anpassen

Es kann unter Umständen sein, dass das Design noch angepasst werden muss, von daher empfehle ich dies nicht live auf dem Server zu erledigen, sondern erst mal lokal auf dem heimischen Webserver.

Ich wünsche Viel Spaß beim umsetzen, wer möchte dem passe ich die dementsprechenden Seiten an. Für eine kleine Gebühr von 10,00 €, kostet ja auch bisschen Zeit, eine Rechnung wird natürlich erstellt.

Über Michael Bergler 687 Artikel
Mein Name ist Michael Bergler ich stamme aus Sachsen und habe seit 10 Jahren die Leidenschaft mich mit HTML, PHP, Bildbearbeitung und Perl zu beschäftigen. Seit 2011 lebe ich in Chemnitz und arbeite als Selbständiger in dem Bereich Informationstechnologie (IT), Büroservice und Telefonmarketing. In meinem Blog, online seit Dezember 2010, geht es um die Ausbildung zum IT-Systemkaufmann, Games und alles rund um den PC. Von daher lag es nah eine Umschulung 2006 – 2009 in dem Beruf IT-Systemkaufmann zu absolvieren, welche ich dann auch im Januar 2009 erfolgreich abgeschlossen habe. Ich bin in Leipzig geboren und in der Umgebung von Dresden aufgewachsen.

Ersten Kommentar schreiben

Kommentar verfassen