Jak dynamicznie zmieniać szerokość i wysokość oEmbed w WordPress

Chcesz, aby Twoje osadzone treści wyglądały idealnie na Twojej stronie WordPress, niezależnie od rozmiaru ekranu?

Domyślnie WordPress doskonale radzi sobie z osadzaniem filmów i innych elementów oEmbed w Twoich postach i stronach. Jednak z naszego doświadczenia wynika, że czasami potrzebujesz większej kontroli nad ich rozmiarem.

Możliwość dynamicznej zmiany szerokości i wysokości osadzonych elementów jest ważna dla responsywnego projektowania, zapewniając, że Twoja strona wygląda świetnie na telefonach, tabletach i komputerach stacjonarnych. Pozwala również na precyzyjne dostrojenie układu treści, aby uzyskać bardziej dopracowany wygląd. 

W tym artykule pokażemy Ci, jak dynamicznie zmieniać szerokość i wysokość oEmbed w WordPress.

Dlaczego ustawiać dynamiczną szerokość i wysokość oEmbed w WordPress

WordPress ułatwia osadzanie treści stron trzecich w Twoich postach i stronach za pomocą technologii zwanej oEmbed.

Pozwala to na łatwe osadzanie filmów z YouTube, postów na Facebooku, filmów z TikToka, tweetów i wiele więcej w WordPress. Najlepsze jest to, że te treści nie są hostowane na Twojej stronie WordPress, co oszczędza zasoby serwera i poprawia wydajność WordPress.

Domyślnie WordPress doskonale radzi sobie z automatycznym dostosowywaniem wysokości i szerokości osadzonych treści do Twoich postów i stron.

Jednak niektórzy użytkownicy mogą chcieć zmienić to domyślne zachowanie. Na przykład, możesz chcieć ustawić inną domyślną szerokość i wysokość osadzonych elementów dla strony głównej i poszczególnych artykułów.

Jest to przydatne, gdy używasz niestandardowego układu strony głównej lub pracujesz nad własnym niestandardowym motywem.

Biorąc to pod uwagę, przyjrzyjmy się, jak łatwo ustawić dynamiczną szerokość i wysokość dla treści oEmbed w WordPressie.

Pokażemy Ci dwie różne metody; możesz użyć poniższych szybkich linków, aby przejść bezpośrednio do metody, która Cię interesuje.

• Metoda 1. Ustawianie dynamicznej szerokości i wysokości osadzonych elementów w WordPressie
• Metoda 2. Używanie CSS do ustawiania dynamicznej szerokości i wysokości oEmbed

Metoda 1. Ustawianie dynamicznej szerokości i wysokości osadzonych elementów w WordPressie

Ta metoda wymaga dodania niestandardowego kodu do Twojej witryny WordPress. Jeśli nigdy tego nie robiłeś, zapoznaj się z naszym przewodnikiem, jak łatwo wklejać fragmenty kodu z sieci do WordPressa.

W tej metodzie użyjemy warunkowych tagów WordPress, aby wykryć, która strona WordPress jest wyświetlana, a następnie odpowiednio zmienić domyślne wartości szerokości i wysokości oEmbed.

Po prostu dodaj poniższy kod do pliku functions.php swojego motywu, wtyczki specyficznej dla witryny lub wtyczki fragmentów kodu.

//Custom oEmbed Size
function wpb_oembed_defaults($embed_size) {
if(is_front_page()) {
        $embed_size['width'] = 940;
        $embed_size['height'] = 600;
}
else {
    $embed_size['width'] = 600;
        $embed_size['height'] = 338;
}
    return $embed_size;
}
add_filter('embed_defaults', 'wpb_oembed_defaults');

Zalecamy dodanie tego kodu za pomocą WPCode, najlepszej wtyczki fragmentów kodu WordPress. Jest to najprostszy sposób na dodanie niestandardowego kodu w WordPress bez edycji pliku functions.php motywu.

Dzięki tej metodzie nie musisz martwić się o zepsucie swojej witryny. Ponadto, jeśli zmienisz swój motyw WordPress, będziesz mógł zachować wszystkie swoje dostosowania.

Aby rozpocząć, musisz zainstalować i aktywować darmowy plugin WPCode. Instrukcje krok po kroku znajdziesz w naszym przewodniku jak zainstalować plugin WordPress.

Po aktywacji wtyczki przejdź do strony Fragmenty kodu » + Dodaj fragment z panelu administracyjnego WordPress.

Następnie znajdź opcję „Dodaj własny kod (nowy fragment)” i kliknij przycisk „+ Dodaj własny fragment”.

Następnie wybierz „Fragment PHP” jako typ kodu z opcji, które pojawią się na ekranie.

Następnie możesz dodać nazwę dla swojego niestandardowego fragmentu kodu, która może być dowolna, aby pomóc Ci zapamiętać, do czego służy ten kod.

Następnie po prostu skopiuj i wklej fragment kodu z góry do pola „Podgląd kodu”.

Gdy to zrobisz, po prostu przełącz przełącznik u góry ekranu z 'Nieaktywny' na 'Aktywny' i kliknij przycisk 'Zapisz fragment'.

Możesz użyć dowolnych dostępnych tagów warunkowych WordPress, aby wykryć różne scenariusze.

Oto kolejny przykład, w którym zmieniamy domyślną szerokość oEmbed dla niestandardowej strony docelowej.

function wpb_oembed_defaults($embed_size) {
if( is_page( 42 ) ) {
        $embed_size['width'] = 940;
        $embed_size['height'] = 600;
}
else {
    $embed_size['width'] = 600;
        $embed_size['height'] = 338;
}
    return $embed_size;
}
add_filter('embed_defaults', 'wpb_oembed_defaults');

Jak widać, ten kod po prostu ustawia inną domyślną szerokość i wysokość dla konkretnego identyfikatora strony.

Metoda 2. Używanie CSS do ustawiania dynamicznej szerokości i wysokości oEmbed

WordPress automatycznie dodaje domyślne klasy CSS do różnych obszarów Twojej strony internetowej.

Te klasy CSS mogą być następnie używane do zmiany wyglądu osadzonych elementów w określonych obszarach Twojej witryny.

Na przykład, w motywie WordPress możesz znaleźć klasy CSS, takie jak page-id, post-id, category, tag i wiele innych. Możesz znaleźć te klasy CSS za pomocą narzędzia Inspect tool.

Podobnie, WordPress dodaje również klasy CSS do bloków osadzania w Twoich postach i stronach. Ponownie, użyjesz narzędzia Inspekcja, aby znaleźć, które klasy są używane przez blok osadzania.

Po uzyskaniu tych klas CSS możesz ich użyć do ustawienia dynamicznej wysokości i szerokości dla osadzonych elementów. Na przykład, w poniższym przykładowym kodzie ustawiamy dynamiczną szerokość i wysokość dla bloku osadzania Pinterest na konkretnym identyfikatorze posta.

article#post-79 .wp-block-embed-pinterest {
    max-width: 200px!important;
    max-height: 400px!important;
}

Możesz wypróbować swój kod CSS, dodając niestandardowy CSS w personalizatorze motywu. Gdy będziesz zadowolony, nie zapomnij zapisać i opublikować swoich zmian.

Mamy nadzieję, że te dwie metody pomogły Ci dowiedzieć się, jak łatwo ustawić dynamiczną szerokość i wysokość oEmbed w WordPress. Możesz również zapoznać się z tymi przydatnymi wskazówkami, sztuczkami i hackami WordPress lub sprawdzić nasze propozycje najlepszych wtyczek do mediów społecznościowych dla 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.