Temos: blokų temos ir klasikinės temos

5 modulis: Temos ir įskiepiai · Skaitymo trukmė: 9 min.

Mokymosi tikslas: Po šios pamokos galėsite paaiškinti skirtumą tarp blokų temų ir klasikinių temų bei apgalvotai pasirinkti temą.

Pagrindinės sąvokos: tema, šablonų hierarchija, blokų tema, šablonas (template), šablono dalis (template part), theme.json, Tinklalapio redaktorius, klasikinė tema, PHP šablonai, Išvaizdos redaktorius (Customizer), valdikliai, puslapių kūrimo įrankis, lock-in (priklausomybė), temos aplankas

Ką daro tema

Tema nulemia, kaip atrodo Jūsų svetainė ir kaip sudaryti puslapiai: antraštė su logotipu ir meniu, turinio plotis, šriftai ir spalvos, poraštė, kaip atrodo įrašų sąrašas ar paieškos rezultatas. Pats turinys (Jūsų tekstai, puslapiai, nuotraukos) yra saugomas duomenų bazėje ir išlieka pakeitus temą.

Kiekviena tema yra atskirame aplanke, esančiame wp-content/themes/, pavyzdžiui, wp-content/themes/twentytwentyfive/. Tame aplanke visada yra failas style.css, kurio viršuje yra antraštė, aprašanti temą (pavadinimas, versija, kūrėjas). Tai pamatysite 5.2 pamokoje.

Nuo WordPress 5.9 versijos (2022 m. pradžia) yra dviejų tipų temos, ir jos veikia visiškai skirtingai.

Klasikinės temos

Klasikinę temą sudaro PHP failai: header.php, footer.php, single.php, page.php, index.php ir t. t. Kuris failas naudojamas kuriam puslapiui, nustatoma pagal šablonų hierarchiją (1.2 pamoka). Pritaikymą atliekate:

• Išvaizdos redaktoriuje (Customizer) (Išvaizda > Konfigūruoti): logotipas, spalvos, temos siūlomos parinktys;
• valdiklius (Išvaizda > Valdikliai): blokai šoninėje juostoje ar poraštėje;
• meniu (Išvaizda > Meniu, 4.3 pamoka);

Daug žinomų temų (kol kas) yra klasikinės arba hibridinės. Jos puikiai veikia ir bus palaikomos dar daugelį metų.

Blokų temos

Blokų tema sudaryta iš tų pačių blokų kaip ir Jūsų turinys. Tema turi:

• šablonus (templates) kaip HTML failus su blokais, aplanke templates/: index.html, single.html, page.html, 404.html;
• šablono dalis (template parts) aplanke parts/: header.html, footer.html;
• theme.json su stilių nustatymais: spalvų paletė, šriftai, šriftų dydžiai, turinio plotis, tarpai tarp blokų.

Mažas theme.json fragmentas:

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

Pritaikymą atliekate Tinklalapio redaktoriuje (Išvaizda > Redaktorius): redaguojate antraštę, poraštę ir šablonus su blokais, o skiltyje Stiliai pasirenkate spalvas, šriftus ir tarpus visai svetainei.

Svarbus skirtumas, kurį turite žinoti: tai, ką pritaikote Tinklalapio redaktoriuje, išsaugoma duomenų bazėje, o ne temos failuose. Taigi temos atnaujinimas neperrašo Jūsų pritaikymų. Tačiau tai taip pat reiškia: pritaikytas šablonas duomenų bazėje turi pirmenybę prieš šabloną temoje. Jei kūrėjas išleidžia patobulintą šabloną, Jūs to nematysite, kol egzistuoja Jūsų pritaikyta versija. Tinklalapio redaktoriuje galite šabloną „atkurti“ į temos versiją.

Puslapių kūrimo įrankiai

Puslapių kūrimo įrankis (toks kaip Elementor, Divi ar WPBakery) yra įskiepis arba tema su savo redaktoriumi, kuriame tempiate ir formuojate puslapius. Jie yra populiarūs, nes siūlo daug galimybių be kodo. Atkreipkite dėmesį į trūkumus:

• Lock-in (priklausomybė): formatavimas saugomas savo pačių formatu (dažnai trumpieji kodai (shortcodes) arba nuosavi duomenys wp_postmeta lentelėje). Išjungus kūrimo įrankį, iš Jūsų puslapių dažnai lieka kodų netvarka. Persijungimas dažniausiai reiškia viską kurti iš naujo.
• Sunkesnė: daugelis kūrimo įrankių kiekviename puslapyje įkelia papildomus scenarijus (scripts) ir stilių lenteles (stylesheets). Tai gali sulėtinti Jūsų svetainę (6 modulis).
• Dar vienas komponentas, kurį reikia prižiūrėti, su savo atnaujinimais ir savo spragomis.

Puslapių kūrimo įrankis nėra blogas pasirinkimas, tačiau rinkitės jį sąmoningai. Daugeliui svetainių tai, ko norite, galima pasiekti ir su blokų tema bei šablonais (patterns).

Kaip pasirinkti temą

Į ką atkreipti dėmesį, šia tvarka:

1. Kilmė: wordpress.org temos aplankas (tikrinamas savanorių) arba žinomas kūrėjas su savo svetaine. Niekada nenaudokite „nemokamos“ mokamos temos kopijos iš parsisiuntimo svetainės: joje dažnai būna paslėptas įsilaužimo kelias (5.3 pamoka).
2. Priežiūra: kada tema buvo paskutinį kartą atnaujinta? Tema, kuri nebuvo atnaujinta per pastaruosius metus, tampa rizika.
3. Blokų ar klasikinė: ar ji atitinka, kaip norite dirbti? Blokų tema, jei norite pritaikyti Tinklalapio redaktoriuje, klasikinė tema, jei norite tęsti esamą svetainę tuo pačiu būdu.
4. Ką ji apima: tema, kuri „viską moka“ (slankiklis (slider), portfolis, kontaktinė forma, SEO), susieja funkcijas su tema. Vėliau pakeitus temą, Jūs tų funkcijų neteksite. Funkcijos priklauso įskiepiams, dizainas temai.
5. Prieinamumas ir greitis: wordpress.org temos aplanke galite filtruoti pagal požymį „Pritaikyta prieinamumui“ (accessibility-ready). Peržiūrėkite temos demonstracinę versiją su PageSpeed Insights (6.1 pamoka).
6. Kalba: ar tema išversta į Jūsų kalbą, ar galite patys pritaikyti tekstus?

Temos keitimas

Pakeitus temą, Jūsų turinys išlieka, bet viskas aplink jį pasikeičia. Niekada nedarykite to tiesiog taip veikiančioje svetainėje:

• Pirmiausia išbandykite naują temą su Tiesiogine peržiūra (skiltyje Išvaizda > Temos), arba geriau bandomojoje aplinkoje (staging) (8.3 pamoka).
• Tada patikrinkite meniu (4.3 pamoka), valdiklius, logotipą, pradinį puslapį ir įrašų tipus, kuriuos teikė sena tema (4.2 pamoka).
• Senos temos trumpieji kodai (shortcodes) Jūsų puslapiuose pasirodys kaip atskiras tekstas ([slider id="3"]).

Santrauka

• Tema nulemia dizainą ir struktūrą; turinys saugomas atskirai duomenų bazėje.
• Klasikinės temos yra PHP šablonai, pritaikomi su Išvaizdos redaktoriumi (Customizer), valdikliais ir meniu.
• Blokų temos sudarytos iš blokų ir theme.json, pritaikomos Tinklalapio redaktoriuje; tie pritaikymai saugomi duomenų bazėje.
• Puslapių kūrimo įrankiai siūlo daug galimybių, bet susieja Jus su savimi ir gali apsunkinti Jūsų svetainę.
• Rinkitės temą pagal kilmę, priežiūrą ir paprastumą; funkcijos priklauso įskiepiams, ne temai.

Testas (quiz)

Užduotis

Užduotis A5.1: Kokią temą naudoja Jūsų svetainė? Jūsų pradinio puslapio pirminiame kode (Ctrl+U) suraskite /wp-content/themes/ ir įrašykite tą temos aplanko pavadinimą, kuris pasirodo dažniausiai. Jei naudojate vaikinę temą (child theme) (5.2 pamoka), įrašykite vaikinės temos aplanką ir tėvinės temos (parent theme) aplanką. Taip pat nurodykite, ar tai blokų, ar klasikinė tema, ir kaip tai nustatėte. Programa nuskaitys pradinį puslapį ir nurodytos temos failą style.css bei palygins.

Papildoma literatūra

Darbui pačiame WordPress dar neturime savų straipsnių; oficiali WordPress dokumentacija yra išsami.

• Kas yra tema? (developer.wordpress.org, anglų kalba): https://developer.wordpress.org/themes/getting-started/what-is-a-theme/
• Temos wordpress.org svetainėje: https://wordpress.org/themes/
• Tinklalapio redaktorius (wordpress.org, anglų kalba): https://wordpress.org/documentation/article/site-editor/
• theme.json (developer.wordpress.org, anglų kalba): https://developer.wordpress.org/themes/global-settings-and-styles/