Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem
WebHelp.pl Warsztat Porady WordPress: korzystanie z oEmbed

Warsztat / Porady

WordPress: korzystanie z oEmbed

Bartosz Romanowski 5 lutego 2012 komentarze ()

WordPress posiada wbudowaną obsługę formatu oEmbed, dzięki któremu w łatwy sposób możemy na naszej stronie osadzać elementy pochodzące z zewnętrznych serwisów. Oczywiście strona źródłowa również musi obsługiwać ten format wymiany danych.

Aby skorzystać z tej metody osadzania wystarczy wkleić do naszego wpisu adres URL elementu, który chcemy w nim umieścić. Sprawdźmy jak to działa korzystając z filmu w serwisie YouTube:

Kod: Zaznacz cały
http://www.youtube.com/watch?v=E9G92mVo9U0

I to tyle – WordPress automatycznie pobierze z YouTube kod potrzebny do osadzenia filmu na naszej stronie. Należy tylko pamiętać aby adres URL umieścić w osobnej linii.

Ten sposób ma jednak pewne ograniczenie. Szerokość osadzanego elementu jest określana na podstawie zmiennej $content_width, która w niektórych szablonach zawiera szerokość całej strony, a nie tylko kolumny, w której wyświetlane są wpisy (szerokość strony minus szerokość sidebara). W takim przypadku możemy skorzystać z shortcode [embed], w parametrach którego podajemy rozmiary, jakie ma przyjąć osadzany obiekt:

Kod: Zaznacz cały
[embed width="640" height="320"]http://www.youtube.com/watch?v=E9G92mVo9U0[/embed]

Warto dodać, że w parametrach możemy podać tylko wysokość lub tylko szerokość elementu – jest to szczególnie przydatne przy osadzaniu filmów, które mogą mieć różne proporcje obrazu, lub elementów, którym chcemy nadać tylko konkretną szerokość, a których wysokość jest dla nas bez znaczenia.

WordPress domyślnie obsługuje oEmbed dla 15 serwisów – są to: YouTube, Vimeo, DailyMotion, blip.tv, Flickr (zdjęcia i filmy), Viddler, Hulu, Qik, Revision3, Scribd, Photobucket, PollDaddy, WordPress.tv, SmugMug i FunnyOrDie.com. Na szczęście w łatwy sposób możemy dodać obsługę kolejnych. Na oficjalnej stronie oEmbed znajdziemy listę serwisów, które posiadają zaimplementowaną obsługę tego formatu.

Spróbujmy więc dodać możliwość łatwego osadzania filmów z serwisu CollegeHumor, nieobsługiwanego domyślnie przez WordPressa. Aby to zrobić należy do pliku functions.php lub do pliku wtyczki dodać następujący kod:

Kod: Zaznacz cały
wp_oembed_add_provider('http://www.collegehumor.com/video/*', 'http://www.collegehumor.com/oembed.json');

Pierwszy parametr funkcji określa format adresów URL, które będą traktowane jako elementy do osadzenia. Drugi parametr mówi WordPressowi pod jaki adres ma się zwrócić aby otrzymać niezbędne do osadzenia dane. Możemy również podać trzeci parametr (true), dzięki któremu maska adresów będzie mogła zawierać wyrażenie regularne.

Aby sprawdzić czy wszystko działa jak należy umieśćmy w naszym wpisie adres jakiegoś filmu z nowo dodanego serwisu:

Kod: Zaznacz cały
http://www.collegehumor.com/video/6701398

Oczywiście możemy również skorzystać z shortcode [embed]:

Kod: Zaznacz cały
[embed width="640"]http://www.collegehumor.com/video/6701398[/embed]

Alternatywą dla ręcznego dodawania stron obsługujących oEmbed może być skorzystanie z serwisu Embedly, który za pośrednictwem swojego API oferuje obsługę osadzania dla ponad 200 serwisów. Dla każdej interesującej nas strony możemy dodać obsługę oEmbed ręcznie, podając jako adres dostawcy adres API Embedly:

Kod: Zaznacz cały
wp_oembed_add_provider('http://*dribbble.com/shots/*', 'http://api.embed.ly/1/oembed');

Znacznie wygodniejsze jest jednak skorzystanie z gotowej wtyczki.

Embedly jest usługą płatną, ale posiada (mało promowaną na stronach usługi) darmową wersję, która jest ograniczona do 10 tysięcy osadzanych adresów URL miesięcznie.

Masz pytania lub wątpliwości? Odwiedź nasze forum dyskusyjne.

Bartosz Romanowski

Programista, gadżeciarz, krytyczny miłośnik produktów Apple, fan ciężkich brzmień i niepoprawny pesymista.


Komentarze


HTML CSS JavaScript PHP bazy danych MySQL Flash grafika framework hosting domeny pozycjonowanie wordpress Facebook