Arbeiten mit responsiven Bildern in WordPress

Bis vor kurzem war die Arbeit mit responsiven Bildern in WordPress eine echte Herausforderung. Wenn die Benutzer nicht bereit waren, die Funktionalität selbst zu schreiben, hatten sie Pech. Die andere Möglichkeit war, ein Plugin zu kaufen oder eine andere Problemumgehung zu finden, aber es gab keine Kernfunktionalität, die Entwickler nutzen konnten. Designs, die ohne Unterstützung für responsive Bilder erstellt wurden, zeigten oft eine langsame Leistung, und die Benutzerfreundlichkeit war manchmal bei unterschiedlichen Bildschirmgrößen instabil. Das sind nicht gerade Attribute, die Kunden und Nutzer mit guter Funktionalität verbinden.

Glücklicherweise hat sich dies alles mit der Veröffentlichung von WordPress 4.4 geändert. Jetzt ist die Funktionalität für responsive Bilder direkt in WordPress enthalten, sodass Entwickler auch in Designs damit arbeiten können. Dies wurde erreicht, indem ein Responsive-Images-Plugin genommen und zu einem Teil des WordPress-Kerns gemacht wurde.

Wie das alles funktioniert

Sofern Sie dies nicht bereits getan haben, besteht Ihr erster Schritt natürlich darin, auf WordPress 4.4 zu aktualisieren. Wenn Sie nach Abschluss des Updates den Quellcode Ihrer Website anzeigen, werden Sie feststellen, dass die Bilder auf Ihrer Website jetzt zwei neue Attribute haben: sizes und srcset . Diese Attribute werden gefiltert, was bedeutet, dass alle verfügbaren Bildgrößen vorhanden sind, die Abmessungen jedoch mit dem Originalbild übereinstimmen. Das srcset-Attribut erlaubt kein benutzerdefiniertes Zuschneiden in Fällen, in denen das Seitenverhältnis nicht mit dem der Originalversion des Bildes übereinstimmt. Dadurch soll sichergestellt werden, dass die Bildqualität nicht beeinträchtigt wird, wenn sie auf dem Bildschirm eines Benutzers angezeigt wird.

Unter die Haube gehen und Änderungen vornehmen

WordPress hat responsive Bilder als Hintergrundfunktion hinzugefügt, was bedeutet, dass der Prozess automatisch abläuft. Wenn Sie ein Bild mit dem Medien-Uploader hochladen, werden die Attribute ohne Ihr Zutun auf diese Bilder angewendet. Dies ist auch für die Bildoptimierung nützlich.

Da es sich um eine Hintergrundfunktion handelt, haben responsive Bilder keine Benutzeroberfläche – sie passieren einfach. Als Entwickler können Sie die Datei functions.php in jedem Ihrer Themen ändern, um sicherzustellen, dass Ihre Bilder ein korrektes sizes erhalten. Denken Sie daran: Wenn Sie auf responsive Bilder verweisen möchten, sind damit die Bild-Tag-Attribute der sizes und srcset .

Standardattribute

Wenn Sie anfangen, mit dieser Funktion zu arbeiten, werden Sie feststellen, dass WordPress ziemlich gut darin ist, alle möglichen Größen zu finden und sie dem srcset Attribut hinzuzufügen. Leider können Probleme auftreten, wenn es um die Vorhersagbarkeit des sizes geht. Dies ist das Attribut, das verwendet wird, um die Bildbreite an Browser zu übermitteln, sodass Bilder auf jedem Anzeigebildschirm verfügbar und sichtbar sind.

Das Einrichten dieses Attributs als Standard funktioniert auf verschiedene Arten. Das erste ist, dass es erzwingt, dass das sizes auf jedes Bild angewendet wird. Dies ist hilfreich, wenn man bedenkt, dass es jetzt eine obligatorische Anforderung ist. Zweitens erlaubt es Browsern nicht, eine Bildquelle zu verwenden, die breiter als die Originalgröße des Bildes ist. CSS-Code, der verwendet wird, um die Bildgröße abhängig von der Bildschirmbreite zu optimieren (z. B. Medienabfragen), kann diese Standardeinstellung leider viel weniger nützlich machen.

Filter-Hooks für Theme-Entwickler

Da dieses Standardattribut nur mit Bildern funktioniert, die nicht durch CSS-Code geändert wurden, hat WordPress Filter-Hooks erstellt, die von Designentwicklern verwendet werden können. Mit diesem Haken passen Sie einfach das sizes für alle Bilder an. So können Sie sicher sein, dass das sizes in jeder Situation optimal ist.

Eine Einschränkung

Bevor wir fortfahren, nehmen wir uns eine Minute Zeit, um darauf hinzuweisen, dass die Standardattributoption nicht der beste Weg ist, um eine gute responsive Bildfunktionalität bereitzustellen. Tatsächlich sollten Sie daran arbeiten, Themen zu vermeiden, die auf dieser Standardeinstellung basieren. Der Grund dafür ist, dass das Standardattribut Browser daran hindert, die Bildquelle zu ändern, wenn der Anzeigebereich nicht so groß ist wie die Größe des Originalbilds. Browser können die Quelle auch nicht ändern, wenn sie durch CSS optimiert wurde und ein größeres Bild benötigt wird.

Bildfilterung

Als Theme-Entwickler können Sie Ihre Bilder filtern, um ein genaues sizes zu erhalten. Dies kann durch die Verwendung eines Hooks für die WordPress-Funktion wp_calculate_image_sizes . Sie können diese Funktion verwenden, damit sie mit Ihrem aktuellen Thema funktioniert. Sie können Änderungen vornehmen, die ein anderes sizes auf verschiedene Bildtypen anwenden.

Neue Funktionen, die mit dieser Version geliefert werden, ermöglichen es jetzt, dass die sizes und srcset Attribute auf alle Bilder angewendet werden, die Sie mit dem WordPress-Medien-Uploader hinzugefügt haben. Außerdem können Sie die Attribute zu Bildern in Ihren Beiträgen hinzufügen. Schauen Sie sich wp_get_attachment_image_sizes an. Dies gibt ein sizes zurück, das Sie über einen Filter in der Datei functions.php für Ihr Design abfangen und ändern können. Ebenso macht wp_get_attachment_image_srcset dasselbe, nur für das srcset Attribut.

Responsive Bilder und Ihr benutzerdefiniertes Design

Die neuen Funktionen, die mit dieser neuesten Version geliefert wurden, werden von vielen Hooks begleitet, die Sie verwenden können, um responsive Bilder innerhalb Ihres Designs effektiv zu unterstützen. Zu diesen Hooks gehören:

Wp_calculate_image_sizes – Ein Hook, den Theme-Entwickler verwenden können, um das sizes so anzupassen, dass es mit den Breakpoints arbeitet, die in ihrem Theme vorhanden sind.

Max_srcset_image_width – Ein Hook, den ein Designentwickler verwenden kann, um nach der maximalen Breite von Bildern zu filtern, die sich im srcset Attribut befinden.

W_calculate_image_srcset – Ein Hook, der Entwicklern die Möglichkeit gibt, nach srcset Attributen zu filtern.

Erfahren Sie mehr über die Unterstützung von responsiven Bildern

Das WordPress-Entwicklerhandbuch kann weitere Anleitungen zur effektiven Verwendung dieser Hooks geben. Die Recherche, die Sie durchführen müssen, hängt davon ab, ob Sie sich wohl fühlen, wenn Sie diese Art von Anpassungen hinter den Kulissen vornehmen. Wenn Sie ein Theme-Entwickler sind, der dies ausschließlich als Hobby verfolgt, können Sie sich dafür entscheiden, ein wenig zu experimentieren. Wenn Sie andererseits ein Karriere-Designer sind, möchten Sie vielleicht in die Zeit und die Ressourcen investieren, die erforderlich sind, um dieses Update wirklich zu meistern.

Vorteile der Aktualisierung

Wenn Sie WordPress noch nicht aktualisiert haben (oder wenn Ihr verwalteter WordPress-Host noch nicht für Sie aktualisiert hat), werden Ihre Benutzer von einigen großartigen Vorteilen profitieren, wenn Sie dies tun. Die Unterstützung von responsiven Bildern kann die Seitenleistung verbessern, da ihre Seiten keine Zeit damit verschwenden, zu große Bilder herunterzuladen. Benutzer werden auch eine sehr beeindruckende Verbesserung der Bildqualität feststellen. Sie werden die „Wurstherstellung“, die in alles einfließt, nicht sehen. Stattdessen werden sie nur sehen, dass es gut funktioniert.

Als Entwickler müssen Sie das sizes in jeder der functions.php -Dateien für alle Ihre Themen anpassen. Sobald Sie diese anfängliche Anstrengung unternommen haben, werden die Dinge jedoch viel einfacher. Nachdem Sie die Lernkurve bewältigt haben, werden Sie feststellen, dass die Arbeit mit dieser neuen Funktionalität ganz selbstverständlich ist.

Es kann einige Recherche und Übung erfordern, um diese neue Funktionalität zu verstehen und reaktionsschnelle Bildunterstützung für Ihre benutzerdefinierten Designs zu erhalten. Wenn Sie jedoch bereit sind, im Entwicklerhandbuch herumzustöbern und Dinge herauszufinden, werden Ihre Kunden die Verbesserung der Leistung und Funktionalität wirklich zu schätzen wissen. Dies hat lange auf sich warten lassen, und erfahrene Theme-Entwickler und diejenigen, die mit der Pflege benutzerdefinierter Themes beauftragt sind, sind zu Recht von diesem Update begeistert.