W artykule:
Chcesz dynamicznie zmieniać szerokość i wysokość oEmbed w WordPress?
Domyślnie WordPress świetnie radzi sobie z osadzaniem filmów i innych oembedów w Twoich postach i stronach. Czasami jednak możesz chcieć dynamicznie zmienić szerokość i wysokość osadzenia.
W tym artykule pokażemy, jak dynamicznie zmieniać szerokość i wysokość oEmbed w WordPress.
Po co ustawiać dynamiczną szerokość i wysokość OEmbed w WordPress
WordPress ułatwia osadzanie treści stron trzecich w postach i stronach za pomocą technologii o nazwie oEmbed.
Pozwala to na łatwe osadzanie filmów z YouTube, tweetów, TikTok i innych. Najlepsze jest to, że ta zawartość nie jest hostowana w witrynie WordPress, co oszczędza zasoby serwera i poprawia wydajność WordPress.
Domyślnie WordPress wykonuje świetną robotę, automatycznie dostosowując wysokość i szerokość osadzonej treści, aby pasowała do Twoich postów i stron.
Jednak niektórzy użytkownicy mogą chcieć zmienić to domyślne zachowanie. Na przykład możesz ustawić inną domyślną szerokość i wysokość osadzania 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 projektem motywu.
Mając to na uwadze, przyjrzyjmy się, jak łatwo ustawić dynamiczną szerokość i wysokość dla treści oEmbed w WordPress.
Metoda 1. Ustawianie dynamicznej szerokości i wysokości osadzania w WordPress
Ta metoda wymaga dodania niestandardowego kodu do witryny WordPress. Jeśli nie robiłeś tego wcześniej, zapoznaj się z naszym przewodnikiem na temat łatwego dodawania niestandardowych fragmentów kodu w WordPress.
W przypadku tej metody użyjemy znaczników warunkowych WordPress, aby wykryć, która strona WordPress jest przeglądana, a następnie odpowiednio zmienić domyślną szerokość i wysokość oEmbed.
Wystarczy dodać następujący kod do funkcji motywu.plik php lub wtyczka specyficzna dla witryny.
// Niestandardowy rozmiar oEmbed
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');
Możesz użyć dowolnego z dostępnych znaczników warunkowych WordPress do wykrywania różnych scenariuszy.
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 określonego 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 witryny.
Te klasy CSS mogą być następnie wykorzystane do zmiany wyglądu osadzeń w określonych obszarach witryny.
Na przykład możesz znaleźć klasy CSS, takie jak page-id, post-id, Kategoria, tag i wiele innych w swoim szablonie WordPress. Możesz znaleźć te klasy CSS za pomocą narzędzia Inspect.
Podobnie WordPress dodaje również klasy CSS do osadzania bloków w postach i stronach. Ponownie użyjesz narzędzia Inspect, aby znaleźć klasy używane przez blok osadzania.
Gdy już masz te klasy CSS, możesz ich użyć do Ustawienia dynamicznej wysokości i szerokości dla oEmbed. Na przykład w poniższym przykładowym kodzie ustawiamy dynamiczną szerokość i Wysokość bloku osadzania Pinteresta na określonym identyfikatorze posta.
artykuł # post-79 .wp-block-embed-pinterest {
max-width: 200px!ważne;
max-height: 400px!ważne;
}
Możesz wypróbować swój kod CSS, dodając Niestandardowy CSS w edytorze motywów. Gdy będziesz zadowolony, nie zapomnij zapisać i opublikować 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ż zobaczyć te przydatne wskazówki, sztuczki i hacki WordPress lub sprawdzić nasz wybór najlepszych wtyczek mediów społecznościowych dla WordPress.
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.
