publikacja: 16 sierpnia 2012, autor: , komentarzy 31 https://wpninja.pl/artykuly/latwe-osadzanie-multimediow-w-wordpress/

Łatwe osadzanie multimediów w WordPress

Łatwe osadzanie multimediów w WordPress

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

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

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

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

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?

Komentarze są zamknięte dla tego wpisu.