Wie man WordPress Images Responsive macht
WordPress ist eine wirklich mächtige Plattform. Ein responsives Thema zu erstellen und es zu integrieren, ist ziemlich einfach, wenn man die Grundlagen des Themings kennt. Responsive Bilder sind dagegen nicht das, was WordPress out-of-the-box behandelt. Sie könnten die Route zum manuellen Erzeugen jeder Bildgröße herunterfahren, dann könnten Sie im HTML-Editor das Bild-Tag, die srcset- Attribute und jedes Bild manuell eingeben . Dies erfordert nicht nur Zeit, sondern könnte auch ein Problem für Administratoren sein, die nicht HTML-fähig sind.
Glücklicherweise gibt es einen Weg, WordPress dazu zu bringen, alle schweren Aufgaben zu erledigen. Es kann alle Bildgrößen aus einem einzigen Bild hochladen und dann über ein Plugin die Attribute image tag und srcset implementieren , wo immer der Autor ein Bild einfügen möchte .
Schritt 1: modifiziere functions.php, um mehr Bildgrößen zu generieren
Jedes Mal, wenn Sie ein Bild hochladen, speichert WordPress es in seiner ursprünglichen Größe. Bei diesen Standardgrößen werden automatisch 3 Kopien in Originalgröße erstellt (je nach Bildverhältnis kann sich die Höhe oder die Breite ändern):
- Vorschaubild (150 × 150)
- Mittel (300 × 300)
- Groß (1024 × 1024)
Dies ist eine wirklich mächtige Funktion, da sie angepasst werden kann, um jede Bildgröße zu machen. Dies bedeutet, dass Sie nicht mehrere Kopien eines Bildes in verschiedenen Größen erstellen müssen. Sie laden einfach ein einzelnes Bild hoch und WordPress erstellt die skalierten Kopien.
Dies geschieht durch Änderung der Datei functions.php. Um neue Bildgrößen hinzuzufügen, müssen Sie der Funktion add_image_size Aufrufe hinzufügen . Hier ein Beispiel, das vier neue Bildgrößen hinzufügt:
add_image_size( 'sml_size', 300 );add_image_size( 'mid_size', 600 );add_image_size( 'lrg_size', 1200 );add_image_size( 'sup_size', 2400 );Jeder Aufruf der Funktion enthält einen Namen (damit WordPress die Größe identifizieren kann) und eine Breite. Die neuen Größen werden 300, 600, 1200 und 2400 Pixel breit sein. Mit der Funktion add_image_size ist es möglich, dass WordPress auch die Höhe einstellt oder das Bild zuschneidet, aber das obige Beispiel behält das ursprüngliche Bildseitenverhältnis bei. (Weitere Informationen über die Funktion add_image_size in der WordPress Codex .)
Das obige Beispiel zeigt nur vier neue Bildgrößen, die hinzugefügt werden, aber Sie möchten vielleicht mehr oder weniger hinzufügen ... das wird auf Ihrem Themendesign basieren. Jedes Mal, wenn ein Bild in WordPress hochgeladen wird, werden neue Bildgrößen generiert. Der nächste Schritt besteht darin, sie in den HTML-Code aufzunehmen.
Schritt 2: Installieren Sie das RICG Responsive Images Plugin
Damit WordPress alle Bildgrößen ausgeben kann, muss ein neues Plugin installiert werden: das RICG Responsive Bilder Plugin. Nach der Installation und Aktivierung werden alle Bildgrößen über das Attribut srcset in das Bild-Tag eingefügt.
Wenn ein Bild zu einer Seite in WordPress hinzugefügt wird, sieht das Ausgabe-HTML normalerweise wie folgt aus:
Im src-Attribut gibt es ein einzelnes Bild.
Sobald das Plugin installiert ist, sieht das HTML wie folgt aus:
Alle neuen Bildgrößen wurden über das Attribut srcset hinzugefügt.
Das Plugin beinhaltet auch Bildfüll.js ein responsives Bild-Polyfill, das Unterstützung sowohl für das Bildelement als auch für die neuen Responsive-Attribute für das img-Element bietet. Zusammen mit den srcset- Attributen, die jetzt im Image-Tag enthalten sind, werden Ihre Bilder dadurch reaktionsfähiger .
Ihre Bilder reagieren jetzt
Jetzt werden die Bilder auf Ihrer Website reagieren - der Browser wird das am besten geeignete Bild zum Herunterladen auswählen.
Benutzer auf Geräten mit kleineren Bildschirmen erhalten die kleineren Bilder. Ihre Website wird schneller geladen, da diese Bilder schneller heruntergeladen werden und weniger Bandbreite benötigen. Benutzer auf Geräten mit größeren Bildschirmen erhalten die größeren Bilder. Sie werden nicht verpixelt oder von geringerer Qualität angezeigt.
Es gibt nur ein mögliches Problem mit dieser Methode: Es funktioniert nur mit Bildern, die nach der Installation des RICG Responsive Images-Plugins in WordPress hochgeladen wurden. Wenn es sich um eine brandneue Website handelt, an der Sie gerade arbeiten, ist das möglicherweise kein Problem. Wenn es sich jedoch um eine bestehende Website mit vorhandenem Inhalt handelt, wurden die neuen Bildgrößen, die Sie in functions.php hinzugefügt haben, nicht generiert. Zum Glück müssen Sie nicht alle Bilder neu hinzufügen - es gibt ein Plugin, das Ihnen helfen kann.
Schritt 3: Plugin installieren, um Bildgrößen neu zu generieren (optional)
Das Generiere Thumbnails neu Das Plugin wird alle vorhandenen Bildanhänge durchlaufen und die neuen Bildgrößen basierend auf den neuen, die in functions.php erstellt wurden, neu erzeugen - es ist ein Zeitsparer und erfordert nur das Klicken einer einzigen Schaltfläche.
Nach der Installation gehen Sie zu Extras -> Regen. Thumbnails klicken Sie dann auf die Schaltfläche "Alle Miniaturbilder neu generieren". Eine Statusleiste wird angezeigt und Sie sehen die Informationen darüber, wie viele Bilder in der Größe geändert wurden.
Jetzt werden alle vorhandenen Bilder auf Ihrer Website korrekt mit dem Bild-Tag über das Attribut srcset ausgegeben .
Ausgewählte Bild verwendet Gerätebild und Mobilgerät Bild über Shutterstock.