Sablonstílusok részletesen

A sablonstílusok (Theme Styles) a webhely szintű alapértékek a Bricksben. Velük adod meg az oldalak, sablonok és elemek alapkinézetét: tipográfiát, linkeket, színeket, kontextusfüggő térközt, gombokat, űrlapokat, képeket, elrendezéselemeket, felugró ablakokat és más elemek alapértékeit. A rövid bevezetést és az első sablonstílus létrehozását az Első lépések → Sablonstílusok fejezet mutatja.

A sablonstílusok nem helyettesítik a globális osztályokat és az elemstílusokat: ők a legszélesebb stílusréteg, és a specifikusabb stílusok felülírhatják őket. Alapértékekhez használj sablonstílust, újrahasználható mintákhoz globális osztályt, egyedi kivételekhez elem azonosítós stílust.

Sablonstílus létrehozása

1. Nyisd meg a szerkesztőt, kattints a Stíluskezelő ikonra, és válaszd a Sablonstílusok lapot.
2. Nyisd meg a sablonstílusok választóját.
3. Írd be a nevet.
4. Nyomj Entert, vagy kattints a mentés ikonra.
5. Válaszd ki az új sablonstílust.
6. Add meg a feltételeket.
7. Állítsd be a stíluscsoportokat.

https://minta-bolt.hu/home/?bricks=run

A képen a kék tájékoztató sáv szerint alapból csak a legspecifikusabb sablonstílus töltődik be; alatta az Alap stílus és a stíluscsoportok listája áll.

A működés lényege

Egy sablonstílusnak két fontos része van:

• Feltételek: hol érvényes a sablonstílus.
• Beállítások: milyen alapértékeket ír ki.

A weboldal minden kérésénél a Bricks összeveti a sablonstílusok feltételeit az aktuális környezettel. Az illeszkedők aktívvá válnak, és a Bricks az aktív sablonstílusok beállításaiból generálja a CSS-t. A szerkesztő is kiszámolja a szerkesztett oldalhoz aktív sablonstílust, így a panel külön tudja mutatni az aktív és a többi stílust.

Stílushierarchia

A sablonstílusok alapstílusok: a Bricks őket írja ki előbb, a specifikusabb Bricks-kezelt CSS (globális osztályok, oldalbeállítások, sablontartalom, elembeállítások, felugró ablakok stílusai) csak utánuk következik. A gyakorlatban:

• a sablonstílus adja az alapértéket,
• a globális osztályok stílusai felülírhatják az azonos sablonstílus-értékeket,
• az oldalbeállítások is felülírhatják,
• az elem azonosítós stílusok is,
• az erősebb szelektorú vagy később kiírt egyéni CSS is felülírhatja.

Példa:

1. A sablonstílus az összes gombot fekete szövegűre állítja.
2. A .button--primary globális osztály a gomb szövegét fehérre állítja.
3. Egy adott gomb azonosítós stílusa pirosra állítja.

Az adott gombon az azonosítós stílus győz, mert specifikusabb és később kerül a kimenetbe.

Feltételek

A Feltételek csoportban adod meg, hol használja a Bricks a sablonstílust. Ha az egész webhelyen érvényes legyen: nyisd meg a Feltételek csoportot, kattints a Hozzáadás feltétel gombra, és válaszd a Teljes webhely lehetőséget. Az első sablonstílusnál a Bricks magától felveszi a Teljes webhely feltételt.

https://minta-bolt.hu/home/?bricks=run

A képen a Teljes webhely feltétel látszik a másolás és a törlés ikonnal; alatta a Hozzáadás feltétel gomb.

Annyi feltételt adhatsz meg, amennyit akarsz. Például ha egy sablonstílust két konkrét nyitóoldalra és a kezdőlapra szeretnél alkalmazni:

1. Adj hozzá egy feltételt az egyes nyitóoldalakra.
2. Adj hozzá egy másik feltételt a Kezdőlap esetére.

A sablonstílus akkor illeszkedik, ha bármelyik nem kizárt feltétele illeszkedik az aktuális környezetre.

Kizáró feltétel

Bármelyik sablonstílushoz megadhatsz kizáró feltételt is. Kapcsold be a feltétel kizárás vezérlőjét: ha a kizáró feltétel érvényes, a Bricks az adott környezetben nem használja a sablonstílust. Példa: használd ezt a sablonstílust mindenhol, kivéve az Adatvédelmi irányelvek oldalon.

Az aktív sablonstílus meghatározása

Ha több sablonstílus is illik egy oldalra, a Bricks a feltételeket specifikusság szerint pontozza. Gyakori sorrend:

• Teljes webhely: a legszélesebb találat.
• Archívum vagy általános archívum feltételek.
• Bejegyzéstípus feltételek.
• Konkrét archívum, kifejezés, keresés, hibaoldal vagy gyermek feltételek.
• Kezdőlap.
• Konkrét bejegyzés vagy oldal azonosítója: a leggyakoribb legspecifikusabb találat.

A pontos találat függ az aktuális kéréstől, az előnézeti környezettől, az archívum típusától, a taxonómiától, a bejegyzéstípustól, a többnyelvű fordítástól és az egyéni feltételszűrőktől.

Alapból a Bricks csak a legspecifikusabb illeszkedő sablonstílust tölti be. Például:

• az A sablonstílus a Teljes webhelyre vonatkozik,
• a B sablonstílus az Oldalakra,
• a C sablonstílus egy konkrét oldalra.

Azon a konkrét oldalon a C a legspecifikusabb találat, ezért alapból ezt tölti be a Bricks.

Betöltési mód

A betöltési módot a WordPress admin → Bricks → Beállítások → Általános → Témastílusok: Betöltési mód alatt állíthatod. Lehetőségek:

• Legspecifikusabb: alapértelmezett. A Bricks csak a legspecifikusabb illeszkedő sablonstílust tölti be.
• Az összes illeszkedő témastílus betöltése: a Bricks minden olyan sablonstílust betölt, amelynek feltétele illeszkedik az aktuális oldalra.

A Legspecifikusabb módot akkor használd, ha minden környezetnek egy teljes sablonstílusa legyen. Az összes illeszkedő betöltését akkor, ha szándékosan rétegezed a sablonstílusokat, például:

• az egész webhelyre érvényes globális tipográfiai sablonstílus,
• a bejegyzésekre külön blog sablonstílus,
• egy kis oldalkészletre nyitóoldal sablonstílus.

Az összes illeszkedő betöltésekor a Bricks a feltételek specifikussága szerint rendezi a stílusokat. Ha több aktív sablonstílus ugyanazt a tulajdonságot állítja, a CSS kaszkád dönt. A véletlen átfedéseket úgy kerülheted el, ha minden sablonstílus egy célra összpontosít.

Stíluscsoportok

Az elérhető csoportok a Bricks verziójától, a regisztrált elemektől és az integrációktól függnek. A fő csoportok:

• Feltételek: hol érvényes a sablonstílus.
• Stíluslap: egyéni CSS ehhez a sablonstílushoz.
• Általános: általános webhelyalapértékek.
• Színek: alapértelmezett színértékek.
• Hivatkozások: linkek alapértékei és opcionális további linkszelektorok.
• Kontextusfüggő térköz: térközszabályok, valamint az alap margó és belső margó tisztítása.
• Tartalom (margó): a tartalom margóinak alapértékei.
• Tipográfia: HTML és szöveg alapértékei.
• Felugró ablak: felugró ablakok alapértékei.
• Elemek: a támogatott elemek, például Szakasz, Tároló, Blokk, Div, Gomb, Címsor, Kép, Lista, Navigációs menü, Bejegyzés tartalma, Szöveg, Videó és mások alapértékei.

Az integrációk további sablonstílus-csoportokat is regisztrálhatnak.

Stíluslap csoport

A Stíluslap csoportban egyéni CSS-t adhatsz a sablonstílushoz. Ez a CSS a sablonstílussal együtt kerül a kimenetbe. Nem töréspont-érzékeny úgy, mint a vezérlőkből generált CSS, ezért ha kell, használj normál CSS-t és media query-ket.

Olyan CSS-hez használd, amely ugyanahhoz a sablonstílus-környezethez tartozik. A webhely egészére érvényes, a sablonstílus feltételeitől független kódhoz a globális egyéni CSS való.

Tipográfiai megjegyzések

A sablonstílusok állíthatják a HTML, a törzsszöveg, a címsorok, a linkek és az elemspecifikus tipográfiai vezérlők alapértékeit. Ha több tipográfiai vezérlő is érvényes, a Bricks úgy rendezi a generált CSS-t, hogy a specifikusabb címsorbeállítások felülírhassák az általánosabbakat.

Ha a Stíluskezelő skálái be vannak állítva, a Stíluskezelő az rem-alapú skálaszámításokhoz automatikus értékként a sablonstílus HTML-betűméretét használhatja, hacsak a Stíluskezelő beállításai nem írják felül.

Pszeudóosztályok

A sablonstílusok a támogatott stíluscsoportokhoz pszeudóosztály-beállításokat is tárolhatnak, például hover vagy fókusz állapotot. Általános alapértékekhez használd ezeket. Ha az állapot egy újrahasználható komponensmintához tartozik, globális osztályt használj; ha egyetlen elemre jellemző, elem azonosítós stílust.

Exportálás

1. A szerkesztőben nyisd meg a Stíluskezelő → Sablonstílusok lapot.
2. Válaszd ki az exportálni kívánt sablonstílust.
3. Kattints az exportálás ikonra.
4. Töltsd le a generált JSON-fájlt.

Importálás

1. A szerkesztőben nyisd meg a Stíluskezelő → Sablonstílusok lapot.
2. Kattints az importálás ikonra.
3. Válaszd ki a sablonstílus JSON-fájlját.
4. Töltsd fel.

Ha a telepítésedben már létezik azonos azonosítójú sablonstílus, a Bricks kihagyja az importálását. Ha külön stílusként akarod importálni, exportálás előtt nevezd át vagy duplikáld a forrás sablonstílust.

Oldalbeállítások és sablonstílusok

Az oldalbeállítások az aktuális oldalra vagy sablonra vonatkoznak, és a sablonstílusok után kerülnek a kimenetbe. Oldalspecifikus dolgokra használd őket: egyoldalas navigáció, oldalszintű kód, SEO és közösségi értékek, oldalspecifikus stílus. Ha egy stílus alapértelmezett legyen egy oldalcsoportnak, használj sablonstílust. Ha egyetlen oldalra vagy sablonra vonatkozik, oldalbeállítást.

A Stíluskezelő és a sablonstílusok

A sablonstílusok a Stíluskezelő egyik részei. Mellettük dolgozik a Színkezelő, a Globális változók kezelője, a Globális osztálykezelő, valamint a Stíluskezelő beállításai és skálái. A sablonstílusok az általános alapértékeket adják, a változók és a színpaletták az újrahasználható értékeket, a globális osztályok az újrahasználható mintákat.

Jó gyakorlatok

• Mindig adj meg feltételeket: a feltétel nélküli sablonstílus nem válik aktívvá.
• Kezdd egy Teljes webhely sablonstílussal az alap tipográfiához, a linkekhez és az általános elemalapértékekhez.
• Specifikusabb sablonstílust csak akkor használj, ha egy környezetnek tényleg más alapértékek kellenek.
• Ne állítsd ugyanazt a tulajdonságot sok egymásra rétegzett sablonstílusban, hacsak nem érted a kaszkádot.
• A komponensspecifikus stílust tartsd globális osztályban, ha újrahasználható mintához tartozik.
• A Stíluslap csoportot környezetspecifikus CSS-hez használd, ne egymással nem összefüggő globális CSS-hez.
• A feltételek módosítása után próbáld ki az egyes oldalakat, archívumokat, sablonokat és többnyelvű változatokat.

Hibaelhárítás

A sablonstílus nem aktív. Nézd meg, van-e legalább egy feltétele, érvényes-e rá kizáró feltétel, és hogy a Legspecifikusabb betöltési módban nincs-e nála specifikusabb sablonstílus.

Egy általános sablonstílus eltűnt egy konkrét oldalon. Legspecifikusabb módban ez a várt működés, ha az oldalra egy specifikusabb sablonstílus illik. Csak akkor válts az Az összes illeszkedő témastílus betöltése módra, ha azt akarod, hogy a stílusok rétegződjenek.

Egy sablonstílus-vezérlő nem hat egy elemre. Nézd meg, nem írja-e felül ugyanazt a tulajdonságot az elem globális osztálya, azonosítós stílusa, egy oldalbeállítás vagy egyéni CSS.

Hiányzik egy csoport vagy vezérlő. A sablonstílus-csoportok a regisztrált elemektől és integrációktól függnek. Ha egy elem vagy integráció nem érhető el, a csoportja nem jelenik meg.

A Stíluslap csoport egyéni CSS-e nem reszponzív. A Stíluslap sima CSS. Ha töréspontfüggő viselkedés kell, írj hozzá saját media query-ket.