Przebudowa strony firmy usługowej na własny motyw WordPress: elevtech.pl

Co to za strona i co dla niej zrobiliśmy?

Elevtech to rodzinna firma z Warszawy, która myje, naprawia i maluje elewacje i dachy, czyści i montuje rynny, a zimą odśnieża dachy. Pracuje dla klientów biznesowych: wspólnot i spółdzielni, zarządców nieruchomości, deweloperów oraz firm i obiektów publicznych w Warszawie i na Mazowszu.

Poprzednia strona mieszała ofertę dla klientów indywidualnych i firm, a nową ustawiliśmy wyłącznie pod klientów biznesowych. Zbudowaliśmy ją od podstaw: własny motyw WordPress bez Bootstrapa i jQuery, treści przepisane pod klientów B2B, nowe usługi (mycie hal, odśnieżanie), poradnik, przekierowania ze starych adresów, kalkulator, formularz, cookies, SEO i wdrożenie na dotychczasowy hosting. Od pierwszego commita do paczki wdrożeniowej minęło pięć dni, a kod motywu to około 12 400 linii PHP i JavaScriptu oraz 7 500 linii CSS, napisanych od zera.

• WordPress z własnym motywem: bez frameworka i bez bibliotek z CDN. Kod działa od PHP 8.2 i jest przygotowany pod 8.4.
• Secure Custom Fields i strona opcji „Ustawienia firmy”: klient sam edytuje teksty, realizacje, opinie i wpisy.
• Yoast SEO z naszymi rozszerzeniami: dane strukturalne, okruszki, mapa strony.
• Hosting bez zmian; wdrożenie przez paczkę migracyjną z planem powrotu.

Jak strona zdobywa zapytania od firm i instytucji?

Każda grupa klientów ma własną podstronę z konkretną ofertą i pytaniami tej grupy: wspólnoty i spółdzielnie, zarządcy nieruchomości, deweloperzy oraz firmy i obiekty publiczne. Do tego jedenaście podstron usług, od mycia i malowania elewacji i dachów, przez hale i kostkę, po rynny i odśnieżanie zimą.

Dowodem pracy są realizacje: dwanaście kart projektów na prawdziwych zdjęciach, z obiektem, lokalizacją, zakresem i rokiem, a tam, gdzie zdjęcia „przed” i „po” pasują do siebie co do kadru, z suwakiem. Obok stoją listy referencyjne.

Jak strona jest przygotowana pod Google i asystentów AI?

Strona dostaje wszystko, co ułatwia znalezienie i zacytowanie firmy: dane strukturalne, czytelne odpowiedzi w treści, plik llms.txt, mapę strony i robots.txt, który wpuszcza roboty wyszukiwarek i asystentów AI.

• Dane strukturalne: firma lokalna z obszarem działania, usługi, okruszki, pytania i odpowiedzi oraz artykuły z firmą jako autorem.
• robots.txt wpuszcza m.in. GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-SearchBot, PerplexityBot, Google-Extended, Bingbot i Applebot-Extended; llms.txt opisuje firmę, usługi i zasady.
• IndexNow zgłasza zmiany do Bing natychmiast po publikacji (tylko na produkcji), więc nowa podstrona nie czeka na robota.
• Mapa przekierowań 301 ze starych adresów (m.in. tych z końcówką „b2b”) na nowe; przekierowanie działa tylko wtedy, gdy cel istnieje, żeby nie powstały pętle i błędy.
• Bez sztucznych podstron „usługa plus miasto”: to ryzyko dla widoczności całej witryny, więc nie powstały.

Jak działa kalkulator wyceny malowania elewacji?

Klient podaje powierzchnię i odpowiada na cztery pytania: czy elewacja była już malowana, w jakim jest stanie, jak bardzo jest zabrudzona i ile ma pięter. Kalkulator pokazuje widełki ceny brutto oraz netto przy VAT 8% i 23%, z wyraźnym zastrzeżeniem, że wycena jest orientacyjna i zależy od typu budynku i jego detali.

Kalkulator działał wcześniej jako fragment wklejony przez wtyczkę. Przepisaliśmy go na własny moduł motywu, który ładuje się tylko na stronie z kalkulatorem, a skrypt porównawczy sprawdza, czy wyniki zgadzają się z poprzednią wersją. Wynik wypełnia formularz zapytania.

Jak działa formularz zapytania?

Formularz nie używa reCAPTCHA. Spam zatrzymują ukryta pułapka na boty, jednorazowe podpisane tokeny (zbyt szybka wysyłka i stary formularz są odrzucane), limity prób z jednego adresu (liczone z prawdziwego adresu połączenia, a nie z nagłówka, który może ustawić każdy) oraz globalny bezpiecznik, który przy nietypowej fali zgłoszeń nadal zapisuje je w panelu, ale wstrzymuje maile i wysyła jeden alert do firmy.

Zgłoszenie zapisuje się w panelu zawsze przed wysłaniem maila, więc zapytanie nie ginie, gdy poczta zawiedzie, a status maila widać przy każdym wpisie. Panel ma filtr źródła (formularz albo kalkulator) i eksport do CSV, a zgłoszenia kasują się po 12 miesiącach. Adres IP nie jest zapisywany: do limitów trafia tylko jego skrót z solą.

Bez JavaScriptu formularz działa jako zwykły POST z przekierowaniem. Z JavaScriptem po wysłaniu wjeżdża wałek, zamalowuje formularz w kolorze firmy i pojawia się „Wysłane”, a przy wyłączonych animacjach w systemie jest wersja uproszczona.

Co dzieje się na pierwszym ekranie?

Pierwszy ekran pokazuje, co firma robi, zamiast to opisywać. Tło startuje zabrudzone, po skosie przejeżdża front wody z pianą, a nagłówek bieleje dokładnie tam, gdzie przeszła woda. Myje pracownik w koszu podnośnika: kosz wjeżdża od dołu, lanca prowadzi wodę po linii brudu, a na koniec pracownik ociera czoło i zjeżdża.

Animacja jest rysowana na płótnie, odtwarza się raz po wejściu na stronę i nie blokuje wczytywania strony. Przy ograniczonym ruchu w systemie strona od razu pokazuje stan końcowy.

Jak zadbaliśmy o prywatność, cookies i bezpieczeństwo?

Przeglądarka łączy się tylko z elevtech.pl, dopóki odwiedzający nie wyrazi zgody. Sprawdziliśmy to na produkcji w czystej przeglądarce: strona główna, kalkulator, realizacje i kontakt nie wysyłają żadnych żądań do obcych domen przed decyzją w banerze.

Własny, lekki baner cookies zastąpił płatną wtyczkę: przyciski „Akceptuję” i „Odrzucam” są identyczne, zgody od razu trafiają do Google w trybie Consent Mode v2, a sygnał Global Privacy Control wyłącza marketing. Google Tag Manager i analityka ładują się dopiero po zgodzie.

• Nagłówki: CSP z jednorazowym kluczem i „strict-dynamic”, HSTS, Permissions-Policy, X-Content-Type-Options i ochrona przed osadzaniem w ramce.
• Wyłączony XML-RPC, blokada enumeracji użytkowników, limit prób logowania, reset hasła, który wygląda tak samo dla istniejących i nieistniejących kont, blokada edycji plików z panelu, plik security.txt.
• Zdjęcia zamieniają się przy wgrywaniu na WebP, a metadane EXIF (w tym lokalizacja) są usuwane z oryginałów. Kadry nagłówków (2:1 na telefon, 4:3 na komputer) powstają z jednego zdjęcia przy pierwszym użyciu.
• Formularz, kalkulator, cookies i ustawienia SEO są w kodzie motywu, a nie we wtyczkach, więc jest mniej kodu osób trzecich do aktualizowania i pilnowania.

Jak szybka jest strona i jak to sprawdzamy?

Zmierzyliśmy żywą stronę Lighthouse’em w trybie mobilnym. Wydajność: 95 na stronie głównej, 97 na realizacjach i w kontakcie, 100 na usługach, w kalkulatorze i w poradniku. Dostępność, dobre praktyki i SEO mają 100 na wszystkich sześciu sprawdzonych stronach, a CLS wynosi 0. Czas wczytania największego elementu mieści się między 1,4 a 2,1 s.

Transfer pierwszego wczytania to od 120 do 146 kB na stronach z samym tekstem; strona główna ma około 340 kB, a realizacje około 440 kB, bo zawierają zdjęcia. To pomiar laboratoryjny (symulowany telefon), nie dane od prawdziwych użytkowników.

W repozytorium jest ponad dwadzieścia skryptów testowych i kontrolnych: bezpieczeństwo, formularz (łącznie z awarią poczty i retencją), przekierowania, okruszki, treści, cookies w prawdziwym Chrome i porównanie kalkulatora.

Jak wyglądało wdrożenie?

Bez wersji testowej na subdomenie: akceptacja szła na lokalnej kopii, a produkcję podmieniliśmy z pełnym backupem starej strony. Gdyby coś poszło źle, powrót do poprzedniej wersji zajmuje kilkanaście minut. Hosting i domena zostały bez zmian.

Po podmianie sprawdzamy stronę z zewnątrz: kody odpowiedzi wszystkich podstron, przekierowania starych adresów, dochodzenie maila z formularza, brak połączeń przed zgodą, nagłówki bezpieczeństwa, llms.txt, robots.txt i mapę strony.