Sablonok: blokk sablonok és klasszikus sablonok

Modul 5: Sablonok és bővítmények · Olvasási idő: 9 perc

Tanulási cél: E lecke után képes lesz elmagyarázni a blokk sablonok és a klasszikus sablonok közötti különbséget, és tudatosan választani sablont.

Kulcsfogalmak: sablon, template-hierarchia, blokk sablon, sablon (template), sablonrész (template part), theme.json, Webhely szerkesztő, klasszikus sablon, PHP-sablonok, Testreszabó, widgetek, oldalépítő, lock-in, sablonmappa

Mit csinál egy sablon

A sablon határozza meg, hogyan néz ki a weboldala, és hogyan épülnek fel az oldalak: a fejléc a logóval és a menüvel, a tartalom szélessége, a betűtípusok és színek, a lábléc, valamint hogy hogyan néz ki a bejegyzések listája vagy egy keresési találat. Maga a tartalom (a szövegei, oldalai, képei) az adatbázisban van, és sablonváltáskor is megmarad.

Minden sablon saját mappában van a wp-content/themes/ alatt, például wp-content/themes/twentytwentyfive/. Ebben a mappában mindig található egy style.css fájl, amelynek elején egy fejléc írja le a sablont (név, verzió, készítő). Ezt az 5.2. leckében tekinti meg részletesen.

A WordPress 5.9 óta (2022 eleje) kétféle sablon létezik, és ezek valóban másképp működnek.

Klasszikus sablonok

A klasszikus sablon PHP-fájlokból áll: header.php, footer.php, single.php, page.php, index.php, és így tovább. Hogy melyik fájlt melyik oldaltípushoz használja a rendszer, azt a template-hierarchia határozza meg (1.2. lecke). A testreszabást a következőkkel végezheti:

• a Testreszabó felületén (Megjelenés > Testreszabás): logó, színek, a sablon által kínált beállítások;
• widgetekkel (Megjelenés > Widgetek): blokkok az oldalsávban vagy a lábléceben;
• menükkel (Megjelenés > Menük, 4.3. lecke);

Sok ismert sablon (még) klasszikus vagy hibrid. Ezek tökéletesen működnek, és még évekig támogatottak lesznek.

Blokk sablonok

A blokk sablon ugyanazokból a blokkokból épül fel, mint a tartalma. A sablon tartalmazza:

• sablonokat (templates) HTML-fájlokként, blokkokkal, a templates/ mappában: index.html, single.html, page.html, 404.html;
• sablonrészeket (template parts) a parts/ mappában: header.html, footer.html;
• theme.json fájlt a stílusbeállításokkal: színpaletta, betűtípusok, betűméretek, a tartalom szélessége, a blokkok közötti távolság.

Egy rövid részlet a theme.json fájlból:

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primair", "color": "#1e3a5f", "name": "Primair" },
        { "slug": "accent", "color": "#e8a33d", "name": "Accent" }
      ]
    },
    "layout": { "contentSize": "720px", "wideSize": "1200px" }
  }
}

A testreszabást a Webhely szerkesztőben (Megjelenés > Szerkesztő) végezheti: itt szerkeszti a fejlécet, a láblécet és a sablonokat blokkokkal, a Stíluslapok résznél pedig kiválasztja a színeket, a betűtípusokat és a térközöket az egész weboldalhoz.

Fontos különbség, amit érdemes tudnia: amit a Webhely szerkesztőben módosít, az az adatbázisban kerül mentésre, nem a sablonfájlokban. A sablon egy frissítése tehát nem írja felül a módosításait. Ez azonban azt is jelenti: egy adatbázisban tárolt, módosított sablon megelőzi a sablonban lévő változatot. Ha a készítő kiad egy javított sablont, azt nem fogja látni, amíg a saját módosított változata létezik. A Webhely szerkesztőben egy sablont „visszaállíthat” a sablon eredeti változatára.

Oldalépítők

Az oldalépítő (például Elementor, Divi vagy WPBakery) egy bővítmény vagy sablon saját szerkesztővel, amelyben az oldalakat húzással rendezheti és formázhatja. Népszerűek, mert sok lehetőséget kínálnak kód nélkül. Legyen tisztában a hátrányaikkal:

• Lock-in: a formázás saját formátumban van tárolva (gyakran shortcode-okban vagy saját adatokban a wp_postmeta-ban). Ha kikapcsolja az oldalépítőt, az oldalaiból gyakran csak egy kódokból álló kupac marad. A váltás legtöbbször azt jelenti, hogy mindent újra fel kell építeni.
• Nehezebb: sok oldalépítő extra szkripteket és stíluslapokat tölt be minden oldalon. Ez lassíthatja a weboldalát (6. modul).
• Még egy elem, amit karban kell tartani, saját frissítésekkel és saját biztonsági résekkel.

Az oldalépítő nem rossz választás, de hozza meg ezt a döntést tudatosan. Sok weboldal esetén azt, amit szeretne, blokk sablonnal és mintákkal (patterns) is elérheti.

Sablon kiválasztása

Mire figyeljen, ebben a sorrendben:

1. Eredet: a wordpress.org sablonkönyvtára (önkéntesek ellenőrzik) vagy egy ismert készítő saját weboldala. Soha ne használjon „ingyenes” másolatot egy fizetős sablonból letöltő oldalról: ezek gyakran rejtett hátsó ajtót (backdoor) tartalmaznak (5.3. lecke).
2. Karbantartás: mikor frissítették a sablont utoljára? Egy sablon, amelyet az elmúlt évben nem frissítettek, kockázatot jelent.
3. Blokk vagy klasszikus: illeszkedik ahhoz, ahogyan dolgozni szeretne? Blokk sablon, ha a Webhely szerkesztőben szeretné végezni a testreszabást, klasszikus sablon, ha egy meglévő weboldalt ugyanúgy szeretne folytatni.
4. Mit hoz magával: egy sablon, amely „mindenre képes” (csúszka, portfólió, kapcsolatfelvételi űrlap, SEO), a funkcióit a sablonhoz köti. Ha később váltja a sablont, ezeket elveszíti. A funkciók a bővítményekbe valók, a megjelenés a sablonba.
5. Kisegítő lehetőségek és sebesség: a wordpress.org sablonkönyvtárában szűrhet a „Kisegítő lehetőségekre felkészült” (accessibility-ready) jellemzőre. Nézze meg a sablon demóját a PageSpeed Insights eszközben (6.1. lecke).
6. Nyelv: a sablon le van fordítva magyarra, vagy maga is módosíthatja a szövegeket?

Sablonváltás

Sablonváltáskor a tartalma megmarad, de minden körülötte megváltozik. Soha ne tegye ezt meg csak úgy az éles weboldalán:

• Próbálja ki először az új sablont az Élő előnézet funkcióval (a Megjelenés > Sablonok résznél), vagy még jobb, ha tesztkörnyezetben (staging) teszi ezt meg (8.3. lecke).
• Ezt követően ellenőrizze a menüket (4.3. lecke), a widgeteket, a logót, a kezdőlapot és a régi sablon által biztosított bejegyzéstípusokat (4.2. lecke).
• A régi sablon shortcode-jai önálló szövegként ([slider id="3"]) jelenhetnek meg az oldalain.

Összefoglalás

• A sablon határozza meg a megjelenést és a felépítést; a tartalom külön, az adatbázisban van.
• A klasszikus sablonok PHP-sablonok, amelyeket a Testreszabóval, widgetekkel és menükkel módosíthat.
• A blokk sablonok blokkokból és theme.json fájlból épülnek fel, és a Webhely szerkesztőben módosíthatók; ezek a módosítások az adatbázisban vannak tárolva.
• Az oldalépítők sokat kínálnak, de kötöttséget jelentenek, és lassíthatják a weboldalát.
• Válasszon sablont eredet, karbantartás és egyszerűség alapján; a funkciók a bővítményekbe valók, nem a sablonba.

Kvíz

Feladat

Feladat A5.1: Melyik sablont használja az Ön weboldala? Keresse meg a kezdőlapja forráskódjában (Ctrl+U) a /wp-content/themes/ részt, és adja meg a leggyakrabban előforduló sablonmappa nevét. Ha gyermek sablont (child theme) használ (5.2. lecke), adja meg a gyermek sablon mappáját és a szülő sablonét is. Azt is adja meg, hogy blokk sablonról vagy klasszikus sablonról van-e szó, és hogyan állapította ezt meg. A program beolvassa a kezdőlapot és a megadott sablon style.css fájlját, majd összehasonlítja azokat.

További olvasnivaló

A WordPress használatáról egyelőre nincs saját cikkünk; a WordPress hivatalos dokumentációja részletes.

• Mi az a sablon (theme)? (developer.wordpress.org, angol nyelven): https://developer.wordpress.org/themes/getting-started/what-is-a-theme/
• Sablonok a wordpress.org oldalon: https://wordpress.org/themes/
• Webhely szerkesztő (wordpress.org, angol nyelven): https://wordpress.org/documentation/article/site-editor/
• theme.json (developer.wordpress.org, angol nyelven): https://developer.wordpress.org/themes/global-settings-and-styles/