WordPress ułatwia tworzenie angażujących, multimedialnych stron poprzez automatyczne osadzanie treści stron trzecich, takich jak filmy z YouTube i tweety.
Jednak po ponad 15 latach bliskiej współpracy z użytkownikami WordPressa nauczyliśmy się, że oEmbedy mogą również powodować problemy. Wyobraź sobie film z YouTube, który wychodzi poza swój kontener i przesuwa cały tekst na bok, lub zmusza przycisk wezwania do działania dalej w dół ekranu.
Właśnie dlatego ustawienie maksymalnej szerokości dla oEmbedów jest tak ważne. Pozwala to przejąć kontrolę i zapewnić, że osadzona zawartość będzie idealnie pasować do projektu Twojej witryny.
W tym artykule pokażemy Ci, jak ustawić maksymalną szerokość oEmbed w WordPress, aby mieć pełną kontrolę nad układem swojej witryny.
Dlaczego warto naprawić maksymalną szerokość OEmbed w WordPressie?
WordPress obsługuje oEmbed, co pozwala na automatyczne osadzanie treści z zewnętrznych stron internetowych. Na przykład możesz łatwo osadzać filmy z YouTube, prezentacje SlideShare, tweety i wiele innych rodzajów treści.
Ta treść nie jest hostowana na Twoim serwerze, więc nie spowolni Twojej witryny. W szczególności należy zawsze używać technologii takich jak oEmbed, a nigdy nie przesyłać wideo do WordPress.
Uwaga: Chociaż Facebook i Instagram obsługiwały oEmbed w przeszłości, Meta od tego czasu zaprzestała obsługi oEmbed. Aby uzyskać instrukcje krok po kroku, jak naprawić tę funkcję, zapoznaj się z naszym przewodnikiem jak naprawić problem z oEmbed na Facebooku i Instagramie w WordPressie.
WordPress zawsze będzie próbował dostosować szerokość osadzonej treści, aby idealnie pasowała do dostępnego miejsca. Czasami jednak osadzona treść może być zbyt szeroka i nakładać się na inne obszary treści Twojej witryny.
Niestety, nie można ustawić maksymalnej szerokości dla osadzonych elementów stron trzecich za pomocą wbudowanych narzędzi WordPress.
Mając to na uwadze, zobaczmy, jak możesz dodać tę brakującą funkcję i ustawić maksymalną szerokość oEmbed w WordPress. Po prostu użyj poniższych szybkich linków, aby przejść bezpośrednio do metody, której chcesz użyć:
- Metoda 1: Użycie krótkiego kodu osadzania (najlepsze dla filmów z YouTube)
- Metoda 2: Korzystanie z wbudowanych bloków osadzania WordPress (łatwe)
- Metoda 3: Użycie niestandardowego PHP (ustaw maksymalną szerokość dla wszystkich osadzeń)
- Metoda 4: Używanie CSS (Ustaw maksymalną szerokość dla określonych typów osadzeń)
- Dodatkowa wskazówka: Jak łatwo dodać swoje kanały mediów społecznościowych do WordPressa
Metoda 1: Użycie krótkiego kodu osadzania (najlepsze dla filmów z YouTube)
Możesz ustawić maksymalną szerokość za pomocą krótkiego kodu. Ta metoda jest łatwa, szczególnie jeśli chcesz ustawić maksymalną szerokość tylko dla niewielkiej liczby postów. Odkryliśmy również, że ta metoda dobrze działa w przypadku osadzania filmów w postach na blogu WordPress.
Jednak krótki kod osadzania i jego parametry szerokości i wysokości nie działają dla wszystkich dostawców oEmbed. Na przykład nie można go użyć do ustawienia wysokości i szerokości osadzenia Giphy w WordPress. W takim przypadku możesz spróbować jednej z innych metod wymienionych poniżej.
Zamiast wklejać adres URL do edytora posta, musisz utworzyć blok shortcode. Następnie możesz dodać parametry szerokości i wysokości do kodu osadzenia.
Na przykład, wystarczy po prostu opakować następujący tekst w tagi embed:
width="900" height="600"]https://www.youtube.com/watch?v=6LwWumPeues
Po prostu zmień wartości szerokości i wysokości, aby dopasować je do własnych potrzeb i zastąp adres URL treścią, którą chcesz osadzić.
Gdy będziesz zadowolony ze strony, po prostu kliknij „Zaktualizuj” lub „Opublikuj”.
Osadzona zawartość powinna teraz idealnie mieścić się w dostępnym miejscu.
Metoda 2: Korzystanie z wbudowanych bloków osadzania WordPress (łatwe)
Edytor bloków WordPress zawiera kilka bloków osadzania dla różnych usług oEmbed, takich jak bloki dla Twittera, transmisji na żywo z YouTube i filmów, oraz osadzeń SoundCloud.
Niektóre z tych bloków pozwalają na zmianę wyrównania osadzenia i ustawienie zawartości na „Szeroka szerokość” lub „Pełna szerokość”.
Jeśli wybierzesz pełną szerokość, blok osadzony i osadzona treść zajmą całą szerokość ekranu. Jeśli wybierzesz szeroki, blok osadzony zajmie całą szerokość, ale treść pozostanie w tym samym rozmiarze.
Końcowy wynik może się różnić w zależności od Twojego motywu WordPress. Jest to jednak szybka i łatwa metoda, więc warto sprawdzić, czy działa dla Twojej witryny WordPress.
Po prostu kliknij przycisk „Wyrównaj” na małym pasku narzędzi nad blokiem. Następnie wybierz „Szeroki rozmiar” lub „Pełny rozmiar”.
Jeśli to rozwiąże problem maksymalnej szerokości osadzenia, możesz przejść dalej i opublikować stronę. Jeśli nie jesteś zadowolony z wyglądu, będziesz musiał spróbować innej metody.
Metoda 3: Użycie niestandardowego PHP (ustaw maksymalną szerokość dla wszystkich osadzeń)
Czasami możesz chcieć ustawić maksymalną szerokość dla wszystkich osadzonych treści. Najprostszym sposobem na zrobienie tego jest dodanie niestandardowego kodu do Twojej witryny WordPress.
Problem z tą metodą polega na tym, że atrybut maksymalnej szerokości zadziała tylko wtedy, gdy osadzona zawartość nie ma już zdefiniowanej „szerokości”. Jeśli kod osadzenia już zawiera własny atrybut „szerokość”, ta metoda może nie działać.
Jeśli nigdy wcześniej nie edytowałeś kodu swojej witryny, zapoznaj się z naszym przewodnikiem na temat jak łatwo dodawać niestandardowe fragmenty kodu w WordPress.
Niektórzy przewodnicy proszą o ręczną edycję plików motywu, ale może to spowodować wszelkiego rodzaju błędy, a nawet całkowicie zepsuć Twoją witrynę.
Z tego powodu zalecamy używanie WPCode. Ułatwia dodawanie fragmentów kodu w WordPressie bez konieczności edycji plików motywu. W ten sposób możesz aktualizować lub zmieniać swój motyw bez utraty wszystkich niestandardowych funkcji kodu.
WPCode zawiera również bibliotekę prekonfigurowanych fragmentów kodu, w tym fragment „Ustaw maksymalną szerokość oEmbed”. Pozwala to określić maksymalną szerokość i wysokość dla Twoich oEmbedów.
Najpierw musisz zainstalować i aktywować darmową wtyczkę WPCode. Więcej informacji znajdziesz w naszym przewodniku krok po kroku na temat jak zainstalować wtyczkę WordPress.
Po aktywacji przejdź do Fragmenty kodu » Biblioteka w panelu administracyjnym WordPress.
Tutaj możesz wyszukać „Set oEmbed Max Width” i najechać kursorem myszy na wynik o tej samej nazwie.
Następnie możesz kliknąć „Użyj fragmentu”.
WPCode przeniesie Cię następnie do strony „Edytuj fragment”, gdzie wtyczka już wszystko dla Ciebie skonfigurowała.
Tutaj zauważysz następujący gotowy fragment kodu:
function wpcode_snippet_oembed_defaults( $sizes ) {
return array(
'width' => 400,
'height' => 280,
);
}
add_filter( 'embed_defaults', 'wpcode_snippet_oembed_defaults' );
Domyślnie ustawia to maksymalną szerokość na „400” i maksymalną wysokość na „280”. Nie zapomnij dostosować atrybutów wysokości i szerokości do swoich potrzeb.
Na koniec kliknij suwak „Nieaktywny”, aby pokazał się „Aktywny”. Następnie po prostu kliknij przycisk „Zapisz fragment” lub „Zaktualizuj”, aby fragment kodu stał się aktywny.
Metoda 4: Używanie CSS (Ustaw maksymalną szerokość dla określonych typów osadzeń)
Domyślnie WordPress automatycznie dodaje klasy CSS do różnych obszarów Twojej witryny.
Dodaje również kilka klas CSS do bloków osadzania. Możesz użyć tych klas CSS, aby ustawić maksymalną szerokość dla osadzonych elementów na swoim blogu WordPress.
Jest to dobry wybór, jeśli chcesz ustawić maksymalny rozmiar dla określonego typu osadzonych elementów, takich jak osadzone tweety. Pozwala również na utworzenie maksymalnego rozmiaru dla wszystkich osadzonych treści, niezależnie od typu.
Aby dowiedzieć się, które klasy CSS musisz wybrać, po prostu osadź treść w poście lub stronie, a następnie wyświetl ją w przeglądarce.
Następnie najedź kursorem myszy na osadzoną treść i kliknij prawym przyciskiem myszy. W menu, które się pojawi, wybierz narzędzie „Zbadaj”.
Otwiera to nowy panel pokazujący wszystkie klasy CSS, które WordPress dodał do osadzonej treści. Możesz użyć tych klas, aby ustawić maksymalną szerokość dla tego typu osadzenia.
Aby skierować się na konkretnego dostawcę oEmbed, zazwyczaj używa się .wp-block-embed-providername, więc szukaj tej klasy w panelu.
Na przykład na poniższym obrazku podkreśliliśmy klasę .wp-block-embed-providername. W tej linii widzimy również klasę .wp-block-embed-pinterest.
Możesz ustawić maksymalną szerokość tylko dla osadzeń Pinterest, używając klasy .wp-block-embed-pinterest.
Na przykład:
.wp-block-embed-pinterest {
max-width: 900px!important;
}
Pamiętaj tylko, że możesz potrzebować zastąpić .wp-block-embed-pinterest inną klasą CSS, w zależności od treści, którą chcesz docelowo.
Jeśli chcesz ustawić maksymalną szerokość dla wszystkich osadzeń, możesz użyć następującego fragmentu:
.wp-block-embed {
max-width: 900px!important;
}
Najprostszym sposobem dodania niestandardowego kodu CSS do Twojej witryny jest użycie WPCode. Po prostu utwórz nowy niestandardowy fragment, wykonując ten sam proces opisany powyżej.
Tym razem otwórz menu rozwijane „Typ kodu” i wybierz „Fragment kodu CSS”.
Możesz teraz zapisać i opublikować ten fragment dokładnie w taki sam sposób, w jaki publikujesz dowolny fragment kodu WPCode.
Po wykonaniu tej czynności WordPress użyje tej wartości jako maksymalnego rozmiaru dla Twoich osadzeń.
Dodatkowa wskazówka: Jak łatwo dodać swoje kanały mediów społecznościowych do WordPressa
Jeśli regularnie osadzasz treści z platform mediów społecznościowych, możesz zaoszczędzić dużo czasu i wysiłku, korzystając z Smash Balloon.
Smash Balloon to najlepsza wtyczka mediów społecznościowych dla WordPress i pozwala łatwo dodać swoje kanały mediów społecznościowych do strony WordPress.
Obsługuje wszystkie popularne osadzenia z mediów społecznościowych, w tym YouTube, Twitter, Instagram i filmy TikTok.
Co ważniejsze, Smash Balloon jest responsywny mobilnie i działa z każdym motywem WordPress, dzięki czemu Twoje osadzone treści zawsze będą wyglądać świetnie.
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak ustawić maksymalną szerokość oEmbed w WordPressie. Możesz również zapoznać się z naszym przewodnikiem na temat jak łatwo osadzić kod iframe w WordPressie lub naszą ekspercką porównaniem najlepszego oprogramowania do czatu na żywo dla małych firm.
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.
Andreu
Problem polega na tym, że maksymalna szerokość obrazów również jest ustawiana na zdefiniowany rozmiar. Co mogę zrobić, jeśli chcę ograniczyć szerokość osadzonych elementów w edytorze, ale nie obrazów? Dziękuję
Joe Daniel
Dziękuję. Walczyłem z tym od tygodni… działa z WP 4.0 z motywem Genesis
digg
Cześć, działa mi idealnie.
Ale to wpływa na całą witrynę, która ma różne szerokości, ponieważ istnieją strony pełnoekranowe, z paskami bocznymi lub fora itp.
Czy można to ograniczyć tak, aby dotyczyło tylko stron forum bbpress?
To będzie bardzo pomocne, dzięki!
Ajit Kumar
Dla każdego, komu to nie działa lub jeśli filmy z YouTube i inne treści iframe nie są skalowane, musisz dodać następujący kod do swojego style.css
/* Upewnij się, że osadzenia i ramki iframe pasują do swoich kontenerów */
embed,
iframe,
object {
max-width: 100%;
}
Mam nadzieję, że to pomoże. I Syed, dzięki za świetny post!
Waymond
Dzięki za opublikowanie rozwiązania!
Abhishek Sachan
nie działa
Dj
DZIĘKI! To doprowadzało mnie do szału.
Anto (@imanto)
Nie możesz użyć iframe, object, embed { max-width: 100%; height:auto;} tak, to poprawia szerokość i sprawia, że wideo jest responsywne, ale nie poprawia wysokości podczas przeglądania w przeglądarce.
Czy jest faktycznie sposób, aby to zrobić? Próbowałem już prawie wszystkiego, nawet fitvids nie działa, ponieważ ustawiasz szerokość bazową w pikselach w funkcjach, ale pokazuje tę szerokość na urządzeniach mobilnych, a potem, gdy próbujesz to poprawić za pomocą max-width, wysokość się psuje nawet w przeglądarce.
Myślę o zapytaniach medialnych czy coś? Ugh, jestem wykończony.
Amir
Działa idealnie, wielkie dzięki!
Pierre Dickinson
Cześć, dzięki za wskazówkę, ale to nie działa, oto co potrzebujesz w swoim pliku function.php:
add_filter(’embed_defaults’,’yourthemename_embed_defaults’);
function yourthemename_embed_defaults($defaults) {
$defaults[‘width’]=600; // lub cokolwiek chcesz
$defaults[‘height’]=360; // lub cokolwiek chcesz
return $defaults;
}
działa świetnie!
Pozdrawiam,
Filip Kojic
Ten kod nie działa dobrze. Wpisałem nazwę mojego motywu i motyw po prostu blokuje.
Valerie
Nie wiem, czy inny komentujący to zauważył, ale kod ma zakrzywione cudzysłowy i zepsułby stronę. Przetestuję tutaj, aby zobaczyć, czy opakowania shortcode zapobiegną zmianie, która zepsuła kod...
add_filter('embed_defaults','yourthemename_embed_defaults');John Cronin
Próbuję opublikować wysokiej klasy film animowany z YouTube na moim blogu WordPress. Dół ramki jest ucięty w podglądzie. Po kliknięciu strzałki odtwarzania ten problem znika. Jednak filmowiec jest słusznie niezadowolony, że podgląd w poście będzie wyglądał na błąd. Dostosowanie wysokości i szerokości w kodzie posta działa, ale nie rozwiązuje problemu. Pomysły?
Colin
Działało jak marzenie – dzięki!
Ryan Silver
Cześć,
Użyłem twojego rozwiązania dla szerokości i działało świetnie. Ale jak teraz ustawić wysokość? Czy to po prostu to samo if ( ! isset( $content_width ) ) $content_width = 560; ale ze słowem 'width' zastąpionym słowem 'height'? Próbowałem i nie działało....
Personel redakcyjny
Wysokość jest określana automatycznie, aby dopasować proporcje 16:9.
Admin
FIlip Kojic
Wygląda na to, że jest to 16:10. Oto przykład:
How can I change height. Please someone answer.
Jasmine Ham
Świetnie, działa! ale co jeśli potrzebuję, żeby było responsywne?
Masz jakiś pomysł, jak to zrobić?
josef
cześć,
czy jest sposób, aby wymusić, aby wszystkie iframes na stronie miały 100% szerokości. nie tylko youtube
mam około 300 iframes i wszystkie o stałym rozmiarze, więc… z góry dziękuję
Josef
josef
cześć,
czy jest sposób, aby wymusić, aby wszystkie iframes na stronie miały 100% szerokości. nie tylko youtube
mam około 300 iframes i wszystkie o stałym rozmiarze, więc...
Ryan
Dodałem ten kod do mojego pliku functions.php, ale nic to nie zmieniło, i zakładam, że jest tak dlatego, że mój motyw nie definiuje $content_width.
Widzę link do kodeksu dotyczącego jego definiowania, ale nie jestem programistą i nie mam nikogo do dyspozycji; jak dodać definicję $content_width do motywu? Gdzie to umieścić? Dzięki!
Justin Germino
To działało idealnie, czy jest jakiś sposób, aby wymusić i ustawić domyślnie jakość wideo na HD zamiast SD, która wydaje się być domyślna, mimo że w moich ustawieniach YouTube mam ustawione domyślnie HD?
Personel redakcyjny
Jaka jest Twoja maksymalna szerokość? Czytałem w przeszłości, że YouTube dostosowuje jakość w zależności od szerokości ramki iframe.
Admin
Grant Norwood
Należy pamiętać, że zmienna $content_width musi zostać zadeklarowana jako globalna, zanim ta poprawka zadziała.
Nigel Parry
WP jest aktualizowany przez ludzi, którzy nie rozumieją centralnego znaczenia multimediów w Internecie. Dlaczego ta podstawowa preferencja wymagałaby interwencji kodu, nie wiem. WP wyraźnie nie potrafił określić, jak szerokie są moje kolumny. W każdym razie, wszystko naprawione. Jesteście wspaniali.
Personel redakcyjny
Cóż, Nigel, jest w tym coś więcej. Starają się ułatwić korzystanie z WordPressa dla „użytkowników”. Z czasem WordPress dodawał jedną opcję po drugiej. To staje się naprawdę przerażające dla nowych użytkowników. Dlatego idą drogą decyzji zamiast opcji. Mają nadzieję, że dzięki tej maksymalnej szerokości oEmbed każdy projektant motywów powinien/będzie ją definiować w swoich motywach, aby końcowy użytkownik nie musiał się tym martwić.
Admin
Alex Leonard
Dzięki! Byłem trochę zdezorientowany, gdzie podziało się ustawienie osadzania multimediów!
Azad
Witaj
Dziękuję za Twój post.
Ale nie mogę tego dobrze zrobić, napisałem inny post, o którym wspomniałeś w komentarzach. Ale nadal nie mogę tego sprawić, żeby działało, wpisałem to:
Na początku mojego functions.php, ale wtedy cała moja strona przestała działać. wszystko stało się białe, musiałem edytować plik przez ftp, aby ponownie zacząć działać.
Co robię źle?
Dzięki!
Azad
Hey
I got it working, thanks!
Monica
Cześć, gdzie w pliku functions.php powinien zostać umieszczony ten kod?
Personel redakcyjny
Możesz wkleić go na początku lub na końcu, o ile jest niezależny od innych funkcji. Oto artykuł na ten temat:
https://www.wpbeginner.com/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/
Admin
Jesse Garnier
Jaka wartość byłaby odpowiednia dla $content_width w przypadku projektu o zmiennej szerokości lub responsywnego?
Personel redakcyjny
W przypadku projektowania responsywnego prawdopodobnie będziesz chciał użyć fitvid.js lub czegoś podobnego do zmiany rozmiaru filmów.
Admin
Paul Lumsdaine
Udało mi się w pewnym sensie sprawić, że responsywność działa, ustawiając max-width: 100% na moich ramkach iframe w CSS. Oczywiście wysokość jest ustawiana automatycznie w zależności od szerokości Twojej treści, ale to powinno przynajmniej sprawić, że będzie działać poprawnie bez używania dodatkowego JS. Fitvid jest najlepszym rozwiązaniem, ale to zadziałało dla mnie.
Jeremy Myers
Paul,
Czy możesz podać kod CSS, którego użyłeś do ustawienia szerokości mojego iframe na 100%?
Roman
Używam tego kodu CSS do responsywnego projektowania:
iframe, object, embed { max-width: 100%; } (jeśli chcesz, możesz dodać -> height: auto)
Tevya
Niestety CSS Romana albo nie działa w niektórych motywach, albo nie działa z nowym odtwarzaczem multimediów WP 3.6, który jest wbudowany w rdzeń. Właśnie to wypróbowałem i nic. Próbuję uzyskać motyw, który jest responsywny, aby nowy odtwarzacz WP 3.6 również był responsywny, ale jak dotąd bez powodzenia. Motyw 2012 wydaje się sobie z tym radzić bardzo dobrze, ale nie mogę rozgryźć, co robią inaczej niż motyw, z którym pracuję.
Melanie
Jestem nowicjuszem w WP i kodowaniu, dlatego nie wiem, gdzie umieścić kod „if ( ! isset( $content_width ) ) $content_width = 600;”. Poszedłem do pliku function.php w moim motywie Suffusion i nie wiem dokładnie, gdzie wstawić ten kod. Próbowałem w kilku miejscach, gdzie wspomniano o osadzaniu multimediów i to nie działa. W moim przypadku osadzone filmy są teraz za duże dla mojego motywu po aktualizacji do WP 3.5.
Personel redakcyjny
Zmień liczbę 600, aby pasowała do rozmiaru Twojego motywu. Jeśli jest za duża dla Twojego motywu, zmniejsz ją.
Admin
Jessi Linh
Zostało wydane w odpowiednim czasie!!! Nazwa „Elvin” jest też tak wyjątkowa.
Dzięki za Twój post.
Edward Caissie
Jest to część powodu, dla którego ustawienie odpowiedniej wartości $content_width jest wymogiem zgodnie z wytycznymi przeglądu motywów WordPress (http://codex.wordpress.org/Theme_Review#Required_Hooks_and_Navigation)
Personel redakcyjny
Tak, całkowicie się z Tobą zgadzam. Tylko źle napisane motywy tego nie będą miały. Ale jest ich sporo. Motyw, którego używał jeden z naszych klientów, miał brakujący element. Ogólnie rzecz biorąc, jest to dobry motyw.
Admin
Devin
Idealny czas. Dziękuję!