Wenn Sie eine benutzerdefinierte WordPress-Website erstellen, kann es sein, dass Sie eine benutzerdefinierte Bildgröße hinzufügen müssen. Das ist gar nicht so schwer, und ich zeige Ihnen, wie Sie das machen.
Es gibt jedoch einen Haken – nur durch das Hinzufügen neuer Bildgrößen lassen WordPress-Blöcke Sie nicht diese Bildgrößen in Bild, Galerie oder anderen WordPress Gutenberg-Editor-Blöcken auswählen. Daher zeige ich Ihnen heute alle Schritte, die erforderlich sind, um diese neuen Bildgrößen vollständig zu nutzen. Hier ist, was Sie lernen werden zu tun:
- wie man neue Bildgrößen in WordPress hinzufügt
- wie man Bilder in neuen Größen erzeugt
- wie man neue Bildgrößen zu WordPress-Blöcken hinzufügt
Das Beispiel, das ich Ihnen zeige, wurde dem Genesis-Beispielthema hinzugefügt. Es sollte aber mit jedem WordPress-Theme funktionieren. Lassen Sie uns mit dem ersten Schritt beginnen.
Wie man neue Bildgrößen in WordPress hinzufügt
Das Hinzufügen einer neuen Bildgröße in WordPress erfordert nur eine einzige Codezeile. Gehen Sie im WordPress-Administrationsbereich zu Darstellung >> Editor für Themendateien und öffnen Sie die Datei functions.php.
Scrollen Sie zum Ende der Datei und fügen Sie eine Code-Zeile hinzu:
add_image_size( 'custom-550', 550, 500, true );Was diese Zeile bedeutet:
- custom-550 ist ein Beispiel für einen neuen Namen für die Bildgröße. Sie können jeden beliebigen Namen verwenden.
- 550 in diesem Beispiel ist die neue Bildbreite in Pixeln.
- 500 in diesem Beispiel ist die neue Bildhöhe in Pixeln.
- die letzte Angabe – true– zeigt an, dass das neue Bild beschnitten werden muss. Auch wenn das neue Bild aus einem vertikalen Bild erstellt wird, muss die neue Größe auf die von Ihnen angegebene Größe zugeschnitten werden.
Sie können alle Zahlen und Namen verwenden, die Sie benötigen.
Weitere Informationen über die Funktion add_image_size finden Sie in der WordPress-Dokumentation.
Nachdem Sie diese Zeile in die functions.php Ihres WordPress-Themes (oder noch besser – Ihres Child-Themes) eingefügt und die Änderungen gespeichert haben, ist die neue benutzerdefinierte Größe bereit zur Verwendung in Themes und Plugins. Aber das ist noch nicht alles – wir brauchen noch zwei weitere Schritte, um sicherzustellen, dass wir das Bild in WordPress-Blöcken verwenden können.
Der nächste Schritt besteht darin, die tatsächlichen Bilder für die benutzerdefinierte Bildgröße zu generieren.
Wie man neue Bildgrößen erzeugt oder alle Bilder in WordPress neu generiert
Sobald Sie eine neue benutzerdefinierte Bildgröße in WordPress hinzufügen, sollten Sie auch neue Bildgrößen für bereits hochgeladene Mediendateien generieren – WordPress generiert nicht alle Bilder automatisch, sobald Sie eine neue benutzerdefinierte Bildgröße hinzufügen.
Um Bilder in neuer Größe in WordPress zu generieren, gehen Sie zu Plugins >> Neu hinzufügen, und geben Sie regenerate thumbnails in das Suchfeld oben ein. Wählen Sie das Plugin Regenerate Thumbnails und installieren Sie es jetzt.
Sobald das Plugin installiert und aktiviert ist, gehen Sie zu Tools >> Regenerate Thumbnails, und klicken Sie auf Regenerate Thumbnails for All Attachments.
Abhängig von der Geschwindigkeit Ihres Servers, der Größe der Bilder und der Gesamtzahl der Bilder kann dies zwischen einigen Sekunden und Minuten dauern. Sobald dies erledigt ist, können Sie zum letzten Schritt übergehen – um sicherzustellen, dass die neue Bildgröße in den WordPress-Blöcken angezeigt wird.
Wie man benutzerdefinierte Bildgrößen zu WordPress-Blöcken hinzufügt – Bild, Galerie und andere
Nach dem Hinzufügen einer neuen Bildgröße und dem Erstellen von Thumbnails in neuer Größe könnten Sie denken, dass die neue Bildgröße auch im WordPress-Block-Editor verfügbar sein wird. Tatsächlich ist sie aber noch nicht sichtbar. Die neue Bildgröße muss einen Titel haben, um in Gutenberg-Blöcken angezeigt zu werden.
Um die Bildgröße zum Block hinzuzufügen, gehen Sie zu Appearance >> Theme File Editor, öffnen Sie die Datei functions.php erneut und fügen Sie diesen Code am Ende ein:
add_filter( 'image_size_names_choose', 'imakeitwork_image_sizes' );
function imakeitwork_image_sizes($sizes) {
return array_merge($sizes, array(
'custom-550' => __('ImakeITwork image size')
));
}Stellen Sie sicher, dass Sie custom-550 durch denselben Namen der Bildgröße ersetzen, den Sie in der Funktion add_image_size verwendet haben, über die ich zuvor geschrieben habe. Und ersetzen Sie ImakeITwork image size durch den Titel, der in den WordPress-Blöcken erscheinen soll.
Nachdem Sie die Funktion addimagesize und den Filter imagesizenames_choose hinzugefügt haben, können Sie die neue Bildgröße in allen WordPress-Blöcken verwenden, die eine Auswahl der Bildgröße zulassen – wie z.B. Galerie- und Image-Blöcke.
