Ha böngészünk a WordPress témakönyvtár, a legtöbb téma borítóképeket mutat be. Ez egy népszerű szolgáltatás. A címlaptrend még a blokk téma könyvtár képernyőképeket is.
Tekintsük a következő példát innen Húsz Húsz (klasszikus téma), amely magában foglalja a borító sablon amely egyetlen bejegyzésben és oldalon is megjeleníthető, ahol a bejegyzés kiemelt képe a böngészőképernyőn felül, a bejegyzés címével és más kívánt metaadatokkal alul jelenik meg. A borítósablonok lehetővé teszik olyan tartalom létrehozását, amely kiemelkedik a tartalommegjelenítés hagyományos korlátai közül.
A borítósablonok létrehozásához jelenleg meg kell írni a PHP kódot, ahogyan az itt rögzítve van Twenty Twenty alapértelmezett téma borítósablonja. Ha megnézzük a template-parts/content-cover.php fájl tartalmazza a kód tartalom megjelenítéséhez, amikor a cover-template használt.
Így nem lehet személyre szabott fedőlapot készíteni, ha nem rendelkezik mély PHP ismeretekkel. Sok hétköznapi WordPress-felhasználó számára az egyetlen lehetőség a hasonló bővítmények használata Custom Post Type UI pontban leírtak szerint ez a rövid videó.
Borító szakaszok blokktémákban
Óta WordPress 5.8, a téma szerzői egyéni sablonokat hozhatnak létre (például egyetlen bejegyzés, szerző, kategória és egyebek) a legfontosabb hős részekkel blokkszerkesztő borítóblokkot, és a témáikba csomagolva minimális kóddal vagy kód nélkül.
Mielőtt belemerülnénk abba, hogyan jönnek létre a felső nagy borítórészek a blokktéma-sablonokban, nézzük meg röviden a két blokktémát Húsz-huszonkettő és a wabi írta: Rich Tabor (teljes recenzió itt).
A színfalak mögött a Twenty Twenty-Two egy nagy fejlécet valósít meg mintaként tárolt rejtett kép hozzáadása a header-dark-large alkatrészek. Míg a Wabi témában a nagy fejléc háttérszíne egyetlen bejegyzésben valósul meg kiemelő háttérszínek és egy 50 képpont magas távtartó blokk (sorok: 5-9). A kiemelő színeket a assets/js/accent-colors.js fájlt.
Sokan úgy döntöttek, hogy a használatával létrehoznak egy felső borító részt fedőblokk, amely lehetővé tette a felhasználók számára, hogy módosítsák a háttérszínt, és statikus képet adhassanak hozzá a Médiatárból, vagy töltsenek fel médiaeszközökről – kód írása nélkül. Ezzel a megközelítéssel képeket a poszt kiemelt képblokk manuálisan kellett hozzáadni minden egyes bejegyzéshez, ha azt akarta, hogy a bejegyzés háttérképként jelenjen meg egyetlen bejegyzésben.
Fedezze le a blokkokat dinamikus bejegyzésekkel
A WordPress 6.0 újabb nagyszerűt tett elérhetővé kiemelt képborító blokkok funkció, amely lehetővé teszi bármely bejegyzés vagy oldal kiemelt képének használatát háttérképként a borítóblokkban.
Az alábbi rövid videót, Az Automattic mérnökei egy példán keresztül tárgyalják a kiemelt képek hozzáadását a blokkok fedezésére Archaeo téma:
A képblokk, beleértve a poszt kiemelt képblokkot is, tovább testreszabható duotone színben theme.json ahogy ebben a rövidben tárgyaljuk A pontok összekötése YouTube-videó (Anne McCarthy, Automatic).
Használj esetpéldákat (Wei, Világos mód)
Ha böngészünk a miniatűr képek között a blokk téma könyvtár, azt látjuk, hogy többségükben nagy fedőfejrészek találhatók. Ha belemélyedünk a sablonfájljaikba, statikus képháttérrel borító blokkokat használnak.
Néhány nemrégiben kifejlesztett téma fedőblokkokat használ a dinamikus poszt kiemelt képháttérrel (pl. Archeo, Wei, Frost, Bright Mode stb.). Az új funkció rövid áttekintése itt érhető el ezt a rövid GitHub-videót.
A dinamikus kiemelő színek jellemzőinek kombinálása wabi téma borítóval és poszttal kiemelt képblokkokkal, Rich Tabor tovább bővíti kreativitását az új Wei téma (a teljes ismertető elérhető itt) dinamikus borítóképek megjelenítéséhez egyetlen bejegyzésből.
Wei bejelentésében Gazdag Tabor írja: „A színfalak mögött a single.html a sablon egy borítóblokkot használ, amely kihasználja a bejegyzés kiemelt képét. Ezután a duótónust a poszthoz rendelt színséma alkalmazza. Így szinte minden kép jól fog kinézni.”
Ha szeretnél mélyebbre ásni a Wei-téma fejlécborító blokkjában, és megtanulod, hogyan készíts saját magadat, itt egy rövid videót ból ből Fränk Klein (WP Development Courses), aki lépésről lépésre elmagyarázza, hogyan jött létre.
A Wei témához hasonlóan Brian Gardner is használja a borító blokkot bejegyzés kiemelt kép blokk a legutóbbi Fényes mód téma a kiemelkedő tartalmak megjelenítéséhez élénk színek.
– mondta Brian a WPTavernnek: „A témában azt szereti a legjobban, ahogyan a Cover Block-ot használják egyetlen oldal. Behúzza a kiemelt képet a Cover blokkba, és egyéni blokkstílusokat kínál az árnyékokhoz és a teljes magasságú opciókhoz. […] Úgy érzem, ez valóban bemutatja azt, ami a modern WordPressben lehetséges.”
További részletekért itt van demo site és a Brian Bright Mode témájának teljes áttekintése.
Összetett elrendezések tervezése blokkszerkesztővel
A közelmúltban a WordPress elindított egy új blokkszerkesztőt landing kezdőlap és egy letöltés oldal. A bejelentés vegyes reakciókat váltott ki olvasóitól, köztük a Matt Mullenweg (Automattic), aki kommentálta azt a 33 napot, ami egy ilyen „egyszerű oldal” megtervezéséhez és elindításához szükséges. Megtalálhatod további beszélgetések a színfalak mögött itt.
Válaszul Jamie Marsland, a Pootlepress létrehozta ezt a YouTube videót ahol közel 20 perc alatt reprodukál egy közel azonos honlapot.
A Marsland-videóhoz kommentálva, Sarah Gooding (WP Travern) írja: „Ő az, akit úgy lehetne leírni, mint egy hatékony felhasználó a blokkszerkesztővel. Gyorsan összekeverheti a sorokat, oszlopokat és csoportokat, szükség szerint módosíthatja a kitöltést és a margókat, és minden szakaszhoz hozzárendelheti a megfelelő színt a tervhez. Jelenleg a legtöbb átlagos WordPress-felhasználó nem képes erre.”
Bár a blokkszerkesztő hosszú utat tett meg, a legtöbb témafejlesztő és hétköznapi felhasználó számára még mindig egyre nagyobb nehézségekbe ütközik, hogy bonyolult elrendezéseket hozzanak létre és tervezzenek vele.
Javítás hozzáadása a TT2 Gopher blokkokhoz
Ebben a részben bemutatom, hogyan bővítettem a TT2 Gopher Blocks téma amire az előző cikkemben hivatkoztam. A korábban leírt témákból származó borítóblokkok ihlette három borítósablont (szerző, kategória és egyborítós) a témához.
Weboldalak böngészése során kétféle borítófejlécet észlelünk. A leggyakrabban megfigyelt fejléc a webhely fejlécével (webhely címével és felső navigációjával) keverve a borítórész a borítóblokkba (pl. Twenty Twenty, Twenty Twenty-Two, Wei, Wabi, Frost, Bright Mode stb.). Találunk olyan fejléc borító részt is, amely nincs keverve a webhely fejlécével, és közvetlenül alatta helyezkedik el, mint például ez Bbc jövő weboldal. A TT2 Gopher blokk témához az utóbbit választottam.
Borítófejléc-minták létrehozása
Először is készítsünk borítófejléc-mintákat szerzői, egyedi és egyéb (kategóriák, címkék) sablonokhoz borítóblokkokkal. Ezután mintákká alakítjuk őket (a leírtak szerint itt korábban), és hívja be a megfelelő fejlécborító mintákat a sablonokba.
Ha jártas a blokkszerkesztővel való munkavégzésben, tervezze meg a fejléc szakaszát borítóblokkokkal a webhelyszerkesztőben, majd alakítsa át a borítófejléc kódját mintákká. Ha azonban nem ismeri az FSE szerkesztőt, akkor a legegyszerűbb módja a minták másolása a minták könyvtár egy bejegyzésben végezze el a szükséges módosításokat és alakítsa át mintává.
Az én korábbi CSS-Tricks cikk, részletesen tárgyaltam a blokkminták létrehozásáról és használatáról. Íme egy rövid áttekintés a munkafolyamatról, amelyet az egyetlen bejegyzés borítójának fejlécmintájának létrehozásához használok:
Egyetlen bejegyzés borítófejléc mintája
1 lépés: Az FSE interfész segítségével hozzunk létre egy új üres fájlt, és kezdjük el az építőelem struktúrát a bal oldali panelen látható módon.
Alternatív megoldásként ezt megteheti először egy bejegyzésben vagy oldalon, majd később másolja és illessze be a jelölést egy mintafájlba.
2 lépés: Ezután, hogy a fenti jelölést mintába rejtsük, először másoljuk át a kód jelölését, és illesszük be egy újba. /patterns/header-single-cover.php kódszerkesztőnkben. Hozzá kell adnunk a szükséges mintafájl fejléc jelölését is (pl. cím, slug, kategóriák, beszúró stb.).
Itt van a teljes kód /patterns/header-single-cover.php file:
|
How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images
3 lépés: Ehhez a demóhoz használtam ez a kép a fotók könyvtárából kitöltő háttérképként, és alkalmazta a Éjféli kettős színű. A bejegyzés által kiemelt kép dinamikus használatához hozzá kell adnunk "useFeaturedImage":true a borítóblokkban a fenti kitöltő kép hivatkozásának lecserélésével közvetlenül a "dimRatio":50 úgy, hogy a 10. sor a következőképpen nézzen ki:
Alternatív megoldásként a kitöltő kép kattintással is módosítható Cserélje és kiválasztja Kiemelt kép használata opció:
Most a fejlécborító mintáknak láthatónak kell lenniük a minták beszúró paneljén, hogy bárhol használhatók legyenek a sablonokban, bejegyzésekben és oldalakon.
Archív borítófejlécek
Ihlette ezt a WP Tavern bejegyzést és a szerzői sablon fejlécének létrehozásához szükséges lépésenkénti áttekintés, szerettem volna egy hasonló borítófejlécet létrehozni, és hozzáadni a TT2 Gopher témához.
Először is hozzuk létre az archívum borítójának fejlécmintáját author.html a sablont is, követve a fenti munkafolyamatot. Ebben az esetben ezt egy új üres oldalon hozom létre, blokkok hozzáadásával (ahogyan az alábbi listanézetben látható):
A borító hátterében ugyanazt a képet használtam, mint az egyetlen bejegyzés fejlécének borítójában.
Mivel a szerzői blokkon egy rövid szerzői életrajzot szeretnénk megjeleníteni, egy életrajzi nyilatkozatot is hozzá kell adni a felhasználói profiloldalhoz, különben egy üres hely jelenik meg a kezelőfelületen.
A következő a jelölőkód a header-author-cover, hogy a következő lépésben mintát fogunk használni:
Published by:
A jelölés elfedéséhez a header-author-cover mintát, fel kell adnunk a szükséges mintafájl fejlécjelölést a korábban leírtak szerint. Szerkesztésével a header-author-cover.php mintát, hasonló fejlécborítókat készíthetünk címkékhez, taxonómiához és más egyéni sablonokhoz.
A header-category-cover.php minta az enyémnek category.html sablon elérhető a GitHubon.
Sablonok létrehozása fejlécborító blokkokkal
WordPress 6.0 és a legutóbbi Gutenberg 13.7 kiterjesztett sablonkészítési funkciókat a blokkszerkesztőbe, így sok WordPress-felhasználó számára lehetővé válik a kódolás mélyreható ismerete nélkül személyre szabott sablonok létrehozása.
Részletesebb információkért és felhasználási esetekért itt a alapos testreszabási megjegyzés: Justin Tadlock.
Szerkesztő letiltása lehetővé teszi különféle sablonok létrehozását, beleértve a borítósablonokat is. Tekintsük át röviden a kombinálás módját fedőblokk és a poszt kiemelt képblokk az új sablonos felhasználói felületnek köszönhetően könnyen létrehozhat különféle típusú egyedi borítósablonokat, még akkor is, ha nincs vagy gyenge kódolási készség.
A Gutenberg 13.7 sokkal egyszerűbbé tette a sablonok létrehozását. Hogyan készítsünk blokkosablonokat kódokkal és a a webhelyszerkesztőben a Téma kézikönyv és az előző cikkem.
Szerző sablon borító blokkal
A felső (fejléc szakasz) jelölése author.html a sablon alább látható (6. sor):
...
...
...
... Itt vannak képernyőképek a borítófejlécekről author.html és a category.html sablonok:
Az egész mindkét sablon kódja elérhető a GitHubon.
Egyetlen oszlop fedőtömbbel
A borítóblokk megjelenítéséhez egyetlen bejegyzésünkben meg kell hívnunk a header-cover-single pattern a fejléc alatt (3. sor):
....
....
....Íme egy képernyőkép, amely az egyetlen bejegyzés elülső nézetét mutatja a fejléc borítójával:
Az egész single-cover.html sablon elérhető a GitHubon.
További, lépésről lépésre bemutató oktatóanyagokat találhat az a hős fejléc bejegyzés szakasz és a poszt kiemelt képi háttérborító blokkokkal on WP taverna és a Teljes oldal szerkesztés weboldal.
Tessék, itt van!
Hasznos források
Kiemelt képborító blokk
Blogbejegyzések
Még akkor is, ha a blokktémák általában igen sok visszautasítást kap a WordPress közösség tagjaitól, szerintem, ők jelentik a WordPress jövőjét, is. A blokktémákkal az amatőr témaírók mély kódolási ismeretek, valamint a PHP és JavaScript nyelvek elsajátítása nélkül most már összetett elrendezésű témákat hozhatnak létre, amelyekben egy hősborító rész található, amint azt ebben a cikkben leírtuk. minták és a stílusvariációk.
Korai Gutenberg-felhasználóként nem is tudnék jobban izgatott lenni az olyan új tematikus eszközöktől, mint pl blokk témát hozzon létre beépülő modul és mások, amelyek lehetővé teszik a téma szerzőinek a következők elérését közvetlenül a blokkszerkesztő felhasználói felületéről, kód írása nélkül:
- (I) teremt
- (ii) felülírja a témafájlokat és exportálja
- (iii) üres vagy gyermektémát generál, és
- (iv) módosíthatja és mentheti az aktuális téma stílusváltozatait
Ezenkívül a Gutenberg bővítmény legutóbbi iterációi lehetővé teszik az engedélyezést fluid tipográfia és a elrendezési igazítások és egyéb stilisztikai vezérlők segítségével theme.json fájl JavaScript és egy sor CSS-szabály nélkül.
Köszönjük, hogy elolvasta, és megosztja észrevételeit és gondolatait az alábbiakban!
