Projektipäevik #2: Plaan ja arhitektuuri-otsused

See on esimene postitus uues postituste sarjas “Projektipäevik”, kus dokumenteerime samm-sammult selle WordPress FSE teema ehitamist. Sari on mõeldud nii õpilastele kui ka tulevikus uutele meeskonnaliikmetele – et nad mõistaksid, miks projekt sellisena välja näeb, mitte ainult kuidas ta töötab.

Mida me ehitame

WordPress Full Site Editing (FSE) teema nimega fse-theme, mille disain pärineb Figma wireframidest. Lehte saab ehitada otse Site Editor’is, ilma et peaks teadma PHP-d või muutma malle koodi tasandil. Kogu kujundus tuleb theme.json-ist ja patternidest.

Sait sisaldab 8 erinevat lehte (esileht, teenused, üksiku teenuse leht, meist, kontakt, blogi, blogipostitus, privaatsuspoliitika) ning kahte custom post type’i (Service ja Team). Disainisüsteem koosneb 38 muutujast: värvid, vahed, fondi-suurused, raadiused.

Pedagoogiline lähenemine

See projekt on ennekõike õppematerjal. Iga samm – alates theme.json seadistamisest kuni pattern-i loomiseni – on dokumenteeritud nii, et õpilane saab aru:

Miks me seda teeme (FSE-loogika, parimad tavad)
Kuidas see samm-sammult käib
Mida kontrollida, et veenduda õnnestumises

Töövoog: AI-assistent (Claude/Cowork) selgitab ja dokumenteerib → kasutaja teeb. Ei lähe automaatselt edasi. Iga lõpetatud samm dokumenteeritakse projekti repos failis project/casestudy.md.

Põhilised arhitektuuri-otsused

1. Fluid spacing – üks väärtus, kohaneb ekraaniga

FSE-l pole praegu native UI’d, mille kaudu määrata blokile erinevat padding’ut mobiilis ja desktopis. Lahenduseks valisime CSS clamp() funktsiooni spacingSizes preset’ides:

{ "slug": "xxxxxxl", "size": "clamp(40px, 3vw + 16px, 96px)" }

Mobiilis ~40px, desktopis 96px, vahepeal sujuv üleminek. Põhimõte: mida väiksem spacing, seda väiksem muutus. UI-tihendid (4–16px) jäävad fikseerituks, sektsiooni-padding’ud (32px+) kahanevad mobiilis. Üks padding-väärtus footer’is töötab kõigil ekraanidel – pole vaja media query’sid.

2. Custom Post Type’d plugin’is, mitte teemas

WordPressi ametlik soovitus: “If you switch themes, you shouldn’t lose your content.” Kui registreeriksid Service CPT teema functions.php-s, siis teema vahetusel kaoks menüüpunkt “Teenused” admin’ist (postitused küll jääksid DB-sse, aga “orvuks”).

Õige eraldus:

Teema – kujundus (CSS, templates, layout, theme.json)
Plugin – funktsionaalsus (CPT-d, meta-väljad, integratsioonid)

Valisime CPT UI plugin’i CPT-de registreerimiseks (kõige levinum, 5M+ installi) ja ACF meta-väljade jaoks. Põhjus: õpetuslikus kontekstis pole praegu eesmärk PHP CPT-koodi õpetada – keskendume FSE-le. CPT UI annab kiire stardi GUI kaudu.

3. Page-by-page lähenemine

Kahe peamise lähenemise vahel – “ehita kõik komponendid valmis, siis lehed” vs “leht-haaval otsast lõpuni” – valisime teise. Põhjus: kasutaja näeb kohe töötavat tulemust, iga sektsioon on selge sammuga seotud, ja õpilane saab visuaalselt jälgida progressi.

Esimene leht: esileht, mis koosneb 6 sektsioonist: Hero (juba olemas), Values, Featured Services, Blog Preview, Testimonials, Final CTA. Igale sektsioonile vastab üks (või kaks) pattern’it.

4. Dokumenteerimine kahes kohas

project/casestudy.md – tehnilised case study’d (probleem → lahendus formaadis), versioonihalduses Git’i kaudu
WordPress’i blogi (see postituste sari) – “miks” ja “kuidas” narratiivina, avalik, läbi WP admin’i loetav

Mis on praegu valmis

theme.json – disainisüsteem (38 muutujat) + fluid spacing’ud
parts/header.html ja parts/footer.html – template parts
CPT UI ja ACF pluginad installitud ja aktiveeritud
Inter fondid integreeritud

Mis tuleb järgmisena

CPT-de seadistamine CPT UI kaudu – Service ja Team
Meta-väljade lisamine ACF kaudu – hind, ametinimetus, jne
Õhuke teema functions.php – ainult block styles + pattern categories
Esimesed patternid: card-value, values-grid (“Miks meie” sektsioon)
Edasi punkti haaval iga sektsiooni kaudu kuni esileht on koos

Järgmises postituses – CPT-de seadistamine ja miks me valisime just need konkreetsed sätted (slug, supports, has_archive jne).