Jak osadzić ramki iFrame w WordPress

Udostępnianie treści online jest powszechną praktyką. Możesz być jednak zakłopotany, próbując dowiedzieć się, jak włączyć określone rodzaje treści. Udostępnianie dużych plików lub określonych elementów z innych stron internetowych może być czasem wyzwaniem.

Na szczęście istnieje dość prosta praktyka projektowania stron internetowych, którą można zastosować do wyświetlania określonych typów treści w witrynie WordPress. Używanie HTML do tworzenia ramek śródliniowych (iFrame) może uprościć udostępnianie obrazów, filmów i innych multimediów online.

W tym artykule przyjrzymy się różnym zastosowaniom ramek iFrame na stronie internetowej. Omówimy również kroki tworzenia ramek iFrame, zarówno ręcznie, jak i za pomocą wtyczki. Zacznijmy!

Zastosowania iFrame

Kiedy używasz iFrame, zasadniczo tworzysz mały portal w swojej witrynie, który umożliwia przeglądanie treści z innego miejsca. Może to być przydatne w kilku scenariuszach.

Korzystanie z elementu iFrame oznacza, że ​​nie musisz hostować plików, które chcesz wyświetlić. Treść pozostaje w swojej pierwotnej lokalizacji i można ją przeglądać przez ramkę w Twojej witrynie. Jednym ze sposobów, w jaki ta technika może być pomocna, jest wyświetlanie dużych plików. Ramka iFrame może przenieść te treści do Twojej witryny bez spowalniania szybkości ładowania.

Warto zauważyć, że ramki iFrame to jedyny rodzaj ramek dozwolony w HTML5. Istnieje wiele różnych rodzajów treści, których możesz użyć do wyświetlenia, w tym:

• Obrazy: możesz używać ramek iFrame, aby wyświetlać wysokiej jakości obrazy z zewnętrznej galerii i unikać kompromisów związanych z rozmiarem pliku.
• Filmy: udostępnianie filmów na platformach takich jak YouTube lub Vimeo i używanie ramek iFrame do umieszczania ich w witrynie może poprawić wrażenia użytkowników, jednocześnie zwalniając miejsce w witrynie.
• Inne treści internetowe: wyróżnianie treści z innych witryn internetowych, takich jak strony z portfolio lub przepisy kulinarne, może łatwo udostępniać odbiorcom bogate treści.

Korzystając z ramek iFrame, możesz także uniknąć skomplikowanych przepisów dotyczących praw autorskich. Kilka sądów orzekło, że używanie ramki iFrame do wyświetlania materiałów chronionych prawem autorskim nie we wszystkich przypadkach stanowi naruszenie praw autorskich.

Witryna może również zawierać skrypty zapobiegające umieszczaniu jej zawartości w ramce iFrame. Zalecamy jednak, aby zawsze popisywać się oryginalnym twórcą wszelkich treści, których używasz, lub zasięgnąć porady prawnej, jeśli nie masz pewności, jak postąpić.

Korzystanie z ramek iFrame z wtyczką

Jednym z najłatwiejszych sposobów wykorzystania ramek iFrame w witrynie WordPress jest użycie wtyczki iFrame. Na szczęście istnieje kilka wysoko ocenianych opcji do wyboru.

Krok 1: Pobierz i skonfiguruj wtyczkę iFrame

W naszym przykładzie użyjemy wtyczki Advanced iFrame. Jest elastyczny, prosty w użyciu i bardzo dobrze oceniany:

Po zainstalowaniu i aktywacji wtyczki znajdziesz nowy element menu Advanced iFrames na pulpicie nawigacyjnym WordPress. Advanced iFrame ma dość rozbudowany zestaw opcji. Warto zacząć od karty Opcje i przejrzeć film „Szybki start”:

Następnie możesz przewinąć w dół i przejrzeć niektóre opcje wtyczki. Wszystkie są skonfigurowane z wieloma pomocnymi wyjaśnieniami i łatwymi do wyboru opcjami:

Zaawansowane elementy iFrame zapewniają również bezpłatne narzędzie do sprawdzania ramek iFrame, które sprawdzi każdy podany adres URL, aby sprawdzić, czy zawiera on skrypty uniemożliwiające umieszczenie treści w ramce iFrame. Dobrym pomysłem jest uruchomienie dowolnego adresu URL za pomocą tego narzędzia przed użyciem go w elemencie iFrame w witrynie.

Warto również przejrzeć kartę Ustawienia podstawowe . Tam możesz dostosować elementy ramki iFrame, takie jak wysokość, szerokość i obramowanie ramki:

Po skonfigurowaniu ustawień wtyczki zgodnie z Twoimi potrzebami możesz zacząć używać ramek iFrame w swojej witrynie.

Krok 2: Użyj zaawansowanego bloku iFrame

W edytorze bloków WordPress będziesz mieć teraz dostępny do użytku blok Advanced iFrames :

Jeśli masz problem ze znalezieniem tego bloku przy pierwszym użyciu, będzie on w kategorii Widżety .

Po kliknięciu bloku Advanced iFrame zostanie on automatycznie załadowany treścią ze strony twórcy wtyczki. Możesz skonfigurować blokadę, korzystając z opcji Blokuj po prawej stronie strony:

Tam możesz dodać adres URL treści, która ma się pojawić w ramce iFrame. W razie potrzeby będziesz także mógł zastąpić niektóre ustawienia wtyczki.

Krok 3: Wyświetl podgląd swojej witryny

Jeśli przetestowałeś swój adres URL za pomocą narzędzia do sprawdzania ramek iFrame, powinieneś być gotowy. Zawsze jednak najlepiej jest wyświetlić podgląd zmian przed opublikowaniem treści. Powinieneś zobaczyć podgląd na żywo swojej ramki iFrame podczas jej edytowania i wprowadzania zmian.

Możesz także skorzystać z opcji Podgląd w prawym górnym rogu okna edycji, aby zobaczyć post w kontekście menu i pasków bocznych Twojej witryny.

Korzystanie z ramek iFrame bez wtyczki

Jeśli nie chcesz pracować z wtyczką, ale nadal chcesz używać ramek iFrame, masz szczęście! Możesz ręcznie zastosować kod do swoich postów i stron, aby uwzględnić zawartość iFramed.

Krok 1: Wstaw kod osadzania

Jeśli chcesz umieścić w swojej witrynie treści, takie jak wideo z YouTube, musisz zlokalizować kod osadzania udostępniany przez YouTube. Możesz to znaleźć pod filmem, klikając Udostępnij .

Spowoduje to wyświetlenie menu opcji udostępniania. Wybierz Osadź, aby uzyskać kod potrzebny do ramki iFrame.

Otworzy się osobne okno z podglądem tego, jak będzie wyglądać osadzona zawartość. Będziesz wtedy mógł skopiować fragment kodu iFrame.

Możesz także zaznaczyć pole Rozpocznij o , jeśli chcesz, aby widzowie automatycznie rozpoczynali oglądanie treści o określonym kodzie czasowym.

Następnie wrócisz do swojego posta WordPress i dodasz niestandardowy blok HTML . Można to znaleźć w kategorii Formatowanie .

Po dodaniu tego bloku do posta możesz po prostu wkleić kod osadzania skopiowany ze strony YouTube.

Następnie upewnij się, że element osadzony działa prawidłowo i wygląda tak, jak chcesz. Możesz kliknąć Podgląd w bloku Niestandardowy HTML , aby sprawdzić, czy ramka iFrame działa.

W ten sposób pomyślnie umieściłeś ramkę iFrame w swojej witrynie. Ten sam proces będzie działał na każdej platformie, która zapewnia kody osadzania.

Krok 2: Dostosuj swoje ramki iFrame

Jeśli nadal nie jesteś zadowolony ze sposobu, w jaki ramka iFrame wyświetla się w Twoim poście lub na stronie, możesz ręcznie dostosować niektóre wartości w kodzie. Zaleca się korzystanie z kaskadowych arkuszy stylów (CSS), aby w pełni dostosować sposób wyświetlania ramek iFrame w witrynie.

Tag iFrame umożliwia stosowanie wielu niestandardowych właściwości. Należy jednak pamiętać, że wiele z nich nie jest już obsługiwanych przez HTML5. Prawdopodobnie będziesz musiał zbadać CSS swojego motywu, jak wspomnieliśmy wcześniej, ponieważ możesz nie być w stanie zastąpić niektórych formatowań bezpośrednio w bloku Niestandardowy HTML .

Krok 3: Regularnie sprawdzaj zawartość iFrame

Korzystając z ramek iFrame, warto regularnie sprawdzać zawartość w ramkach. Ponieważ otwierasz okno do treści, nad którymi możesz nie mieć żadnej kontroli redakcyjnej lub jakościowej, może to spowodować problem w Twojej witrynie w dowolnym momencie.

Na przykład, jeśli film, którego użyliśmy w naszym przykładzie, zostanie usunięty z jego kanału YouTube, nasz post będzie zawierał zepsuty odtwarzacz. Jest to nieco bardziej oczywiste niż zepsuty link, ponieważ pozostawi wizualny wpływ na Twoją witrynę. Okresowe sprawdzanie zawartości ramki iFrame umożliwia zmianę lub usunięcie wszelkich multimediów, które już nie działają.

Zoptymalizuj swoją witrynę za pomocą silnika WP

Korzystanie z ramek iFrame w witrynie internetowej może zapewnić płynne działanie, przy jednoczesnym uwzględnieniu treści multimedialnych i dynamicznych. W WP Engine wiemy, jak ważne jest zrozumienie ważnych koncepcji projektowania stron internetowych i dostęp do najlepszych dostępnych zasobów dla programistów.

Co więcej, dokładamy wszelkich starań, aby pomóc Ci zapewnić klientom najlepsze wrażenia cyfrowe. Mamy różnorodny wybór w pełni zarządzanych planów hostingowych WordPress, dzięki czemu możesz skupić się na projektowaniu pięknych stron internetowych!