Tēmas: bloku tēmas un klasiskās tēmas

5. modulis: Tēmas un spraudņi · Lasīšanas laiks: 9 minūtes

Mācību mērķis: pēc šīs nodarbības Jūs varēsiet izskaidrot atšķirību starp bloku tēmām un klasiskajām tēmām un apdomīgi izvēlēties tēmu.

Galvenie jēdzieni: tēma, veidņu hierarhija, bloku tēma, sjabloons (template), sjabloona daļa (template part), theme.json, Vietnes redaktors, klasiskā tēma, PHP sjabloni, Tēmas pielāgošana (Customizer), logrīki (widgets), lapu veidotājs, lock-in, tēmas mape

Ko dara tēma

Tēma nosaka, kā izskatās Jūsu tīmekļa vietne un kā ir veidotas lapas: galvene ar logotipu un izvēlni, satura platums, fonti un krāsas, kājene, kā izskatās ziņu saraksts vai meklēšanas rezultāts. Pats saturs (Jūsu teksti, lapas, attēli) atrodas datubāzē un paliek nemainīgs, mainot tēmu.

Katra tēma atrodas savā mapē zem wp-content/themes/, piemēram, wp-content/themes/twentytwentyfive/. Šajā mapē vienmēr ir fails style.css, kura sākumā ir galvene, kas apraksta tēmu (nosaukums, versija, veidotājs). To redzēsiet 5.2. nodarbībā.

Kopš WordPress 5.9 versijas (2022. gada sākums) ir divu veidu tēmas, un tās darbojas patiešām atšķirīgi.

Klasiskās tēmas

Klasiskā tēma sastāv no PHP failiem: header.php, footer.php, single.php, page.php, index.php un tā tālāk. Tas, kurš fails tiek izmantots kurai lapai, seko veidņu hierarhijai (1.2. nodarbība). Pielāgošanu veicat:

• Tēmas pielāgošanā (Izskats > Pielāgot): logotips, krāsas, opcijas, ko piedāvā tēma;
• logrīkiem (Izskats > Logrīki): bloki sānjoslā vai kājenē;
• izvēlnēm (Izskats > Izvēlnes, 4.3. nodarbība);

Daudzas pazīstamas tēmas (joprojām) ir klasiskas vai hibrīdas. Tās darbojas lieliski un tiks atbalstītas vēl gadiem ilgi.

Bloku tēmas

Bloku tēma ir veidota no tiem pašiem blokiem, kas Jūsu saturs. Tēmai ir:

• sjabloni (templates) kā HTML faili ar blokiem mapē templates/: index.html, single.html, page.html, 404.html;
• sjabloona daļas (template parts) mapē parts/: header.html, footer.html;
• theme.json ar stila iestatījumiem: krāsu palete, fonti, fontu izmēri, satura platums, atstarpe starp blokiem.

Neliela theme.json daļa:

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

Pielāgošanu veicat Vietnes redaktorā (Izskats > Redaktors): Jūs rediģējat galveni, kājeni un sjablonus ar blokiem, un sadaļā Stili izvēlaties krāsas, fontus un atstarpes visai vietnei.

Svarīga atšķirība, kas Jums jāzina: tas, ko mainat Vietnes redaktorā, tiek saglabāts datubāzē, nevis tēmas failos. Tēmas atjauninājums tātad neaizstāj Jūsu izmaiņas. Taču tas nozīmē arī: pielāgots sjablons datubāzē ir prioritārs pār sjablonu tēmā. Ja veidotājs izlaiž uzlabotu sjablonu, Jūs to neredzēsiet, kamēr pastāv Jūsu pielāgotā versija. Vietnes redaktorā sjablonu var "atjaunot" uz tēmas versiju.

Lapu veidotāji

Lapu veidotājs (piemēram, Elementor, Divi vai WPBakery) ir spraudnis vai tēma ar savu redaktoru, kurā Jūs velkat un veidojat lapas. Tie ir populāri, jo piedāvā daudz iespēju bez koda. Apzinieties trūkumus:

• Lock-in: formatējums atrodas savā formātā (bieži shortcodes vai pašu dati wp_postmeta tabulā). Ja izslēdzat veidotāju, no Jūsu lapām bieži paliek kodu juceklis. Pāriešana parasti nozīmē visu veidot no jauna.
• Smagāks: daudzi veidotāji katrā lapā ielādē papildu skriptus un stilu lapas. Tas var padarīt Jūsu vietni lēnāku (6. modulis).
• Vēl viena sastāvdaļa, kas jāuztur, ar saviem atjauninājumiem un savām ievainojamībām.

Lapu veidotājs nav nepareiza izvēle, taču izvēlieties to apzināti. Daudzām vietnēm to, ko vēlaties, var panākt arī ar bloku tēmu un paraugiem (patterns).

Tēmas izvēle

Uz ko pievērst uzmanību šādā secībā:

1. Izcelsme: wordpress.org tēmu mape (pārbaudīta no brīvprātīgajiem) vai pazīstams veidotājs ar savu tīmekļa vietni. Nekad "bezmaksas" maksas tēmas kopiju no lejupielādes vietnes: tā bieži satur aizmugures durvis (5.3. nodarbība).
2. Uzturēšana: kad tēma pēdējo reizi atjaunināta? Tēma bez atjauninājumiem pēdējā gada laikā kļūst par risku.
3. Bloku vai klasiskā: vai tā atbilst Jūsu darba stilam? Bloku tēma, ja vēlaties pielāgot Vietnes redaktorā, klasiskā tēma, ja vēlaties turpināt esošu vietni tādā pašā veidā.
4. Ko tā ietver: tēma, kas "var visu" (slaideris, portfolio, kontaktforma, SEO), piesaista funkcijas tēmai. Ja vēlāk mainīsiet tēmu, Jūs tās zaudēsiet. Funkcijām jābūt spraudņos, dizainam tēmā.
5. Pieejamība un ātrdarbība: wordpress.org tēmu mapē varat filtrēt pēc atzīmes "Accessibility Ready" (pieejamība nodrošināta). Apskatiet tēmas demonstrāciju PageSpeed Insights rīkā (6.1. nodarbība).
6. Valoda: vai tēma ir tulkota Jūsu valodā, vai arī varat pats pielāgot tekstus?

Tēmas maiņa

Mainot tēmu, Jūsu saturs paliek, taču viss apkārtējais mainās. Nekad nedariet to vienkārši tiešajā (live) vietnē:

• Vispirms izmēģiniet jauno tēmu ar Priekšskatīt (sadaļā Izskats > Tēmas), vai labāk testa vidē (staging) (8.3. nodarbība).
• Pēc tam pārbaudiet izvēlnes (4.3. nodarbība), logrīkus, logotipu, sākumlapu un ziņu tipus, ko nodrošināja vecā tēma (4.2. nodarbība).
• Vecās tēmas shortcodes parādīsies kā atsevišķs teksts ([slider id="3"]) Jūsu lapās.

Kopsavilkums

• Tēma nosaka dizainu un struktūru; saturs atrodas atsevišķi datubāzē.
• Klasiskās tēmas ir PHP sjabloni, pielāgoti ar Tēmas pielāgošanu (Customizer), logrīkiem un izvēlnēm.
• Bloku tēmas ir veidotas no blokiem un theme.json, un tiek pielāgotas Vietnes redaktorā; šīs izmaiņas tiek saglabātas datubāzē.
• Lapu veidotāji piedāvā daudz ko, taču piesaista Jūs un var padarīt Jūsu vietni smagāku.
• Izvēlieties tēmu pēc izcelsmes, uzturēšanas un vienkāršības; funkcijām jābūt spraudņos, nevis tēmā.

Tests

Uzdevums

Uzdevums A5.1: Kādu tēmu izmanto Jūsu tīmekļa vietne? Jūsu sākumlapas pirmkodā (Ctrl+U) atrodiet /wp-content/themes/ un ievadiet biežāk sastopamās tēmas mapes nosaukumu. Ja izmantojat bērna tēmu (child theme) (5.2. nodarbība), ievadiet bērna tēmas mapi un vecāktēmas (parent theme) mapi. Norādiet arī, vai tā ir bloku tēma vai klasiskā tēma, un kā to noteicāt. Programma nolasīs sākumlapu un minētās tēmas style.css failu un veiks salīdzinājumu.

Papildu lasāmviela

Par darbu pašā WordPress sistēmā mums vēl nav savu rakstu; WordPress oficiālā dokumentācija ir plaša.

• Kas ir tēma? (developer.wordpress.org, angļu valodā): https://developer.wordpress.org/themes/getting-started/what-is-a-theme/
• Tēmas vietnē wordpress.org: https://wordpress.org/themes/
• Vietnes redaktors (wordpress.org, angļu valodā): https://wordpress.org/documentation/article/site-editor/
• theme.json (developer.wordpress.org, angļu valodā): https://developer.wordpress.org/themes/global-settings-and-styles/