Möchten Sie zusätzliche Bildgrößen in WordPress erstellen?
Standardmäßig erstellt WordPress automatisch mehrere Kopien von Bild-Uploads in verschiedenen Größen. Darüber hinaus können WordPress-Themes und -Plugins auch ihre eigenen Bildgrößen erstellen.
In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach zusätzliche Bildgrößen in WordPress erstellen und auf Ihrer Website verwenden.
Warum zusätzliche Bildgrößen in WordPress erstellen?
Normalerweise verarbeiten alle gängigen WordPress-Themes und -Plugins Bildgrößen sehr gut. Zum Beispiel kann Ihr WordPress-Theme zusätzliche Größen erstellen, die als Miniaturansichten auf Archivseiten verwendet werden können.
Manchmal entsprechen diese Bildgrößen jedoch nicht Ihren eigenen Anforderungen. Möglicherweise möchten Sie eine andere Bildgröße in einem Child-Theme oder einem Post-Grid-Layout verwenden.
Sie können dies tun, indem Sie in WordPress zusätzliche Bildgrößen erstellen und diese Größen dann aufrufen, wenn Sie sie benötigen.
Lassen Sie uns jedoch einen Blick darauf werfen, wie Sie in WordPress zusätzliche Bildgrößen erstellen.
Registrieren zusätzlicher Bildgrößen für Ihr Thema
Die meisten WordPress-Themes, einschließlich aller Top-WordPress-Themes, unterstützen standardmäßig die Funktion Miniaturansichten (vorgestelltes Bild).
Wenn Sie jedoch ein benutzerdefiniertes WordPress-Theme erstellen, müssen Sie die Unterstützung für Beitrags-Miniaturansichten hinzufügen, indem Sie der Datei functions.php Ihres Themes den folgenden Code hinzufügen.
add_theme_support( 'post-thumbnails' );
Sobald Sie die Unterstützung für Post-Thumbnails aktiviert haben, können Sie jetzt die Funktionalität zum Registrieren zusätzlicher Bildgrößen mithilfe der Funktion add_image_size() verwenden.
Die Funktion add_image_size wird im folgenden Format verwendet:
add_image_size( 'name-of-size', width, height, crop mode );
Beispielcode kann wie folgt aussehen:
add_image_size( 'sidebar-thumb', 120, 120, true ); // Hard Crop Mode add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode
Wenn Sie jetzt bemerken, haben wir drei verschiedene Arten von Bildgrößen angegeben. Jeder hat verschiedene Modi wie hartes Zuschneiden, weiches Zuschneiden und unbegrenzte Höhe.
Lassen Sie uns jedes Beispiel behandeln und wie Sie es in Ihren eigenen Projekten verwenden können.
1. Hard-Crop-Modus
Wie Sie vielleicht bemerken, wird nach der Höhe ein „echter“ Wert hinzugefügt. Dies weist WordPress an, das Bild genau auf die von uns definierte Größe zuzuschneiden (in diesem Fall 120 x 120 Pixel).
Diese Methode wird verwendet, um sicherzustellen, dass alles genau verhältnismäßig ist. Diese Funktion schneidet das Bild je nach Größe automatisch entweder von den Seiten oder von oben und unten zu.
2. Soft-Crop-Modus
Standardmäßig ist der Soft-Cropping-Modus aktiviert, weshalb Sie nach der Höhe keinen zusätzlichen Wert sehen. Diese Methode ändert die Größe des Bildes proportional, ohne es zu verzerren. Sie erhalten also möglicherweise nicht die gewünschten Abmessungen. Normalerweise entspricht es der Breitenabmessung und die Höhen sind je nach Proportion jedes Bildes unterschiedlich. Eine Beispielanzeige würde so aussehen:
Unbegrenzter Höhenmodus
Es gibt Zeiten, in denen Sie super lange Bilder haben, die Sie in Ihrem Design verwenden möchten, aber Sie möchten sicherstellen, dass die Breite begrenzt ist. Infografiken sind beispielsweise in der Regel sehr lang und in der Regel breiter als die Inhaltsbreite.
In diesem Modus können Sie eine Breite angeben, die Ihr Design nicht unterbricht, während die Höhe unbegrenzt bleibt.
Anzeige zusätzlicher Bildgrößen in Ihrem WordPress-Theme
Nachdem Sie nun die Funktionalität für die gewünschten Bildgrößen hinzugefügt haben, können Sie sich die Anzeige in Ihrem WordPress-Theme ansehen. Öffnen Sie die Designdatei, in der Sie das Bild anzeigen möchten, und fügen Sie den folgenden Code ein:
<?php the_post_thumbnail( 'your-specified-image-size' ); ?>
Hinweis: Dieses Code-Bit muss in die Post-Schleife eingefügt werden.
Das ist alles, was Sie wirklich tun müssen, um die zusätzlichen Bildgrößen in Ihrem WordPress-Theme anzuzeigen. Sie sollten es wahrscheinlich mit dem Styling umwickeln, das Ihren Bedürfnissen entspricht.
Regenerieren zusätzlicher Bildgrößen
Wenn Sie dies nicht auf einer brandneuen Site tun, müssen Sie wahrscheinlich Thumbnails neu generieren.
Die Funktion add_image_size() generiert nur die Größen ab dem Zeitpunkt, an dem sie zum Thema hinzugefügt wurde. Das bedeutet, dass Post-Bilder, die vor der Aufnahme dieser Funktion hinzugefügt wurden, keine neuen Größen mehr haben.
Um dies zu beheben, müssen Sie die neue Bildgröße für ältere Bilder neu generieren. Dies wird durch das Plugin namens . leicht gemacht Miniaturansichten regenerieren. Sobald Sie das Plugin installiert und aktiviert haben, wird eine neue Option unter dem Menü hinzugefügt: Tools » Miniaturansichten regenerieren
Sie sehen die Option, Miniaturansichten für alle Bilder oder nur die vorgestellten Bilder neu zu generieren. Wir empfehlen, alle Bilder neu zu generieren, um unerwartetes Verhalten oder beschädigte Bilder zu vermeiden.
Weitere Informationen finden Sie in unserem Artikel zum einfachen Regenerieren neuer Bildgrößen in WordPress.
Aktivieren zusätzlicher Bildgrößen für Ihren Beitragsinhalt
Obwohl Sie in Ihrem Theme Bildgrößen aktiviert haben, ist die Verwendung nur auf Ihr Theme beschränkt, was keinen Sinn macht.
Alle Bildgrößen werden unabhängig davon generiert. Warum also nicht sie dem Autor des Beitrags zur Verwendung innerhalb des Beitragsinhalts zur Verfügung stellen.
Sie können dies tun, indem Sie der Funktionsdatei Ihres Themes den folgenden Code hinzufügen.
function wpb_custom_image_sizes( $size_names ) {
$new_sizes = array(
'homepage-thumb' => 'Homepage Thumbmail',
'singlepost-thumb' => 'Infographic Single Post'
);
return array_merge( $size_names, $new_sizes );
}
add_filter( 'image_size_names_choose', 'wpb_custom_image_sizes' );
Vergessen Sie nicht, Ihre Änderungen zu speichern, nachdem Sie den Code hinzugefügt haben.
Sie können jetzt ein Bild in einen WordPress-Beitrag oder eine WordPress-Seite hochladen. In den Bildblockeinstellungen sehen Sie Ihre benutzerdefinierten Bildgrößen unter der Option „Bildgröße“.
Sie und andere Autoren, die an Ihrer Website arbeiten, können diese Größenoptionen jetzt beim Hinzufügen von Bildern zu Beiträgen und Seiten auswählen.
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie zusätzliche Bildgrößen in WordPress erstellen. Vielleicht möchten Sie auch unseren Artikel über die besten Bildkomprimierungs-Plugins für WordPress und unseren WordPress-Leistungsleitfaden lesen, um die Geschwindigkeit Ihrer Website zu verbessern.
