Tennis Spot: wróciliśmy i przebudowaliśmy stronę, którą zrobiliśmy w 2022 roku

Problem

Stronę Tennis Spot zbudowaliśmy w 2022 roku na WordPressie. Latem 2026 szkoła potrzebowała dwóch rzeczy naraz: przeniesienia ze starej domeny na nową oraz wdrożenia długiej listy zmian, rozpisanej podstrona po podstronie. Bezpłatna lekcja próbna na stronie głównej, osobna strona dla każdych zajęć, cennik, obozy, strona zapisów i działający formularz kontaktowy.

Niewiele z tych rzeczy dało się zrobić prostą zmianą w kodzie. Prawie wszystko siedziało w bazie danych WordPressa, w motywie i dziesiątkach wtyczek, i przez to każda drobna zmiana była droga:

• Drobne poprawki nie były drobne. Zmiana czterech linijek adresu w stopce wymagała skryptu, który nadpisywał zserializowane ustawienia motywu bezpośrednio na serwerze.
• Brakowało podstawowych ustawień pod wyszukiwarki. Nie dało się ustawić opisu strony w wynikach wyszukiwania.
• Formularz kontaktowy od tygodni nie działał, mimo że problem zgłaszano już dwukrotnie.
• Struktura się rozjechała. Do pięciu opublikowanych stron nie dało się już dojść klikając, a dwie strony miały ten sam adres.
• Nie było gdzie wypróbować zmiany, zanim zobaczą ją odwiedzający.

Podejście

Zaczęliśmy od przeniesienia domeny. Napisaliśmy i przetestowaliśmy skrypt, który domyślnie uruchamiał się w trybie próbnym (dry run), a do faktycznego wdrożenia zmian wymagał ręcznego potwierdzenia. Stara domena przekierowuje teraz na stałe na nową.

Potem decyzja razem ze szkołą. Porównaliśmy dalsze utrzymywanie WordPressa z przejściem na stronę statyczną. Szkoła wybrała to drugie, z czterema zasadami:

• Treść jest przechowywana w plikach i edytujemy ją my, bez systemu zarządzania treścią, który trzeba aktualizować i zabezpieczać.
• Formularz kontaktowy działa na hostingu szkoły. Nie korzystamy z zewnętrznych narzędzi, więc żadne zgłoszenie nie opuszcza serwera.
• Każdy zmieniony adres ma stałe przekierowanie na nową podstronę.
• Powstają tylko strony, o które prosiła szkoła: siedem sekcji, nic na zapas.

Przeczytaj diagram jako tekst

1. Przed: 20 stron, potrzebnych 7, potem 12 wtyczek, zaległe aktualizacje, potem Treść w bazie danych, edycja zaszyta w szablonie strony, potem Formularz kontaktowy nie dostarcza wiadomości, potem Brak podglądu: zmiany od razu na stronie.
2. wytyczne szkoły, podstrona po podstronie
3. Po: 7 sekcji wskazanych przez szkołę, potem Zero wtyczek: strony statyczne, potem Treść w plikach, jeden na każde zajęcia, potem Formularz kontaktowy na hostingu szkoły, z ochroną przed botami, potem Wersja robocza do wglądu przed publikacją.

Wdrożenie

• Treści napisane przez szkołę. Strona główna, zajęcia (cztery podstrony, po jednej na każdą lokalizację lub program), obozy, cennik, o nas, zapisy i kontakt. Dodanie jednego pliku z zajęciami tworzy ich stronę, kafelek na stronie głównej, kafelek na stronie zajęć i pozycję w menu.
• Wygląd spójny z materiałami szkoły. Granat, zieleń i pomarańcz odczytane z infografiki szkoły „gdzie prowadzimy zajęcia”, po jednym kolorze na miejsce, z liniami kortu, piłką i siatką narysowanymi w CSS zamiast obrazków. Dopasowaliśmy kolory logo do ciemnej stopki tak, by piłka pozostała widoczna.
• Zapisy podzielone według tego, co rezerwuje rodzic. Widżet rezerwacji, z którego szkoła już korzysta, jest osadzony na stronie zapisów w dwóch sekcjach: zajęcia regularne i osobna lekcja kwalifikacyjna dla dzieci, które już grają. To sekcje, a nie zakładki, bo widżet nie wyświetla się poprawnie wewnątrz ukrytej zakładki.
• Cennik, który działa na telefonie. Prawdziwa tabela w kodzie strony, zasilana z jednego pliku z danymi.
• Prawdziwe zdjęcia z obozów na stronie obozów, z uzupełnionym tekstem alternatywnym dla każdego zdjęcia.
• Formularz kontaktowy, który odrzuca boty. Dwa ukryte pola typu honeypot, minimalny czas wypełniania, sprawdzenie, skąd przyszło zgłoszenie, kontrola treści i limit liczby zgłoszeń.
• Podstawy pod wyszukiwarki. Opis na każdej stronie, adresy kanoniczne, tagi do udostępniania w mediach społecznościowych, dane strukturalne z trzema miejscami zajęć, mapa strony i adresy URL o takiej samej strukturze, jakiej używał WordPress.
• Przekierowania z każdego starego adresu, który się zmienił, generowane z jednej listy, która zasila też automatyczny test.
• Podgląd przed publikacją. Szkoła obejrzała nową stronę pod prywatnym adresem, zanim zastąpiła ona starą. Po każdej zmianie w kodzie strona jest teraz automatycznie budowana, sprawdzana i wdrażana.

Przeczytaj diagram jako tekst

1. Rodzic: Klika przycisk darmowej lekcji
2. Strona zapisów (dwie sekcje, nie zakładki)
3. Zajęcia regularne (szkoła, przedszkole, korty). W przeciwnym razie: Już gra: sekcja lekcji kwalifikacyjnej
4. System rezerwacji szkoły (widżet, z którego już korzystała)

Efekt

• Nowa domena działa, a stara na nią przekierowuje.
• Witryna szkoły jest teraz statyczna, nie wymaga aktualizowania wtyczek i działa na dotychczasowym hostingu.
• Na każdej podstronie są dokładne teksty przygotowane przez szkołę, a wszystkie zmiany przed publikacją przechodzą przez podgląd.
• Rodzice mogą w jednym miejscu zapisać dziecko na zajęcia regularne albo zarezerwować lekcję kwalifikacyjną.
• Formularz kontaktowy odrzuca automatyczne zgłoszenia, które wcześniej przyjmował.

podstron w starej witrynie oraz sekcji, których potrzebowała szkoła

20 do 7

stare adresy ze stałymi przekierowaniami

22

przypadków testowych spamu i botów zablokowanych; stary formularz przepuszczał 3 rodzaje

20 z 20

Wnioski

Lista zmian od klienta to lepszy brief niż jakikolwiek pomysł na redesign. Szkoła potrzebowała głównie zmian w tekstach, ale obecna platforma mocno utrudniała ich wprowadzanie. Przenieśliśmy więc teksty do zwykłych plików, a formularz podpięliśmy pod prosty, przetestowany przez nas endpoint. Dzięki temu kolejne zmiany wprowadzamy szybko i bezpiecznie. Zbudowanie strony to początek pracy, a nie jej koniec.

Technologie

Astro, Tailwind CSS, TypeScript, Zod, PHP, GitHub Actions

Rodzaj

Strategia i wdrożenie

• website
• sports
• tennis
• static-site
• wordpress-migration
• forms
• spam-protection
• seo
• mobile-first