Świeży projekt

PTTK Oddział Morski w Gdyni

Z kruchego Elementora na czysty Full Site Editing. Mały budżet, jeden dzień roboty, a prezes sam dodaje teraz podstrony.

morski.gdynia.pttk.pl ↗ | Organizacja społeczna, non-profit | Działa od 1928 r.

Wyzwanie

Polskie Towarzystwo Turystyczno-Krajoznawcze, Oddział Morski w Gdyni. Organizacja społeczna, działa nieprzerwanie od 1928 roku. Strona to ich wizytówka, ale na co dzień Zarząd to ludzie nietechniczni, którzy robią to wszystko po godzinach, w czynie społecznym. Bieżące sprawy żyją na Facebooku, a strona ma być po prostu spokojnym, stabilnym nośnikiem informacji.

Tyle teorii. W praktyce zastaliśmy zlepek, w którym każda zmiana groziła wysypaniem. Dotychczasowa strona stała na Elementorze + ElementsKit + motywie Hello Elementor, a nagłówek, stopka i menu były wstrzykiwane globalnie przez wtyczkę Code Snippets - jako custom PHP wciśnięty pomiędzy szablon a treść. Stopka była praktycznie nieedytowalna. Podstrona Kontakt już się rozsypała. Każda próba dodania nowego działu kończyła się nerwowym mailem do wykonawcy.

Klient powiedział wprost - mam pomysł na nową podstronę, ale boję się jej kliknąć, bo nie wiem co się stanie. I trudno mu się dziwić.

Kontekst, którego nie chowamy

Robione za "kilka tysięcy złotych rocznie", po ludzku, dla organizacji która 97 lat promuje turystykę i ratuje pomniki przyrody. Część wynagrodzenia to miejsce na podpis autora na stronie. To nie był projekt do miarodajnej wyceny godzin, tylko do dobrej roboty w sensownym czasie.

Cel

Ustaliliśmy z Zarządem cztery rzeczy, które musiały zadziałać po wdrożeniu:

  1. Pełna samoobsługa. Zarząd ma sam dodawać podstrony, edytować teksty, zdjęcia, podpinać PDF-y i pliki Worda, zarządzać menu (czyli klasyczne Wygląd → Menu, znane z każdego WordPressa) - bez wykonawcy.
  2. Edytowalność tego, co było zablokowane. Nagłówek i stopka mają być normalnymi blokami w panelu, a nie kodem PHP gdzieś z boku.
  3. Zachować wygląd. Ta sama zieleń, ten sam hero z filmem, te same kafelki. Ludzie wiedzą, gdzie wracają.
  4. Zlikwidować źródło kruchości. Bez Elementora, bez ElementsKit, bez snippetów wstrzykiwanych globalnie.

Co zrobiliśmy

Krótko: zamiast łatać starą konstrukcję, zbudowaliśmy od zera dedykowany motyw blokowy WordPress (Full Site Editing), wiernie odwzorowując design. Zieleń #2E5D38, kremowe tło, font nagłówków Comfortaa, hero z filmem na pełną szerokość, kafelkowy układ - wszystko zachowane. Tylko że tym razem to normalne bloki Gutenberga, które Zarząd widzi w panelu i może klikać.

Migracja Elementor → FSE

Wyłączyliśmy Elementora i ElementsKit. Wyczyściliśmy z Code Snippets te hacki, które trzymały nagłówek, stopkę, menu i sekcję "aktualności". Treści przeszły do Gutenberga - ale nie jako luźne strony, tylko jako wzorce blokowe (block patterns). Każda strona to referencja do wzorca, więc jak zmieniamy wzorzec, odświeża się wszędzie, a Zarząd dalej edytuje to klikalnie. Dla wykonawcy fajnie, dla klienta jeszcze fajniej.

Pełna struktura, plus to, czego brakowało

Przy okazji uporządkowaliśmy wszystkie podstrony i dorzuciliśmy te, których wcześniej nie było:

  • Aktualności, Koła i Kluby (osobne strony dla każdego klubu), Odznaki, Zarząd, Historia, Kontakt
  • Dołącz do nas z tabelą składek
  • Statut i dokumenty - oficjalne pliki ściągnięte i podlinkowane z pttk.pl, plus odpis z KRS Oddziału
  • Standardy Ochrony Małoletnich - to wymóg ustawowy, którego wcześniej na stronie nie było, a powinien być

Most między starym a nowym

Zarząd zna ekran Wygląd → Menu z każdego WordPressa, którego kiedykolwiek dotykał. Full Site Editing chce, żeby menu robić jako blok nawigacji, co jest ładne dla developera, ale ciężkie do nauki dla osoby z innej branży. Więc napisaliśmy własny blok menu klasycznego - prezes dalej edytuje nawigację po staremu, a my po prostu renderujemy ją w nagłówku FSE. Po prostu działa.

SEO i GEO bez wtyczki

Zwykle SEO w WordPressie to Yoast albo Rank Math, plus pięć innych wtyczek, plus jakaś kolejna do schema.org, plus modyfikacje motywu, plus modlitwa. My zaszyliśmy to bezpośrednio w motywie:

  • Meta description, Open Graph i Twitter Cards - generowane z tytułu i excerpta strony
  • Dane strukturalne JSON-LD - Organization, LocalBusiness, TouristInformationCenter, WebSite, plus breadcrumb schema dla podstron
  • llms.txt - mapa strony dla wyszukiwarek AI (ChatGPT, Perplexity, Claude, Gemini)
  • Dynamiczny robots.txt z powitaniem botów AI i mapą strony
  • Własny blok breadcrumbs - dynamiczny, z mikrodanymi Schema.org, działa bez konfiguracji

Efekt: strona ma fundament pod klasyczne SEO i pod GEO (Generative Engine Optimisation - widoczność w wyszukiwarkach AI), bez wtyczek, bez paneli z setką pól do wypełnienia, bez ryzyka konfliktu po aktualizacji.

UX, ale dla edytora

Większość rozmów o UX dotyczy odwiedzającego stronę. My poświęciliśmy sporo czasu na UX dla Zarządu - bo to oni będą tu klikać codziennie:

  • Inteligentne przekierowanie przycisku "Edytuj" na stronie głównej - zamiast wpadać w placeholder strony front page, idziesz prosto do szablonu, który faktycznie chcesz zmienić. Komunikat-drogowskaz jako fallback, gdyby coś poszło nie tak.
  • Tryb edytora odporny na full-bleed i wideo w hero - czysta, czytelna edycja, mimo że strona ma pełnoekranowy film w tle.
  • Wbudowana instrukcja w panelu - Wygląd → Instrukcja motywu PTTK. Kafelki "co i jak" plus link "Instrukcja/pomoc" w szczegółach motywu. Prezes nie musi szukać po YouTube, jak coś zmienić.
  • Font Comfortaa hostowany lokalnie (woff2) - zero requestów do Google Fonts, więc RODO nie ma się o co czepiać.

Stack

WordPress Full Site Editing

Motyw blokowy, theme.json v3, szablony HTML (templates/parts), block patterns jako re-używalne wzorce.

Gutenberg + bloki dynamiczne

register_block_type z render_callback i ServerSideRender. Bez kroku budowania, bez JSX, bez node_modules.

PHP, HTML, CSS, lekki JS

Self-hosted font Comfortaa (woff2). JavaScript bez zależności - hamburger, podgląd bloków. Cały motyw waży ~0,65 MB.

Schema.org JSON-LD, OG, llms.txt

Cała warstwa GEO i SEO zaszyta w motywie, bez wtyczek. Plus dynamiczny robots.txt.

WordPress REST API

Migracja treści, menu i ustawień - automatyzacja wdrożenia. Skrypty zamiast godzin klikania.

YouTube jako tło hero

Klasyczna technika "cover" - film leci w tle, treść siedzi na nim. Bez ciężkich page-builderów.

Najmocniejszy akcent

Prezes sam dodaje podstrony.

Bez nas. Bez nerwowego maila. Bez pytania "czy mogę kliknąć ten przycisk". To jest ten moment, dla którego się robi takie projekty. Klient ma narzędzie, którego nie boi się dotknąć, a my możemy spokojnie zająć się czymś innym, wiedząc że strona żyje swoim życiem.

Efekty

  • Klient obsługuje stronę samodzielnie - Zarząd dodaje podstrony, prezes robi to bez naszego udziału. Główny, namacalny sukces.
  • Koniec z wysypywaniem - stabilny, przewidywalny edytor; stopka i nagłówek wreszcie edytowalne.
  • 100% założeń klienta zrealizowane 1:1, plus dodatki, których w briefie nie było: Standardy Ochrony Małoletnich, breadcrumbs, SEO/GEO, instrukcja w panelu.
  • Wierne zachowanie designu (zieleń, hero z filmem, kafelki) przy radykalnym uproszczeniu obsługi.
  • Strona gotowa pod GEO i klasyczne SEO bez dodatkowych wtyczek.
  • Lekki motyw (~0,65 MB), zero zależności od page-buildera, czysta przyszłość przy każdej aktualizacji WordPressa.

Czego nie obiecywaliśmy

Nie udajemy, że wszystko poszło na medal i zrobiliśmy 200% zakresu. Część rzeczy jest świadomie po stronie klienta:

  • Bramka cookie (Pressidium) i wtyczka galerii czekają na podbicie PHP do wersji 8.0 na hostingu - tego wymagają same wtyczki, a to decyzja klienta i hostingodawcy, nie nasza.
  • Część dokumentów - regulaminy kolejnych odznak, podpisane "Standardy w Oddziale", aktualne kwoty składek - dodaje Zarząd samodzielnie. I właśnie o to chodziło. Strona jest narzędziem, a nie panelem, do którego trzeba dzwonić.

Dlaczego to było inne

Nie każdy projekt da się rozliczyć w godzinach. Czasem trafia ci się organizacja, która od 1928 roku pakuje ludzi w plecaki i wyciąga ich na szlaki, działa bez zysku, z budżetem mniej więcej takim, jaki przeciętna agencja wydaje na lunche w jeden miesiąc. Wtedy się siada, robi po ludzku i ustala wymianę - my robimy stronę, oni dają miejsce na podpis autora. To nie filantropia, to po prostu inne wymiany wartości niż faktura na pełną stawkę.

I akurat ten projekt fajnie pokazuje, do czego naprawdę nadaje się WordPress w 2026 roku, jeśli się go zrobi bez Elementora, bez ElementsKit, bez snippetów wciśniętych globalnie i bez "tymczasowych" rozwiązań, które zostają na lata.