Jak łatwo osadzić kod iFrame w WordPress (3 metody)

Tworząc strony internetowe, często napotykamy potrzebę wyświetlania treści z zewnętrznych źródeł bez konieczności ich samodzielnego hostowania. W tym właśnie pomagają iFrame'y.

Niezależnie od tego, czy osadzasz wideo, mapę, czy aplikację zewnętrzną, iFrames zapewnia płynny sposób integracji zewnętrznych treści z Twoją witryną WordPress.

W tym artykule przeprowadzimy Cię przez trzy proste metody dodawania kodu iFrame do wpisów lub stron WordPress. Od używania gotowych kodów osadzania po ręczne tworzenie własnych iFrame, mamy dla Ciebie rozwiązanie. 

Czym jest iFrame?

iFrame (skrót od inline frame) pozwala osadzać filmy lub inne treści na Twojej stronie bez konieczności faktycznego hostowania tego filmu. Może to zaoszczędzić przepustowość i miejsce na dysku, dlatego nigdy nie powinieneś przesyłać filmu bezpośrednio do WordPressa.

Oprócz poprawy szybkości i wydajności WordPressa, ramka iFrame będzie automatycznie aktualizowana, jeśli oryginalna treść ulegnie zmianie. Oznacza to, że odwiedzający zawsze zobaczą najnowszą wersję treści.

Osadzanie treści chronionych prawem autorskim za pomocą iFrame również nie narusza praw autorskich, więc może pomóc chronić Cię przed pozwami.

Mając to na uwadze, zobaczmy, jak łatwo można osadzić kod iFrame w WordPress. Po prostu użyj szybkich linków, aby przejść bezpośrednio do metody, której chcesz użyć:

Metoda 1: Osadzanie WordPress iFrame za pomocą kodu źródłowego (szybko i łatwo)

Wiele dużych witryn hostingowych wideo ma opcję „Osadź”, która daje dostęp do kodu iFrame potrzebnego do dodania na Twojej stronie.

Jeśli witryna ma jakiekolwiek ustawienia „Udostępnianie” lub „Osadzanie”, jest to często najszybszy i najłatwiejszy sposób osadzania treści.

Dokładne kroki będą się różnić w zależności od platformy, ale przyjrzyjmy się YouTube jako przykładowi. Aby osadzić filmy z YouTube w WordPress, po prostu kliknij przycisk „Udostępnij” pod filmem, który chcesz użyć.

Następnie zobaczysz wyskakujące okienko z różnymi opcjami udostępniania.

Po prostu kliknij przycisk „Osadź”.

YouTube pokaże Ci teraz kod iFrame.

Domyślnie YouTube zaznaczy pole „Pokaż kontrolki odtwarzacza”, ale zalecamy również włączenie trybu zwiększonej prywatności. Ten tryb pozwala odwiedzającym oglądać osadzoną zawartość na Twojej stronie WordPress bez wpływu na ich doświadczenie przeglądania na YouTube.

Następnie kliknij przycisk „Kopiuj”.

Teraz możesz wkleić ten kod do dowolnego wpisu lub strony na swojej witrynie. W tym przewodniku dodamy go do nowej strony w edytorze bloków WordPress.

Po prostu otwórz stronę, a następnie kliknij przycisk „+”. W wyświetlonym oknie podręcznym zacznij wpisywać „HTML”, aby znaleźć niestandardowy blok HTML.

Gdy pojawi się odpowiedni blok, kliknij, aby dodać go do swojej strony.

Następnie po prostu wklej kod iFrame YouTube do bloku.

Możesz teraz opublikować swoją stronę, aby zobaczyć film z YouTube na żywo na swoim blogu WordPress.

Metoda 2: Osadzanie za pomocą wtyczki WordPress iFrame (działa ze wszystkimi stronami internetowymi)

Nie każda strona internetowa stron trzecich udostępnia gotowy kod osadzania. Jeśli nie możesz znaleźć żadnych ustawień „Udostępnij” lub „Osadź”, możesz łatwo utworzyć własny kod iFrame za pomocą wtyczki iFrame.

Najpierw musisz zainstalować i aktywować wtyczkę iFrame. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji wtyczka zacznie działać od razu, bez potrzeby konfiguracji. Po prostu przejdź do strony lub wpisu, w którym chcesz osadzić treść i dodaj blok krótkiego kodu.

Następnie dodaj następujący skrócony kod:

[iframe src="URL goes here"]

Po prostu zastąp 'URL wstaw tutaj' adresem URL treści, którą chcesz osadzić na swojej stronie.

Jako przykład, dodaj Mapę Google w WordPress, ponieważ jest to łatwy sposób dla sklepów, restauracji i innych miejsc na dodanie wskazówek do swojego formularza kontaktowego.

Następnie po prostu podglądnij lub opublikuj wpis.

Powinieneś teraz zobaczyć zawartość osadzoną na swojej stronie.

Aby zobaczyć wszystkie dostępne parametry, możesz zajrzeć na stronę wtyczki iFrame.

Metoda 3: Ręczne osadzanie iFrame w WordPress (bez wtyczki)

Jeśli nie chcesz używać specjalnej wtyczki WordPress, możesz ręcznie utworzyć kod iFrame. Aby to zrobić, musisz otworzyć stronę lub wpis, a następnie dodać blok HTML w edytorze treści WordPress.

Najpierw wklej poniższy kod do swojego bloku HTML:

<iframe src="URL goes here"></iframe>

Po prostu zastąp „URL tutaj” bezpośrednim adresem URL treści, którą chcesz osadzić.

Tutaj osadzamy Mapę Google:

Możesz dodać dodatkowe parametry, aby zmienić wygląd zawartości na Twojej stronie. Na przykład, ustawiamy szerokość na 600 pikseli i wysokość na 200 pikseli:

<iframe src="URL goes here" width="600" height="300"></iframe>

Jest to przydatne, jeśli musisz wyświetlić osadzoną treść w mniejszej przestrzeni. Na przykład, możesz chcieć zmienić rozmiar treści po przetestowaniu wersji mobilnej swojej witryny WordPress.

Jakie są alternatywy dla iFrame?

Istnieją pewne wady osadzania iFrame.

Nie wszystkie strony internetowe pozwalają na umieszczanie ich treści w ramce iFrame, i może być konieczne ręczne dostosowanie treści, aby dobrze wyglądała w dostępnym miejscu.

Innym problemem jest to, że strony HTTPS mogą używać iFrame tylko do treści z innych stron HTTPS. Podobnie, strony HTTP mogą używać iFrame tylko do treści z innych stron HTTP.

Dlatego wiele platform, takich jak WordPress, preferuje oEmbed.

Często możesz użyć oEmbed do osadzania filmów i innych treści, po prostu wklejając adres URL do posta w WordPressie. WordPress automatycznie przeskaluje oEmbed, aby dopasować go do dostępnego miejsca, dzięki czemu zawsze będzie wyglądał idealnie na komputerach stacjonarnych, smartfonach i tabletach.

Jeśli chcesz wyświetlać kanały społecznościowe na swojej stronie internetowej, zalecamy użycie wtyczki mediów społecznościowych zamiast iFrame.

Na przykład, Smash Balloon ułatwia osadzanie treści z Facebooka, Instagrama, Twittera i YouTube.

Oto kilka samouczków dotyczących dodawania kanałów mediów społecznościowych za pomocą Smash Balloon:

• Jak osadzać rzeczywiste tweety w postach na blogu WordPress
• Jak osadzić filmy z TikToka w WordPressie
• Jak osadzić playlistę YouTube w WordPress (najlepsza metoda)

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo dodawać ramki iFrame w WordPress. Możesz również zapoznać się z naszymi poradnikami na temat jak osadzić SoundCloud w WordPress oraz jak wyłączyć osadzanie w WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.