Springe zum Hauptinhalt

Responsives, wie Bilder von Wordpress verwaltet werden

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Während die zunehmende Akzeptanz von reaktionsschnellen 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 in Ihrem Thema selbst zu gestalten, dies ist jedoch schwierig und zeitaufwändig.

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, 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.

Dies bedeutet, dass die neue Funktionalität von responsiven Bildern keine sichtbare Benutzeroberfläche hat. Es gibt keine Optionen zum Umschalten, Ausfüllen von Formularen oder Kontrollkästchen. 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:

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

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.

Wichtig ist hier zu beachten, dass Ihr Theme nach Möglichkeit nicht auf den Standardwert des Attributs „Größen„Um genaue Informationen über die Unterstützung von responsiven Bildern bereitzustellen. Tatsächlich ist das Standardattribut „Größen”Erlaubt dem Browser nicht, die Bildquelle zu ändern, wenn das Fenster kleiner als die ursprünglich angeforderte Bildgröße ist. Es wird auch nicht in der Lage sein, 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.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

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 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.

reaktionsschnelle Filter Bild 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.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

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.

 

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
11 Aktien
Aktie6
tweet1
Registrieren4