Vertrauenswürdige WordPress-Tutorials, wenn Sie sie am dringendsten benötigen.
Anfängerleitfaden für WordPress
WPB Cup
25 Millionen+
Websites, die unsere Plugins verwenden
16+
Jahre WordPress-Erfahrung
3000+
WordPress-Tutorials von Experten

Wie man Beitrags-Thumbnails in WordPress hinzufügt

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.

Beitrags-Thumbnails in WordPress

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:

Beitrags-Thumbnails in WordPress

Klicken Sie einfach auf den Link, auf dem steht 'Als Miniaturansicht verwenden'. Sobald Sie das getan haben, sehen Sie einen Bildschirm wie diesen:

Beitrags-Thumbnails in WordPress

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:

Mark Jaquiths Artikel über Beitragsbilder
WordPress Codex

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, wenn Sie auf einige unserer Links klicken, können wir eine Provision verdienen. Sehen Sie wie WPBeginner finanziert wird, warum das wichtig ist und wie Sie uns unterstützen können. Hier ist unser Redaktionsprozess.

Das ultimative WordPress-Toolkit

Erhalten Sie KOSTENLOSEN Zugang zu unserem Toolkit – eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Leserinteraktionen

79 CommentsLeave a Reply

  1. Ist das mit Genesis Child Themes notwendig? Sie scheinen bereits ein Beitragsbild für ihre Beiträge zu haben. Danke

  2. 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!

  3. 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!

  4. 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 :)

    • 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

  5. 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ß.

  6. 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ß.

  7. 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.

  8. 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.

  9. 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

  10. @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 :)

  11. 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?

  12. 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??

  13. 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

  14. @wpbeginner Ah, danke, ich habe das Problem gelöst. Details hier: (nun, anscheinend kann ich keine URL einfügen). Das ist Mist.

  15. Gute Arbeit. Danke.

    Ich habe Schwierigkeiten, dass die Miniaturansicht nur im Auszug und nicht auf der Beitragsseite angezeigt wird.

    Irgendwelche Ideen?

  16. @kevin.m.kwok Ja, das klingt nach einem CSS-Problem. Ihre Bild-CSS-Klasse muss die Eigenschaft float: left haben.

  17. 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?

  18. 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

  19. 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.

  20. 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?

      • 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.

  21. 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.

    • 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

  22. 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

  23. Danke für den tollen Beitrag – speziell zu add_theme_support( ‘post-thumbnails’ ); – Es hat mit dem Wootheme, das ich gerade bearbeite, super funktioniert.

  24. 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?

  25. 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

  26. 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

  27. 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

    • 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

  28. 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.

  29. 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();

  30. 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?

    • 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

  31. 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

  32. 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. :)

    • 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

  33. 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?

    • 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

  34. 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)

    • 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

  35. 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.

    • 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

  36. 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 :)

Hinterlasse eine Antwort

Vielen Dank, dass Sie einen Kommentar hinterlassen. Bitte beachten Sie, dass alle Kommentare gemäß unserer Kommentarrichtlinie moderiert werden und Ihre E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwenden Sie KEINE Schlüsselwörter im Namensfeld. Führen wir ein persönliches und bedeutungsvolles Gespräch.