Hvernig á að gera WordPress myndir Móttækileg
WordPress er mjög öflugur vettvangur. Gerðu móttækileg þema og samþætta það er frekar auðvelt þegar þú þekkir grunnatriði þemunar. Móttækileg myndir, hins vegar, eru ekki eitthvað sem WordPress fjallar um úr kassanum. Þú gætir farið niður leiðina til að búa til hvern myndastærð með handvirkt, og þá í HTML ritlinum gætirðu handritið myndmerkið , srcset eiginleika og hverja mynd. Þetta mun ekki aðeins taka tíma, en gæti verið vandamál fyrir stjórnendur sem ekki eru HTML-læsir.
Sem betur fer er það leið til að gera WordPress að gera allt þungt lyfta. Það getur búið til allar myndastærðir frá einum myndupphæð þá, með tappi, innleitt myndmerkið og srcset eiginleika hvar sem höfundur velur að setja inn mynd.
Skref 1: Breyta functions.php til að búa til fleiri myndastærðir
Í hvert skipti sem þú hleður inn mynd, geymir WordPress það í innfæddri stærð. Það býr einnig sjálfkrafa 3 breyttu eintökum í þessum venjulegu stærðum (annaðhvort hæð eða breidd getur breyst miðað við myndhlutfall):
- Smámyndir (150 × 150)
- Medium (300 × 300)
- Stór (1024 × 1024)
Þetta er mjög öflugur eiginleiki sem hægt er að aðlaga til að gera hvaða myndastærð sem er. Þetta þýðir að þú þarft ekki að búa til margar eintök af mynd í mismunandi stærðum. Þú hleður bara upp einni mynd og WordPress býr til stærri eintök.
Þetta er gert með því að breyta function.php skrá. Til að bæta við nýjum myndastærðum þarftu að bæta við símtölum við add_image_size virknina. Hér er dæmi sem bætir við fjórum nýjum myndastærðum:
add_image_size( 'sml_size', 300 );add_image_size( 'mid_size', 600 );add_image_size( 'lrg_size', 1200 );add_image_size( 'sup_size', 2400 );Hvert símtal í aðgerðina inniheldur nafn (svo WordPress getur greint stærðina) og breidd. Hin nýja stærðir verða 300, 600, 1200 og 2400 punktar á breidd. Það er mögulegt með add_image_size virknina að hafa WordPress einnig að setja hæðina eða uppskera myndina, en dæmið hér að ofan mun halda upprunalegu myndhlutfallinu. (Meira má finna út um add_image_size virka í WordPress Codex .)
Dæmiið hér að framan sýnir aðeins fjórar nýjar myndastærðir, en þú gætir viljað bæta við meira eða minna ... þetta mun byggjast á þema hönnun þinni. Nú er hvenær mynd er hlaðið upp í WordPress, það mun búa til nýjar myndastærðir. Næsta skref er að innihalda þau í HTML.
Skref 2: Settu upp RICG Móttækilegar Myndir tappi
Til þess að WordPress geti framleiðt allar myndastærðir þarf að setja upp nýjan viðbót: RICG Móttækilegar myndir stinga inn. Þegar það er sett upp og virkjað verða allar stærðir myndarinnar innifalin í myndmerkinu með srcset eiginleikanum.
Venjulega þegar mynd er bætt við síðu í WordPress lítur framleiðsla HTML út á eftirfarandi hátt:
Það er ein mynd í src eiginleiki.
Þegar viðbótin er uppsett mun HTML líta svona út:
Allar nýju myndastærðirnar hafa verið bættar með srcset eiginleikanum.
Tappi inniheldur einnig Picturefill.js , móttækileg myndpólýill sem bætir stuðningi við bæði myndarhlutinn og nýtt móttækileg eiginleiki fyrir img frumefni. Þetta, ásamt þeim srcset eiginleikum sem nú eru með í myndatökunni, er það sem gerir myndin móttækileg.
Myndirnar þínar eru nú móttækilegar
Núna verða myndirnar á vefsvæðinu móttækilegar - vafrinn velur viðeigandi mynd til að hlaða niður.
Notendur á tæki með minni skjái fá minni myndir. Vefsvæðið þitt mun hlaða hraðar þar sem þessar myndir munu hlaða niður hraðar, þeir þurfa minna af bandbreiddum notenda. Notendur á tæki með stærri skjái fá stærri myndirnar. Þeir munu ekki birtast pixelated eða af minni gæðum.
Það er aðeins eitt hugsanlegt vandamál með þessari aðferð: það mun aðeins virka með myndum hlaðið upp í WordPress eftir að RICG Responsive Images tappi hefur verið sett upp. Ef það er glæný vefsíða sem þú ert að vinna að þá gæti þetta ekki verið vandamál, en ef það er núverandi vefsíða með núverandi efni þá hefur ekki verið búið til nýjar myndastærðir sem þú hefur bætt við í functions.php. Sem betur fer þarftu ekki að bæta við öllum myndum - það er tappi sem getur hjálpað.
Skref 3: Setja inn viðbót til að búa til myndastærðir (valfrjálst)
The Endurnýja smámynd tappi mun fara í gegnum allar núverandi viðhengi og endurreisa nýjar myndastærðir byggðar á nýjum sem eru búnar til í functions.php - það er rauntíma sparnaður og þarf aðeins að smella á einn hnapp.
Þegar þú hefur sett upp skaltu fara í Verkfæri -> Regen. Smámyndir þá smelltu á "Endurnýja allar smámynd" hnappinn. Stikustikan birtist og þú munt sjá upplýsingar um hversu margar myndir hafa verið breyttar.
Nú verða öll núverandi myndir á vefsíðunni þinni að framleiða rétt með því að nota myndmerkið með srcset eiginleikanum.
Valin mynd notar tæki mynd og mynd af farsíma um Shutterstock.