Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Chcesz osadzać kod iFrame we wpisie lub na stronie WordPress?

Ramki iFrame to łatwy sposób na wyświetlanie filmów lub innych treści na twojej witrynie bez konieczności ich przesyłania. Wiele platform zewnętrznych, takich jak YouTube, udostępnia kod iFrame, który można po prostu wkleić na twoją witrynę internetową.

W tym artykule pokażemy, jak łatwo osadzać kod iFrame w WordPress.

Easily embedding iFrame code in WordPress

Co to jest iFrame?

Ramka iFrame (skrót od inline frame) pozwala osadzać filmy lub inne treści na twojej witrynie bez konieczności ich hostowania. Pozwala to zaoszczędzić przepustowość i przestrzeń dyskową, dlatego nigdy nie należy przesyłać filmów bezpośrednio do WordPressa.

Oprócz poprawy szybkości i wydajności twojego WordPressa, iFrame będzie aktualizować się automatycznie, 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ą ramki iFrame również nie narusza praw autorskich, więc może pomóc w ochronie przed pozwami sądowymi.

Powiedziawszy to, zobaczmy, jak można łatwo osadzać kod iFrame w WordPress. Po prostu użyj szybkich odnośników, aby przejść bezpośrednio do metody, której chcesz użyć:

Metoda 1: Osadzanie iFrame przy użyciu kodu źródłowego w WordPress (szybko i łatwo)

Wiele dużych witryn hostujących filmy ma opcję „Osadzanie”, która zapewnia dostęp do kodu iFrame, który należy dodać do twojej witryny.

Jeśli witryna internetowa ma jakiekolwiek ustawienia „Udostępniania” lub „Osadzania”, jest to często najszybszy i najłatwiejszy sposób na osadzanie treści.

Dokładne kroki będą się różnić w zależności od platformy, ale spójrzmy na YouTube jako przykład. Aby osadzać filmy z YouTube w WordPress, wystarczy kliknąć przycisk „Udostępnij” pod filmem, którego chcesz użyć.

Clicking the Share button for your chosen YouTube video

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

Wystarczy kliknąć przycisk „Osadzaj”.

Clicking the Embed button to get the YouTube embed code

YouTube wyświetli teraz kod iFrame.

Domyślnie YouTube zaznacza pole „Pokaż kontrolki odtwarzacza”, ale zalecamy również włączenie trybu zwiększonej prywatności. Tryb ten pozwala odwiedzającym oglądać osadzane treści na twojej witrynie internetowej WordPress bez wpływu na ich przeglądanie w YouTube.

Następnie kliknij przycisk „Kopiuj”.

Adding a YouTube video to your WordPress website

Teraz możesz wkleić ten kod do dowolnego wpisu lub strony w twojej witrynie. W tym przewodniku dodamy go do utwórz nową stronę w edytorze bloków WordPress.

Wystarczy otworzyć stronę, a następnie kliknąć przycisk „+”. W wyskakującym okienku, które się pojawi, zacznij wpisywać „HTML”, aby znaleźć własny blok HTML.

Adding a custom HTML block in WordPress

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

Następnie wystarczy wkleić kod iFrame YouTube do bloku.

Pasting the YouTube HTML code into the iFrame block

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

Metoda 2: Osadzanie iFrame za pomocą wtyczki WordPress (działa na wszystkich witrynach internetowych)

Nie każda witryna internetowa innej firmy udostępnia gotowy kod osadzania. Jeśli nie możesz znaleźć żadnych ustawień „Udostępnij” lub „Osadzaj”, możesz łatwo utworzyć swój własny kod iFrame za pomocą wtyczki iFrame.

Najpierw należy zainstalować i włączyć wtyczkę iFrame. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu wtyczka zacznie działać od razu, bez konieczności konfiguracji. Po prostu przejdź do strony lub wpisu, w którym chcesz osadzać treści i dodaj blok Shortcode.

Adding a shortcode block in the block editor

Następnie dodaj następujący krótki kod:

[iframe src="URL goes here"]

Wystarczy zastąpić „URL goes here” adresem URL treści, którą chcesz osadzać na swojej witrynie.

Jako przykład, dodajmy mapę Google w WordPress, ponieważ jest to łatwy sposób dla sklepów, restauracji i innych miejsc, aby dodać wskazówki dojazdu w formularzu kontaktowym.

Wskazówka: W zależności od źródła, może być konieczne kliknięcie „Udostępnij” lub podobnego ustawienia, aby zobaczyć bezpośredni, możliwy do osadzenia adres URL treści.

The shortcode to embed a Google map

Następnie wystarczy wyświetlić podgląd lub opublikować wpis.

Teraz powinieneś zobaczyć treść osadzaną na twojej witrynie internetowej.

An embedded Google Map, on a WordPress website

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

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

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

Easily embedding iframe code in WordPress

Najpierw wklej następujący kod do twojego bloku HTML:

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

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

Tutaj osadzamy mapę Google:

Entering the iFrame code for the Google map

Możesz dodać dodatkowe parametry, aby zmienić wygląd treści na twojej witrynie internetowej. 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, gdy trzeba wyświetlić osadzaną treść na mniejszej przestrzeni. Na przykład, możesz chcieć zmienić rozmiar treści po przetestowaniu mobilnej wersji twojej witryny internetowej WordPress.

The Google map on the site with a set height and width

Jakie są alternatywy dla iFrame?

Korzystanie z iFrames ma pewne wady.

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

Innym problemem jest to, że witryny HTTPS mogą używać iFrames tylko dla treści z innych witryn HTTPS. Analogicznie, witryny HTTP mogą używać iFrames 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 wpisu WordPress. WordPress automatycznie zmieni rozmiar oEmbed, aby dopasować go do dostępnej przestrzeni, dzięki czemu zawsze będzie wyglądał idealnie na komputerach stacjonarnych, smartfonach i tabletach.

Ważne: WordPress nie obsługuje już domyślnie oEmbed dla wpisów na Facebooku i Instagramie. Aby uzyskać więcej informacji na ten temat, zapoznaj się z naszym pełnym przewodnikiem na temat poprawki problemu Facebooka i oEmbed w WordPress.

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

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

An example of an Instagram feed, created using Smash Balloon

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

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak łatwo osadzać kod iFrame w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat tego, jak zezwolić na PHP we wpisach i na stronach WordPress a, a także zobaczyć nasze wybory ekspertów dotyczące najlepszych wtyczek galerii YouTube dla WordPressa.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

6 komentarzyZostaw odpowiedź

  1. Aileen Herring

    It was really really helpful

    • WPBeginner Support

      Glad it was helpful :)

      Administrator

  2. M. Faisal.

    thanks for your article of how to easily embed iframe code in wordpress.

    Now i am trying to embed iframe code in wordpress for google map.

    i am success it for solving this problem.

    Thanks and regards.

    • WPBeginner Support

      Glad our guide was helpful :)

      Administrator

  3. Kathleen

    Thanks for this. When embedding a YouTube video, how can I add a title to the iframe for screen readers, for accessibilty purposes?

    • WPBeginner Support

      You would need to check with the support for the iframe you’re trying to embed for title options available.

      Administrator

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.