My WordPress site

Projektipäevik #0: Mida me teeme – sissejuhatus FSE-teema ehitamise teekonda

Tere tulemast Projektipäeviku juurde. See on dokumenteeritud teekond ühe konkreetse WordPress’i teema ehitamisest – nullist, Figma wireframide järgi, kasutades WordPress’i kõige uuemat FSE (Full Site Editing) arhitektuuri.

Iga sammu – õigeid ja valesid – kirjutan üles. Eesmärk on, et need postitused töötaksid ka case-study’na õpilastele: kuidas FSE-mõtteviisile mõelda, kuhu iga element kuulub, ja millised lõksud teel ootavad.

Mis projekt see on

Ehitame täielikult tehtud WordPress’i teema nimega fse-theme. Lähtekohaks on Figma wireframe-fail (file key Hh3rceSDR02v3xZlGX0Za1), mille kavandid katavad 8 erinevat lehte:

  • Avaleht (front-page) – Hero, Values, Featured Services, BlogPreview, Testimonials, FinalCTA
  • Teenused-arhiiv (services listing) – PageHero + ServiceCards grid
  • Üksiku teenuse leht – ServiceHero (breadcrumb + CTA), Body + Sidebar (hinnaga), FAQ
  • Meist – PageHero + Story + Values + TeamGrid
  • Kontakt – PageHero + Form + Info
  • Blogi-listing – PageHero + Filters + Featured + Grid + Pagination
  • Blogipostitus – PostHead + Cover + Content + Related
  • Privaatsuspoliitika – PageHero + TOC + Sisu sektsioonid

Mobile + Desktop variandid igale, 16 kavandit kokku.

Miks just FSE?

WordPress 6.0+ tutvustas Full Site Editing – uus paradigma, kus kogu sait (template’id, header, footer, värvid, fondid) on toimetatav Block Editor’is, JSON-failidena ja patternitena. Klassikaline PHP get_header() / the_content() / WordPress Customizer asendub 5-kihilise süsteemiga:

  1. Template (templates/*.html) – lehe luustik
  2. Template part (parts/*.html) – korduvad osad
  3. Pattern (patterns/*.php) – disainimallid
  4. Page/Post sisu (wp_posts) – konkreetse lehe sisu
  5. CPT entry + ACF meta – dünaamiline andmestik

Iga element vajab teadlikku otsust: millisesse kihti see kuulub? Selle filosoofiaga lahkame me Projektipäevik #4-s põhjalikult.

Mida me valmis teeme

Lõpptulemus on installitav ja kasutatav WordPress teema, mis sisaldab:

  • theme.json – disainisüsteem (värvid, fondid, fluid spacing, layout-laiused)
  • style.css – teema metaandmed
  • functions.php – õhuke (theme support, block styles, pattern categories)
  • parts/ – header.html, footer.html
  • templates/ – front-page, page, single, archive-service, single-service, home, single (blog), 404, index
  • patterns/ – page-hero, values-grid, service-hero, faq-section, team-grid, testimonials, blog-preview, related-posts, card-service, card-team, card-blog, card-value, final-cta, contact-form (~14 patternit)
  • assets/fonts/ – Inter font (Variable)

Plus tugimaterjalid (mitte teemas, vaid project/ kaustas):

  • casestudy.md – iga õpitud lõks Case-formaadis (eeldatav lõppmaht 15–20 Case’i)
  • fse-filosoofia.md – arhitektuuri filosoofia
  • wordpress-fse-arhitektuur.md – tehniline otsuste pohi
  • PATTERN-LOOMISE-JUHEND.md – iga patterni struktuur

Kuidas me ehitame (töömeetod)

Töö käib paaris Claude’iga (AI-assistant) järgmisel mustril:

  • Claude selgitab ja dokumenteerib. Mitte automaatselt ära ei tee, vaid juhendab samm-sammult.
  • Mina (inimene) ehitan – Site Editor’s, klassikalises Block Editor’s, terminal’is, koodifailides.
  • Iga sammu kohta: miks + kuidas + mida kontrollida.
  • Iga lõks dokumenteeritakse – casestudy.md-sse uus Case, ja Projektipäeviku postitusena blogis.

See pole “Claude tegi mulle teema valmis” lugu. See on “Claude õpetas mulle, kuidas FSE’d ehitada – ja iga apsakas on talletatud, et õpilased ei peaks samu vigu tegema”. Tegelik kood on inimese tehtud, kommentaarid ja dokumentatsioon on Claude’i abiga vormistatud.

Etapilik roadmap

Etapp 0 – Vundament

  • 0.1 CPT UI + ACF pluginate installimine (sisu vs kujundus eraldus)
  • 0.2 Service + Team CPT-de seadistamine GUI-st
  • 0.3 ACF meta-väljade lisamine (price_from, featured, job_title jne)
  • 0.4 Õhuke functions.php (block styles + pattern categories, MITTE CPT-d)
  • 0.5 Esimene pattern (PageHero)
  • 0.6 Testandmed

Etapp 1 – Esileht

  • 1.1 Hero (Avaleht Page sisu, mitte pattern – 1 kasutuskoht!)
  • 1.2 Values sektsioon (card-value + values-grid patternid)
  • 1.3 Featured Services (Query Loop pattern Service CPT-ga)
  • 1.4 BlogPreview (Query Loop pattern wp_posts’ist)
  • 1.5 Testimonials
  • 1.6 FinalCTA
  • 1.7 Esilehe template (front-page.html) kokkupanek

Etapp 2 – Muud lehed

  • Teenused-arhiiv → Single teenus → FAQ
  • Meist (Story + Values + TeamGrid)
  • Kontakt (vorm + info)
  • Blogi-listing (home.html) → Single postitus → Related
  • Privaatsuspoliitika (TOC + sisu)
  • 404

Mida iga Projektipäeviku postitus sisaldab

Üks postitus = üks etapp / üks õppetund / üks komponent. Iga postituses on:

  • Plaan: mis selle etapi eesmärk on ja miks
  • Tegevus: mis valmis sai (failid, blokid, seaded)
  • Lõksud: mis nähtus, mis ootuspärasega ei ühti – koos põhjuse ja lahendusega
  • Reegel: üldistus – mida sa peaksid teadma tulevikus
  • Mis järgmiseks: ühenduslik järgmise postitusega