Sie sind vielleicht schon darüber gestolpert, dass es als Theme-Entwickler Standard ist, Ihr Theme mit Blick auf die Web-Performance zu bauen. Das bedeutet, dass Sie sicherstellen müssen, dass die in Ihrem Theme ausgegebenen Bilder nicht die volle Größe haben, wenn sie mehr als 100 Kilobyte groß sind.
Ein weiterer Grund für die Verwendung der Funktion wp_get_attachment_image() bei der Ausgabe von Bildern ist die Nutzung der WordPress-Funktionalität für das HTML-Bildattribut srcset.
Ein weiterer Grund für die Verwendung der Funktion wp_get_attachment_image() ist die Ausgabe von Blog-Beiträgen mit Featured Images. Als Themenentwickler sollten Sie sicherstellen, dass Sie entweder: (a) eine der Standard-Miniaturgrößen für Beiträge oder (b) eine eigene benutzerdefinierte Größe für Beitragsminiaturen.
Es gibt Fälle, in denen Sie keine benutzerdefinierte Größe für Beitragsminiaturen verwenden müssen. Sie können stattdessen eine Standardgröße für Post-Thumbnails verwenden, die für Ihre Anforderungen perfekt geeignet ist.
Die folgenden Standard-Miniaturansichtsgrößen stehen Ihnen zur Verfügung:
-
thumbnail(verwendet die Größe 150px × 150px) -
medium(verwendet die Größe 300px × 300px) -
medium_large(verwendet die Größe 768px × 0px) -
large(verwendet die Größe 1024px × 1024px)
In diesen Fällen können Sie einfach angeben, ob Sie eine ähnliche Größe für eine dieser Standard-Miniaturansichtsgrößen verwenden möchten. Alles, was Sie tun müssen, ist, eine der oben genannten Zeichenketten im $size-Parameter der Funktion the_post_thumbnail() zu verwenden.
Sie werden feststellen, dass diese Standard-Miniaturansichtsgrößen fast alle quadratisch beschnittene Bilder sind. Dies ist wahrscheinlich auf den maximalen Platz zurückzuführen, den ein Bild einnehmen kann – ein Quadrat. Um den Platz so gut wie möglich zu nutzen, wurde beschlossen, diese Standardgrößen als quadratische Bilder auszugeben.
Wann sollten Sie eine benutzerdefinierte Größe für die Miniaturansichten verwenden
Es gibt jedoch Fälle, in denen Sie ein Bild ausgeben müssen, das nicht quadratisch ist. Nehmen Sie zum Beispiel an, dass Sie mit der Funktion the_post_thumbnail() ein Featured Image über Ihrem Blog-Einzelartikel hinzufügen müssen.
Sie können den folgenden Code verwenden, der ein Featured Image Ihres Artikels mit der Größe 1024px × 768px ausgibt:
add_image_size( 'single-feature', 1024, 768, true );
Und schnell erkennen, was das in Laiensprache bedeutet:
- add_image_size() – erstellt eine benutzerdefinierte Post-Thumbnail-Größe
- ’single-feature‘ – Parameter
$name, nur ein Name für die benutzerdefinierte Post-Thumbnail-Größe - 1024 – Parameter
$width, die Breite der benutzerdefinierten Post-Thumbnail-Größe - 768 – Parameter
$height, die Höhe der benutzerdefinierten Post-Thumbnail-Größe - true – Parameter
$crop, bedeutet, ob das Bild (a) hart beschnitten oder (b) auf die benutzerdefinierte Post-Thumbnail-Größe skaliert werden soll. Weitere Informationen in den WP Dev Docs
Als zusätzliche Information: Im Beispiel wurden die angegebene Breite und Höhe gewählt (1024 × 768), da dies die üblichen Größen sind, die für vorgestellte Bilder verwendet werden. Dies bedeutet jedoch nicht, dass Sie keine andere Größe verwenden können. Stellen Sie sicher, dass Sie sehen, was am besten zu Ihrem Theme-Design passt, und verwenden Sie das.
Wie man benutzerdefinierte Post-Thumbnails aktualisiert
Wenn Sie die neuen Bildgrößen für Ihre WordPress-Bilder testen, werden Sie feststellen, dass Sie möglicherweise Probleme haben, die Breite und Höhe zu aktualisieren, ohne die $name Größe der benutzerdefinierten Post-Thumbnails zu ändern.
Angenommen, Sie haben die alte Größe:
add_image_size( 'single-feature', 1024, 768, true );
Aber jetzt müssen Sie die Größe dieser „Single-Feature“-Miniaturansicht auf die folgende Größe aktualisieren:
add_image_size( 'single-feature', 1366, 768, true );
Sie sehen, dass die Änderung in der Breite von 1024 auf 1366 erfolgte. Aber wenn Sie die Vorlage aktualisieren, in der diese Größe angezeigt werden soll, wird das Bild immer noch mit der Breite von 1024 angezeigt. Wie kann das behoben werden?
Um das zu beheben, müssen Sie die Miniaturansicht neu generieren.
Stellen Sie also zunächst sicher, dass Sie die Breite und Höhe der Miniaturansicht aktualisiert haben, und installieren Sie dann das Plugin Regenerate Thumbnails. Folgen Sie den Anweisungen des Plugins und Sie werden dann die Thumbnail-Größen erfolgreich regeneriert haben.
Die Regenerierung all Ihrer Bilder kann einige Zeit in Anspruch nehmen, besonders wenn Ihre Website viele Bilder in Ihrer Mediathek hat.
Wo platzieren Sie die add_image_size Funktion
Die add_image_size() Funktion wird nicht funktionieren, wenn Sie sie nicht richtig innerhalb des WordPress after_setup_theme Action Hooks platzieren. Das bedeutet, dass der folgende Beispielcode:
add_image_size( 'archive-featured', 792, 446, true );
im folgenden Action Hook in der functions.php-Datei deines Themes unter:
function ms_setup() {add_image_size( 'archive-featured', 792, 446, true );}add_action( 'after_setup_theme', 'ms_setup' );
Adding add_image_size in the Underscores Theme
Ein sehr beliebtes Einsteigertheme namens Underscores Theme oder _s Theme hat einen guten Platz, um deine add_image_size()-Funktionen hinzuzufügen.
Die Funktion add_image_size() für die benutzerdefinierte Größe der Post-Thumbnails kann unter der Zeile add_theme_support( 'post-thumbnails' ); in der Datei functions.php des Underscores-Themas hinzugefügt werden.
Der Grund, warum du die Funktion add_image_size() hier einfügen kannst, ist, dass sie bereits in dem bereits erwähnten after_setup_theme Action Hook enthalten ist.
Add Image Size Function Snippet for WordPress Themes
Wenn Sie möchten, können Sie das unten stehende Snippet für die Funktion add_image_size im Underscores-Theme für Ihre zukünftige Referenz kopieren:
/* * Custom post thumbnail sizes for use across the theme. * * @link https://developer.wordpress.org/reference/functions/add_image_size/ */add_image_size( $name, $width, $height, $crop );
Hinweis: Bitte stellen Sie sicher, dass Sie die im Snippet verwendeten Parameter definieren, um sicherzustellen, dass Sie keine PHP-Warnungsfehler in Ihrem Thema erhalten. Das obige Snippet dient als Vorlage, die Sie in Ihre Theme-Funktionen einfügen können.
Abschluss
Danke, dass Sie diesen Artikel gelesen haben! Bitte lassen Sie mich wissen, was Sie denken und wie Sie die Größe der Miniaturansichten für benutzerdefinierte Beiträge einrichten.
Wenn Ihnen dieser Artikel gefallen hat, möchten Sie vielleicht die Theme-Fehler bei der Einrichtung von benutzerdefinierten Beitragstypen kennenlernen. Erstens, registrieren Sie keine benutzerdefinierten Beitragstypen in Ihrem Thema!
