Website Świeży projekt

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.

About the project

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'.”

Challenge

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.

Solution

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.

Results & Features

  • 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

Technologies

WordPress FSE (block theme)Własny motyw krasny-sad (od zera)Providence Sans (Adobe Fonts) + Source Sans 3 (self-hosted)wp-env (Docker) do developmentuYoast SEO + Site Kit (GA4) + UpdraftPlusPressidium Cookie Consent (własna paczka)WordPress Smart Gallery (własny plugin, standalone bez Divi)PHPCS + WPCS + PHPStan + PHPCompatibilityESLint + Stylelinthusky + lint-staged (pre-commit)

Visual character: Krem, brąz sadu, peach uratowanego osiołka, biel jabłoni. Ciepło i spokój.