Jak używać bloku formularza płatności
W tym dokumencie
- 1 Przegląd
- 2 Wymagania wstępne
- 3 Krok 1: Wstaw blok
- 4 Krok 2: Wybierz formularz
- 5 Krok 3: Skonfiguruj opcje wyświetlania
- 6 Krok 4: Opublikuj i podgląd
- 7 Blok vs Shortcode
- 8 Najczęściej zadawane pytania
- 8.1 Podgląd formularza jest widoczny, ale klienci nie mogą płacić — dlaczego?
- 8.2 Czy mogę użyć wielu bloków formularzy płatności na tej samej stronie?
- 8.3 Dlaczego podgląd edytora nie odpowiada temu, co widzę na froncie?
- 8.4 Czy blok działa w szablonach pełnego edytora witryny (FSE)?
- 8.5 Czy mogę stylizować osadzony formularz niezależnie dla każdej strony?
- 8.6 Jaka jest różnica między tym a blokiem przycisku WP Simple Pay?
- 9 Co dalej?
Czas czytania: 4 minuty | Poziom trudności: Początkujący
Przegląd
Blok WP Simple Pay – Formularz płatności to zalecany sposób wstawiania formularza płatności do posta lub strony Gutenberg. Zapewnia podgląd formularza na żywo w edytorze, udostępnia opcje wyświetlania w pasku bocznym bloku i renderuje ten sam formularz na stronie, który widziałby klient — bez konieczności kopiowania shortcode.
Blok jest funkcjonalnie równoważny shortcode , ale jest łatwiejszy do znalezienia i zapewnia podglądy edytora odzwierciedlające aktualne ustawienia stylu formularza.
Wymagania wstępne
- WP Simple Pay (dowolny poziom — blok jest dostarczany z darmową wtyczką)
- Witryna WordPress działająca z edytorem bloków (Gutenberg)
- Przynajmniej jeden opublikowany formularz płatności
Krok 1: Wstaw blok
- Edytuj post lub stronę, na której chcesz umieścić formularz.
- Kliknij wstawiacz bloków
+. - Wyszukaj WP Simple Pay lub Formularz płatności.
- Kliknij blok WP Simple Pay – Formularz płatności.
Pojawia się symbol zastępczy z prośbą o wybranie formularza.
Krok 2: Wybierz formularz
Użyj listy rozwijanej w symbolu zastępczym bloku, aby wybrać, który opublikowany formularz płatności ma zostać wyrenderowany. Po wybraniu blok zastępuje symbol zastępczy podglądem formularza na żywo, w tym tytułem, opisem, polami i przyciskiem wysyłania — stylizowany zgodnie z aktualnymi ustawieniami stylu formularza.
Jeśli zmienisz styl formularza po wstawieniu bloku, podgląd zostanie zaktualizowany przy następnym przeładowaniu edytora.
Krok 3: Skonfiguruj opcje wyświetlania
Gdy blok jest zaznaczony, pasek boczny ustawień bloku po prawej stronie wyświetla dwa przełączniki:
- Pokaż tytuł — Gdy jest włączony (domyślnie), wyświetla tytuł formularza nad polami. Wyłącz, aby ukryć tytuł — przydatne, gdy otaczająca strona ma już nagłówek.
- Pokaż opis — Gdy jest włączony (domyślnie), wyświetla tekst opisu formularza nad polami. Wyłącz dla kompaktowych układów.
Jeśli wyłączysz oba, otoka tytułu/opisu zostanie całkowicie usunięta, aby nie pozostało puste miejsce.
Blok obsługuje również Wyrównanie do środka za pomocą standardowego paska narzędzi bloku. Po wyśrodkowaniu formularz, osadzony nagłówek i przycisk wysyłania są wyrównane poziomo w szerokości treści strony, a obszar nagłówka jest ograniczony do maksymalnej szerokości 400px.
Krok 4: Opublikuj i podgląd
Zapisz lub opublikuj stronę. Wyświetl ją na froncie, aby zobaczyć formularz w jego renderowanym stanie. Blok używa tego samego potoku renderowania co krótki kod, więc zachowanie na froncie jest identyczne.
Blok vs Krótki kod
| Blok | Krótki kod | |
|---|---|---|
| Podgląd edytora | Na żywo, stylizowane | Brak — tylko symbol zastępczy |
| Przełączniki wyświetlania | Pola wyboru interfejsu użytkownika | Ręczna edycja atrybutów krótkiego kodu |
| Wyrównanie | Pasek narzędzi bloku | Owiń w HTML/CSS |
| Działa w klasycznym edytorze | Nie | Tak |
| Działa w widżetach | Tak (widżety blokowe) | Tak |
| Działa w kreatorach stron | Zależy od kreatora | Tak (uniwersalny) |
Kiedy używać bloku: Nowoczesne wpisy i strony Gutenberg, szablony FSE, widżety oparte na blokach.
Kiedy używać krótkiego kodu: Klasyczny edytor, kreatory stron bez natywnego wsparcia dla bloków, niestandardowe szablony motywów, gdzie wywołujesz do_shortcode() bezpośrednio.
Często zadawane pytania
Podgląd formularza działa, ale klienci nie mogą płacić — dlaczego?
Blok renderuje ten sam formularz dla podglądu edytora, co dla odwiedzających. Jeśli podgląd pokazuje formularz, ale wysyłanie nie działa, problem leży w samej konfiguracji formularza (brak metody płatności, nieprawidłowe klucze Stripe, brak wymaganego pola), a nie w bloku. Sprawdź WP Simple Pay > Formularze płatności oraz zakładki Ogólne/Płatności formularza.
Czy mogę użyć wielu bloków Formularza płatności na tej samej stronie?
Tak — każdy blok może renderować inny formularz. Zasoby frontendu wtyczki są na tyle inteligentne, że obsługują wiele formularzy na tej samej stronie bez konfliktów.
Dlaczego podgląd edytora nie odpowiada temu, co widzę na froncie?
Podgląd edytora odzwierciedla zapisany stan formularza w momencie ładowania edytora. Jeśli dokonałeś zmian w formularzu w innej karcie, zapisz/odśwież edytor, aby je zobaczyć. Frontend zawsze renderuje najnowszą zapisaną wersję.
Czy blok działa w szablonach Full Site Editing (FSE)?
Tak. Blok można wstawić do każdego kontekstu obsługującego bloki, w tym szablonów FSE, części szablonów oraz bloków/wzorców wielokrotnego użytku.
Czy mogę stylizować osadzony formularz niezależnie dla każdej strony?
Styl formularza jest przypisany do formularza, a nie do bloku. Aby używać różnych stylów na różnych stronach, utwórz wiele formularzy i umieść odpowiedni blok na każdej stronie.
Jaka jest różnica między tym a blokiem przycisku WP Simple Pay?
Blok formularza płatności osadza cały formularz w linii. Blok przycisku wyświetla tylko przycisk, który po kliknięciu otwiera formularz w nakładce (oknie modalnym) — przydatne na stronach docelowych, gdzie chcesz czyste wezwanie do działania, a nie widoczny formularz. Zobacz Jak używać bloku przycisku płatności.
Co dalej?
- Jak stylizować formularze płatności za pomocą stylu formularza – Dostosuj wygląd osadzonego formularza
- Jak używać bloku zarządzania subskrypcjami – Pozwól subskrybentom zarządzać swoimi planami
- Jak skonfigurować ogólne ustawienia formularza płatności – Skonfiguruj sam formularz
Nadal masz pytania? Jesteśmy tutaj, aby pomóc!
Ostatnio zmodyfikowano: