Jak połączyć WordPress z SPA i AI? Opowieść o stronie Familia Czeladź

Migracja ze starej strony — WordPress jako CMS

Stowarzyszenie na rzecz osób niepełnosprawnych potrzebowało miejsca na aktualności, opisy działań i galerie zdjęć. Poprzednia strona była statyczna — każda zmiana wymagała edycji kodu. WordPress rozwiązał ten problem: redaktorzy mogli samodzielnie dodawać wpisy, a ja skupiłem się na architekturze i integracjach. Podobne wyzwania opisuję w innych realizacjach — np. manualny.pl czy psikomfort.pl.

Pierwsza wersja — wpisy na pierwszym planie

Początkowa strona była prosta: głównym widokiem były widoczne wpisy. Potem dodałem dedykowaną stronę główną, ale długo nie potrafiłem zbudować layoutu, który byłby czytelny, schludny i przyjemny dla oka. Po wielu próbach udało mi się to osiągnąć — jednak wciąż brakowało mi miejsca na bogatszą prezentację działań stowarzyszenia.

Elementor i Spectra — więcej komponentów, mniej wydajności

Chcąc zwiększyć ilość informacji na stronie, zastosowałem edytor Elementor wraz z Spectra — pozwoliły mi na większą różnorodność komponentów i elementów wizualnych. Niestety strona stała się ociężała: dłużej się ładowała, a sam edytor działał wolniej. Edycja treści była trudniejsza nie tylko dla mnie, ale przede wszystkim dla użytkowników tworzących wpisy.

Ponieważ zastosowałem kilka cięższych wtyczek (Elementor, Spectra, wtyczki do galerii zdjęć, menedżer mediów) i utworzyłem część wpisów w tych narzędziach, nie dało się po prostu wyłączyć tych rozszerzeń. Wolniejsze otwieranie strony i opóźniona edycja wpisów stały się codziennością. Musiałem zrezygnować z Elementora i Spectry przy tworzeniu nowych treści.

Powrót do standardowego edytora WordPress

Nowe wpisy zacząłem tworzyć w standardowym edytorze WordPress (Gutenberg) z dodatkowymi komponentami — np. bardziej rozbudowaną galerią. Standardowa galeria WordPressa w podstawowym wyglądzie zdjęć jest wystarczająca, ale chciałem dodatkowe funkcjonalności dające bogatsze prezentacje galerii. To kompromis: mniej efektów wizualnych, ale szybsza i prostsza praca dla redaktorów.

Asystent AI — rozmowa tekstowa o stowarzyszeniu

Z czasem dodałem asystenta AI. Pozwala on odwiedzającym prowadzić rozmowę tekstową — informuje o stowarzyszeniu, jego zadaniach, kontakcie i innych możliwościach wsparcia dla osób niepełnosprawnych. Asystent działa 24/7 i odciąża zespół od powtarzalnych pytań. O architekturze takich rozwiązań piszę szerzej w artykule Inteligentni Asystenci AI.

Asystent głosowy — dostępność bez pisania

Rozbudowałem asystenta AI o funkcjonalność rozmów głosowych — słuchania i odpowiedzi na głos. To rozwiązanie ułatwia korzystanie z asystenta osobom z niepełnosprawnością ruchową: można mówić i słuchać zamiast pisać. Rozwiązanie dźwiękowe jest całkowicie darmowe — nie są pobierane opłaty za korzystanie z tej funkcji.

Przełom: własna strona SPA jako frontend

Cały czas strona główna nie miała wyglądu, który by mnie zadowolił — była nieczytelna, trudna w nawigacji i niezrozumiała dla nowych odwiedzających. Ponieważ zbudowanie satysfakcjonującej strony głównej w WordPressie z użyciem posiadanych wtyczek wydawało mi się trudne, postanowiłem stronę główną zbudować jako SPA.

Strona frontendowa powstała w oparciu o HTML, CSS i JavaScript — była niezależna od WordPressa, samodzielna, a jednocześnie korzystała z wpisów CMS z WordPressa. Dzięki temu witryna stała się lekka, szybko się ładuje i łatwiej ją dostosować pod kątem SEO. To ten sam wzorzec hybrydowy, który stosuję w psikomfort.pl i manualny.pl.

Wnioski

1. WordPress świetnie sprawdza się jako CMS — redaktorzy stowarzyszenia mogą samodzielnie publikować aktualności bez znajomości kodu.
2. Ciężkie page buildery mają swoją cenę — Elementor i Spectra dają efekt, ale spowalniają witrynę i utrudniają codzienną pracę.
3. Asystent AI z obsługą głosową to realna dostępność — nie tylko moda, ale konkretne ułatwienie dla osób z ograniczoną mobilnością.
4. Hybryda SPA + WordPress łączy najlepsze cechy obu światów — szybki frontend i wygodny panel administracyjny. Przy tworzeniu treści z pomocą AI korzystam też z narzędzia Praktyka Content AI.

Dziś familia.czeladz.pl to witryna, która łączy misję społeczną stowarzyszenia z nowoczesną technologią. Jeśli planujesz podobny projekt — zapraszam do kontaktu.