WordPress, jako znakomita platforma do tworzenia stron, ułatwia integrację Iframe dla dodatkowej funkcjonalności. To narzędzie umożliwia osadzanie treści z różnych źródeł na Twojej stronie, takich jak mapy, multimedia z innych stron czy formularze.

W naszym artykule przybliżymy, jak dodawać zewnętrzne źródła zarówno za pomocą kodu HTML na platformie WordPress, jak i za pośrednictwem wtyczki. Praktycznie pokażemy, jak osadzić na stronie dynamiczną mapę Google oraz fascynujący film z YouTube.

Kod Iframe HTML

Kod HTML Iframe jest prostym, acz wszechstronnym elementem, umożliwiającym osadzanie treści z zewnętrznych źródeł na stronie internetowej. Składa się on z podstawowych elementów, takich jak:

• <iframe>: To tag HTML, który definiuje ramkę, czyli obszar, w którym będzie wyświetlana osadzona treść.
• src=”URL”: Atrybut określający źródło (URL) treści, którą chcemy osadzić.
• width=”szerokość” i height=”wysokość”: Atrybuty, które określają szerokość i wysokość ramki.
• frameborder=”0″: Atrybut określający, czy ramka ma posiadać obramowanie (0 – brak obramowania, 1 – obramowanie widoczne).
• allowfullscreen: Atrybut pozwalający na pełnoekranowy tryb dla osadzonej treści, np. dla filmów.

Przykładowy kod HTML Iframe może wyglądać tak:

<iframe src="https://www.przykład.pl" width="600" height="400" frameborder="0" allowfullscreen></iframe>

Niżej zamieśczam przykład wykorzystania Iframe, umieszczając w nim logo z jednej z naszych przykładowych stron.

Kod:

<iframe src="https://prestashop.stronaw.pl/img/logo-1705795607.jpg" width="auto" height="50" frameborder="0" allowfullscreen></iframe>

Personalizowany kod wpisujemy w bloku HTML na naszej stronie i gotowe!

Wtyczka Iframe

Jeśli preferujesz prostsze podejście, zainstaluj i skonfiguruj wtyczkę WordPress dedykowaną dodawaniu Iframe. Wtyczki często dostarczają bardziej zaawansowanych opcji konfiguracyjnych.

Simple Iframe

Simple Iframe – dzięki niej możemy w prosty sposób dodawać adresy URL, określać rozmiar osadzonego elementu oraz nadawać mu nazwę. To narzędzie znacząco ułatwia proces personalizacji treści na stronie WordPress.

Osadzenie Filmu z Youtube

Na swojej stronie możemy łatwo udostępniać filmy z platformy YouTube korzystając z tagu HTML Iframe. Przy filmie, wybieramy opcję “Udostępnij” i wybierzemy “Umieść”.

W następnym etapie mamy możliwość dostosowania ustawień filmu, takich jak czy rozpocząć od początku czy wyświetlić elementy sterujące odtwarzaczem. Warto zauważyć, że w kodzie możemy dostosować atrybuty, takie jak szerokość i wysokość, według naszych własnych potrzeb.

Wyjaśnienie tych atrybutów znajdziemy powyżej, w sekcji “Kod Iframe HTML”. Tam dowiemy się, jak każdy z parametrów, takich jak szerokość czy wysokość, wpływa na wygląd i funkcjonalność osadzonego filmu.

Poniżej prezentujemy rezultat.

<iframe width="auto" height="415" src="https://www.youtube.com/embed/xNuR173dwes?si=x8OqJNOfTHNhPOhY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Oczywiście, możemy zainstalować specjalną wtyczkę umożliwiającą łatwe umieszczanie filmów z platformy YouTube na naszej stronie, taką jak na przykład – Feeds for YouTube.

Więcej o umieszczeniu filmów znajdziesz w artykule 👉 tutaj.

Osadzenie Mapy Google

Umieszczenie mapy Google na swojej stronie nie tylko podnosi zaufanie klientów, ale również znacząco ułatwia im odnalezienie Twojej siedziby. To praktyczne rozwiązanie, które sprawia, że kontakt z Twoją działalnością staje się bardziej intuicyjny i komfortowy dla potencjalnych klientów.

Podobnie jak na platformie YouTube sam proces jest banalny. Na początek odnajdujemy swoją siedzibę na mapach i korzystamy z opcji “Udostępnij”. Następnie przechodzimy do zakładki “Umieść na mapie” i dostosowujemy atrybuty do swoich potrzeb.

Oczywiście, alternatywnie możemy skorzystać z wtyczki, na przykład WP Go Maps, aby w łatwy sposób umieścić mapę Google na naszej stronie.

Więcej o umieszczeniu mapie google na stronie znajdziesz w artykule 👉 tutaj.

Dodawanie elementów Iframe w WordPress to zadanie o wiele łatwiejsze, niż mogłoby się wydawać.

W razie jakichkolwiek trudności z umieszczaniem zewnętrznych treści na Twojej stronie, nie wahaj się skontaktować z nami. StronaW pomoże Ci rozwiązać wszelkie problemy!