Вы можете иметь необходимость поделиться рекламой, информацией о продукте или, если вы дизайнер, ваша фотогалерея. Какой бы ни была причина, эта статья покажет вам способ создания встраиваемого контента плагин, чтобы поделиться своим содержанием WordPress с другими веб-сайтами.
Существуют различные способы, с помощью которых можно обмениваться контентом на веб-сайтах: RSS и Atom-каналы, AA и встраиваемые виджеты. RSS каналы на WordPress, как правило, ограничивается должности, в то время как AA не легко интегрировать на других веб-сайтах без добавления некоторых дополнительных кодов. Это оставляет нас с встраиваемыми виджеты, как те, которые используются Google AdSense для отображения рекламы на веб-сайтах или Facebook «Доля» и «Нравится» кнопки — все они полагаются на встраиваемый код JavaScript для отображения определенного контента на веб-сайте.
Идея, упомянутая в этой статье, конечно, не нова, но в контексте WordPress она открывает много возможностей. Преимущества техники, упомянутые здесь по сравнению с другими является то, что она позволит вам поделиться практически любой контент, даже содержание других плагинов на вашем блоге, с другими веб-сайтами.
Наша цель в этой статье заключается в создании виджета код, который пользователь может вставить на своем веб-сайте для отображения списка последних сообщений с родительского веб-сайта. Конечно, это также может быть легко достигнуто с помощью RSS, но это всего лишь пример, чтобы показать технику. В действительности, вы бы использовать его для более интересных целей, как обмен популярных изображений продукта, если вы работаете WordPress электронной коммерции сайте.
Код виджета
Встраиваемый код будет выглядеть примерно следующим образом. Это код, который пользователь вставит в свою веб-страницу, который позволит ему отображать содержимое с родительского веб-сайта. Ключевым элементом этого виджета является wp-widget.js файл, который вызывает удаленный сайт WordPress, получает содержание и встраивает его в качестве iframe на странице вызова.
<script type="text/javascript">
var widget_embed = 'posts';
</script>
<script src="http://www.example.com/widget/wp-widget.js"
type="text/javascript">
</script>
<div id="embed-widget-container"></div>Добавление этого блока кода на любую страницу веб-сайта будет отображать список последних сообщений из example.com . Содержание может быть что угодно, кроме сообщений — изображения, комментарии, теги, данные из других плагинов — все, что вы, как владелец сайта WordPress хотели бы поделиться с другими людьми. В этом примере я ограничил содержание простого списка постов, так как это общий знаменатель на всех веб-сайтах WordPress и будет легко начать с. Конечно, вам нужно будет добавить дополнительный код, чтобы поделиться другим содержанием, но базовый скелет плагина останется прежним.
Создание плагина
Кулак шаг в создании встраиваемого виджета заключается в разработке небольшой WordPress плагин, который будет перехватывать виджет звонки с другого веб-сайта и вернуть необходимые данные. Вы можете думать, что это будет завислаая работа, но ничего не может быть проще. Всего несколько строк кода и наш плагин готов. Полный код плагина показан ниже. Я объясню, как это работает, как мы будем продолжать.
Чтобы получить содержимое от плагина, нам нужно будет передать параметр запроса того, какой контент мы хотели бы с удаленного сервера в em_embed переменной. Этот параметр запроса будет перехвачен плагином и соответствующим содержимого возвращается. Мы также будем передавать вдоль неявно домен URL страницы вызова, так что мы можем позже использовать его для целей аналитики или для ограничения веб-сайтов, которые могут вставлять наш виджет.
Например, чтобы получить список последних сообщений, мы должны отправить GET запрос на основной веб-сайт WordPress, как показано ниже. Конечно, этот запрос будет создан нашим виджетом wp-widget.js JavaScript, .
http://www.example.com/?em_embed=postsПолный код для плагина приведен ниже.
<?php
/**
* Plugin Name: WordPress Widget Embed
* Description: Allow people to embed WordPress content in an iframe on other websites
* Version: 1.0
* Author: Sameer Borate
* Author URI: http://www.codediesel.com
*/
class WPWidgetEmbed
{
public function __construct()
{
add_action('template_redirect', array($this, 'catch_widget_query'));
add_action('init', array($this, 'widget_add_vars'));
}
/**
* Adds our widget query variable to WordPress $vars
*/
public function widget_add_vars()
{
global $wp;
$wp->add_query_var('em_embed');
$wp->add_query_var('em_domain');
}
private function export_posts()
{
$outstring = '<html>';
$outstring .= '<head><style>';
$outstring .= 'ul {
padding:0;
margin:0;
}
li {
list-style-type:none;
}';
$outstring .= '</style></head><body>';
/* Here we get recent posts for the blog */
$args = array(
'numberposts' => 6,
'offset' => 0,
'category' => 0,
'orderby' => 'post_date',
'order' => 'DESC',
'post_type' => 'post',
'post_status' => 'publish',
'suppress_filters' => true
);
$recent_posts = wp_get_recent_posts($args);
$outstring .= '<div class="widget-posts"><ul>';
foreach($recent_posts as $recent)
{
$outstring .= '<li><a target="_blank" href="' . get_permalink($recent["ID"]) . '">' . $recent["post_title"]. '</a></li>';
}
$outstring .= '</ul></div>';
$outstring .= '</body></html>';
return $outstring;
}
/**
* Catches our query variable. If it’s there, we’ll stop the
* rest of WordPress from loading and do our thing, whatever
* that may be.
*/
public function catch_widget_query()
{
/* If no 'embed' parameter found, return */
if(!get_query_var('em_embed')) return;
/* 'embed' variable is set, export any content you like */
if(get_query_var('em_embed') == 'posts')
{
$data_to_embed = $this->export_posts();
echo $data_to_embed;
}
exit();
}
}
$widget = new WPWidgetEmbed();
?>
Чтобы успешно перехватить звонки с другого веб-сайта, мы должны сначала добавить em_embed и em_domain параметры нашей переменной WordPress. query_var Это будет использоваться позже, чтобы увидеть, какие данные должны быть отправлены на удаленный веб-сайт. Это делается по следующей функции.
public function widget_add_vars()
{
global $wp;
$wp->add_query_var('em_embed');
$wp->add_query_var('em_domain');
}Далее нам нужно будет поймать переменную запроса на template_redirect крючке и обработать любые данные, если em_embed переменная установлена в глобальной переменной.
public function catch_widget_query()
{
/* If no 'embed' parameter found, return */
if(!get_query_var('em_embed')) return;
/* 'embed' variable is set, export any content you like */
if(get_query_var('em_embed') == 'posts')
{
$data_to_embed = $this->export_posts();
echo $data_to_embed;
}
exit();
}В нашем примере мы будем экспортировать список последних названий постов, так что наша export_posts функция будет выглядеть ниже.
private function export_posts()
{
$outstring = '<html>';
$outstring .= '<head><style>';
$outstring .= 'ul {
padding-left:10px;
margin:0;
}
li > a {
text-decoration: none;
font-family: Arial, Helvetica, Sans-serif;
font-size:12px;
}
li {
border-bottom: 1px solid #c0c0c0;
padding: 3px 0 3px 0;
}
.widget-posts {
width: 250px;
border: 1px solid #c0c0c0;
padding: 12px;
margin-left: 3px;
}';
$outstring .= '</style></head><body>';
/* Here we get recent posts for the blog */
$args = array(
'numberposts' => 6,
'offset' => 0,
'category' => 0,
'orderby' => 'post_date',
'order' => 'DESC',
'post_type' => 'post',
'post_status' => 'publish',
'suppress_filters' => true
);
$recent_posts = wp_get_recent_posts($args);
$outstring .= '<div id="widget-posts"><ul>';
foreach($recent_posts as $recent)
{
$outstring .= '<li><a target="_blank" href="' . get_permalink($recent["ID"]) . '">' . $recent["post_title"]. '</a></li>';
}
$outstring .= '</ul></div>';
$outstring .= '</body></html>';
return $outstring;
}Это все, что есть для плагина. Если вам нужно экспортировать какие-либо другие данные, вам нужно будет заменить код для получения сообщений с кодом для получения данных, которые вам нравятся.
Написание кода встраиваемого виджета
Теперь мы завершили только часть для плагина WordPress. Мы все еще должны написать javaScript вставлять код, который будет удаленно получить доступ к нашему веб-сайту и вставить соответствующее содержимое в страницу вызова. Самый простой способ отображения содержимого с другого веб-сайта на веб-страницу — это использовать iframe. Код, необходимый для встраиваемого содержимого на веб-сайт, показан ниже.
<script type="text/javascript">
var widget_embed = 'posts';
</script>
<script src="http://www.example.com/widget/wp-widget.js"
type="text/javascript">
</script>
<div id="embed-widget-container"></div>Если вы собираетесь использовать виджет для возвращения только одного типа данных, вы можете покончить с widget_embed переменной. Таким образом, вы будете иметь что-то вроде следующего.
<script src="http://www.example.com/widget/wp-widget.js"
type="text/javascript">
</script>
<div id="embed-widget-container"></div>wp-widget.jsявляется JavaScript, который делает всю работу вызова удаленного сайта WordPress и добавления содержимого в iframe. Вы должны разместить wp-widget.js файл в субдиректоре на вашем сайте WordPress; точное имя и местоположение не имеет значения.
Полный код для wp-widget.js приведен ниже и является понятным.
/**
* wp-widget.js
*
* Inserts an iframe into the DOM and calls the remote embed plugin
* via a get parameter:
* e.g http://www.example.com/?embed=posts
* This is intercepted by the remote 'WordPress Widget Embed' plugin
*
*/
(function() {
// Localize jQuery variable
var jQuery;
/* Load jQuery if not present */
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.7.2')
{
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src",
"http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js");
if (script_tag.readyState)
{
script_tag.onreadystatechange = function ()
{ // For old versions of IE
if (this.readyState == 'complete' || this.readyState == 'loaded')
{
scriptLoadHandler();
}
};
}
else
{
script_tag.onload = scriptLoadHandler;
}
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
}
else
{
// The jQuery version on the window is the one we want to use
jQuery = window.jQuery;
main();
}
/* Called once jQuery has loaded */
function scriptLoadHandler()
{
jQuery = window.jQuery.noConflict(true);
main();
}
/* Our Start function */
function main()
{
jQuery(document).ready(function($)
{
/* Get 'embed' parameter from the query */
var widget = window.widget_embed;
var domain = encodeURIComponent(window.document.location);
/* Set 'height' and 'width' according to the content type */
var iframeContent = '<iframe style="overflow-y: hidden;"
height="550" width="400" frameborder="0"
border="0" cellspacing="0" scrolling="no"
src="http://www.example.com/?em_embed=' + widget + '&em_domain=' + domain + '"></iframe>';
$("#embed-widget-container").html(iframeContent);
});
}
})();
Задача вставки iframe и содержание WordPress в DOM выполняется main() функцией. Размер iframe должен быть изменен в зависимости от ваших требований или создан динамически, позволяя пользователю передавать дополнительные параметры вместе с widget_embed переменной в основном коде виджета.
Добавление пользовательских CSS к содержимому
Вы также можете добавить пользовательский CSS к отображаемому содержимому через плагин. Пример CSS, чтобы пойти с вышеплагинприведенприведенприведенприведенприведены приведены ниже. При необходимости можно также указать URL-адрес листа стиля.
private function export_posts()
{
$outstring = '<html>';
$outstring .= '<head><style>';
$outstring .= 'ul {
padding-left:10px;
margin:0;
}
li > a {
text-decoration: none;
font-family: Arial, Helvetica, Sans-serif;
font-size:12px;
}
li {
border-bottom: 1px solid #c0c0c0;
padding: 3px 0 3px 0;
}
.widget-posts {
width: 250px;
border: 1px solid #c0c0c0;
padding: 12px;
margin-left: 3px;
}';
$outstring .= '</style></head><body>';
.
.Тип CSS, добавленный к содержимому, будет зависеть от того, какое содержимое отображается. С небольшим творческим кодированием, вы также можете позволить пользователю добавить определенные параметры отображения в виджет, с которым они могут контролировать стиль отображения встроенного виджета.
Ограничение отображения для определенных доменов
Вы можете разрешить только определенные домены, чтобы иметь возможность отображать содержимое с помощью виджета. Это может быть легко стало возможным, так как у нас уже есть URL-адрес вызываемого сайта в em_domain переменной. Все, что нам нужно сделать, это проверить домен и выборочно разрешить содержимое для отображения.
public function catch_widget_query()
{
/* If no 'embed' parameter found, return */
if(!get_query_var('em_embed')) return;
/* 'embed' variable is set, export any content you like */
if(get_query_var('em_embed') == 'posts')
{
$allowed_domains = array('site1.com',
'site2.com',
'site3.com');
$calling_host = parse_url(get_query_var('em_domain'));
/* Check if the calling domain is in the allowed domains list */
if(in_array($calling_host['host'], $allowed_domains))
{
$data_to_embed = $this->export_posts();
echo $data_to_embed;
}
else
{
echo "Domain not registered!";
}
}
exit();
}
Проблемы с производительностью
Разрешение другим веб-сайтам получать доступ к вашему контенту через виджеты означает дополнительную нагрузку на ваши серверы. Несколько сотен веб-сайтов, использующих виджет может легко замедлить ваш сервер, так что принять этот фактор во внимание при продвижении виджетов. Тем не менее, плагины, такие как WP Super Cache, могут использоваться для кэша widget данных и снижения нагрузки на сервер. Если вы не используете WP Super Cache или любой другой плагин кэша, вы можете попробовать использовать API WordPress Transients, чтобы сохранить результаты в базе данных.
WordPress Transients API предлагает простой и стандартизированный способ хранения кэшированных данных в базе данных временно, давая ему специальное имя и временные рамки, после чего он истекает и будет удален. catch_widget_query()Функция после добавления кода WP Transient API показана ниже.
public function catch_widget_query()
{
/* If no 'embed' parameter found, return */
if(!get_query_var('em_embed')) return;
/* 'embed' variable is set, export any content you like */
if(get_query_var('em_embed') == 'posts')
{
/* Here we are now using the 'WP Transient API'.
See if we have any saved data for the 'ewidget' key.
*/
$cached = get_transient('ewidget');
/* Oops!, the cache is empty */
if(empty($cached))
{
/* Get some fresh data */
$data_to_embed = $this->export_posts();
/* Save it using the 'WP Transient API' using the 'ewidget' key,
set it to expire after 12 hours.
*/
set_transient('ewidget', $data_to_embed, 60 * 60 * 12);
echo $data_to_embed;
}
/* Yes we found some, so we return that to the user */
else
{
echo $cached;
}
}
exit();
}В заключении
Обмен контентом на разных веб-сайтах — это хороший способ продать свои услуги и повысить узнаваемость бренда. С миллионами веб-сайтов WordPress вокруг, есть огромное количество контента, что там может быть выгодно разделяют среди пользователей. Не только текст, но и изображения, видео, реклама и т.д. Эта статья является простой реализации встраиваемого виджета. Вы можете настроить его различными способами, чтобы включить безопасность, код аналитики для отслеживания использования виджетов и других функциональных возможностей.
Дальнейшее чтение на SmashingMag:
Источник: smashingmagazine.com
