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.

Ansprechend-Bild-Trac-Word

Wie Bilder arbeiten responsives

Sobald Sie auf WordPress 4.4 aktualisieren, wird Ihr gesamtes Inhalt und die Bilder haben die Attribute „srcset“ und „ 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 Theme-Entwickler sind oder Zugriff auf eine WordPress-Codebasis haben, filtern Sie die Bilder in Ihrem Theme, um Präzision mit dem Attribut " 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.

Code-source-wp-Bild-responsive

Für das Attribut "" wurden neue Funktionen hinzugefügt. srcset "Und" Größen » kann zu einem Bild hinzugefügt werden, das über den Medienmanager zu WordPress hinzugefügt wurde, zusätzlich zu Bildern, die zur Anzeige hinzugefügt wurden Inhalt. 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#

Durch die Aktualisierung auf WordPress 4.4 profitieren Benutzer sofort von der reaktionsschnellen Bildkompatibilität, die die Anzeige gestochen scharfer Bilder bei jeder Fenstergröße und Pixeldichte fördert. Dies führt auch zu einer Leistungssteigerung, da Seiten lange Zeit keine großen, schweren Bilder mehr laden müssen. Obwohl dies ein automatischer Prozess für Benutzer ist, müssen Themenentwickler ihre Bildgrößen für ihre Themen anpassen.

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.