Wirtualny spacer na stronie WordPress krok po kroku

Spacer działa na naszym serwerze, a na Twoją stronę trafia przez znacznik iframe. To ramka, która wyświetla inną stronę wewnątrz Twojej, tak samo jak osadzony film z serwisu wideo czy mapa dojazdu. Dzięki temu nie wgrywasz na swój hosting setek megabajtów panoram, a zmiany w spacerze widać na stronie od razu, bez ponownego wklejania kodu.

• Kod iframe kopiujesz z panelu spaceru jednym kliknięciem.
• Link do udostępniania wysyłasz mailem, wklejasz w media społecznościowe albo w ogłoszenie.
• Ten sam spacer możesz osadzić na kilku podstronach jednocześnie.

Wygląd okna, kolory przycisków i menu pomieszczeń ustawiasz w interfejsie spaceru, a nie w WordPressie.

W edytorze blokowym WordPressa najprostszą drogą jest blok o nazwie Własny HTML (w angielskiej wersji Custom HTML). Otwórz stronę lub wpis do edycji i ustaw kursor w miejscu, gdzie ma pojawić się spacer.

• Kliknij plus dodawania bloku i wyszukaj Własny HTML.
• Wklej skopiowany kod iframe do pola bloku.
• Przełącz na podgląd w samym bloku, żeby zobaczyć ramkę ze spacerem.
• Zapisz zmiany jako szkic, sprawdź stronę w podglądzie, a potem opublikuj.

Blok Osadzanie, który przyjmuje sam adres, działa tylko z serwisami obsługiwanymi przez WordPress przez mechanizm oEmbed. Dla spaceru używaj bloku Własny HTML, bo daje pełną kontrolę nad wymiarami ramki.

Wiele stron firmowych na WordPressie powstaje w kreatorach wizualnych. Każdy z popularnych kreatorów ma element do wklejania kodu, zwykle o nazwie HTML, Kod albo Embed. Mechanizm jest ten sam: przeciągasz element w miejsce sekcji i wklejasz do niego iframe.

• W kreatorze ustaw szerokość kolumny na pełną, żeby spacer nie był ściśnięty.
• Wyłącz animacje wejścia sekcji, bo potrafią opóźnić wczytanie ramki.
• W edytorze klasycznym przełącz się na kartę Tekst albo Kod, zanim wkleisz iframe, inaczej edytor wizualny może zamienić znaczniki na zwykły tekst.

Ta sama zasada obowiązuje w innych systemach. W kreatorach stron typu Wix, w sklepach internetowych czy w Joomli również szukasz elementu do osadzania kodu HTML.

Spacer potrzebuje miejsca. Wąska ramka o wysokości kilkuset pikseli na laptopie wygląda jak okno na korytarz, a na telefonie bywa nieużywalna. Ustaw szerokość ramki na 100 procent kontenera, a wysokość dopasuj do proporcji ekranu.

• Na komputerze dobrze sprawdza się ramka zbliżona do proporcji 16 do 9.
• Na telefonie wyższa ramka daje więcej miejsca na przeciąganie palcem.
• Atrybut allowfullscreen w kodzie iframe pozwala przejść do pełnego ekranu, co na telefonie jest najwygodniejsze.
• Uprawnienia do żyroskopu i trybu VR w atrybucie allow pozwalają oglądać spacer przez obracanie telefonu i w goglach.

Kod osadzenia z panelu spaceru ma te atrybuty już ustawione. Jeśli motyw strony ma wąską kolumnę treści, rozważ szablon strony pełnej szerokości dla podstrony ze spacerem.

Iframe ładuje osobną aplikację, więc ma wpływ na szybkość strony. Nie jest to powód, żeby rezygnować ze spaceru, tylko żeby osadzić go rozsądnie.

• Dodaj do iframe atrybut loading o wartości lazy, wtedy przeglądarka wczyta spacer dopiero, gdy użytkownik do niego przewinie.
• Nie umieszczaj kilku spacerów jeden pod drugim na tej samej podstronie.
• Na stronie głównej lepiej sprawdza się obraz z przyciskiem Otwórz spacer, który prowadzi do podstrony z pełną ramką.

Po wklejeniu kodu sprawdź stronę w narzędziu do pomiaru szybkości i porównaj wynik z wersją bez spaceru.

Najczęstsze przyczyny problemów nie leżą w samym spacerze, tylko w ustawieniach strony. Zanim napiszesz do nas, sprawdź kilka rzeczy.

• Uprawnienia konta: w WordPressie wklejanie nieprzefiltrowanego kodu HTML jest zarezerwowane dla administratora. Konto redaktora w niektórych konfiguracjach usuwa iframe przy zapisie.
• Plan hostingu: w hostowanej usłudze WordPress.com część planów ogranicza osadzanie kodu iframe. Sprawdź warunki swojego planu.
• Wtyczki bezpieczeństwa i nagłówki Content Security Policy mogą blokować ramki z zewnętrznych domen. Dodaj domenę spaceru do listy dozwolonych źródeł ramek.
• Wtyczki pamięci podręcznej i optymalizacji skryptów czasem opóźniają iframe. Wyczyść pamięć podręczną po wklejeniu kodu.
• Baner zgody na pliki cookie potrafi blokować osadzone treści do czasu akceptacji. Sprawdź jego ustawienia.

Osadzenie to połowa pracy, druga to miejsce. Spacer schowany na dole podstrony O nas oglądają nieliczni. Umieść go tam, gdzie klient porównuje oferty.

• Hotel: przy opisie pokoi i na stronie rezerwacji, o czym piszemy w tekście wirtualny spacer dla hotelu.
• Biuro nieruchomości i deweloper: przy każdej ofercie, obok galerii i rzutu, więcej w sekcji nieruchomości.
• Restauracja, gabinet, sala weselna: na stronie głównej i w zakładce kontakt, obok mapy dojazdu.

Jeśli potrzebujesz spaceru na wielu stronach albo dla kilku lokalizacji, zobacz plany hostingu spacerów, w tym wersję z własną domeną.