3 strony w tydzień, czyli jak okiełznać WordPress z AI

Dziś krótki wpis o tym, jak stworzyłem i zrewitalizowałem trzy strony w ciągu mniej więcej tygodnia. Pokażę wygląd tych stron – przed i po rewitalizacji, a także krótko opowiem, jaki stos technologiczny wykorzystałem i jak wyglądał mój sposób pracy.

Strona firmowa

Pierwsza strona to moja strona firmowa, która do tej pory wyglądała jak ilustracja powiedzenia „szewc bez butów chodzi”. Zobaczcie sami:

Nie wygląda to zbyt profesjonalnie, prawda? A jednak przez kilka lat było moją stroną firmową. I nie usprawiedliwia mnie fakt, że tworząc strony klientom, kupuję gotowe motywy albo zatrudniam grafika, bo sam zupełnie nie mam zdolności graficznych czy designerskich (co też zawsze klientom na początku współpracy mówię).

Te zdolności jakoś magicznie nie pojawiły się u mnie, tylko zostały wsparte (zastąpione?) przez duże modele językowe, które w ciągu kilku minut potrafią przygotować schludny i na pierwszy rzut oka profesjonalny wygląd.

Później oczywiście trzeba poświęcić kilka godzin na doprowadzenie tego do jako takiego wyglądu oraz przerobienie na motyw WordPress, ale w tym też LLM potrafią bardzo pomóc.

U mnie cały proces wydłużył się przez to, że wymyśliłem sobie przy tej okazji tzw. Custom Post Types, czyli coś, co od dawna chciałem zrobić, a mianowicie oddzielenie typowych wpisów blogowych od np. Case Studies bądź podstron dla konkretnych usług.

Dla osoby profesjonalnie zajmującej się designem albo doświadczonej w budowaniu stron przez AI efekt nie będzie pewnie powalający, ale testy na przypadkowych osobach, którym pokazywałem stary i nowy projekt ewidentnie dowiodły, że nowy design o wiele bardziej do nich przemawia.

Porównajmy choćby stopkę strony – przed i po:

Obecnie jestem na etapie przenoszenia opisów usług i budowania ich drzewiastej struktury, co pewnie zajmie mi kolejne kilka tygodni. Ale baza jest i działa zgodnie z założeniami.

Strona akademia.palik.it

Ta strona również została zrewitalizowana i co ciekawe wydarzyło się to jeszcze przed jej startem. Chodzi o to, że buduję sobie na boku stronę akademia.palik.it przeznaczoną pod kursy internetowe, które będę nagrywał. I do tej pory jej wygląd był baaaaaaardzo dyskusyjny.

Zresztą sami zobaczcie:

Uznałem, że nie jest to coś, co zachęci moich potencjalnych klientów do zakupu kursu (między innymi z budowania stron), więc ponownie zaprzągłem do pracy narzędzia oparte o duże modele językowe, które pomogły mi doprowadzić stronę do obecnego stanu. Warto dodać, że jest to w tej chwili jeszcze wersja nieukończona i cały czas rozwijana.

Myślę, że znowu można powiedzieć, że dla wprawnego oka będzie to AI slope, ale dla przypadkowego klienta, który nie ma doświadczenia w budowie czy projektowaniu stron internetowych, to będzie to jak najbardziej akceptowalny wygląd.

Strona narzędzia.it (w budowie)

Tutaj nie było rewitalizacji, tylko budowa od zera. I choć projekt jest najsłabszy (i najbardziej „ejajowy”) z tych trzech, które dzisiaj Wam pokazuję, to jest to również najbardziej „rozgrzebana” strona, której jeszcze daleko do ukończenia. Daje ją jednak jako przykład czegoś, co można osiągnąć w dosłownie kilka godzin pracy.

Tutaj zresztą siłą strony będzie nie tyle wygląd, co struktura (oparta o ACF i CPT czyli rodzaje zawartości takie jak narzędzia, case studies, recenzje mające swoje dedykowane dodatkowe pola) i zawartość, którą zamierzam w najbliższych tygodniach i miesiącach dodawać, ale o tym pewnie w osobnym wpisie.

Można więc powiedzieć, że najmniej tutaj skupiałem się na wyglądzie, a najbardziej na bebechach WordPressa, czyli budowaniu typów zawartości, relacji między nimi itd.

Jak i czym to wszystko robię?

Obiecałem stos technologiczny, więc już tłumaczę. Jeśli poniższy opis jest za skomplikowany albo chcesz zobaczyć to na żywo – zostaw komentarz – rozważam darmowy webinar lub nagranie całego procesu.

Pierwszym i najważniejszym narzędziem we wszystkich trzech projektach jest Lovable w darmowej wersji. Pozwala on wygenerować dość akceptowalny pierwszy wygląd strony głównej, który można nieco dopracować i zmieścić się w pięciu darmowych kredytach, które przysługują dziennie w planie free.

Następnie eksportuję czy też wypycham taki projekt do repo GitHub i klonuję go do siebie na komputer do lokalnej pracy. Pracuję głównie na Windsurf, Antigravity i Kiro. Zdarza się, że mam wszystkie te trzy edytory otwarte i w tym pracuję nad jednym z projektów.

W edytorze proszę agenta, aby przygotował na podstawie projektu Lovable motyw WordPress, a w międzyczasie instaluję na lokalnym środowisku deweloperskim opartym o WSL2 i o DDEV nową instancję WordPress opratą o Bedrock (poniżej sekcja o tym ciekawym projekcie). Do szybkiej instalacji nowego projektu Bedrock przygotowałem sobie skrypty, które uruchamiają na lokalnym środowisku stronę dosłownie w dwie minuty.

Kiedy mam już pierwszą wersję motywu WordPressowego, przenoszę go do projektu, gdzie jest Bedrock, i odpalam, a następnie doprowadzam do takiego jakiegoś stanu, bo nie zawsze taka tranzycja z projektu Lovable do motywu WordPress idzie w 100% poprawnie. Właściwie zawsze jest coś popsute, ale zazwyczaj poprawki trwają do max godziny.

Dalsza praca to głównie tworzenie dodatkowej wtyczki, w której trzymane są wszystkie custom post types, oraz ogarnięcie motywu tak, aby wyglądał nie tylko na stronie głównej, ale również na podstronach z wpisami czy poszczególnymi CPT – głównie chodzi o przygotowanie listy wpisów i wyglądu pojedynczego wpisu czy strony.

Kiedy na lokalnym środowisku wszystko już jako tako wygląda, wrzucam to na hosting, czyli wypycham lokalne zmiany do GitHub, a następnie klonuję repo na serwerze docelowym. Odpalam composer install, podpinam bazę danych i tyle.

Wszystkie zmiany w kodzie wykonuję najpierw lokalnie, wypycham je do repozytorium, a na produkcji robię tylko git pull origin, aby pobrać nowe zmiany z repozytorium.

Bedrock?

Bedrock to taki wordpressowy boilerplate (czyli po naszemu szablon do szybkiego startu), który pozwala zarządzać WordPressem z poziomu Composer i trzymać cały projekt w repozytorium Git. Ma on trochę inną strukturę plików i sprawia, że WordPress jest nieco lepiej zabezpieczony.

Ostatnio udało mi się w końcu usiąść do bliższego zapoznania się z tym projektem i o tym tez może kiedyś coś skrobnę na blogu.

Podsumowanie

Ostatnio bardzo dużo czasu inwestuję w poznawanie, a w zasadzie budowanie swojego sposobu pracy z całym zestawem narzędzi, które pozwalają mi szybko prototypować i stawiać strony na WordPress. Bardzo możliwe, że niedługo na mojej akademii pojawi się z tej okazji jakiś kurs bądź webinar.