Создание простого плагина Twitter для WordPress

21 января 2018

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


Step 1 Сценарии загрузки

Прежде чем мы начнем писать наш плагин, нам нужен код JavaScript.

Get tweetable v1.6 здесь! nЗагрузите последний jquery здесь!


Step 2 Создайте структуру файла и скопируйте файлы

Создайте этот каталог: плагины wp-content 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

Step 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
*/

Step 4 Класс плагина

Основная декларация нашего класса плагина.

class AB_Tweetfeed_Light {
}

Step 5 Функция конструктора

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

plugin pathnshortcodenimporting scriptsnimporting styles

Код для этих задач:

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 Получение твитов

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

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>';
}

Step 7 Shortcode Functio

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

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

Step 8 Создание класса

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

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

Step 9 Final Code

Вот как выглядит код, когда он завершен.

/*
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 plugi
$tweetfeed_light = new AB_Tweetfeed_Light();

Step 10 Использование короткого кода

Чтобы использовать этот плагин, вы можете написать короткий код [tweetfeed-light user = "johnb" limit = "10"] в источник страницы, который вы хотите. Например:

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

Step 11 Look

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


Резюме

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