Chcesz mieć na stronie kalkulator. Wyceny, zapotrzebowania na coś, zwrotu z inwestycji. Widget w abonamencie kosztuje co miesiąc, wtyczka nie wygląda tak, jak chcesz, a programisty na takie drobiazgi szkoda.
Dobra wiadomość: taki kalkulator zrobisz z Claude jako jeden plik HTML, CSS i JavaScript. Najpierw testujesz go poza WordPressem, a potem osadzasz na stronie blokiem HTML, shortcode’em z małej wtyczki albo w ramce iframe. Wybór sposobu zależy od tego, kto edytuje stronę i jak długo narzędzie ma żyć.
Codziennie sobie coś klikam i w efekcie powstają mini apki, których nie robiłem, bo nigdy nie chciało mi się ich samemu kodować. Tak pisałem w newsletterze w 2025 roku. Od tamtej pory nauczyłem się, gdzie WordPress potrafi po cichu taki kalkulator zepsuć.
Stan opisany w tym wpisie: 21.10.2026.
Kiedy własny kalkulator ma sens, a kiedy wystarczy wtyczka
Lead magnet i zbieranie kontaktów
Kalkulator, który daje wynik w zamian za adres e-mail, to klasyczny lead magnet. Zanim zaczniesz zbierać adresy, ustal cel i podstawę przetwarzania z art. 6 RODO. Podstawa zależy od celu: odesłanie wyniku na prośbę użytkownika to co innego niż zapis do newslettera, na który potrzebujesz osobnej, dobrowolnej zgody. Wynik nie może zależeć od tej zgody: kto chce tylko wynik, dostaje go bez zapisu na newsletter. Sprawdź też, gdzie te dane trafiają.
Narzędzie jako cel wyszukiwania
Ludzie szukają w Google kalkulatorów: kalorii, wody, rat, metrażu. Strona z narzędziem może być celem takich wyszukiwań. Ale sam skrypt to za mało. Strona potrzebuje opisu, kontekstu i odpowiedzi na pytania wokół wyniku.
Orientacyjna wycena na stronie usługi
Kalkulator widełek cenowych pomaga klientowi oswoić się z kwotą, zanim napisze. To Twoja decyzja, czy pokazujesz ceny. Narzędzie tylko to ułatwia.
Kiedy lepsza wtyczka formularzy
Jeśli oprócz obliczeń chcesz zapisywać zgłoszenia, wysyłać powiadomienia i łączyć się z CRM, własny kalkulator to za mało. Wtedy lepsza będzie wtyczka formularzy z obliczeniami. Calculated Fields Form ma ponad 40 000 aktywnych instalacji i asystenta AI w kreatorze formuł. Fluent Forms ma obliczenia na polach liczbowych. A jeśli zamiast liczyć chcesz zadawać pytania, zobacz, jak tworzyć quizy w WordPressie.
Jeśli wahasz się między wtyczką a własnym kodem, porównaj to, co dla Ciebie ważne:
| Kryterium | Wtyczka z kalkulatorem | Własny kalkulator z Claude |
|---|---|---|
| Zapis zgłoszeń, powiadomienia, CRM | Zwykle wbudowane | Musisz dopisać sam albo połączyć z formularzem |
| Wygląd | W granicach ustawień wtyczki | Dowolny, zgodny ze stroną |
| Koszt | Darmowa wersja albo licencja roczna | Twój czas, bez abonamentu |
| Zmiana wzoru | W kreatorze, bez kodu | Edycja pliku albo nowy prompt |
| Utrzymanie | Aktualizacje autora wtyczki | Na Twojej głowie, ale bez cudzego kodu na stronie |
| Wydajność | Skrypty wtyczki, czasem na każdej stronie | Tylko tam, gdzie wstawisz kalkulator |
Ważne rozróżnienie: w tym wpisie AI tylko pisze kod. Gotowy kalkulator liczy w przeglądarce i działa bez AI. To co innego niż wtyczki, w których pole formularza wysyła dane użytkownika do modelu AI przy każdym użyciu.
Mój proces - od researchu do jednego pliku HTML
Krok 1. Research danych
Zaczynam od danych, nie od kodu. W Perplexity szukam wzorów, norm i źródeł. Kalkulator jest tak dobry, jak dane, na których liczy. Jeśli dotyczy zdrowia albo pieniędzy, każdy wzór musi mieć źródło.
Krok 2. Prompt z danymi i wymaganiami
Wszystko z researchu wklejam do promptu. Proszę o aplikację w HTML, CSS i JavaScript, najlepiej w jednym pliku, responsywną. Czasem dorzucam grafikę z wyglądem, jaki chcę uzyskać. Gotowy prompt znajdziesz niżej.
Krok 3. Podgląd i poprawki
Claude pokazuje działający podgląd w artefaktach, ChatGPT podobnie w Canvasie. Klikam, sprawdzam, proszę o poprawki. Dobrym trikiem jest zrobienie zrzutu ekranu i wklejenie go z powrotem z prośbą o poprawę konkretnego elementu, na przykład kontrastu.
Krok 4. Test poza WordPressem
Zanim cokolwiek trafi na stronę, zapisuję plik lokalnie i otwieram go w przeglądarce. Sprawdzam:
- telefon (od 360 pikseli szerokości),
- obsługę samą klawiaturą (Tab, Enter),
- wartości graniczne: zero, puste pole, bardzo duża liczba, przecinek zamiast kropki,
- czy wynik zgadza się z obliczeniem ręcznym na kilku przykładach.
Jeśli coś nie działa tutaj, w WordPressie nie zadziała tym bardziej.
Przykładowy prompt do skopiowania
Przykład dla kalkulatora zapotrzebowania na wodę. Podmień dane i pola na swoje.
Zbuduj kalkulator dziennego zapotrzebowania na wodę jako JEDEN plik HTML
(HTML, CSS i JavaScript w jednym pliku, bez bibliotek z CDN, bez frameworków).
Dane i wzory (z mojego researchu, nie zmieniaj ich):
[wklej wzory i źródła z researchu, np. ml na kg masy ciała, korekta za aktywność]
Wymagania:
- pola: masa ciała (kg), aktywność (lista), temperatura otoczenia (lista);
- każde pole ma widoczną etykietę <label>, walidację i komunikat błędu po polsku;
- wynik pokaż w elemencie z role="status", zaokrąglony do 0,1 l, z krótkim wyjaśnieniem;
- działa na telefonie od 360 px, obsługa samą klawiaturą, kontrast min. 4.5:1;
- wszystkie style i id z prefiksem "wm-kalk-", żeby nie gryzły się z motywem WordPress;
- skrypt w IIFE, bez zmiennych globalnych, bez eval, bez localStorage;
- w skrypcie nie używaj znaku "<" bezpośrednio przed literą lub cyfrą
(WordPress może zmienić taki fragment przy wyświetlaniu), porównania zapisuj ze spacją;
- żadne dane nie wychodzą z przeglądarki (zero fetch, zero zewnętrznych skryptów);
- pod wynikiem zdanie: "Wynik orientacyjny, nie zastępuje porady lekarza."
Na końcu wypisz listę przypadków testowych (wartości graniczne, puste pola, przecinek zamiast kropki).Dwie linijki w tym prompcie wynikają z nauczek z naszej pracy, które opisuję niżej: zakaz bibliotek z CDN i zasada o znaku „<”.
Jak osadzić kalkulator na stronie WordPress - 4 sposoby
| Sposób | Dla kogo | Zalety | Wady i ryzyka |
|---|---|---|---|
| Blok HTML | jedna strona, jesteś administratorem | najszybciej, podgląd w edytorze | wymaga uprawnienia unfiltered_html; kod żyje w treści, łatwo go nadpisać; WordPress może zmienić znaki w skrypcie |
| Shortcode z małej wtyczki | kalkulator na kilku stronach, edytują inni | kod w osobnych plikach, ładowany tylko tam, gdzie jest potrzebny; wersjonowanie | trzeba wgrać wtyczkę |
| Iframe z osobnym plikiem | duże narzędzie z własnymi stylami | pełna izolacja od motywu, ten sam plik działa poza WordPressem | wysokość ramki, osobny plik do utrzymania |
| Iframe z artefaktu Claude | prototyp, test pomysłu | zero hostingu | narzędzie stoi na cudzej platformie |
Moja rekomendacja: blok HTML na start i do testu, shortcode z małej wtyczki do wszystkiego, co ma żyć dłużej niż jedna kampania. Artefakt Claude tylko jako prototyp.
Blok HTML (Własny HTML)
Najprostsza droga. W edytorze Gutenberg dodajesz blok „Własny HTML” i wklejasz zawartość pliku. Od WordPressa 7.0 blok ma osobne panele na HTML, CSS i JavaScript.
Haczyk: panele CSS i JavaScript widzą tylko użytkownicy z uprawnieniem unfiltered_html. U pozostałych WordPress przy zapisie czyści treść i usuwa m.in. <script> i <iframe>. To uprawnienie mają Administrator i Redaktor na pojedynczej stronie, a w sieci multisite tylko Super Admin. Dlatego „skrypt zniknął po zapisaniu” to bardzo często po prostu brak tego uprawnienia.
Nie nadawaj unfiltered_html innym rolom tylko po to, żeby wkleić kalkulator. Lepiej użyć shortcode’u.
Shortcode z małej wtyczki
Shortcode to krótki kod w nawiasach kwadratowych, który wtyczka zamienia na treść. Kalkulator trzymasz w plikach kalkulator.js i kalkulator.css, a w treści strony wstawiasz tylko [wm_kalkulator]. Redaktor nie dotyka kodu, a skrypt ładuje się tylko tam, gdzie jest shortcode, dzięki kolejkowaniu skryptów.
Minimalna wtyczka (folder wm-kalkulator z plikiem PHP, JS i CSS):
<?php
/**
* Plugin Name: WM Kalkulator
* Description: Kalkulator osadzany shortcode'em [wm_kalkulator].
* Version: 1.0.0
*/
defined( 'ABSPATH' ) || exit;
add_action( 'wp_enqueue_scripts', function () {
wp_register_script(
'wm-kalk',
plugins_url( 'kalkulator.js', __FILE__ ),
array(),
'1.0.0',
array( 'in_footer' => true, 'strategy' => 'defer' )
);
wp_register_style( 'wm-kalk', plugins_url( 'kalkulator.css', __FILE__ ), array(), '1.0.0' );
} );
add_shortcode( 'wm_kalkulator', function () {
wp_enqueue_script( 'wm-kalk' );
wp_enqueue_style( 'wm-kalk' );
return '<div id="wm-kalk-app"></div>';
} );Dwie zasady z dokumentacji shortcode’ów: funkcja ma zwracać HTML, a nie go wypisywać, a nazwy warto prefiksować. Parametr strategy w wp_enqueue_script działa od WordPressa 6.3. Wersję w numerze (1.0.0) podbijasz przy każdej zmianie, żeby przeglądarki pobrały nowy plik. Ten przykład zakłada jeden kalkulator na stronę, bo element ma stałe id.
Kod z pliku HTML od Claude dzielisz na trzy części: HTML trafia do return, CSS do kalkulator.css, a JavaScript do kalkulator.js.
Iframe z osobnym plikiem
Wgrywasz plik HTML na serwer (na przykład do katalogu poza WordPressem) i osadzasz go w ramce:
<iframe src="https://twojadomena.pl/narzedzia/kalkulator-wody.html"
title="Kalkulator zapotrzebowania na wodę"
style="width: 100%; border: 0;" height="640" loading="lazy"></iframe>Plusy: style i skrypty kalkulatora nie gryzą się z motywem. Minusy: wysokość ramki ustawiasz ręcznie, a na telefonie trzeba ją sprawdzić. Atrybut title jest obowiązkowy dla czytników ekranu.
Iframe z artefaktu Claude
Artefakt możesz opublikować i pobrać kod do osadzenia, wpisując dozwolone domeny. Każdy z linkiem może z niego korzystać bez konta. Ale uwaga: jeśli cofniesz publikację, nie opublikujesz go ponownie, a narzędzie przez cały czas stoi na cudzej platformie. Odwiedzający łączy się wtedy z serwerem tej platformy, więc dopisz ją do polityki prywatności. Do testu pomysłu wystarczy. Na stałe trzymaj plik u siebie.
Pułapki z mojej praktyki
WordPress po cichu zmienia znaki w skrypcie
Ta pułapka jest najbardziej podstępna, bo nic nie wskazuje na problem. Dokumentacja funkcji wptexturize mówi, że zawartość znaczników <script> jest pomijana. W praktyce na jednej z naszych stron skrypt filtrów w bloku HTML przestał działać:
- fragment w stylu
<12||n%100>został potraktowany jak znacznik HTML, &&zamieniło się na&&,- przeglądarka zgłosiła błąd składni i filtr nie działał od dnia wdrożenia.
Najgorsze: w bazie danych kod był poprawny. Psuł się dopiero przy wyświetlaniu strony.
Co z tym zrobić:
- Najlepiej: kod w osobnym pliku (shortcode albo iframe). Wtedy nie przechodzi przez filtry treści.
- Zapobiegawczo: w skrypcie nie stawiaj
<bezpośrednio przed literą albo cyfrą (stąd ta linijka w prompcie). - Gdy musisz zostać w bloku HTML: my zakodowaliśmy skrypt w base64 i uruchamiamy go małym loaderem, w którym nie ma znaków
<,>,&ani apostrofu:
<script>new Function(decodeURIComponent(escape(atob("…"))))()</script>W miejsce trzech kropek trafia kod skryptu zakodowany w base64. Zastrzeżenie: new Function() działa podobnie do eval. Jeśli Twoja strona ma politykę bezpieczeństwa treści (nagłówek CSP), która nie dopuszcza unsafe-eval, ten loader nie ruszy, a kalkulator po prostu nie zadziała. Wtedy zostaje plik przez shortcode.
Jak to sprawdzić po osadzeniu: otwórz opublikowaną stronę (nie podgląd w edytorze), włącz konsolę przeglądarki (F12) i szukaj błędów. Dla pewności podejrzyj źródło strony i porównaj kod skryptu z oryginałem.
Biblioteki z CDN i wersje „latest”
Przykład z naszego podwórka: wwwrapped.pl, strona zrobiona w jeden wieczór z dużą pomocą AI, ładuje skrypty z trzech zewnętrznych źródeł, w tym bibliotekę ikon w wersji lucide@latest. Przy takim zapisie każda nowa wersja biblioteki trafia na stronę automatycznie, bez testu. Jeśli autor biblioteki coś zmieni, narzędzie może się zepsuć z dnia na dzień. Do tego każde zewnętrzne źródło to kolejne zapytanie, które spowalnia stronę, i kolejny serwer, który dostaje adres IP odwiedzającego.
Dlatego w prompcie jest „bez bibliotek z CDN”. Jeśli biblioteka jest naprawdę potrzebna, przypnij konkretną wersję albo trzymaj plik u siebie. Więcej o wpływie skryptów na szybkość przeczytasz w poradniku jak przyspieszyć stronę na WordPressie.
Kto może zapisać skrypt
Pisałem o tym wyżej, ale powtórzę, bo to najczęstsza przyczyna „znikającego” kalkulatora. Bez unfiltered_html WordPress usuwa skrypt przy zapisie. Na sieci multisite ma je tylko Super Admin.
Dostępność
Kalkulator ma być używalny także dla osób z czytnikiem ekranu i bez myszy:
- każde pole ma widoczną etykietę,
- wynik pojawia się w elemencie z
role="status", żeby czytnik ekranu go ogłosił bez przenoszenia fokusu (kryterium WCAG 4.1.3), - ramka iframe ma atrybut
title(technika H64), - całość obsłużysz samą klawiaturą.
Więcej o tym w haśle dostępność w WordPressie.
RODO
Najprostszy pod względem RODO jest kalkulator, który liczy wyłącznie w przeglądarce i niczego nie wysyła. Jeśli zbierasz e-mail albo wysyłasz wynik na serwer, potrzebujesz podstawy prawnej z art. 6 RODO dobranej do celu, krótkiej informacji przy formularzu (kto zbiera dane, po co, link do polityki prywatności), pełnej informacji w polityce prywatności i świadomości, gdzie dane trafiają. Zapis do newslettera albo wysyłka ofert to osobny cel i wymaga zgody, zbieranej osobno i dobrowolnie. Uważaj z kalkulatorami zdrowotnymi. Jeśli razem z e-mailem wysyłasz wagę, wiek albo objawy, mogą to być dane o zdrowiu, a wtedy obowiązują dużo ostrzejsze zasady z art. 9 RODO. Najprościej nie wysyłać danych z pól, tylko sam wynik na prośbę użytkownika. Przy konkretnym formularzu podstawę warto potwierdzić z prawnikiem. Zewnętrzne skrypty z CDN to też przekazanie adresu IP innemu serwerowi. A jeśli taki skrypt zapisuje pliki cookie w przeglądarce, potrzebujesz na to zgody w banerze.
Utrzymanie
Kto poprawi wzór za rok, gdy zmienią się normy albo stawki? Trzymaj plik źródłowy z numerem wersji, zapisuj, skąd pochodzą wzory, i po każdej większej aktualizacji WordPressa otwórz stronę z kalkulatorem i sprawdź, czy liczy.
Checklista przed publikacją kalkulatora
- Wzory mają źródło, a wynik sprawdzony ręcznie na kilku przykładach.
- Plik przetestowany poza WordPressem: telefon, klawiatura, wartości graniczne.
- Brak bibliotek z CDN albo wersje przypięte.
- Prefiksy klas i id, skrypt bez zmiennych globalnych.
- Wybrany sposób osadzenia pasuje do tego, kto edytuje stronę.
- Po osadzeniu: opublikowana strona, konsola bez błędów, kod skryptu taki sam jak w oryginale.
- Etykiety pól, wynik w
role="status",titlena ramce iframe. - Brak wysyłki danych albo ustalona podstawa przetwarzania, wpis w polityce prywatności i osobna zgoda na newsletter.
- Przy tematach zdrowia i pieniędzy dopisek, że wynik jest orientacyjny.
- Zapisana wersja pliku i plan sprawdzenia po aktualizacjach.
FAQ
Czy do kalkulatora na WordPress potrzebuję wtyczki?
Nie. Wystarczy blok HTML, jeśli masz uprawnienie unfiltered_html (na pojedynczej stronie Administrator i Redaktor). Wtyczka formularzy ma sens, gdy chcesz zapisywać zgłoszenia.
Dlaczego mój skrypt znika albo przestaje działać po zapisaniu strony?
Albo nie masz uprawnienia unfiltered_html i WordPress usuwa <script> przy zapisie, albo filtry treści zmieniają znaki w kodzie przy wyświetlaniu strony.
Czy mogę osadzić artefakt z Claude na stronie?
Tak, po publikacji artefaktu i wpisaniu dozwolonych domen. Na stałe lepiej trzymać plik u siebie, bo artefakt zależy od cudzej platformy.
Czy kalkulator napisany przez AI jest bezpieczny?
Kod z AI czytasz i testujesz jak każdy inny. Kalkulator, który liczy w przeglądarce i niczego nie wysyła, jest najprostszy także pod względem RODO.
Czy kalkulator pomaga w SEO?
Może być celem wyszukiwania, jeśli strona ma opis, kontekst i odpowiada na pytania wokół wyniku. Sam skrypt bez treści to mało.
Czy kalkulator spowolni stronę?
Mały plik bez zewnętrznych bibliotek, ładowany tylko na jednej stronie, zwykle nie jest problemem. Spowalniają głównie biblioteki ładowane z zewnętrznych serwerów i skrypty wczytywane na całej stronie.
Podsumowanie
Kalkulator z Claude to dziś wieczór pracy, a nie projekt na tydzień. Research danych, dobry prompt, jeden plik, test poza WordPressem. Potem osadzenie: blok HTML do testu, shortcode z małej wtyczki na stałe. I sprawdzenie na opublikowanej stronie, bo WordPress potrafi po cichu zmienić znaki w skrypcie.
Ten proces opisałem pierwszy raz w newsletterze Webly Letter. Takich praktycznych rzeczy o WordPressie i AI jest tam więcej. Zapisz się na Webly Letter.
