Давайте посмотрим, как мы можем создать очень простой плагин, который будет показывать последние посты из Twitter-аккаунта.

Конечно, вы сразу спросите — зачем тратить время на создание очередного плагина для Twitter, когда из Интернета можно скачать десятки других уже существующих? Тут вы полностью правы. Но цель этого урока в другом — я хочу продемонстрировать вам сам код, чтобы у вас было представление, как именно происходит соединение с Twitter, и как пишутся подобные плагины.

Шаг 1. Скачайте скрипты

Перед тем, как мы начнем писать наш плагин, нам понадобится некоторый JavaScript код:

Шаг 2. Создайте структуру файлов и скопируйте файлы

Создайте такую директорию: /wp-content/plugins/tweetfeed-light, и затем скопируйте эти файлы:

/css  
    style.css  
  
/img  
    buttons.png  
    interface.png  
    interface_dark.png  
    twitter_bird.png  
  
/js  
    jquery.tweetable.min.js  
    jquery-1.7.2.min.js

Шаг 3. Базовые данные плагина

Создайте файл tweetfeed-light.php (наш главный файл плагина) и добавьте туда представленный ниже код:

/*
Plugin Name: Tweetfeed Light
Plugin URI: http://wp.tutsplus.com
Description: Show latest Tweets in sidebar for a given Twitter user
Version: 1.0
Author: Adam Burucs
Author URI: http://wp.tutsplus.com
*/

Шаг 4. Класс плагина

Базовое объявление класса нашего плагина:

class AB_Tweetfeed_Light {
}

Шаг 5. Функция-конструктор

Хорошим решением будет поместить начальные настройки и требования в в эту функцию. В этом разделе мы установим следующее:

  • путь плагина
  • шорт-код
  • импортируемые скрипты
  • импортируемые стили
public function __construct() {
	// set plugin path
	$this->pluginUrl = WP_PLUGIN_URL . '/tweetfeed-light';

	// set shortcode
	add_shortcode('tweetfeed-light', array($this, 'shortcode'));

	// import scripts
	wp_enqueue_script('tweetable-script',   $this->pluginUrl . '/js/jquery.tweetable.min.js', array( 'jquery' ));

	// import style
	wp_enqueue_style('tweetable-style',     $this->pluginUrl . '/css/style.css');
}

Шаг 6. Получение твитов

Теперь получаем последние твиты от пользователя. Мы также можем установить переменную limit, которая будет контролировать количество твитов:

public function loadTweets($user, $limit) {

	// render tweets to div element
	echo '<div id="tweets"></div>';

	// render javascript code to do the magic
	echo
	'<script type="text/javascript">
	jQuery(function(){
	jQuery("#tweets").tweetable({
	username: "' . $user . '",
	limit: ' . $limit . ',
	replies: true,
	position: "append"});
	});
	</script>';

}

Шаг 7. Функция шорт-кода

Это вспомогательный скрипт для использования плагина с шорт-кодом:

// render tweets with shortcode
public function shortcode($data) {
	return $this->loadTweets($data['username']);
}

Шаг 8. Экземпляр класса

Создаем объект класса плагина:

// run plugin
$tweetfeed_light = new AB_Tweetfeed_Light();

Шаг 9. Готовый код

Вот как выглядит весь код, когда он закончен:

/*
Plugin Name: Tweetfeed Light
Plugin URI: http://wp.tutsplus.com
Description: Show latest Tweets in sidebar for a given Twitter user
Version: 1.0
Author: Adam Burucs
Author URI: http://wp.tutsplus.com
*/

class AB_Tweetfeed_light {
public function __construct() {
	// set plugin path
	$this->pluginUrl = WP_PLUGIN_URL . '/tweetfeed-light';

	// set shortcode
	add_shortcode('tweetfeed-light', array($this, 'shortcode'));

	// import scripts
	wp_enqueue_script('tweetable-script',   $this->pluginUrl . '/js/jquery.tweetable.min.js', array( 'jquery' ));

	// import style
	wp_enqueue_style('tweetable-style',     $this->pluginUrl . '/css/style.css');
}

public function loadTweets($user, $limit) {

	// render tweets to div element
	echo '<div id="tweets"></div>';

	// render javascript code to do the magic
	echo
	'<script type="text/javascript">
	jQuery(function(){
	jQuery("#tweets").tweetable({
	username: "' . $user . '",
	limit: ' . $limit . ',
	replies: true,
	position: "append"});
	});
	</script>';

}

// render tweets with shortcode
public function shortcode($data) {
	return $this->loadTweets($data['user'], $data['limit']);
}
}

// run plugin
$tweetfeed_light = new AB_Tweetfeed_Light();

Шаг 10. Использование шорт-кода

Чтобы использовать этот плагин, вы можете написать шорткод

[tweetfeed-light user="johnb" limit="10"]

в исходном коде страницы, которая вам нужна. Например:

...
<div class="menu">...</div>
[tweetfeed-light user="johnb" limit="10"]
<div class="footer">...</div>
...

Шаг 11. Общий вид

Вот как плагин выглядит в WordPress теме по умолчанию, вставленный в объект страницы:

Как видите, это простое, но хорошее решение для нашей мини Twitter задачи. Для дальнейшей игры с видом и цветами вам нужно обратить внимание на включенную таблицу стилей.

Источник: WP.tutsplus.com

Вам понравился материал?

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.