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?

Element iFrame (w skrócie ramka wewnętrzna) pozwala osadzać filmy lub inne treści na stronie bez konieczności ich hostowania. Może to zaoszczędzić przepustowość i miejsce na dysku, dlatego nigdy nie należy przesyłać filmu bezpośrednio do WordPressa.

Oprócz poprawy szybkości i wydajności WordPressa, iFrame będzie automatycznie aktualizowany, 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 oferuje opcję „Osadź”, która zapewnia dostęp do kodu iFrame potrzebnego do dodania na 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 WordPressie, po prostu kliknij przycisk „Udostępnij” pod filmem, którego 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ć osadzone treści na stronie WordPress bez wpływu na ich doświadczenia przeglądania na YouTube.

Następnie kliknij przycisk „Kopiuj”.

Teraz możesz opublikować swoją stronę, aby zobaczyć film z YouTube na żywo na swoim blogu WordPress. 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 witryna zewnętrzna udostępnia gotowy kod do osadzenia. 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. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem 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 Shortcode.

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.

Na przykład, dodaj Mapę Google w WordPressie, ponieważ jest to łatwy sposób dla sklepów, restauracji i innych miejsc, aby dodać wskazówki dojazdu na swoim formularzu kontaktowym.

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 zapoznać się ze stroną wtyczki iFrame.

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

Jeśli nie chcesz używać specjalnej wtyczki WordPress, możesz utworzyć kod iFrame ręcznie. 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 witryny HTTPS mogą używać iFrame tylko dla treści z innych witryn HTTPS. Podobnie witryny HTTP mogą używać iFrame tylko dla treści z innych witryn HTTP.

Dlatego wiele platform, takich jak WordPress, preferuje oEmbed.

Często można użyć oEmbed do osadzania filmów i innych treści, po prostu wklejając adres URL do posta w WordPress. 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 do mediów społecznościowych zamiast iFrames.

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ć iFrames w WordPress. Możesz również zapoznać się z naszymi przewodnikami, jak osadzać SoundCloud w WordPress i 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.