WordPress в настоящее время является одной из крупнейших платформ CMS и блогов. Но почему это? За последние несколько лет WordPress много критиковали. Одна из самых больших проблем заключается в том, что архитектура не так современна, как могла бы быть. То, как платформа (или CMS) была написана в 2004 году, отличается от стандартов, которые мы видим сегодня. Несмотря на это, нет сомнений в том, что его очень легко использовать для конечных пользователей.
Конечным пользователям нужна CMS, с которой легко публиковать контент. Я считаю, что большинство пользователей не хотят жестко кодировать свой контент. Если клиент спрашивает меня: «Я хочу добавить контент из SlideShare», я обращаю внимание на API REST или, по крайней мере, на встраивание кодов. Сегодня мы рассмотрим функцию WordPress, которую вы, вероятно, использовали, даже не подозревая об этом.
Введение в oEmbed
oEmbed — невероятно простой способ встраивать контент на ваш сайт. oEmbed состоит из потребителя и поставщика . Поставщик предоставляет ресурсы, которые могут быть встроены в потребителя, и потребитель запрашивает эти ресурсы через конечную точку oEmbed.
Реализация oEmbed определяет 4 типа ресурсов:
- Фото
- видео
- связи
- Богатый
Типы Photo, Video и Rich должны содержать URL, ширину и высоту в своем ответе. Поставщики могут включать и другие данные, но это все, что требуется при работе с этим типом контента. Спецификация oEmbed — это руководство, поставщики могут самостоятельно реализовать oEmbed. Поставщик должен иметь хотя бы одну конечную точку oEmbed и URL ресурса.
Давайте посмотрим на SlideShare и посмотрим, как они реализовали oEmbed.
В своей документации они указывают конечную точку oEmbed и конечную точку ресурса. Конечная точка oEmbed: http://www.slideshare.net/api/oembed/2 Конечная точка ресурса выглядит примерно так: http://www.slideshare.net/user-slug/slidename-slug Чтобы получить информацию от поставщика, мы должны использовать конечную точку oEmbed и передать параметр URL ресурса. Параметры должны быть в кодировке URL. Минимальным требованием является параметр URL, но вы также можете передать maxwidth , maxheight и формат . Это действительно зависит от формата контента, но для видео, фото и богатого формата у вас есть возможность передать эти аргументы. Кроме того, oEmbed указывает только метод GET, поэтому вы не можете использовать другие методы.
Давайте сделаем запрос к этой конечной точке, используя параметр URL.
Сделайте запрос на: http://www.slideshare.net/api/oembed/2?url=http://www.slideshare.net/chris-burgess/wordpress-themeswpmelb2014
<oembed>
<total-slides type="integer">50</total-slides>
<thumbnail-width type="integer">170</thumbnail-width>
<width type="integer">425</width>
<type>rich</type>
<provider-name>SlideShare</provider-name>
<slideshow-id type="integer">41489102</slideshow-id>
<provider-url>http://www.slideshare.net</provider-url>
<slide-image-baseurl>//image.slidesharecdn.com/wordpress-themes-wpmelb-2014-141112215416-conversion-gate02/95/slide-</slide-image-baseurl>
<version>1.0</version>
<conversion-version type="integer">2</conversion-version>
<html><iframe src="http://www.slideshare.net/slideshow/embed_code/41489102" width="427" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="https://www.slideshare.net/chris-burgess/wordpress-themeswpmelb2014" title="WordPress Themes Demystified" target="_blank">WordPress Themes Demystified</a> </strong> from <strong><a href="http://www.slideshare.net/chris-burgess" target="_blank">Chris Burgess</a></strong> </div>
</html>
<author-name>Chris Burgess</author-name>
<title>WordPress Themes Demystified</title>
<height type="integer">355</height>
</oembed>
Если вы запрашиваете только значение URL в браузере, вы просто получите обычную страницу HTML. То, что вы видите каждый день. SlideShare по умолчанию принимает формат XML, если другой формат не запрашивается. Давайте немного изменим запрос. На этот раз мы добавим еще один параметр и получим ответ JSON.
{
"author_url": "http://www.slideshare.net/chris-burgess",
"total_slides": 50,
"provider_name": "SlideShare",
"version_no": "1415853027",
"html": "<iframe src=\"http://www.slideshare.net/slideshow/embed_code/41489102\" width=\"427\" height=\"356\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" style=\"border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;\" allowfullscreen> </iframe> <div style=\"margin-bottom:5px\"> <strong> <a href=\"https://www.slideshare.net/chris-burgess/wordpress-themeswpmelb2014\" title=\"WordPress Themes Demystified\" target=\"_blank\">WordPress Themes Demystified</a> </strong> from <strong><a href=\"http://www.slideshare.net/chris-burgess\" target=\"_blank\">Chris Burgess</a></strong> </div>\n\n",
"thumbnail_height": 128,
"type": "rich",
"slide_image_baseurl": "//image.slidesharecdn.com/wordpress-themes-wpmelb-2014-141112215416-conversion-gate02/95/slide-",
"slide_image_baseurl_suffix": "-1024.jpg",
"slideshow_id": 41489102,
"title": "WordPress Themes Demystified",
"version": "1.0",
"height": 355,
"provider_url": "http://www.slideshare.net",
"thumbnail": "//cdn.slidesharecdn.com/ss_thumbnails/wordpress-themes-wpmelb-2014-141112215416-conversion-gate02-thumbnail.jpg?cb=1415853027",
"conversion_version": 2,
"author_name": "Chris Burgess",
"thumbnail_width": 170,
"width": 425
}
Попробуйте еще раз запросить этот ресурс, но на этот раз укажите дополнительный параметр. Давайте установим параметр maxwidth равным 200 и запросим этот URL: http://www.slideshare.net/api/oembed/2?url=http://www.slideshare.net/chris-burgess/wordpress-themeswpmelb2014&format=json&maxwidth=200
{
"conversion_version": 2,
"version_no": "1415853027",
"slide_image_baseurl_suffix": "-320.jpg",
"html": "<iframe src=\"http://www.slideshare.net/slideshow/embed_code/41489102\" width=\"202\" height=\"168\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" style=\"border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;\" allowfullscreen> </iframe> <div style=\"margin-bottom:5px\"> <strong> <a href=\"https://www.slideshare.net/chris-burgess/wordpress-themeswpmelb2014\" title=\"WordPress Themes Demystified\" target=\"_blank\">WordPress Themes Demystified</a> </strong> from <strong><a href=\"http://www.slideshare.net/chris-burgess\" target=\"_blank\">Chris Burgess</a></strong> </div>\n\n",
"total_slides": 50,
"width": 200,
"slide_image_baseurl": "//image.slidesharecdn.com/wordpress-themes-wpmelb-2014-141112215416-conversion-gate02/85/slide-",
"thumbnail_height": 128,
"thumbnail_width": 170,
"thumbnail": "//cdn.slidesharecdn.com/ss_thumbnails/wordpress-themes-wpmelb-2014-141112215416-conversion-gate02-thumbnail.jpg?cb=1415853027",
"provider_name": "SlideShare",
"author_url": "http://www.slideshare.net/chris-burgess",
"author_name": "Chris Burgess",
"version": "1.0",
"slideshow_id": 41489102,
"type": "rich",
"height": 167,
"title": "WordPress Themes Demystified",
"provider_url": "http://www.slideshare.net"
}
Если вы сравните ширину iframehtml Первый имел ширину 427, а последний имел ширину 202.
Если вы хотите узнать больше о спецификации oEmbed, ознакомьтесь с официальными документами oEmbed . Также взгляните на документацию SlideShare oEmbed и поиграйте с ней, чтобы лучше понять, как она работает.
Почему это полезно
На мгновение забудем о технической реализации. WordPress больше о конечных пользователях. Вся реализация спецификации oEmbed находится внутри кодовой базы WordPress. WordPress имеет белый список всех поддерживаемых провайдеров oEmbed. Это лишь некоторые из них из их белого списка .
WordPress позволяет легко вставлять контент из этого белого списка. Просто вставьте URL одного ресурса при создании поста или страницы.
Затем вы увидите, что он мгновенно отобразит содержимое:
URL должен быть только одной строкой. WordPress ищет эту ссылку, а затем ищет, является ли эта ссылка ресурсом для одного из URL-адресов, включенных в белый список. Если это так, то он отправляет запрос конечной точке oEmbed. В этом примере я скопировал URL-адрес статуса Twitter, и WordPress внедрил этот статус для меня в посте. Но это не ограничивается только Твиттером, поиском других сайтов в белом списке и экспериментированием с ними.
Помимо белого списка, каждый сайт oEmbed поддерживается WordPress. Вы можете вручную добавить дополнительных провайдеров. WordPress предоставляет две функции: одну для регистрации сайта, поддерживающего oEmbed, и одну, которую мы можем жестко закодировать, чтобы добавить поддержку oEmbed на наш сайт. Используйте wp_oembed_add_provider (), чтобы добавить существующий сайт oEmbed в WordPress. Вы также можете использовать wp_embed_register_handler (), чтобы добавить сайт без oEmbed. Или, если вы похожи на меня, который ненавидит изобретать велосипед, вы также можете проверить, существует ли плагин первым.
Вывод
oEmbed — это одна из удобных функций WordPress, которая делает вашу жизнь проще. В этой статье мы рассмотрели, что такое oEmbed, рассмотрели спецификации oEmbed и то, как oEmbed и WordPress работают вместе. Но не останавливайся там. Поэкспериментируйте с белым списком и добавьте его к своим провайдерам.