AI zamiast vibe codingu: konfiguracja magazynu na WordPressie z Claude Code
W przypadku projektów takich jak ekspercki magazyn o edukacji, nie zawsze konieczne jest pisanie kodu od zera. Zamiast uczyć się Next.js czy Supabase, znacznie prościej jest postawić na WordPressa: gotowy panel administracyjny, wtyczki SEO, biblioteka mediów i REST API. Autor projektu – specjalista ds. infrastruktury bez doświadczenia w PHP/WordPressie – wykorzystał narzędzie CLI Claude Code do konfiguracji serwera VPS oraz dostosowania systemu.
Cel: minimalistyczny blog z blokiem hero, siatką artykułów, wyszukiwarką i kategoriami. Budżet deweloperski: zero. Efekt: działające MVP w zaledwie kilka wieczorów.
Konfiguracja infrastruktury
Stos technologiczny: VPS na Ubuntu, nginx z cache'owaniem, PHP 8.3 (FPM), MySQL 8.0, motyw GeneratePress. Claude Code generował polecenia SSH:
- Instalacja pakietów i konfiguracja PHP-FPM.
- Nginx z SSL (Let's Encrypt), zapora sieciowa (ufw), fail2ban.
- WordPress z przyjaznymi adresami URL, Rank Math do mapy strony i optymalizacji SEO.
Proces: sformułowanie zadania w języku naturalnym → AI generuje skrypty → weryfikacja i iteracje. Oszczędność czasu na operacjach rutynowych, ale z obowiązkową weryfikacją.
Dostosowanie za pomocą mu-plugins
Dwanaście wtyczek mu-plugins pokryło całą logikę strony głównej. Przykładowe zadania dla AI:
- Blok hero z przypiętym artykułem + siatka najnowszych wpisów w 3 kolumnach.
- Dynamiczny blok kategorii wykorzystujący
get_terms()zamiast statycznego HTML. - Wyszukiwarka w nagłówku, usunięcie paska bocznego, efekty hover na kartach.
Problemy i rozwiązania:
- Style rdzenia WordPressa nadpisywały CSS → mu-plugin z priorytetem 999.
- Siatka rozjeżdżała się na urządzeniach mobilnych → precyzyjne poprawki marginesów i zapytań medialnych.
- Zmiana slugów kategorii → przejście od hardcodu do dynamicznego zapytania.
Design: czcionka Inter, białe karty z cieniami, responsywny layout. CSS generowany przez AI na podstawie opisów (np. „cień przy hoverze, uniesienie karty").
Iteracyjny workflow z AI
Typowa sekwencja działań:
- Precyzyjne zadanie („siatka w 3 kolumnach, odstępy 20px").
- AI generuje kod PHP/CSS (w 80% poprawny).
- Testy w przeglądarce.
- Opis błędu („tekst przykleja się do krawędzi na telefonie").
- Iteracyjne poprawki (2–4 cykle na zadanie).
Ograniczenia AI:
- Nie widzi renderowania w przeglądarce – polegaj na opisach lub zrzutach ekranu.
- Nie śledzi zmian w bazie danych (należy jawnie określać dynamikę).
- Może uszkodzić sąsiedni kod podczas naprawy (wymaga ponownego wgrania plików).
Co warto wiedzieć
- Efektywność dla osób nietechnicznych: AI uzupełnia braki w znajomości API WordPressa (hooki, filtry), oszczędzając tygodnie nauki.
- Iteracje są obowiązkowe: 2–4 cykle na zadanie, ale bez konieczności głębokiego zagłębiania się w stos technologiczny.
- Wymagane podstawy: Znajomość nginx, SQL i CSS jest niezbędna do precyzyjnego formułowania poleceń i weryfikacji wyników.
- Skupienie na MVP: Idealne do prototypów i dostosowywania CMS-ów (WordPress, Shopify).
- Bezpieczeństwo w Twoich rękach: AI nie doda rate limitingu ani ochrony CSRF bez wyraźnego polecenia.
Kiedy stosować takie podejście
Sprawdza się w przypadku:
- Prototypów i MVP bez wymogów produkcyjnych.
- Dostosowywania znanych platform na nieznanym stosie technologicznym.
- Projektów solowych lub małych zespołów.
Nie nadaje się do:
- Systemów krytycznych wymagających wysokiego poziomu bezpieczeństwa.
- Całkowitego braku zaplecza technicznego.
- Złożonych architektur bez kontroli jakości.
Liczby: 2 weekendy (po 3–4 godziny), VPS ~30 zł/mies., ~600 linii CSS + 12 mu-plugins, subskrypcja Claude.
— Editorial Team
Brak komentarzy.