Strona przedszkola Ochronka: zdjęcia dzieci tylko dla rodziców

Katolickie Przedszkole „Ochronka” w Nowym Sączu działa w tradycji błogosławionego Edmunda Bojanowskiego, który w XIX wieku zakładał pierwsze wiejskie ochronki. Strona przedszkola przez lata rosła na komercyjnym szablonie i kilkunastu wtyczkach.

Nowa strona pod adresem ochronka.org.pl miała być prosta dla rodziców na telefonie, bezpieczna dla zdjęć dzieci i łatwa w prowadzeniu dla nauczycielek. Całość, od audytu po wdrożenie i kopie zapasowe, zrobiłem sam.

Punkt wyjścia: audyt starej strony

Zacząłem od pełnej kopii strony i bazy danych, a potem przeprowadziłem audyt. Statystyki pokazały, kto naprawdę korzysta ze strony: rodzice z telefonów, którzy wracają po jadłospis, ogłoszenia i zdjęcia swojej grupy.

Audyt wskazał kilka poważnych problemów:

• około 600 relacji ze zdjęciami dzieci było publicznych i trafiało do wyszukiwarek,
• w adresach i tytułach relacji pojawiały się imiona dzieci,
• 19 aktywnych wtyczek, w tym pięć do samego edytora i dwie do galerii,
• wspólne konta grup z pełnymi uprawnieniami redaktora i brak limitu prób logowania,
• fonty z Google i statystyki zapisujące pełne adresy IP odwiedzających,
• 10 GB zdjęć, w tym ok. 75 tysięcy miniatur w kilku rozmiarach.

Treść też wymagała porządków. Relacje z życia grup były zakładane jako strony, a nie wpisy. Każda grupa miała pięć podstron, z których rodzice używali głównie dwóch.

Jadłospis i grupy na pierwszym ekranie

Najczęściej odwiedzaną podstroną był jadłospis. Dlatego na nowej stronie jadłospis na dziś jest od razu na stronie głównej, bez szukania w menu.

Przedszkole zmieniło też nazwy grup. Teraz to łąka: Jeżyki, Stokrotki, Pszczółki, Biedronki, Bławatki i Motylki. Każda grupa dostała własny kolor i prosty znak rysowany kreską.

Znak nigdy nie jest jedynym nośnikiem informacji, zawsze stoi przy nim nazwa grupy. Nazwy nie są zapisane w adresach stron ani w nazwach kont, więc kolejna zmiana to jedna poprawka w panelu.

Jedna strona grupy zamiast pięciu

Zgodnie z prośbą przedszkola strona grupy ma tylko dwie sekcje: jadłospis i galerię. Nauczyciele, ogłoszenia i zajęcia dodatkowe przeszły na wspólne strony przedszkola.

Jadłospis z alergenami

Jadłospis ma własny typ treści w panelu. Kuchnia wpisuje jeden tydzień: datę poniedziałku i trzy posiłki na każdy dzień. Alergeny zaznacza z listy 14 alergenów z przepisów Unii Europejskiej.

Dni tygodnia są na stronie zakładkami, które przełącza się strzałkami z klawiatury. Bez JavaScriptu widać po prostu wszystkie dni jeden pod drugim. Wcześniej jadłospis był wklejany z Worda przez osobną wtyczkę.

Zdjęcia dzieci tylko dla rodziców

To była najważniejsza zmiana w całym projekcie. Przedszkole zdecydowało, że galerie mają być dostępne na hasło, osobne dla każdej grupy. Rodzice dostają je od wychowawczyń.

Wbudowane hasło WordPressa tu nie wystarcza, bo chroni tylko treść strony. Same pliki zdjęć nadal mają zwykłe, publiczne adresy. Dlatego galerie obsługuje własny moduł:

• hasło osobne dla każdej grupy, zmieniane na początku roku szkolnego,
• limit prób i podpisane ciasteczko sesyjne, a zmiana hasła wylogowuje wszystkich,
• ponad 23 tysiące zdjęć dostało losowe, niemożliwe do zgadnięcia nazwy plików,
• nowe zdjęcia dostają taką nazwę od razu po wgraniu,
• relacje są wyłączone z mapy strony i oznaczone dla wyszukiwarek jako nieindeksowane.

Zdjęcia z telefonów są przy wgrywaniu zmniejszane i tracą metadane EXIF, w tym lokalizację GPS. Imiona dzieci zniknęły z adresów relacji.

Wygląd: miękko, ale czytelnie

Stara strona była zbudowana z prostokątnych bloków i zdjęć dzieci z banku zdjęć. Nowa ma być ciepła i obła, bez infantylności. Na stronie głównej jest prawdziwe zdjęcie budynku przedszkola.

• kolory wzięte z sepii logo, z terakotą przyciemnioną tak, żeby spełniała kontrast,
• przyciski w kształcie pigułek, panele z dużym zaokrągleniem i przejścia między sekcjami falą,
• nagłówki krojem Baloo 2, tekst krojem Atkinson Hyperlegible Next, oba z polskimi znakami,
• fonty serwowane z własnego serwera, bez Google Fonts,
• ikony Lucide jako wbudowane SVG.

Najpierw powstały makiety strony głównej i strony grupy. Dopiero po ich akceptacji zbudowałem z nich motyw WordPressa.

Dostępność od pierwszej linijki

Przedszkole jest finansowane ze środków publicznych, więc strona powinna spełniać WCAG 2.2 AA. Zrobiłem to w kodzie motywu, bez nakładek dostępności.

Odwiedzający może sam dopasować wygląd:

• tryb jasny, ciemny albo zgodny z ustawieniami systemu,
• trzy wielkości tekstu,
• tryb wysokiego kontrastu, który podkreśla też wszystkie linki.

Kontrast każdego koloru sprawdza osobny skrypt we wszystkich trybach, także dla kolorów grup. Strona ma deklarację dostępności i politykę prywatności napisaną prostym językiem.

WordPress z własnym kodem zamiast wtyczek

Strona zostaje na współdzielonym hostingu przedszkola, który nie daje dostępu SSH. WordPress został, ale jako możliwie gołe jądro. Z 19 wtyczek zostały tylko dwie od klasycznego edytora, który nauczycielki znają. Resztę zastąpił mój motyw i pięć małych modułów mu-plugins:

• treści: grupy, relacje i tygodniowy jadłospis, niezależne od motywu,
• galerie na hasło i ochrona plików zdjęć,
• hartowanie: limit logowań, wyłączony XML-RPC, REST tylko dla zalogowanych, ukryte loginy kont,
• blokada instalowania wtyczek i edycji kodu z panelu, kod trafia na serwer tylko z repozytorium,
• przekierowania 301 ze starych adresów, także tych z emoji,
• zrzut bazy na potrzeby kopii zapasowej.

Statystyki prowadzi Matomo na własnym serwerze, bez plików cookie. Jedyne ciasteczko na stronie zapamiętuje hasło do galerii grupy.

Migracja 700 stron

Migrację zrobiłem skryptami WP-CLI, zawsze najpierw w trybie próby na kopii produkcji. Identyfikatory wpisów i zdjęć zostały, zmienił się tylko typ i adres.

• 626 stron z galeriami stało się relacjami przypisanymi do grup,
• stare grupy dostały nowe nazwy według rozkładu pracy nauczycielek,
• 670 starych adresów przekierowuje na nowe,
• shortcody starych wtyczek zamieniłem na zwykły HTML,
• 16 wtyczek wyłączyłem, a ich zadania przejął własny kod.

Treści wklejane latami z Worda wyczyściłem skryptem. Statut i dokumenty, które były tylko w PDF, są teraz tekstem na stronie, z linkiem do PDF do druku. Korektę językową 46 akapitów zrobił Bielik, polski model językowy uruchomiony lokalnie na moim komputerze.

Kopie i kontrola co noc

Strona działa samodzielnie na hostingu. Mój domowy serwer robi tylko rzeczy dodatkowe, więc jego awaria nie wyłącza strony. Co noc:

• pobiera zrzut bazy i lustro plików przez szyfrowane FTP,
• porównuje rdzeń WordPressa z oficjalnymi sumami kontrolnymi,
• szuka plików PHP w katalogu ze zdjęciami i zmian w kodzie motywu,
• zapisuje historię kopii w restic: 14 dziennych, 8 tygodniowych i 12 miesięcznych,
• przy błędzie albo nieoczekiwanej zmianie wysyła mi SMS.

Wdrożenie idzie z repozytorium przez OneDev CI. Przed wgraniem CI sprawdza kontrasty, składnię PHP i buduje CSS. W stopce strony widać wersję i numer builda.

Stack

• WordPress z własnym motywem i modułami mu-plugins,
• PHP 8.4, TailwindCSS v4 i DaisyUI v5 z własnym zestawem kolorów,
• ikony Lucide, fonty Baloo 2 i Atkinson Hyperlegible Next z własnego serwera,
• Matomo bez plików cookie,
• OneDev CI, kopie przez FTPS i restic na domowym serwerze.