Alapértelmezett WordPress képméretek és egyéni méretek hozzáadása

amikor feltölt egy képet, a WordPress sok munkát végez a kulisszák mögött, így kiszolgálhatja a képet a látogatóinak. Akkor háton ezt a folyamatot, és add egyéni képméret menteni kelljen átméretezni a képeket kézzel.

ebben a bejegyzésben elmagyarázom, hogyan és miért hoz létre a WordPress különböző képméreteket. Ezután megtanítom, hogyan adhatja hozzá saját képméretét a funkciók módosításával.php fájl, regenerálja a miniatűröket és adja hozzá az új képméreteket a Gutenberg képblokkhoz és/vagy a WordPress hurokhoz.

a WordPress képméretek magyarázata

minden alkalommal, amikor képet tölt fel a WordPress médiakönyvtárba, ezek a további képméret-beállítások, amelyeket a WordPress alapértelmezés szerint létrehoz:

• Thumbnail
• Medium
• Medium Large
• Large

ha a téma további képméreteket határoz meg, a WordPress azokat is létrehozza.

a WordPress megőrzi a feltöltött eredeti méretet, és teljes méretűnek nevezi.

ezeket (a Medium_Large kivételével) a Gutenberg image block Image Size legördülő menüben láthatja, amikor képet helyez be egy oldalra vagy bejegyzésre.

miért hoz létre a WordPress olyan sok képet?

a képek olyanok, mint a nadrágok. Győződjön meg róla, hogy a megfelelő méretet kapja. A túl kicsi nadrágok és képek butaságnak tűnnek, és fájdalmasan nyilvánvaló neked és mindenki másnak, hogy nem illenek jól. A webhelyén túl kicsi képek kinyújtottak vagy pixelláltak lesznek.

ezzel szemben, ha túl nagyok, az szuper pazarló. Nem tennél egy férfinak készült nadrágot egy babára, igaz? Ez olyan sok extra szövet, ami nem is szükséges. Ez a baba fog eltévedni egy nadrág lábát 😉

képek ugyanazok. Ha a kép túl nagy a tárolóhoz, akkor pazarolja a sávszélességet és az időt, hogy letöltse azt az oldalon való megjelenítéshez. És miért? A semmiért.

ideális esetben a feltöltött teljes méretű képeknek elég nagynak kell lenniük ahhoz, hogy elférjenek a webhely legnagyobb Képtárában, de nem nagyobbak. Ezután, amikor képeket használ a webhelyén, a pontos méretű képet kell használnia.

mivel a képek méretezése a megfelelő méret létrehozásához a Photoshopban vagy más képszerkesztőben értékes időt vesz igénybe, a WordPress vállalja ezt a feladatot, és megteszi az Ön számára. Köszönöm, WordPress!

csak annyit kell tennie, hogy kiválasztja a megfelelő méretet, amikor képet illeszt be a webhelyére, hogy megkapja a megfelelő kép használatának teljesítményelőnyeit.

ha a WordPress alapértelmezett képméretei nem felelnek meg tökéletesen a témának, módosíthatja az alapértelmezett beállításokat a Média > Beállítások részben, vagy hozzáadhat egyedi méreteket, így több lehetőség közül választhat.

az alapértelmezett képméretek a következők:

• 150px négyzet miniatűrök esetén
• 300px szélesség Közepes képek esetén
• 768px maximális szélesség Közepes Nagy képek esetén
• 1024px maximális szélesség nagy képek esetén.

Medium_large került, hogy kihasználják a reszponzív kép támogatás, ezért nem szerepel a Beállítások oldalon. Apropó reszponzív képek …

reszponzív képek

mindezek a különböző méretű képek más célt szolgálnak, ezért ne állítsa az alapértelmezett értékeket nullára, hogy a WordPress ne hozza létre őket, amint azt néhány oktatóanyag javasolja.

a WordPress reszponzív képeket adott a maghoz a 4.4-es verzióban. Ahelyett, hogy a kép src attribútumait csak egy kép URL-jével töltené fel, a WordPress hozzáadta a srcset (forráskészlet) elemet is, amely a különböző méretű képek URL-jeinek listája.

Találd ki, milyen képeket használ a lista létrehozásához? Igen, a WordPress ugyanazokat a képeket használja különböző méretben, amelyeket létrehoz egy kép feltöltésekor.

ezt a listát kínálja a böngészőnek, így kiválaszthatja a látogató eszközének megfelelő képet. Ha a látogató mobil eszközt használ, akkor egy kisebb képet kap a srcset – ben. Ha asztali Retina eszközön látogatják meg az Ön webhelyét, akkor megkapják a feltöltött teljes méretű Retina-kész képfájlt. Újra, ezért kell feltöltenie egy elég nagy képet, hogy kitöltse ezt az igényt.

amikor egyéni képméretet ad hozzá, a WordPress hozzáadja a srcset – hez, amennyiben ugyanaz a képarány. Ha az egyéni képméret más formába vágja a képet, akkor az kihagyásra kerül a készletből.

“Web-optimalizáló” nagyobb képek a WordPress-ben

a WordPress 5.3 új módszert vezetett be a nagy képfájlok kezelésére a “web-optimalizált maximális méret” észlelésével és generálásával.

hogyan működik?

új kép feltöltésekor a WordPress felismeri, hogy ez egy “nagy” kép, annak alapján, hogy magassága vagy szélessége meghaladja-e a big_image threshold értéket.

az alapértelmezett küszöbérték 2560px (ez megváltoztatható az új big_image_size_threshold szűrővel).

ha egy kép magassága vagy szélessége meghaladja ezt a küszöbértéket, akkor a kép kicsinyítésre kerül – a küszöbértéket max-magasság és Max-szélesség értékként kell használni.

a kicsinyített kép lesz a legnagyobb elérhető méret.

szeretné letiltani a méretezést?

a méretezést a big_image_size_threshold szűrő vezérli.

visszatérve false a szűrő visszahívás letiltja azt (az alábbiak szerint):

add_filter( 'big_image_size_threshold', '__return_false' );

WordPress miniatűrök és kiemelt képméret

most elértük az oktatóanyagunk azon részét, ahol kibontjuk az egész miniatűr/kiemelt kép rendetlenségét. Alapvetően a probléma erre vezethető vissza; mivel a WordPress fenntartja a visszamenőleges kompatibilitást, ahogy fejlődik, a dolgok neve megváltozik, de a funkciók továbbra is a régi nevükön utalnak a dolgokra.

a WordPress miniatűrök képméretét a 2.9-es verzióban vezették be, de gyorsan megváltoztatták a kiemelt képekre a 3.0-s verzióban, de sajnos a név beragadt. Tehát gyakran hallani fogja a kiemelt képeket, amelyeket miniatűröknek neveznek az oktatóanyagokban, sőt a függvénynevekben is.

Íme néhány példa:

• ha a téma nem tartalmaz kiemelt képeket, és engedélyezni szeretné ezt a funkciót, akkor hozzáadja a add_theme_support( 'post-thumbnails' ); értéket a függvényfájlhoz.
• a WordPress kiemelt képméretének megjelenítéséhez egy témában használja a the_post_thumbnail() funkciót.

a miniatűrök és a kiemelt képek alapértelmezett mérete 150 x 150 képpont. Ha a the_post_thumbnail() függvényt argumentum nélkül használja a méret megadásához, akkor az alapértelmezett 150px négyzetméretet fogja használni.

annak érdekében, hogy ez kevésbé zavaró legyen magának, így valóban használhatja a megfelelő méretet, azt javaslom, hogy hozzon létre egy egyedi képméretet, és nevezze el kiemelt-nagy vagy valami hasonló. Ezután, amikor ezt a képet a You ‘ re the loop-ban szeretné használni, akkor a the_post_thumbnail('featured-large') – ot fogja használni.

Mielőtt elkezdené létrehozni az egyéni képméreteket a WordPress-ben

amikor elkezdi létrehozni az egyéni képméreteket, kerülje a túlzásba esést és a képek létrehozását minden elképzelhető célra. Ellenkező esetben a tárhelyen keresztül éget, és ha olyan képoptimalizálási szolgáltatást használ, amely képenként számít fel, akkor sokkal gyorsabban megy keresztül a képi juttatáson.

ha a terv lehetővé teszi 100 kép optimalizálását, de minden feltöltés további 9 méretet generál, amelyeket szintén optimalizálni kell, akkor 10 kép feltöltése után eléri a korlátot. Ezt tartsa szem előtt az egyéni méretek hozzáadásakor és a képoptimalizálási tervek kiválasztásakor.

a Smush Pro nem rendelkezik képoptimalizálási korlátokkal, és CDN-vel rendelkezik, így a szerver tárhelye tiszta marad. Több egyedi képméretet adhat hozzá, mint általában. Gondolj rá úgy, mint ami egyenértékű azzal, hogy flowy MC Hammer nadrágot helyezünk kis vékony farmer helyett ezekre a csecsemőkre, mert az anyag olcsó 🙂

próbálja ki a Smush Pro-t ingyen 7 napig.

Hogyan adhatunk hozzá egyéni képméreteket a WordPress – ben

itt van a kód, amelyet hozzá fogunk adni a funkciófájlunkhoz a képméretek hozzáadásához:

add_image_size( 'the-name-for-custom-image-size', 600, 400, true );

ez a funkció 4 paramétert fogad el ebben a sorrendben:

1. az egyéni képméretnek megadott név
2. a kép szélessége pixelben
3. a kép magassága pixelben
4. ha a képet úgy vágja le, hogy illeszkedjen a fent megadott szélességhez és magassághoz

vágás

a kivágási paraméter logikai érték, tehát igaz vagy HAMIS értéket fog használni. Ha teljesen kihagyja, akkor alapértelmezés szerint hamis lesz.

ha a vágási paramétert true értékre állítja, akkor a WordPress levágja a képet, hogy illeszkedjen az egyéni kép létrehozásakor megadott méretekhez.

például, ha az egyéni képméret 600 x 600 képpont négyzet, és a kivágást true értékre állítja, akkor ha 600 x 800 képpont téglalap alakú képet tölt fel, akkor a 200 képpont levágódik, hogy a kép négyzet legyen.

add_image_size( 'custom-image-square', 600, 600, true );

a vágási paraméter true értékre állítása akkor hasznos, ha a képméreteknek pontosnak kell lenniük, például a kiemelt képek vagy az archívum utáni képek, amelyeknek tökéletesen illeszkedniük kell egy bizonyos dimenzióhoz.

azoknál a képeknél, amelyeknek nagyobb mozgástere lehet, például a WordPress post képmérete és a változó magasságú és szélességű oldalakon lévő képek, akkor beállíthatja a vágást hamis értékre. Ez átméretezi a képeket, de nem változtatja meg a kép alakját, vagy nem vágja le a képpontokat.

tekintse meg image SEO útmutatónkat, ha képeivel forgalmat szeretne irányítani webhelyeire.

a miniatűrök regenerálása

az egyik legfontosabb lépés, ha:

1. a WordPress alapértelmezett képméreteinek módosítása
2. egyéni képméretek hozzáadása vagy
3. váltás egy új témára, amely különböző egyedi méretekkel rendelkezik

a miniatűrök regenerálása.

ebben az összefüggésben a miniatűrök a WordPress által létrehozott összes további képre vonatkoznak, beleértve az egyéni képméreteket, amelyeket a téma tartalmaz, valamint azokat, amelyeket a functions fájl segítségével hoz létre.

ha módosítja a WordPress további képek létrehozásának módját, akkor az csak a feltöltött képeket érinti. Nem frissíti a médiakönyvtárban már található képeket.

a már feltöltött képek megváltoztatásához a népszerű regenerate Thumbnails plugint kell használnia.

a telepítés után megtalálja az Eszközök részben.

amikor új méretekben regenerálja a miniatűröket, lehetősége van törölni a régi, fel nem használt képméreteket, hogy helyet szabadítson fel a kiszolgálón.

egyéni képméretek hozzáadása a Gutenberg képblokk legördülő menüjéhez

csak akkor kell hozzáadnia az alábbi kódot a függvények fájljához, ha azt szeretné, hogy az egyéni képméretek megjelenjenek a Gutenberg képblokk legördülő menüjében. Ha egyéni képméretet hozott létre a kulisszák mögötti témához, kihagyhatja ezt a lépést.

a image_size_names_choose szűrőre fogunk csatlakozni.

a tömbben hozzáadom a add_image_size függvényben megadott Egyéni méret nevét, valamint azt a nevet, amelyet a zárójelben lévő legördülő menüben szeretnék megjeleníteni.

mint megtudtam, amikor ezt az oktatóanyagot elvégeztem, újra kell állítanod a miniatűröket, mielőtt a kép megjelenik a legördülő menüben.

WordPress képméret hozzáadása teljes kódrészlet

ezután mindent, amit megtanultunk, egy kódblokkba egyesítünk egy valós példával.

tegyük fel, hogy egyéni képméreteket szeretne hozzáadni a blogjához.

itt vannak a hozzáadni kívánt képméretek:

• a 1600px 400px kiemelt kép
• egy 800px méretű, hogy átfogja a szélessége a blog tartalmi rész

mivel a téma jelenleg nem támogatja kiemelt képek, kezdjük azzal, hogy.

ezután láthatja az egyedi méreteimet. Figyelje meg, hogy nem vágtam le azokat a képeket, amelyek a blog tartalmának szélességét fogják lefedni. Keményen levágom a kiemelt képeimet, mivel azt akarom, hogy csak jobbra álljanak.

az egyetlen kép, amelyet hozzá akarok adni a Gutenberg legördülő listához, a blogkép, mivel a WordPress kiemelt képméretét fogom használni a témámban.

miután hozzáadtam ezt a kódot a functions.php fájlomhoz, a következő lépés a miniatűrök regenerálása.

az egyéni kiemelt kép használatához a hurokban lévő bejegyzéseimhez a következőket adom hozzá single.php vagy index.php

nézze meg, hogyan adtam hozzá 'featured-large' a the_post_thumbnail() funkcióhoz? Ez megjeleníti a kiemelt képemet a blogbejegyzéseim címe alatt, a tartalmam felett.

egyéni képméretek legjobb gyakorlatok

íme néhány további tipp, hogy ne kerüljön bajba az egyedi képek létrehozása a WordPress programban.

1. mindig töltse fel a lehető legnagyobb fájlt. Ha a kép mérete túl kicsi, a WordPress nem tudja létrehozni az összes méretet, amelyre szüksége van a képek megfelelő kiszolgálásához különféle eszközökön.
2. ha át kell méreteznie a medium_large alapértelmezett méretet, használja a update_option() funkciót. Ugyanezt a funkciót használhatja bármely más WordPress alapértelmezett képméret frissítésére.
3. ha kívül esik a WordPress hurokon, használhatja a get_the_post_thumbnail() funkciót az egyik egyedi kép használatához.
4. itt többet talál a lágy vágásról és a kemény vágásról, amikor egyedi képméreteket hoz létre arra az esetre, ha bajba kerülne.

ennyi az egyéni képméretek hozzáadása

miután megértette, hogyan működnek az egyéni képméretek a WordPress-ben, módosíthatja őket az Ön igényeinek megfelelően, és sok időt takaríthat meg. A képméretek megfelelővé tétele szintén segít javítani a webhely teljesítményét és a keresőmotorok rangsorolását, ezért fontos, hogy helyes legyen.

ha igazán szeretné, hogy a kép optimalizálás egy másik szintre, nézd meg Smush. Hozzáadtunk egy csodálatos CDN-t a Smush Pro-hoz, amely automatikus képátmérettel rendelkezik, ami segít elkerülni a funkciók fájljának módosítását az egyedi képméretek hozzáadásához.

vannak más nagyszerű képoptimalizálási funkciók is, amelyek beépített, mint például a lusta betöltés és a képek konvertálása következő generációs formátumokba. Próbálja ki a Smush Pro free alkalmazást 7 napig, és nézze meg, hogy a képoptimalizálási funkciók hogyan javíthatják webhelyét.

címkék:

• kód
• képek