Począwszy od WordPress 2.9, osadzanie multimediów z serwisów zewnętrznych, takich jak YouTube czy Flickr, sprowadza się do wstawienia odpowiedniego linka podczas edycji wpisu. Wszystko to, dzięki integracji formatu oEmbed.
Czym jest oEmbed?
oEmbed to format pozwalający na uzyskiwanie kodu HTML i JavaScript, niezbędnego do umieszczenia na stronie multimediów (m.in. wideo i zdjęć), na podstawie linku do tego materiału w serwisie źródłowym.
Korzystanie
Osadzanie multimediów za pomocą formatu oEmbed jest niezwykle proste i polega na wstawieniu pełnego adresu URL elementu w polu edytora wpisu lub strony. Należy pamiętać jedynie o tym, że adres powinien znajdować się w osobnej linijce, i nie powinien być aktywnym linkiem (hiperłączem).
Wstawianie linka w edytorze wizualnym
To wszystko! Jeśli teraz wyświetlimy wpis w miejsce linku zostanie wyświetlone wideo.
Wyświetlanie wideo na stronie
Shortcode
Podana powyżej metoda jest niezwykle prosta, ale nie pozwala na ustalenie dwóch ważnych parametrów wstawianego obiektu – wysokości i szerokości. Aby wstawiany element miał określone wymiary, należy skorzystać z shortcode , który przyjmuje dwa parametry – width (szerokość) oraz height (wysokość). Wstawiając obiekt można skorzystać tylko z jednego z nich np. ustalić szerokość elementu korzystając z parametru width, a wysokość zostanie wyliczona automatycznie, proporcjonalnie do podanej szerokości.
[embed width="300"]http://www.youtube.com/watch?v=tyeEm36qVZ4[/embed] Ustawienia
Na początku artykułu wspominałam, że format oEmbed jest wbudowany w WordPress. Oznacza to, że działa on automatycznie i nie trzeba go osobno włączać. Warto jednak wiedzieć, że można go wyłączyć. Ustawienia dotyczące osadzanych treści znajdują się w panelu administracyjnym, w sekcji „Ustawienia / Media”.
Osadzenie treści / ustawienia
Pierwsza opcja (domyślnie zaznaczona) odpowiada za automatyczne osadzanie treści czyli rozpoznawanie adresów URL i przekształcanie ich na odpowiedni kod osadzający.
Druga opcja pozwala na określenie maksymalnej szerokości i wysokości osadzanych elementów. Nie mają one zastosowania, kiedy korzystamy z shortcode z określonymi parametrami width lub height. Jeśli w ustawieniach nie określimy maksymalnej szerokości wstawianych treści, wykorzystana zostanie wartość zmiennej $content_width ustawianej w pliku functions.php indywidulanie dla każdego szablonu.
Dodawanie serwisów
WordPress domyślnie pozwala na osadzanie multimediów z następujących serwisów:
wideo: YouTube, Vimeo, DaliyMotion, blip.tv, Viddler, Hulu, Qik, Revision3, FunnyOrDie.com, Flickr, WordPress.tv
zdjęcia: Flickr, Photobucket, SmugMug, FunnyOrDie.com
dokumenty: Scribd
pozostałe: Twitter, PollDaddy
Dodawanie multimediów z innych serwisów jest również możliwe. Ich obsługę włączamy za pomocą funkcji wp_oembed_add_provider. Jedyny warunek jest taki, że serwis który chcemy dodać, również obsługuje format oEmbed. Pełna lista takich serwisów, jest dostępna na oficjalnej stronie oEmbed.
Działanie funkcji pokażę na przykładzie serwisu Slideshare.
wp_oembed_add_provider( 'http://www.slideshare.net/*', 'http://www.slideshare.net/api/oembed/2' ); Funkcja wp_oembed_add_provider przyjmuje trzy parametry:
Pierwszy z nich określa format adresów URL w danym serwisie. Zamiast adresu URL możemy również podać maskę adresu za pomocą odpowiedniego wyrażenia regularnego.
Drugi parametr określa adres URL obsługujący żądania od serwisów zewnętrznych.
Trzeci parametr jest opcjonalny i określa czy format podany w pierwszym parametrze jest wyrażeniem regularnym – w takim wypadku ustawiamy wartość true. Domyślna wartość to false, zatem jeśli do określenia formatu adresu URL nie wykorzystaliśmy wyrażenia regularnego, nie musimy podawać tego parametru.
Na szczęście wartości parametrów dla funkcji wp_oembed_add_provider można skopiować wprost z serwisu oEmbed.
Dane oEmbed / Slideshare
Zgodnie z powyższymi danymi URL Scheme należy podać jako wartość pierwszego parametru funkcji, Endpoint jako wartość drugiego.
Modyfikacja kodu HTML
Korzystając z formatu oEmbed nie mamy wpływu na wynikowy kod HTML. Za pomocą filtra embed_oembed_html możemy go jednak nieco zmodyfikować. W przykładzie poniżej cały osadzany element zostanie otoczony tagiem <div>:
function add_embed_filter($html, $url, $attr ) {
return '<div class="embed">'.$html.'</div>';
}
add_filter( 'embed_oembed_html', 'add_embed_filter', 50, 3 ); Podany filtr można wykorzystać również w inny sposób, np. do wyświetlenia jakieś informacji tuż pod lub nad osadzaną treścią.
Podsumowanie
Format oEmbed wbudowany w WordPress znacznie ułatwił pracę z multimediami, a dzięki dodatkowym opcjom i ustawieniom, praktycznie wyeliminował konieczność korzystania z wtyczek. Ciekawa jestem, jaka jest Wasza ulubiona metoda wstawiania wideo, zdjęć i innych treści z serwisów zewnętrznych?
Komentar