Poradnik SitPup
Jak dodać widget rezerwacji pet care do WordPressa
WordPress daje kilka miejsc, w które można wkleić kod, a część z nich po cichu go psuje. Poniżej: które wybrać przy Twojej konfiguracji i co sprawdzić, gdy przycisk się nie pojawia.
6 min czytania
Powiązana strona SitPup: Widget rezerwacji dla opieki nad zwierzętami
Najpierw pobierz kod z SitPup
Po stronie WordPressa nie ma czego instalować: żadnej wtyczki, łączenia kont ani kluczy API. Cała integracja to dwie linijki HTML, które generujesz raz.
W SitPup otwórz stronę Widget, dodaj usługi i ceny, włącz zwierzęta, które przyjmujesz, potem otwórz sekcję Osadź widget i opublikuj. Kod pojawia się dopiero po publikacji. To div z kilkoma atrybutami i tag script pod nim.
Skopiuj obie linijki. Div to miejsce, w którym pojawia się przycisk, a script to coś, co go tworzy. Każda z osobna nie zrobi nic.
Edytor blokowy (Gutenberg): blok Custom HTML
To domyślny edytor WordPressa i przypadek, na którym najwięcej osób się przewraca. Jeśli wkleisz kod do bloku akapitu, WordPress przy zapisie usunie tag script. Nie ma żadnego komunikatu; kod po prostu przestaje być kodem, a Ty dostajesz albo nic, albo linijkę widocznego tekstu na stronie.
Blok, który obsługuje to poprawnie, to Custom HTML (Własny HTML).
- 1
Otwórz podstronę lub wpis, gdzie ma być przycisk
Strona z usługami albo kontakt zwykle konwertuje lepiej niż strona główna.
- 2
Dodaj blok Custom HTML
Kliknij plus, wyszukaj „Custom HTML” i wstaw. Nie używaj bloku akapitu, Kod ani Preformatowany; te służą do pokazywania kodu, a nie do jego uruchamiania.
- 3
Wklej obie linijki dokładnie tak, jak je skopiowałeś
Nie formatuj ich ani nie zmieniaj wcięć. WordPressowi kod w tej postaci nie przeszkadza.
- 4
Podejrzyj, a potem opublikuj
Edytor blokowy ma zakładkę Podgląd wewnątrz samego bloku, co jest szybkim sprawdzeniem przed publikacją całej strony.
Page buildery: element HTML albo Code
Jeśli Twój motyw zbudowano w Elementorze, Divi, Bricksie albo podobnym narzędziu, na tej podstronie w ogóle nie używasz edytora blokowego, a builder ma swój własny odpowiednik.
W Elementorze to widget HTML, w Divi moduł Code, w Bricksie element Code. Wszystkie zwykle znajdziesz w grupie Basic albo General w panelu elementów. Przeciągnij go w wybrane miejsce i tam wklej kod.
Nie wklejaj kodu do elementu Text Editor ani Rich Text. Tak samo jak blok akapitu, one usuwają tagi script.
Classic Editor: najpierw zakładka Text
Sporo starszych stron firm opieki nad zwierzętami nadal działa na Classic Editorze, bezpośrednio albo przez wtyczkę, która go przywraca. Zasada jest prosta, ale łatwo o niej zapomnieć: zakładka Visual przeformatowuje HTML bez pytania i potrafi całkiem usunąć tag script.
Kliknij zakładkę Text przed wklejeniem, wstaw kod w wybranym miejscu i zapisz bez wracania do Visual. Jeśli jednak wrócisz i zapiszesz ponownie, sprawdź opublikowaną stronę, bo kod mógł tego nie przetrwać.
Przycisk na całej stronie zamiast na jednej podstronie
Jeśli chcesz mieć przycisk w całym serwisie, a nie na jednej podstronie, dodawanie go ręcznie wszędzie to problem, który wróci przy każdej zmianie.
Wtyczka do skryptów w nagłówku i stopce rozwiązuje to porządnie. Wklejasz kod raz w jej ustawieniach i wybierasz, gdzie ma się ładować. To też czystsza opcja, jeśli stronę utrzymuje ktoś inny, bo jest jedno miejsce, w które trzeba zajrzeć przy zmianach.
Gdy przycisk się nie pojawia
W dziewięciu przypadkach na dziesięć to cache albo optymalizacja, nie kod. Strony na WordPressie zwykle mają co najmniej jedną wtyczkę, która cache'uje strony, minifikuje zasoby albo opóźnia JavaScript, a te wtyczki domyślnie ostro traktują skrypty zewnętrzne.
Przejdź przez to po kolei, zanim uznasz, że kod jest zepsuty:
- Wyczyść cache i odśwież opublikowaną stronę w oknie prywatnym; możesz oglądać zapisaną kopię starej wersji
- We wtyczce do cache albo optymalizacji znajdź listę wykluczeń JavaScriptu i dodaj do niej adres skryptu SitPup
- Wyłącz „defer” albo „delay JavaScript execution” konkretnie dla tego skryptu, a nie dla całej strony
- Sprawdź, czy tag script faktycznie trafił na opublikowaną stronę: podejrzyj źródło strony i wyszukaj „sitpup”
- Jeśli używasz wtyczki bezpieczeństwa filtrującej HTML, upewnij się, że nie usuwa tagów script z treści wpisów
Jeśli kodu w ogóle nie ma w źródle strony, edytor usunął go przy zapisie. To problem z blokiem albo zakładką, nie z cache, więc wróć do odpowiedniej sekcji wyżej.
Sprawdzaj na opublikowanej stronie, nie w edytorze
Podgląd w edytorze to render Twojej treści, a nie wierna kopia opublikowanej strony, i nie przechodzi przez tę samą warstwę optymalizacji, na którą trafiają odwiedzający.
Otwórz opublikowany adres w oknie prywatnym, kliknij przycisk i wyślij sobie prawdziwe testowe zapytanie. Sprawdź, czy trafiło do Rezerwacji w panelu SitPup. Potem otwórz tę samą stronę na telefonie, bo stamtąd przychodzi większość ruchu w branży opieki nad zwierzętami i tam najczęściej wychodzą problemy ze źle wstawionym elementem.
Najważniejsze wnioski
- Żadna wtyczka nie jest potrzebna; integracja to dwie linijki HTML generowane po publikacji widgetu.
- Użyj bloku Custom HTML w Gutenbergu, elementu HTML albo Code w page builderze, albo zakładki Text w Classic Editorze.
- Nigdy nie wklejaj kodu do akapitu ani elementu Rich Text; tag script zostanie po cichu usunięty.
- Przycisk na całej stronie dodaj wtyczką do skryptów w nagłówku i stopce, zamiast wklejać go osobno wszędzie.
- Gdy przycisk się nie pojawia, sprawdź cache i opóźnianie JavaScriptu, zanim obwinisz kod.
Pobierz swój przycisk do WordPressa
Skonfiguruj formularz, opublikuj i wklej dwuliniowy kod do bloku Custom HTML. Bez wtyczki.