KRASNY SAD - motyw WordPress FSE dla sadu z uratowanymi zwierzętami
Turystyka / Agroturystyka / Miejsca z misją
Custom motyw WordPress FSE dla sadu Elizy Krasnej w Pierwoszynie k. Gdyni. Sad z duszą - stare jabłonie, uratowane zwierzęta, kawiarnia, wydarzenia. Landing 'w oknie' (viewport bez landing-scrolla), nawigacja z organicznych kształtów SVG (jabłko, kwiatek, filiżanka), fonty z brandbooka (Providence Sans + Source Sans 3), CPT Zwierzęta i Wydarzenia bez podstron - klik otwiera modal-chmurkę w stylu marki.
O projekcie
Krasny Sad to miejsce z misją - stary sad jabłoniowy w Pierwoszynie pod Gdynią (Eliza Krasna, założycielka), w którym stare jabłonie i uratowane zwierzęta żyją obok siebie w swoim własnym rytmie. Jest kawiarnia, są wydarzenia dla dzieci i dorosłych, ale nie ma wielkich atrakcji ani pośpiechu - jest szacunek do przyrody. Naszym zadaniem było zbudować stronę która ten spokój niesie dalej. Design (autorka: Żaneta Strawiak-Pułkowska) był konkretny: układ 'w oknie' (viewport bez landing-scrolla), karuzela na home, nawigacja z organicznych kształtów SVG (jabłko, kwiatek, filiżanka, domek, mapa, serce), fonty Providence Sans (Adobe Fonts, headings) + Source Sans 3 (body). Zbudowaliśmy od zera własny motyw block theme FSE (żadnego kupionego motywu ani frameworka) - theme.json z paletą 1:1 z brandbooka, patterns w kategorii Krasny Sad, CPT Zwierzęta i Wydarzenia bez podstron (klik w kafel otwiera modal-chmurkę w stylu marki). Kafle zwierząt: gdy jest zdjęcie - foto uratowanego zwierzaka, gdy nie ma - sylwetka peach z maską osiołka jako placeholder. Development w wp-env (Docker), quality stack adaptowany z projektu knobs (PHPCS + WPCS + PHPStan + PHPCompatibility + ESLint + Stylelint + husky + lint-staged - łapiemy escaping, nonce, sanitizację, SQL injection, deprecacje, zgodność PHP 8.3, błędy JS/CSS).
“Sad z duszą dostaje motyw z duszą - Providence Sans, organiczne SVG, modal-chmurki i landing 'w oknie'.”
Wyzwanie
Trzy warstwy: (1) design z charakterem - układ 'w oknie', organiczne kształty, karuzela, nawigacja overlay hamburger - klasyczne motywy premium tego nie ogarniają albo trzeba się bardzo naginać, (2) treść z duszą - sad z misją, uratowane zwierzęta, kawiarnia i wydarzenia jako sekcje z osobną narracją, ale bez ciężaru osobnych podstron (Żaneta w makiecie nie zaprojektowała podstron zwierząt - tylko chmurki-popupy), (3) miejsce fizyczne - kontakt bez formularza (bo Eliza woli mail albo telefon), godziny otwarcia, mapa Google, integracja z Google Site Kit żeby zobaczyć skąd przychodzą odwiedzający.
Rozwiązanie
Własny block theme FSE 'krasny-sad' od zera: theme.json z paletą i typografią z brandbooka, patterns edytowalne w kategorii Krasny Sad, custom CPT Zwierzęta i Wydarzenia. Front-page składa się z kilku sekcji-wzorców (O nas, Kawiarnia, Wydarzenia w dwóch wariantach split/fullwidth, Zwierzęta z karuzelą 3-kolumnową). Modal-chmurka (.ks-modal) w stylu marki bierze treść z .ks-tile-story (post_content) - klik w kafel zwierzaka lub wydarzenia otwiera cztery zaokrąglone rogi w kolorze kremu. Nawigacja overlay hamburger z organicznymi kształtami SVG. Logo białe automatycznie nad ciemnymi sekcjami (lista DARK_SECTIONS w JS). Wtyczki: Yoast SEO z OG default brandowym + schema Organization, Google Site Kit (Analytics + Search Console przez konto Elizy), UpdraftPlus do backupu, Pressidium Cookie Consent (nasza paczka) + WordPress Smart Gallery (nasz standalone plugin bez Divi, na FSE działa bez problemu). Szczegóły integracji w blokach poniżej.
Co pod maską
Landing 'w oknie' - viewport bez landing-scrolla
Nietypowy layout wg makiety: home mieści się w jednym viewporcie, bez klasycznego długiego scrolla. Karuzela sekcji + nawigacja overlay hamburger. Buduje spokój, dokładnie taki jaki Eliza chce oddać w Krasnym Sadzie - odwiedzający nie musi 'przewijać stron' żeby znaleźć co go interesuje.
Block theme FSE od zera
Bez parent theme, bez Storefront, bez motywu premium. theme.json z paletą i typografią z brandbooka Krasny Sad, patterns edytowalne w kategorii Krasny Sad (klient sam podmienia treści bez tykania kodu), CPT Zwierzęta i Wydarzenia zarejestrowane w functions.php. Klient dostaje motyw który należy do niego, nie licencję na komercyjny plugin.
Modal-chmurka zamiast osobnych podstron
Żaneta w makiecie nie zaprojektowała podstron zwierząt ani wydarzeń - tylko kafle na home. Zamiast dokładać setup podstron zrobiliśmy modal-chmurkę w stylu marki (.ks-modal, cztery zaokrąglone rogi w kremie): klik w kafel otwiera treść na miejscu, bez utraty kontekstu strony głównej. Treść pobierana z .ks-tile-story (post_content CPT).
Organiczne SVG jako nawigacja i ikony
Kształty z brandbooka: jabłko, kwiatek, dymek, filiżanka, domek, mapa, serce, osiołek (pysk), hamburger, ikony social. Wszystkie jako SVG w assets/img/shapes/ - blob-nav, karuzela, overlay menu, kafle zwierząt bez zdjęcia (sylwetka peach z maską osiołka jako placeholder). Marka spójna w każdym elemencie interfejsu.
Providence Sans + Source Sans 3
Fonty z brandbooka: Providence Sans (Adobe Fonts, Web Project) do nagłówków - odręczny charakter pasujący do miejsca z duszą, Source Sans 3 (self-hosted woff2) do tekstu. Zgodnie z brandbookiem KRASNY_SAD_brandbook_fin.pdf. Uwaga historyczna: w folderze roboczym leżał plik Picual Regular.otf - użyto go błędnie na wcześniejszym etapie; brief CRM i brandbook wyraźnie mówiły Providence Sans - poprawione.
Google Site Kit + Yoast SEO + schema Organization
Google Site Kit z GA4 i Search Console (podpięte przez konto Elizy). Yoast SEO z brandowym OG default (assets/img/og/og-default.jpg) i schema Organization (Krasny Sad + logo). Eliza widzi w admin WP kto ją odwiedza i skąd, bez otwierania osobnych paneli Google.
Cookie consent + backup + FSE favicon
Pressidium Cookie Consent 1.11.3 (nasza paczka z GDPR defaults, banner do konfiguracji kategorii). UpdraftPlus do backupu bazy i uploads. Ustawienie site_icon przez WP-CLI (w FSE nie ma 'Wygląd > Personalizacja' - Site Icon jest w 'Ustawienia > Ogólne > Ikonka witryny', o czym Eliza wcześniej nie wiedziała).
PHPCS + WPCS + PHPStan + ESLint + Stylelint + husky
Stack jakościowy adaptowany z projektu knobs: PHP_CodeSniffer + WordPress Coding Standards (escaping, nonce, sanitizacja, SQL, deprecacje, i18n), PHPCompatibility na PHP 8.3, PHPStan + WordPress stubs (błędy typów, martwy kod), ESLint na globalnych browser + wp, Stylelint na CSS. husky + lint-staged uruchamia lint tylko na zmienionych plikach przy commicie - zero regresji w motywie klienta.
Efekty i cechy
- Własny motyw block theme FSE - Krasny Sad ma swój własny motyw, nie licencję na komercyjny produkt
- Design z makiety Żanety wdrożony 1:1 (układ 'w oknie', organiczne SVG, karuzela, modal-chmurki, blob-nav)
- CPT Zwierzęta + Wydarzenia z modalami-chmurkami zamiast podstron - zero utraty kontekstu strony głównej
- Fonty z brandbooka (Providence Sans + Source Sans 3) - marka spójna z materiałami drukowanymi Krasnego Sadu
- Yoast SEO + schema Organization + brandowy OG default - profil w Google i podgląd w social mediach zgodne z tożsamością
- Google Site Kit z GA4 - Eliza widzi ruch bez otwierania osobnych paneli
- Cookie consent z GDPR defaults + backup przez UpdraftPlus - podstawy compliance i bezpieczeństwa
- Quality stack (PHPCS + WPCS + PHPStan + ESLint + Stylelint + husky) - zero regresji przy dalszym rozwoju motywu
Technologie
Charakter wizualny: Krem, brąz sadu, peach uratowanego osiołka, biel jabłoni. Ciepło i spokój.