Bedeutung von responsiven Bildern im WordPress Core

Die Popularität von responsiven Bildern nimmt zu und es ist etwas, das niemand ignorieren kann. Die Verwendung derselben Funktionalität in beliebten CMS wie WordPress kann jedoch eine Herausforderung sein. Die Aufgabe kann zeitaufwändig sein, obwohl es den Benutzern möglich ist, Funktionen innerhalb des Themas selbst zu schreiben. Aber die Dinge haben sich seit der Einführung von WordPress 4.4 dramatisch geändert, was es Entwicklern und Administratoren einfacher macht, die responsive Bildfunktion in ihre Themes einzubetten.

Das größte Highlight ist die Verfügbarkeit des Responsive Images-Plug-Ins innerhalb des WordPress-Kerns. Dies bedeutet, dass Benutzer jetzt die responsive Bildunterstützung genießen können, die als Standardfunktion in WordPress enthalten ist. Lassen Sie uns einen genauen Blick darauf werfen, wie diese Funktion tatsächlich funktioniert und wie sie sorgfältig verwendet werden kann, um das Potenzial der WordPress-Site auszuschöpfen.

Funktionsweise der Funktion

Alle Inhalte und Bilder werden von srcset bestehen und Größen Attribute , wenn Sie in Wordpress 4.4 aktualisieren. Dies dient hauptsächlich dazu, die Verfügbarkeit jeder Bildgröße sicherzustellen, um die tatsächlich angeforderte Bildgröße beizubehalten. In Fällen, in denen das Seitenverhältnis im Vergleich zum angeforderten Originalbild variiert, werden die benutzerdefinierten Zuschnitte aus dem srcset- Attribut weggelassen . Gleichzeitig würde ein responsives Bild zurückgegeben, wenn ein Bild über die Funktion wp-get-attachment-image aufgerufen wird.

Responsive Bilder dienen in WordPress 4.4 als Hintergrundfunktion, da sie automatisch funktioniert, wenn ein Bild über einen Medien-Uploader in WordPress hochgeladen wird. Diese automatische Hintergrundprozess Ergebnisse in srcset und Größen Attribute angezeigt werden , wenn ein Bild auf einer Seite angezeigt wird . Das bedeutet, dass es in der neuen Funktion für responsive Bilder keine sichtbaren Schnittstellen gibt. Keine der Optionen wie das Vorhandensein von Formularen zum Ausfüllen oder Kästchen für Kontrollzwecke und Optionen zum Umschalten stehen mangels sichtbarer Schnittstellen zur Verfügung.

Theme-Entwickler müssen sicherstellen, dass die richtigen Größenattribute in den Bildern verfügbar sind, indem sie die Datei functions.php des Themes bearbeiten. Es ist wichtig , es zu betrachten , weil srcset und Größen in dem Image - Tag vorhanden Attribute sind das, was tatsächlich die ansprechenden Bilder in Wordpress darstellen. Am schwierigsten vorherzusagen ist das Größenattribut , obwohl WordPress gut abschneidet , wenn es darum geht, alle verfügbaren Größen in das srcset- Attribut aufzunehmen. Es ist die Pflicht des Größenattributs, dem Browser zu erklären, wie breit das Bild in jedem verfügbaren Ansichtsfenster wäre. Die Ergebnisse können jedoch je nach verfügbarem Stil für das Thema des Benutzers unterschiedlich sein, wobei die angemessene Standardeinstellung bereitgestellt wird, nämlich 'sizes=" (max width: {{image-width}}) 100 vw, {{image-width}}"

Mit dem Größenattribut können Benutzer vor allem zwei Dinge erreichen. Zum einen stellt es die Verfügbarkeit eines gültigen Größenattributs im Bild sicher, was mittlerweile eine Voraussetzung für die Spezifikationen geworden ist. Zweitens verhindert es, dass der Browser eine Bildquelle bereitstellt, die mehr als die angeforderte Originalbreite ist. Der Vorteil des Standardgrößenattributs wird jedoch immer geringer, wenn ein CSS die Größe des Bildes bei völlig unterschiedlichen Ansichtsfensterbreiten manipuliert.

Theme-Entwickler können das Größenattribut entsprechend jedem Bild mit Hilfe von Filter-Hooks anpassen, um sicherzustellen, dass an jedem Breakpoint perfekte Größenattribute geliefert werden. Daher ist es wünschenswert , um sicherzustellen , dass das Thema beruht nicht auf Standardattributgrößen , wenn es um anbieten präzise ansprechende Bilder Unterstützung kommt. Der Hauptgrund ist die Tatsache, dass es Browsern nicht gestattet ist, die Bildquelle durch das Standardgrößenattribut zu ändern oder zu ändern, wenn die Größe des Darstellungsbereichs kleiner ist als die ursprünglich angeforderte Bildgröße. Wenn das Bild jedoch bereits an einem Breakpoint mit CSS verändert wurde, dann kann auch die Quelle nicht geändert werden.

Wenn Sie eine Person, die Zugang zu einem Wordpress - Codebasis oder wenn Sie ein Thema Entwickler sind, dann ist es eine größere Notwendigkeit , dass Sie die Bilder in den Themen filtern, um Größen Attribute zu liefern , die genau sind. Dies sollten die wichtigsten Dinge sein, die nach der Veröffentlichung der neuen Version zu tun sind.

Konfiguration responsiver Bilder für Ihr Theme

Eine Reihe neuer Hooks wird zusammen mit den neuen Funktionen eingeführt, die verwendet werden können, um eine responsive Bildunterstützung bereitzustellen, die auf Ihr Thema zugeschnitten ist. Die maximale Bildbreite, die im srcset- Attribut enthalten sein muss , kann vom Theme-Entwickler über den Hook max_srcset_image_width gefiltert werden. Die srcset Attribute des Bildes können in an wp_calculate_image_srcset durch Einhaken gefiltert werden , während die Größen Attribut kann von einem Thema Entwickler angepasst werden , um die Bildhaltepunkte in ihrem Thema durch Filterung wp_calculate_image_sizes zu passen.

Die Inhaltsbilder können mit wp_calculate_image_sizes gefiltert werden, während Post-Thumbnails/vorgestellte Bilder mit der Funktion wp_get_attachment_image_attributes gefiltert werden können. Die Notwendigkeit für zwei verschiedene Funktionen ist erforderlich, da sich das Thema für die Art und Weise ändert, in der die vorgestellten Bilder an verschiedenen Haltepunkten angezeigt werden, und sich im Vergleich zur Art und Weise, in der Inhaltsbilder unter den gleichen Umständen angezeigt werden, völlig unterscheidet. Somit bietet WordPress 4.4 Theme-Entwicklern erweiterte Möglichkeiten, Bilder auf verschiedene Weise zu filtern und dadurch so spezifisch wie möglich zu sein.

All dies unterstreicht die sofortigen Vorteile, die Benutzer und Theme-Entwickler mit reaktionsschneller Bildunterstützung durch das WordPress 4.4-Update erzielen können. Es ermöglicht Theme-Entwicklern auch, klare und gestochen scharfe Bilder unabhängig von der Größe des Darstellungsbereichs und der Pixeldichte einzubinden und dadurch die Leistung der Website zu verbessern, da die Webseiten den zusätzlichen Zeitaufwand für das Laden größerer Bilder vermeiden können. Obwohl es ein automatischer Vorgang für Benutzer ist, sind die Theme-Entwickler dafür verantwortlich, das Bildgrößenattribut anzupassen, indem sie Zeit in der Datei functions.php innerhalb des Themes verbringen. Darüber hinaus ist zu bedenken, dass das Erstellen und Zusammenführen des Responsive Images-Plug-Ins eher eine Teamarbeit ist.