Kuinka tehdä WordPress-kuvat reagoivat
WordPress on todella tehokas alusta. Herkän teeman tekeminen ja sen integrointi on melko helppoa, kun tunnet teemojen perusteet. Vastaavat kuvat eivät sitä vastoin ole WordPressin käsittelemättä. Voit mennä alas reitin kirjoittamiseen manuaalisesti kunkin kuvakoko, sitten HTML-editori voit kirjoittaa manuaalisesti kuvaketta , srcset attribuutteja ja jokainen kuva. Tämä ei riitä pelkästään aikaa, mutta se voi olla ongelma kaikille hallintokäyttäjille, jotka eivät ole HTML-lukutaitoisia.
Onneksi on olemassa tapa tehdä WordPress tehdä kaikki raskas nosto. Se voi tuottaa kaikki kuvakoot yhdestä kuvatiedostosta ja sitten plugin avulla toteuttaa kuvamerkki ja srcset- attribuutit missä tahansa tekijän valitsema kuva.
Vaihe 1: muokkaa funktioita.php lisäämällä kuvakokoja
Aina kun lataat kuvan, WordPress tallentaa sen alkuperäiseen kokoonsa. Se myös tuottaa automaattisesti 3 resize-kopiota näissä vakiokokoisissa (joko korkeus tai leveys voi muuttua kuvasuhteen perusteella):
- Pikkukuva (150 × 150)
- Keskitaso (300 × 300)
- Suuri (1024 × 1024)
Tämä on todella tehokas ominaisuus, koska se voidaan muokata minkä tahansa kuvakoon mukaan. Tämä tarkoittaa, että sinun ei tarvitse tehdä useita kopioita eri kokoisista kuvista. Lähetät vain yhden kuvan, ja WordPress luo halutut kopiot.
Tämä tehdään muuttamalla functions.php-tiedostoa. Uusien kuvakoon lisäämiseksi sinun on lisättävä puhelut add_image_size- toimintoon. Tässä on esimerkki, joka lisää neljä uutta kuvakoosta:
add_image_size( 'sml_size', 300 );add_image_size( 'mid_size', 600 );add_image_size( 'lrg_size', 1200 );add_image_size( 'sup_size', 2400 );Jokainen toiminto vaatii nimensä (joten WordPress pystyy tunnistamaan koon) ja leveyden. Uudet koot ovat 300, 600, 1200 & 2400 pikseliä leveä. Add_image_size- toiminnolla on mahdollista, että WordPress asettaa myös korkeuden tai rajauksen , mutta yllä oleva esimerkki säilyttää alkuperäisen kuvasuhteen. (Lisää on lisätietoja Add_image_size - toiminnosta WordPress Codex .)
Yllä oleva esimerkki näyttää vain neljä uutta kuvakokoa, mutta voit lisätä enemmän tai vähemmän ... tämä perustuu teeman suunnitteluun. Nyt kun kuva lähetetään WordPressiin, se tuottaa uusia kuvakokoja. Seuraava vaihe on sisällyttää ne HTML: ään.
Vaihe 2: asenna RICG Responsive Images plugin
Jotta WordPress pystyy tuottamaan kaikki kuvakoot, on asennettava uusi plugin: RICG Responsive Images kytkeä. Kun se on asennettu ja aktivoitu, kaikki kuvakoot sisällytetään kuvamäärään srcset-attribuutin kautta.
Tyypillisesti, kun WordPress-sivulle lisätään kuva, tuloste HTML näyttää tältä:
Src-attribuutissa on yksi kuva.
Kun plugin on asennettu, HTML näyttää tältä:
Kaikki uudet kuvakoot on lisätty srcset- attribuutin kautta.
Plugin sisältää myös Picturefill.js , reaaliaikainen kuvan polyfilli, joka lisää tukea sekä kuvan elementille että img-elementin uusille herkille ominaisuuksille. Tämä yhdessä kuvakkeen mukana tulevien srcset- attribuuttien kanssa tekee kuvanne reagoiviksi.
Kuvat ovat nyt reagoivia
Nyt sivustossasi olevat kuvat ovat herkkiä - selaimessa valitaan sopiva lataamasi kuva.
Pienempiä näyttöjä käyttävät käyttäjät saavat pienemmät kuvat. Sivustosi latautuu nopeammin, kun kuvat latautuvat nopeammin. He tarvitsevat vähemmän käyttäjän kaistanleveyttä. Käyttäjät suuremmilla näytöillä varustetuille laitteille saavat suurempia kuvia. Ne eivät näy kuvapisteinä tai heikompina.
Tällä menetelmällä on vain yksi mahdollinen ongelma: se toimii vain WordPressin lataamien kuvien kanssa, kun RICG Responsive Images -ohjelma on asennettu. Jos kyseessä on uusi verkkosivusto, jota olet tekemässä, tämä ei ehkä ole ongelma, mutta jos olemassa oleva verkkosivusto on olemassa, uusia funktioita ei ole luotu. Onneksi sinun ei tarvitse lisätä kaikkia kuvia uudelleen - on plugin, joka voi auttaa.
Vaihe 3: Asenna laajennus uudelleen koon tuottamiseen (valinnainen)
Regenerate Thumbnails Uudista pikkukuvat plugin läpäisee kaikki olemassa olevat liitetiedostot ja luo uusia kuvakokoja funktiona.php-tiedostojen avulla luotuihin uusiin - se on reaaliaikainen säästäjä ja vaatii vain yhden painikkeen napsautuksen.
Asennuksen jälkeen siirry Työkalut -> Regen. Pikkukuvat napsauta sitten "Uudista kaikki pikkukuvat" -painiketta. Tilarivi näkyy ja näet, kuinka monta kuvaa on muokattu.
Nyt kaikki verkkosivustosi nykyiset kuvat tulostetaan oikein käyttämällä kuvaketta srcset- attribuutin kautta.
Esitetty kuva käyttää laitteen kuva ja mobiililaitteen kuva kautta Shutterstock.