KRASNY SAD
Motyw WordPress dla miejsca, w którym stare jabłonie i uratowane zwierzęta żyją obok siebie. Sad z duszą w Pierwoszynie pod Gdynią.
Miejsce, o którym warto opowiedzieć
Krasny Sad to sad w Pierwoszynie k. Gdyni prowadzony przez Elizę Krasną. Nie jest to zwykłe gospodarstwo - to miejsce z misją. Rosną tu stare jabłonie, są uratowane zwierzęta, jest kawiarnia i cyklicznie odbywają się wydarzenia dla dzieci i dorosłych. Nie ma wielkich atrakcji ani pośpiechu - jest szacunek do przyrody i codzienny rytm, który pozwala odetchnąć.
Kiedy Eliza pisała do nas z prośbą o stronę, było jasne że nie chodzi o kolejny landing z stockowymi zdjęciami i formularzem newslettera. Chodzi o miejsce, które ma swoją energię, swój brand (kompletny brandbook zaprojektowany przez Żanetę Strawiak-Pułkowską), swoje wartości - i strona ma to wszystko oddać, nie tylko wylistować.
Design: układ "w oknie" i organiczne kształty
Makieta od Żanety była nieoczywista - i to była jej największa zaleta. Zamiast klasycznego długiego scrolla, home miał się mieścić w jednym viewporcie (layout "w oknie") - z karuzelą sekcji na środku i nawigacją z organicznych kształtów SVG: jabłko, kwiatek, dymek, filiżanka, domek, mapa, serce, osiołek.
Ten układ świadomie buduje spokój. Odwiedzający nie musi przewijać stron, żeby znaleźć to co go interesuje. Miejsce nie krzyczy - a strona idzie za tym.
Fonty z brandbooka
Providence Sans (Adobe Fonts) do nagłówków - odręczny charakter, dokładnie taki jaki Eliza miała w materiałach drukowanych. Source Sans 3 (self-hosted) do tekstu - czytelny, bez sensacji. Wszystko dokładnie 1:1 z brandbookiem KRASNY_SAD_brandbook_fin.pdf.
Motyw block theme FSE od zera
Krasny Sad dostał własny motyw WordPress, nie licencję na komercyjny produkt. Zbudowaliśmy od zera block theme FSE (full site editing) - bez parent theme, bez Storefront, bez motywu premium. Powód: nietypowy design (układ "w oknie", organiczne SVG, karuzela) źle się mapuje na gotowe rozwiązania i skończyłoby się hakami zamiast czystym kodem.
Co jest w środku
- theme.json - paleta i typografia 1:1 z brandbooka
- patterns/ - edytowalne wzorce sekcji w kategorii "Krasny Sad" (Eliza sama podmienia treści)
- Custom Post Types - Zwierzęta i Wydarzenia (osobne wpisy w admin panelu)
- Kształty organiczne w assets/img/shapes/ - jabłko, kwiatek, filiżanka, osiołek, hamburger, ikony social
- Overlay menu z hamburger button, animowane, przyjazne mobile
- Logo białe automatycznie nad ciemnymi sekcjami (lista DARK_SECTIONS w JS)
Modal-chmurka zamiast osobnych podstron
W makiecie Żaneta nie zaprojektowała podstron zwierząt ani wydarzeń - tylko kafle na home.
To był ciekawy pomysł, ale wymagał czegoś więcej niż zwykły link do /zwierzeta/danuta-kaczka/.
Zrobiliśmy modal-chmurkę w stylu marki: klik w kafel otwiera treść na miejscu,
w cztery zaokrąglone rogi koloru kremu, bez utraty kontekstu strony głównej. Treść pobierana
jest z post_content danego CPT, więc Eliza dodaje zwierzaka albo wydarzenie normalnie w admin
i modal renderuje się automatycznie.
Kafle zwierząt mają jeszcze jeden szczegół: gdy jest zdjęcie - pokazujemy foto uratowanego zwierzaka, gdy jeszcze nie ma - sylwetkę peach z maską osiołka jako placeholder. Nie chowamy braku, tylko oswajamy go w stylistyce marki.
Integracje pod maską
OG default brandowy (og-default.jpg), schema Organization z logo Krasnego Sadu. Podgląd w social zgodny z tożsamością.
GA4 + Search Console podpięte przez konto Elizy. Ruch i pozycje w admin WP, bez skakania po panelach Google.
Baner zgód (nasza paczka 1.11.3) z rozsądnymi GDPR defaults. Do konfiguracji kategorii po ustaleniu zakresu analityki.
Backup bazy i uploads. Podstawa bezpieczeństwa - klient nie musi się martwić o kopie zapasowe.
Nasz plugin (standalone bez Divi, mimo folderu divi-smarter-gallery) - działa na FSE bez problemu, obsługuje shortcode i albumy.
Development lokalnie w Dockerze przez @wordpress/env, izolowany od produkcji. Testujemy zmiany bez ryzyka.
Quality stack - żeby się nie sypało w czasie
Motyw klienta bez testów starzeje się źle. Każda nowa funkcjonalność ryzykuje regresję, każda zmiana wersji WordPressa może coś złamać. Adaptowaliśmy do Krasnego Sadu ten sam stack jakościowy który sprawdził się na projekcie knobs.pl:
- PHPCS + WordPress Coding Standards - escaping, nonce, sanitizacja, SQL injection, deprecacje, i18n
- PHPCompatibility - zgodność z PHP 8.3 (żeby prod nie posypał się przy update)
- PHPStan + WordPress stubs - błędy typów, nieistniejące funkcje, martwy kod
- ESLint + Stylelint - realne błędy JS i CSS
- husky + lint-staged - lint automatycznie na zmienionych plikach przy commicie
Efekt: motyw Krasnego Sadu wchodzi w rozwój z zerem długu technicznego, a każda przyszła zmiana ma automatyczną bramkę jakościową zanim trafi na produkcję.
Dlaczego warto odwiedzić Krasny Sad
Case study jest o kodzie, ale ostatecznie strona istnieje po to, żeby ludzie tam pojechali. Krasny Sad to jedno z niewielu miejsc w okolicy Trójmiasta, gdzie stare jabłonie żyją obok uratowanych zwierząt - bez tłoku, bez atrakcji zbudowanych pod Instagram. Można napić się kawy w kawiarni, wziąć udział w wydarzeniu dla dzieci, po prostu pospacerować w ogrodzie.
Jeśli szukasz miejsca z duszą, w którym można odpocząć od miejskiego pośpiechu, wpisz krasnysad.pl i zaplanuj wizytę. Eliza pracuje z misją, którą warto wspierać.