Beitrags-Thumbnails werden jeden Tag beliebter. Viele Magazin-Themes verknüpfen ein Bild mit einem bestimmten Beitrag, das sie später entweder auf der Homepage oder auf der Beitragsseite anzeigen. Wir zeigen ein Thumbnail mit unseren Beiträgen sowohl auf der Beitragsseite als auch auf der Kategorie-Seite an. In älteren Versionen wurde diese Funktionalität durch die Verwendung der Custom-Field-Methode erreicht, die nicht sehr benutzerfreundlich war. Dank der WordPress Core-Entwickler und vieler bemerkenswerter Funktionen in WordPress 2.9 wurde diese Funktion auch in den Core aufgenommen.
Simply watch the video or read the tutorial below ![]()
Video
Leitfaden für Anfänger
Sie sehen eine Option wie diese in der Seitenleiste Ihres Beitrags-Schreibfeldes im WordPress-Dashboard.
![]()
Klicken Sie auf den Link, und Sie werden zu einer Seite zum Hochladen von Bildern weitergeleitet. Laden Sie das Bild hoch, und Sie sehen etwas wie dies:
![]()
Klicken Sie einfach auf den Link, auf dem steht 'Als Miniaturansicht verwenden'. Sobald Sie das getan haben, sehen Sie einen Bildschirm wie diesen:
![]()
Der obige Bildschirm bedeutet, dass Sie fertig sind. Klicken Sie einfach auf Veröffentlichen und das Bild wird auf Ihrer Website angezeigt.
Entwicklerhandbuch
Auch wenn diese Funktionalität in den Kern integriert ist, wird nicht jeder Benutzer diese Option in der Seitenleiste seines Beitragsbearbeitungsfeldes sehen. Dies ist eine dieser Funktionen, die nur aktiviert werden kann, wenn das Theme sie unterstützt. Ältere kostenlose Themes unterstützen sie möglicherweise nicht, daher müssten Sie den Entwickler bitten, sie zu aktualisieren, oder Sie können es selbst tun, indem Sie diesem Tutorial folgen.
Zuerst müssen Sie Ihre functions.php-Datei im Ordner Ihres Themes öffnen und den folgenden Code einfügen:
add_theme_support( 'post-thumbnails' );
Dieser Code ermöglicht die Theme-Unterstützung für Beiträge und Seiten. Sie sehen also eine Option in Ihrem Dashboard. Aber es wird nicht in Ihren Themes angezeigt, da wir den Code noch nicht im Theme hinzugefügt haben.
Sie können das Thumbnail überall innerhalb von der Schleife mit diesem Code anzeigen:
<?php the_post_thumbnail(); ?>
Das war die Grundfunktion, aber wenn Sie fortgeschrittener werden möchten, z. B. die Größe des Beitrags-Thumbnails festlegen, müssen Sie nur Ihre functions.php-Datei öffnen und den Code wie folgt einfügen:
add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 50, 50, true );
Die Abmessungen werden in dieser Reihenfolge festgelegt: Breite x Höhe und dies sind Pixel.
Sie können auch zusätzliche Bildgrößen für Ihr Beitragsbild hinzufügen, indem Sie diese Zeile hinzufügen:
add_image_size( 'single-post-thumbnail', 590, 180 ); // Permalink thumbnail size
Sie können später spezifische Miniaturansichtgrößen in Ihrer Beitrags-Schleife wie folgt aufrufen:
<?php the_post_thumbnail('single-post-thumbnail'); ?>
Dies ist eine vereinfachte Version der vollen Funktionalität dieser Funktion. Wir haben versucht, es einfach zu halten, damit jeder es nachvollziehen kann. Wenn Sie mehr Informationen zu dieser Funktionalität wünschen, schauen Sie hier:

Chrissy
Ist das mit Genesis Child Themes notwendig? Sie scheinen bereits ein Beitragsbild für ihre Beiträge zu haben. Danke
Redaktion
Nein, das ist mit Genesis-Themes nicht notwendig.
Admin
Divya
Hallo,
In meinem Theme gibt es keine loop.php, wo muss ich dann bearbeiten?
Danke im Voraus
Redaktion
Die Schleife kann in Ihrer index.php, single.php, archive.php und anderen Dateien sein.
Admin
A. Suriel
Ich habe das Widget ausprobiert und es funktioniert gut. Danke für den Tipp.
Kathleen Smitheram
Ich habe das versucht und glaube, ich habe meine Website kaputt gemacht. Ich bekomme jetzt diese Fehlermeldung
Parse error: syntax error, unexpected ‘”‘ in /home/content/21/10729521/html/wp-content/themes/desk-mess-mirrored/functions.php on line 642
und ich komme nicht in mein Dashboard. Ich bin neu im Self-Hosting und habe keine Ahnung, wie ich das beheben kann. HILFE!
Redaktion
Bitte lesen Sie diesen Artikel:
https://www.wpbeginner.com/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/
Wir glauben, dass Sie einen Fehler beim korrekten Einfügen des Codes gemacht haben.
Admin
Nik
Tolles Tutorial!
Kurze Frage:
Sie sagten: Wenn Sie „als Thumbnail verwenden“ nicht sehen, müssen Sie möglicherweise in die PHP-Datei gehen, da das Theme ein älteres Theme ist.
Wo würde ich im neuen WordPress-Layout nachsehen, ob "als Miniaturansicht verwenden" in meinem Theme enthalten ist?
Hier ist ein Bild, das erklärt, was ich mit "neues WordPress-Layout" meine.
http://thereselawlor303.files.wordpress.com/2012/12/newpost5.jpg?w=1024&h=621
Ich hoffe, das macht Sinn.
Danke!
Redaktion
Wenn Sie das Beitragsbild neben Ihrem Titel auf Ihrer Website sehen können, dann unterstützt Ihr Theme Miniaturansichten.
Admin
Nik
Verstanden. Danke!
Drew
Hallo,
Danke für diesen Beitrag, er hat mir sehr geholfen!
Frage, wie zeige ich jetzt auch das Beitragsbild (in einer anderen Größe) nur innerhalb des eigentlichen Beitrags an (nicht in der Schleife)?
Thanks
Redaktion
Sie können einfach den Button "Beitrag einfügen" für das Bild verwenden.
Admin
Mimo
Huch, mein obiges Beispiel ist fehlgeschlagen.
z.B. i mg src=\"<?p hp the_p ost_thumbnail (); />"
Mimo
Ignorieren Sie meine Kommentare. Ich habe herausgefunden, warum Sie sie nicht in img- und Anker-Tags einschließen möchten :D.
Danke für den Beitrag
Canada Goose Jacken
Schreiben Sie weiter, inspirieren Sie weiter, kreieren Sie weiter. Mir gefällt die Idee und die Website ist recht einfach zu bedienen. Ich wünschte mir, sie würden mehr als nur die Top 20 Websites in diesem Bereich überprüfen. Das Web ist groß.
Canada Goose Jacken
Schreiben Sie weiter, inspirieren Sie weiter, kreieren Sie weiter. Mir gefällt die Idee und die Website ist recht einfach zu bedienen. Ich wünschte mir, sie würden mehr als nur die Top 20 Websites in diesem Bereich überprüfen. Das Web ist groß.
mbtshoesmbts
Danke für die Veröffentlichung dieser Informationen. Ich möchte Sie nur wissen lassen, dass ich Ihre Seite gerade besucht habe und sie sehr interessant und informativ finde. Ich kann es kaum erwarten, viele Ihrer Beiträge zu lesen.
Speeltjezoeken
Danke, dieser Beitrag hat mir geholfen, wieder auf die Beine zu kommen.
lakkolmahendra
Vielen Dank für die wunderbaren Informationen. Es ist eine einfache Methode, Thumbnails auf Ihrer Homepage hinzuzufügen. Ich werde es heute für meine Seite ausprobieren.
LukeSwenson
Ich arbeite mit WordPress Version 3.2.1. Mir ist aufgefallen, dass das Modul in der Admin-Oberfläche „Featured Image“ statt „Post Thumbnail“ heißt.
Außerdem erhalte ich die folgende Fehlermeldung, wenn ich versuche, ein Bild im Adminbereich hinzuzufügen:
Warnung: Kann keine Header-Informationen ändern – Header wurden bereits gesendet von (Ausgabe gestartet in /——–/—-/——/——-/wp-content/themes/html5/functions.php:58) in /Applications/MAMP/htdocs/justine/wp-admin/async-upload.php in Zeile 2648
SagivHaalush
@wpbeginner Hey
VERY(!) helpful post, However I got to the exact same problem after adding the 2 lines(at the bottom…). When I put them at the beginning, nothing happens…
Can you please be more specific as for the placement in the loop(Which/where)? Thanks
birdhammer
Hallo, ich habe gerade versucht, den obigen Code einzugeben, indem ich den Anweisungen im Video gefolgt bin, aber als ich ihn aktualisiert habe, erhielt ich einen Parse-Fehler. Ich kann mich nicht einmal in mein Dashboard einloggen. Ich fühle mich wie ein Idiot!
Ich benutze WordPress mit dem Modularity Lite Theme und meine Website ist birdhammer.com.
Können Sie mir bitte helfen?
wpbeginner
Die Platzierung des Codes in Ihrer functions.php-Datei verursacht wahrscheinlich die Fehler. Verwenden Sie ein Theme-Framework? Fügen Sie es ganz unten ein??
Casey Dennison
Meins funktioniert überhaupt nicht, ich bekomme ständig Fehler in PHP und es ist richtig geschrieben. Ich weiß nicht, was kaputt ist, es zeigt immer den Funktionscode ganz oben in meinem WP-Dashboard??? Das ist seltsam
davede
@wpbeginner Ah, danke, ich habe das Problem gelöst. Details hier: (nun, anscheinend kann ich keine URL einfügen). Das ist Mist.
wpbeginner
@davede Sie müssten den Thumbnail-Code auch in Ihrer single.php-Datei hinzufügen.
davede
Gute Arbeit. Danke.
Ich habe Schwierigkeiten, dass die Miniaturansicht nur im Auszug und nicht auf der Beitragsseite angezeigt wird.
Irgendwelche Ideen?
kevin.m.kwok
@wpbeginner Hat perfekt funktioniert, vielen Dank!
wpbeginner
@kevin.m.kwok Ja, das klingt nach einem CSS-Problem. Ihre Bild-CSS-Klasse muss die Eigenschaft float: left haben.
kevin.m.kwok
Hallo, tolle Anleitung. Alles funktioniert, nur ich bekomme den Thumbnail nicht "links" von meinem Beitrag auf meiner Homepage. Er geht immer über meinen Beitrag, auch wenn ich links in den Thumbnail-Optionen auswähle. Irgendwelche Ideen?
kevin.m.kwok
Hallo,
Peter Wolff
Hallo WP Beginner.
Tolles WP-Tutorial von der Redaktion oben!
Ich habe eine schnelle Frage zu WP-Thumbnail-Galerie-Seitenfotos. Ich habe versucht, einfachen Custom Field PHP-Code zu meiner Category.php-Vorlage hinzuzufügen, um unter jedem Miniaturbild einen kleinen Textunterschriftentitel hinzuzufügen. Sehr frustrierend... Jedenfalls habe ich unten die Thumbnail-Schleife von Category.php angehängt und wollte fragen, ob Sie mir helfen können, einen Custom Field PHP-Code (Feld namens „thumb_tag“) in diese Schleife zu schreiben. Hier ist der Code:
ID, ‘main_image’, true); ?>
<a href="” ><img src="/resize.php?w=162&h=105&file=” alt=”” title=”” width=’162′ height=’105′ />
Vielen Dank!
Pete
Redaktion
Warum dafür ein benutzerdefiniertes Feld verwenden? WordPress hat das standardmäßig eingebaut.
https://www.wpbeginner.com/wp-tutorials/how-to-display-wordpress-post-thumbnails-with-captions/
Admin
Ankit
Danke für das tolle Tutorial. Es ist die einfachste und einzigartigste Methode, ein Thumbnail auf Ihrer Homepage hinzuzufügen. Es funktioniert auf meiner Website.
shivam
Ich bin neu bei WordPress und kenne mich nicht gut mit Programmierung aus. Mir hat Ihr Artikel gefallen. Können Sie mir sagen, an welcher genauen Stelle wir diesen Code platzieren müssen? Zum Beispiel, wenn functions.php eine Datei ist, die wir bearbeiten müssen, an welcher Stelle müssen wir diesen Code hinzufügen? Gibt es dafür eine Demo?
Redaktion
Verschiedene Themes haben unterschiedliche Codes in der functions-Datei. Sie müssen diesen Code innerhalb des php-Tags hinzufügen.
Admin
James
Danke, ich glaube, ich habe es zum Laufen gebracht. Wenn ich jedoch ein Thumbnail hinzufüge, wird es automatisch oben in meinem Beitrag hinzugefügt, obwohl der Beitrag bereits ein Bild enthält.
mark
Tolles Tutorial – Allerdings, und ich finde diese Information nirgends – ABER, ich möchte das Thumbnail zum Beitrags-Editor-Bildschirm hinzufügen, damit meine Autoren sehen können, wie es im Beitrag inline aussehen würde, bevor sie veröffentlichen. Wo könnte ich das tun? Vielen Dank im Voraus.
Redaktion
Sie sehen das Vorschaubild, sobald Sie es hochladen. Es gibt jedoch keine Live-Vorschau auf dem Admin-Bildschirm. Ihr Autor kann einfach auf Vorschau klicken und den Beitrag in einem neuen Tab sehen <<
Admin
elizabeth
Hallo
Vielen Dank für die Informationen. Ich habe die Schritte in meinem Theme befolgt, aber meine Bilder werden immer noch nicht im Bildfeld angezeigt... sie sehen auf meiner Homepage wie defekte Dateien aus. Wenn ich darauf klicke, erscheinen sie. Wie kann ich sie auf der Homepage sichtbar machen? Danke
Redaktion
Solange the_post_thumbnail(); innerhalb der Schleife auf der Homepage steht, sollte es einwandfrei funktionieren.
Admin
Marmelade
danke für deine Hilfe! Ich hasse Plugins, daher verwende ich lieber Vorlagenfunktionen!
janine
Danke für den tollen Beitrag – speziell zu add_theme_support( ‘post-thumbnails’ ); – Es hat mit dem Wootheme, das ich gerade bearbeite, super funktioniert.
saBEE
Vielen Dank für die großartigen Informationen.
Jeder meiner Beiträge hat ein Foto. Ich versuche, dass das Foto jedes Beitrags als Miniaturansicht im RSS-Feed angezeigt wird. Funktioniert die obige Methode dafür?
Redaktion
Nein, Sie müssen diese Methode in Verbindung mit dieser Methode verwenden:
https://www.wpbeginner.com/wp-tutorials/how-to-add-post-thumbnail-to-your-wordpress-rss-feeds/
Admin
sabee
Vielen Dank für Ihre schnelle Antwort.
Ich bin etwas verwirrt, da das von mir verwendete Theme, AutoFocus+, auch das Thematic-Theme benötigt. Welche functions.php-Datei muss bearbeitet werden? Oder müssen beide bearbeitet werden?
Frage mich auch, wo ich den Code einfügen soll?
Bernard
Ich habe die Schritte in diesem Tutorial durchlaufen, aber aus irgendeinem Grund erhalte ich jedes Mal, wenn ich versuche, ein Bild aus der Galerieoption auszuwählen, die folgende Fehlermeldung:
Fatal error: Call to undefined function: get_post_thumbnail_id() in /wp-admin/includes/media.php on line 1292
Kann mir jemand helfen, das zu klären?
Danke
Bernard
darren
schneidet dies das Bild tatsächlich beim Hochladen zu? Oder zeigt es es nur in der entsprechenden Höhe und Breite an, wenn es auf der Seite aufgerufen wird? Ich frage, weil wir unseren Feed von unserem Blog auf eine Nicht-WP-Seite ziehen und darauf verlinken, aber gerne auf die Thumbnails verweisen möchten. Es ist eine ASP-Seite, daher habe ich nicht den Luxus der nativen Bildbearbeitung von PHP
Redaktion
Es wird das Bild verkleinert, nicht zugeschnitten.
Admin
Zara
Danke euch, ihr seid unglaublich!
Ich liebe euch <3
Helen
Hallo
Wir haben diesen Code in den Theme-Funktionen (er kam mit dem Theme-Skin). Das Theme hat einen Bildschieberegler, der die Funktion 'post thumbnail' verwendet. Er wird jedoch nicht im Admin angezeigt, sodass wir den Schieberegler nicht zum Laufen bringen können;
<?php
Hilfe : ) Danke
Redaktion
Helen,
Wir sehen den PHP-Code nicht. Können Sie Ihren PHP-Code bitte kodieren, bevor Sie ihn in die Kommentare einfügen? Oder Sie können uns eine E-Mail über unser Kontaktformular senden.
Admin
Ami
Funktioniert super!! Nur eine Frage... wie kann ich einen Link hinzufügen oder einen Link darum legen
so dass, wenn jemand auf den Link klickt, ein Lightbox mit der Originalgröße geöffnet wird.
Nur zur Klarstellung.
Im Moment habe ich in functions.php
add_image_size(‘my-custom-image’, 640,9999); damit das Bild im Beitrag 640 breit ist, wird es dann mit dem Originalbild verknüpft, das z.B. 1000px mal 500px groß ist.
Ich habe Folgendes gefunden: http://polymathworkshop.com/shoptalk/2010/03/19/get-the_post_thumbnail-direct-path-for-wordpress/, was bis zu einem gewissen Grad funktioniert, aber das Thumbnail im Lightbox öffnet.
Redaktion
Der einzige Weg, es zum Laufen zu bringen, ist, auf den ursprünglichen Anhang des Thumbnails zu verlinken.
Admin
Eduardo Antunes
Cool!
Zum Erinnern:
> in functions.php einfügen
add_theme_support(‘post-thumbnails’);
set_post_thumbnail_size(70, 70, true);
> in der Schleife hinzufügen:
php the_post_thumbnail();
Ricky@twitter apps
Nun, ich habe nach demselben gesucht. Ich habe eine schnelle Frage an dich. Gibt es eine Möglichkeit, ein Standardbild der Kategorie als Miniaturansicht anzuzeigen? Oder gibt es eine Möglichkeit, das erste Bild des Beitrags abzurufen und es als Miniaturansicht für verwandte Beiträge zu verwenden.
Ich habe die obige Technik auf meinem Blog implementiert, aber das Hauptproblem ist, dass nicht alle meine Beiträge eine Miniaturansicht aktiviert haben. Das macht die Situation schrecklich, da ich alle Beiträge mit einer Miniaturansicht aktualisieren muss.
Gibt es eine Möglichkeit, das erste Bild als Standard-Miniaturansicht mit der obigen Technik zu verwenden?
Redaktion
Ja, Sie können das erste Bild des Beitrags mit Justin Tadlocks Get Image Plugin abrufen. Sie können auch eine Wenn-Dann-Variable hinzufügen, indem Sie auf is_post_thumbnail prüfen.
Admin
Jal
Redakteure,
Verwenden Sie den Beitragseditor von WordPress oder eine Offline-Blog-Publishing-Software? Ich benutze Live Writer, das einige gute Optionen hat, aber manchmal denke ich über einen Wechsel zum Beitragseditor von WP nach. Können Sie dazu bitte einige Ansichten teilen?
Danke
Antonio
Wow thanks I’ve always wondered how to do this but never really had the patience to look for a solution. I didn’t know it was this simple. WOOOOT! Thanks.
Bob
Wie fügt man Lightbox oder Thickbox (Beispiel rel=“lightbox“ oder class=”thickbox“) zum Thumbnail hinzu?
Redaktion
Sie müssen jQuery verwenden und die Klasse zum Thumbnail hinzufügen. Um die Klasse hinzuzufügen, würden Sie hinzufügen: array(‘class’ => ‘lightbox’)
Admin
Trisha
Haben Sie eine Idee, ob das für Seiten-Miniaturansichten funktioniert? Ich versuche, Unterseiten mit diesem Code. aufzulisten (der zweite, im 'post format'. Habe alle Instanzen von 'content' durch 'excerpt' ersetzt und Andrew Oz's Excerpt Editor verwendet, der wirklich cool ist.
Wenn ich versuche, den Code für das Thumbnail einzufügen, wird er nicht angezeigt.
Haben Sie eine Idee, was ich falsch machen könnte?
Redaktion
Dieser Code funktioniert nur innerhalb der Schleife. Wenn Sie ihn außerhalb der Schleife anzeigen möchten, müssten Sie eine globale wp_query-Funktion ausführen.
Admin
noonoob
Vielen Dank, es funktioniert. Perfekt
Jeremy
Wie bekomme ich den Thumb außerhalb der Schleife?
Redaktion
Wir werden bald einen weiteren Artikel dazu schreiben. Danke für den Vorschlag. Wenn Sie wirklich damit beginnen möchten, werden Sie die query_post-Funktion verwenden.
Admin
Chad
Ich freue mich auf Ihren Beitrag über die Anzeige von Beitragsbildern außerhalb der Schleife. Ich habe noch kein funktionierendes Beispiel mit WP 3.0 gefunden.
Redaktion
Es würde genauso funktionieren wie hier:
https://www.wpbeginner.com/wp-themes/how-to-display-custom-fields-outside-the-loop-in-wordpress/
Walt Ribeiro
Es ist ähnlich wie in diesem Tutorial, das kein exaktes Beispiel ist. Haben Sie also Ihr eigenes Tutorial für Miniaturansichten gepostet? Ich würde gerne wissen, wie!
Cosmin
Leute, funktioniert das nur mit quadratischen Bildern?
Wie in 50px mal 50px?
Ich habe gehört, jemand erwähnte, dass nur der Höhenwert berücksichtigt wird, wenn Abmessungen angegeben werden…
(also würden 50px mal 30px nicht funktionieren)
Redaktion
Es funktioniert mit jeder Größe. Manchmal geht die Bildqualität verloren, wenn das Verhältnis nicht stimmt. Wir haben es auf der Website eines Kunden im Einsatz und es funktioniert einwandfrei.
Admin
Luke
Ich bin Anfänger und liebe, was Sie tun. Es wäre schön, sehr spezifische Anweisungen für so etwas zu bekommen. Wenn ich in Funktionen kopiere/einfüge, funktioniert es nicht.
Gedanken dazu, was ich falsch machen könnte? Vielleicht ein Beitrag über Funktionen für Anfänger?
Danke und weiter so mit der großartigen Arbeit.
Redaktion
Verwenden Sie WordPress 2.9? Wenn ja, dann gibt es keinen Weg, dass es nicht funktionieren würde. Dies ist wahrscheinlich die beste Aufschlüsselung dieses Codes.
Obwohl wir versuchen, alles so klar wie möglich zu gestalten, sind manchmal Vorkenntnisse erforderlich, um einige Aufgaben zu erledigen.
Wenn Sie möchten, dass sich einer unserer Mitarbeiter das ansieht und dies für Sie erledigt, können wir es gegen eine geringe Gebühr tun.
Admin
Chris Peterson
Tolle Tipps! Sie haben jeden einzelnen Schritt zur Installation von Beitrags-Thumbnails klar erklärt.
Cosmin
Super!
Danke Leute, perfekte Zeit, da ich an einem WordPress-Theme für einen Kunden arbeite und genau das benötige!
Now it will be sooo easy for the less-tech-savvy person that’ll write posts
Nimit kashyap
Ich würde es lieber mit einem Plugin machen.
Redaktion
Warum das? Plugins verlangsamen Ihre Website, und es ist wahrscheinlich der einfachste Weg, dies zu tun.
Admin
jeprie
Sehr schöne Artikel, wusste nicht, dass man das in WordPress machen kann.
Wie sehr können Plugins unsere WP-Seite verlangsamen? Ist das signifikant?
Redaktion
Je mehr Datenbankabfragen Ihre Website ausführt, desto langsamer lädt sie, und jedes Plugin fügt weitere Abfragen hinzu.