Während die zunehmende Akzeptanz von responsiven Bildern nicht ignoriert werden kann, kann es sehr schwierig sein, die Funktionalität unter den Einschränkungen eines großen CMS wie WordPress einzusetzen. Es ist zwar durchaus möglich, die Funktion selbst in Ihr Thema zu integrieren, dies ist jedoch ein schwieriges und zeitaufwändiges Unterfangen.
Glücklicherweise haben Entwickler von Themes und Plugins mit dem Start von WordPress 4.4 die Möglichkeit, reaktionsschnelle Bilder in ihren Produkten zu verwenden. Seit Beginn dieser Version wurde das Plugin „Responsive Images RICG“ in den WordPress-Kern integriert, sodass die Unterstützung von Responsive Images nun eine interne WordPress-Standardfunktion ist. Lassen Sie uns einen Blick darauf werfen, wie es funktioniert und wie Sie es verwenden können, um das Beste aus Ihrer WordPress-Site herauszuholen.
Wie Bilder arbeiten responsives
Sobald Sie auf WordPress 4.4 aktualisieren, haben alle Ihre Inhalte und Bilder die Namen "srcset" und "srcset". Größen Welche gefiltert werden, um sicherzustellen, dass jede verfügbare Bildgröße vorhanden ist, während die Größe des ursprünglich angeforderten Bildes beibehalten wird. Es ist wichtig zu beachten, dass benutzerdefinierte Größenänderungen aus dem " srcset »Wenn das Seitenverhältnis vom angeforderten Originalbild abweicht. Darüber hinaus durch Aufrufen eines Bildes über die Funktion " wp-get-Befestigungs Bild Es wird auch ein ansprechendes Bild zurückgegeben.
Der " Responsive Bilder Ist eine Funktion im Hintergrund, was bedeutet, dass alles automatisch geschieht, wenn ein Benutzer ein Bild über die Medien-Upload-Oberfläche zu WordPress hochlädt. Wenn ein Bild auf einer Seite angezeigt wird, hat es das Attribut " srcset "Und" Größen Als Ergebnis dieses Hintergrundprozesses.
Das bedeutet, dass die neue Funktion für responsive Bilder keine sichtbare Benutzeroberfläche haben wird. Es gibt keine Umschaltmöglichkeiten, Formen zum Ausfüllen oder Ankreuzfelder. Davon abgesehen sollten Theme-Entwickler ihre " functions.php Damit ihre Bilder eine Genauigkeit mit dem Attribut " Größen ". Wenn wir in WordPress über reaktionsschnelle Bilder sprechen, sprechen wir speziell über die Attribute. " srcset "Und" Größen Welche sind auf dem Tag des Bildes zu finden.
Während WordPress einen außergewöhnlichen Job macht und alle verfügbaren Größen in das Attribut einfügt " srcset ", Das Attribut" Größen "ist etwas schwieriger vorherzusagen. In der Tat ist das Attribut " Größen Ist dafür verantwortlich, dem Browser mitzuteilen, wie das Bild den verfügbaren Abmessungen des Fensters entspricht. Da die Informationen je nach Stil des Benutzerthemas unterschiedlich sind, können wir am besten einen angemessenen Standard wie folgt angeben:
sizes="(max-width: {{image-width}}) 100vw, {{image-width}}"Dieses Standardattribut " Größen Macht zwei Dinge. Zunächst wird sichergestellt, dass ein gültiges Attribut " Größen Existiert auf dem Bild, das kürzlich gemäß der Spezifikation zu einer obligatorischen Anforderung wurde. Zweitens wird sichergestellt, dass der Browser keine Bildquelle bereitstellt, die größer als die ursprünglich angeforderte Breite ist. Im Falle einer CSS-Manipulation ist die Größe des Bildes abhängig von der Breite der Fenster unterschiedlich, andererseits der Standardwert " Größen Wird weniger nützlich.
Da das Standardattribut " Größen "Hilft nur bei Bildern, die nicht durch CSS geändert wurden. Filterklammern stehen zur Verfügung, damit Themenentwickler das" Attribut "festlegen können. Größen "Von jedem Bild, um sicherzustellen, dass ein perfektes" Größen Wird an jeden Haltepunkt geliefert.
Hierbei ist zu beachten, dass Ihr Thema nach Möglichkeit nicht auf dem Standardwert des Attributs " Größen"Um genaue Informationen zur reaktionsschnellen Bildunterstützung bereitzustellen." In der Tat ist das Standardattribut " Größen »Der Browser kann die Bildquelle nicht ändern, wenn das Fenster kleiner als die Originalgröße des angeforderten Bildes ist. Es ist auch nicht möglich, die Quelle zu ändern, wenn das Bild an einem Haltepunkt mit CSS bearbeitet wird, wenn das Bild möglicherweise größer als die angeforderte Originalgröße ist.
Wenn Sie ein Entwickler von sind Themen oder Zugriff auf eine WordPress-Codebasis haben, filtern Sie die Bilder Ihres Themas, um Präzision mit dem " Größen Ist eines der wichtigsten Dinge, die Sie tun können, nachdem die neue Version bald kommt. Das Folgende ist ein Beispiel für einen Haken in der " wp_calculate_image_sizes Welches Sie entwickeln können, um Ihr Thema zu passen.
function adjust_image_sizes_attr( $sizes, $size ) {
$sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px';
return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'adjust_image_sizes_attr', 10 , 2 );In diesem Beispiel gilt das Häkchen für alle Inhalte, einschließlich der vorgestellten Bilder und Miniaturansichten. Zusätzliche Logik kann hinzugefügt werden, um sicherzustellen, dass verschiedene Bildtypen unterschiedliche Werte haben.
Für das Attribut "" wurden neue Funktionen hinzugefügt. srcset "Und" Größen Kann zu einem Bild hinzugefügt werden, das über den Medien-Manager zu WordPress hinzugefügt wurde, zusätzlich zu den Bildern, die zur Anzeige des Inhalts hinzugefügt wurden. Die Funktion wp_get_attachment_image_sizes Gibt ein Standardattribut zurück " Größen Welche kann durch einen Filter Ihres Themas in der Datei geändert werden " functions.php “. Die Funktion wp_get_attachment_image_srcset gibt ein Attribut zurück srcset »Welche alle verfügbaren Größen des angeforderten Bildes enthält. Dokumentation und Anwendungsbeispiele dieser neuen Funktionen finden Sie hier Referenzverzeichnis der Entwickler.
Responsive Images Konfiguration für Ihr Thema
Mit den neuen Funktionen kommen mehrere neue Klammern, mit denen reaktionsschnelle Bilder unterstützt werden können, die am besten zu Ihrem Thema passen. Der Haken max_srcset_image_width "Ermöglicht dem Theme-Entwickler, die maximale Breite des Bildes zu filtern, das in das Bild aufgenommen werden soll." srcset “. Der Haken wp_calculate_image_srcset »Filtert die Attribute« srcset »Bilder, während der Haken (Filter)« wp_calculate_image_sizes "Ermöglicht dem Theme-Entwickler, das" Größen Um die Bild-Haltepunkte in ihrem Thema besser abzugleichen.
Wenn Sie nach einem Beispiel suchen, wie Sie die " Größen Von einem Bild wird das neue Thema XNUMX ein perfektes Beispiel sein. In der Datei functions.php dieses Themas filtern die letzten beiden Funktionen das Attribut " Größen Um auf die verschiedenen Bildunterbrechungspunkte innerhalb des Themas zu reagieren.
Responsive Bildfilter WordPress-Tutorial#
Die Aktualisierung auf WordPress 4.4 bedeutet, dass Benutzer sofort von der responsiven Bildkompatibilität profitieren, die dazu beiträgt, gestochen scharfe, klare Bilder bei jeder Fenstergröße und Pixeldichte anzuzeigen. Dies wird auch zu einer Leistungssteigerung führen, da Seiten nicht mehr lange große, schwere Bilder laden müssen. Obwohl dies ein automatischer Prozess für Benutzer ist, müssen Theme-Entwickler ihre Bildgrößen für ihre anpassen Themen.
Das ist alles für dieses Tutorial. Ich hoffe, es wird Ihnen helfen, die Wichtigkeit und das Konzept von responsiven Bildern auf WordPress besser zu verstehen. Zögern Sie nicht, dieses Tutorial mit Ihren Freunden in Ihren bevorzugten sozialen Netzwerken zu teilen.
