Der vollständige Leitfaden für vorgestellte Miniaturansichten und Bildgrößen in WordPress

Ein Bild sagt mehr als tausend Worte - es sei denn, es wurde eine unangemessene Größenänderung vorgenommen. Okay - vielleicht ist dies eine weniger bekannte Version eines alten Sprichworts oder etwas, das ich gerade erfunden habe, aber der Punkt ist: WordPress ist sehr mächtig, wenn es um Miniaturansichten und Bildgrößen geht - Sie müssen nur wissen, wie man damit umgeht. Lesen Sie weiter für alles, was Sie über Bildgrößen in WordPress und das Verwalten von Bildern wissen müssen.

Hinweis: Dieser Beitrag ist ziemlich schwer mit PHP - nichts zu kompliziert, aber Sie sollten unseren kostenlosen PHP-Absturzkurs lesen, bevor Sie Änderungen an Ihrem Thema vornehmen.

Grundlagen zuerst

Im WordPress-Admin-Dashboard wissen Sie wahrscheinlich bereits Bescheid die Einstellungen -> Medien.

Dies sind die drei Standardbildgrößen, die WordPress aufruft: Miniaturansicht, Mittel, und groß. Die Größe der Miniaturansicht hat eine spezielle Einstellung, die genau auf die hier angegebene Größe zugeschnitten werden kann. Hierbei muss es sich nicht um eine 1: 1-Dimension handeln. Sie können sie beliebig einstellen. Die Bilder werden jedoch zentriert und beschnitten. Das bedeutet, dass jeder Teil Ihres Bildes, der nach dem Verkleinern nicht in diese Dimensionen passt, einfach ausgeschnitten wird.

Die mittlere und die große Einstellung arbeiten etwas anders, da Sie dies angeben maximal Abmessungen für Breite und Höhe, und die Bilder werden entsprechend verkleinert. Wenn das Bild zu klein ist, werden diese Bildgrößen nicht erstellt. Wenn Sie ein neues Bild hochladen, wird das Original gespeichert und kann in voller Größe in einen Beitrag eingefügt werden. Die anderen registrierten Bildgrößen werden automatisch erstellt.

Diese drei Bildgrößen sowie das Original volle Größe, Die einzigen stehen zur Verfügung, wenn Sie einen Beitrag bearbeiten und Medien einfügen. Ich setze daher die absolute Breite meines Themas für Seiten und Beiträge mit voller Breite und die Breite der typischen Inhaltsspalte als mittel ein.

Weitere Größen schaffen

Beim Bearbeiten eines Designs oder beim Erstellen von Widgets sind die drei in den Medieneinstellungen definierten Größen möglicherweise nicht ausreichend. Die lasse ich immer für den Inhalt - dann definiere ich neue Bildgrößen in Functions.php Datei wie folgt:

add_image_size ('my-thumbnail', 400, 200, true);

Für jede neue Bildgröße werden Name, Breite und Höhe benötigt und ob Bilder genau auf diese Größe zugeschnitten werden sollen (richtig oder falsch). Für strukturelle Teile eines Designs oder Widgets möchten Sie im Allgemeinen beschneiden, damit das Layout nicht beschädigt wird.

Ausgewähltes Bild

WordPress hat es uns seit Version 2.9 erlaubt, ein bestimmtes Bild als “vorgestellte bild” für einen Beitrag. Dieses Bild wird nicht in den Hauptteil des Beitrags eingefügt (es sei denn, Sie fügen es selbst ein), sondern kann strukturell im gesamten Thema verwendet werden - als Miniaturansicht neben dem Beitragstitel oder möglicherweise in der Kopfzeile, wenn Sie diesen Beitrag anzeigen. Wenn Sie ein ausgewähltes Bild nicht einschließen, erscheint es einfach faul, wie viele Themen und Widgets sich darauf verlassen. Fügen Sie dieses Snippet in functions.php ein, um Sie beim Speichern eines Beitrags daran zu erinnern, wenn Sie vergessen haben, eines zu setzen (Quelle):

 add_action ('save_post', 'wpds_check_thumbnail'); add_action ('admin_notices', 'wpds_thumbnail_error'); Funktion wpds_check_thumbnail ($ post_id) // Zu einem beliebigen benutzerdefinierten Beitragstyp wechseln if (get_post_type ($ post_id)! = 'post') return; if (! has_post_thumbnail ($ post_id)) // Setzen Sie einen Transienten, um den Benutzern eine Admin-Nachricht set_transient ("has_post_thumbnail", "no") anzuzeigen; // diese Funktion aushaken, damit sie nicht endlos wiederholt wird remove_action ('save_post', 'wpds_check_thumbnail'); // aktualisiere den Beitrag setze ihn auf draft wp_update_post (array ('ID' => $ post_id, 'post_status' => 'draft')); add_action ('save_post', 'wpds_check_thumbnail');  else delete_transient ("has_post_thumbnail");  function wpds_thumbnail_error () // prüfe, ob der Transient eingestellt ist, und zeige die Fehlermeldung if (get_transient ("has_post_thumbnail") == "no") echo "
Sie müssen Featured Image auswählen. Ihr Post ist gespeichert, kann aber nicht veröffentlicht werden.
"; delete_transient (" has_post_thumbnail ");

WordPress bietet eine praktische Funktion, um das vorgestellte Bild abzurufen und in Themen zu verwenden:

the_post_thumbnail ('my-thumbnail', array ('class' => 'my_post_thumbnail_css_class'));

Die Funktion benötigt zwei Parameter: die benannte Größe, nach der Sie suchen, und alle Attribute, die Sie übergeben möchten, wie eine benutzerdefinierte CSS-Klasse (Hinweis: Sie können das ALT-Attribut nicht überschreiben.). Wenn Sie ein wirklich altes Design ändern, müssen Sie möglicherweise auch noch Folgendes zu Ihrer functions.php hinzufügen:

add_theme_support ('post-thumbnails');

Wenn Sie stattdessen nur die tatsächliche URL des angezeigten Bildes abrufen und nicht nur den erforderlichen HTML-Code ausgeben möchten, versuchen Sie es stattdessen (Ermitteln der mittleren Bildgröße in diesem Beispiel):

$ thumbnail = wp_get_attachment_image_src (get_post_thumbnail_id (), 'medium'); echo $ thumbnail [0];

Bilder regenerieren

Jedes Mal, wenn Sie Ihre Standardbildgrößen ändern oder eine neue Größendefinition erstellen, gilt dies nur für Neu Uploads Alle Ihre vorhandenen Bilder bleiben in den Originalmaßen erhalten. Keine Angst, es gibt ein großartiges Plugin, das Ihre Posts durchläuft und diese neuen Bildgrößen für Sie regeneriert. Mit AJAX Thumbnail Rebuild können Sie auswählen, welche Größen regeneriert werden sollen, und das Archiv langsam durcharbeiten. Die Größe von Bildern, die in Posts eingefügt wurden, wird dadurch nicht geändert - diese werden am Einfügepunkt fixiert. Durch das erneute Generieren von Bildern wird die neue Größe für die Verwendung in Ihren Designs oder zukünftigen Posts verfügbar. Sie können jedoch die Größe bereits vorhandener Bilder nicht automatisch bearbeiten.

Es gibt zwei Nachteile beim Erstellen neuer Bilder. Selbst wenn die von Ihnen erstellte Bildgröße nur für das vorgestellte Bild als Teil eines Designs verwendet wird, wird eine neue Version jedes einzelnen Bildes erstellt, das Sie jemals hochgeladen haben - nicht nur das vorgestellte Bild. Dies ist eine Einschränkung von WordPress. Ein gekennzeichnetes Bild ist wie jedes andere und Sie können es nicht gezielt mit der add_image_size () Funktion. Glücklicherweise können Sie dies mit dem Thumbnail Rebuild-Plugin tatsächlich begrenzen Nur vorgestellte Bilder aus dem Archiv - aber alle zukünftigen Bild-Uploads werden von WordPress verwaltet und die neue Bildgröße wird für alles erstellt. Nun wäre ein guter Zeitpunkt, um auch den Unterschied zwischen JPG und PNG kennenzulernen. Wissen, wann welches Dateiformat verwendet werden soll: PNG vs. JPG, DOC vs. PDF, MP3 vs. FLAC. Wissen, wann welches Dateiformat verwendet wird: PNG vs. JPG. DOC vs. PDF, MP3 vs. FLAC Kennen Sie die Unterschiede zwischen JPG und PNG oder MP3 und FLAC? Wenn Sie nicht wissen, welche Dateiformate verwendet werden sollen, lassen Sie sich durch die Unterschiede führen. Lesen Sie mehr, damit Sie wissen, wie Sie in Zukunft das optimale Format verwenden.

Zweitens, auch wenn Sie eine bestimmte Größe nicht mehr verwenden, bleiben sie auf dem Server - WordPress löscht nicht verwendete Bilder nicht. Auf einer Site wie MakeUseOf mit Hunderttausenden von Bildern bedeutet dies, dass ein paar Gigabyte verschwendet werden. Bei kleineren Websites hilft das Image Cleanup-Plugin, indem es scannt und Ihnen die Option zum Löschen gibt. Größere Sites müssen jedoch einige Befehlszeilen- und Regex-Befehle kennenlernen (siehe unsere Kurzanleitung zuErste Schritte mit der Linux-Befehlszeile Erste Schritte Erste Schritte Mit der Linux-Befehlszeile Erste Schritte Erste Schritte Mit der Linux-Befehlszeile Erste Schritte Mit der Linux-Befehlszeile können Sie viele erstaunliche Dinge mit Befehlen in Linux erledigen, und es ist wirklich nicht schwer zu lernen. Weiterlesen ). Nehmen Sie immer zuerst eine vollständige Sicherung vor, nur für den Fall, dass etwas gelöscht wird, das nicht vorhanden sein sollte.

Mein Thema ändert sich nicht

Sie haben also ein Design mit Ihren neuen Bildgrößen bearbeitet und alle vorhandenen Bilder korrekt neu generiert - aber die richtige Größe wird immer noch nicht angezeigt. Wahrscheinlich haben Sie etwas CSS auf das Bild angewendet, oder DIV umgibt es. Verwenden Sie den Debug-Modus Ihres Browsers. Herausfinden von Website-Problemen mit Chrome Developer Tools oder Firebug. Herausfinden von Website-Problemen mit Chrome Developer Tools oder Firebug. Wenn Sie bisher meine jQuery-Lernprogramme befolgt haben, sind möglicherweise einige Code-Probleme aufgetreten und Sie wissen nicht, wie um sie zu reparieren Wenn Sie mit einem nicht funktionalen Code konfrontiert werden, ist es sehr… Lesen Sie mehr, um das anstößige CSS zu finden und entsprechend anzupassen. Denken Sie daran, dass Sie die Größe nur ändern können, wenn das Quellbild groß genug ist. WordPress und das generierte Miniatur-Plugin generieren keine Bilder aufgrund von Qualitätsverlust.

WordPress ist fast 11 Jahre alt. Es ist ein Beweis für seine Leistungsfähigkeit und Flexibilität, dass es eine der wenigen Web-Apps ist, die so lange am Leben erhalten wurde und nicht ersetzt wurde. Features wie Post-Thumbnails sind jetzt im Web allgegenwärtig, und WordPress hat sich stets mit den Designtrends befasst. Wohlgemerkt, Ghost sieht gut aus Wordpress Killer? Willkommen bei Ghost (und wie man es auf einem Raspberry Pi installiert) Wordpress Killer? Willkommen bei Ghost (und wie man es auf einem Raspberry Pi installiert) Lesen Sie mehr .

Probleme mit vorgestellten Bildern? Schreibe in den Kommentaren und ich werde sehen, ob ich dir helfen kann.

Erfahren Sie mehr über: Wordpress.