Как создать плагин Twitter Feed для WordPress

Последнее обновление Июл 12, 2021

Содержание

Излишне говорить, насколько популярен Twitter? Многие веб-сайты показывают пользователям свои последние твиты. Обычно эти твиты размещаются либо на боковой панели, либо в нижнем колонтитуле. В сегодняшней публикации мы создадим простой плагин WordPress, который будет отображать последние твиты в любом месте. Мы собираемся создать шорткод, который можно разместить где угодно на вашем сайте.

Как создать плагин

Создание плагина для WordPress – это не ракетостроение. Человек, знающий PHP и WordPress, легко сможет создать плагин. Для нашей задачи я создаю папку с именем twitter-api в каталоге wp-content / plugins.

Затем я создаю twitter-api.php и помещаю его в папку plugins / twitter-api. Наш файл плагина twitter-api.php нуждается в комментариях, поэтому я добавляю его в формате ниже.

/*
Plugin Name: Twitter API
Plugin URI: https://artisansweb.net
Description: This plugin will fetch your latest tweets and display it using shortcode [tweets]
Version: 1.0
Author: Sajid
Author URI: https://artisansweb.net
License: GPLv2 or later
Text Domain: artisansweb
*/

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

class Twitter_API {
    public function __construct() {
 
    }
}

Чтобы избежать прямого доступа к файлам PHP нашего плагина, мы должны добавить строку ниже после комментария нашего плагина.

defined( 'ABSPATH') or die( 'No script kiddies please!' );

Установить библиотеку PHP Twitter

Twitter предоставляет разработчикам REST API. Для нашего плагина мы используем популярную библиотеку для Twitter, которая построена на PHP. Вот URL-адрес библиотеки git-hub –https://github.com/abraham/twitteroauth

Чтобы установить эту библиотеку, я открою командную строку в папке plugins / twitter-api и выполню следующую команду.

composer require abraham/twitteroauth

После установки библиотеки я размещу следующие строки в нашем файле ‘twitter-api.php’.

require('vendor/autoload.php');
use AbrahamTwitterOAuthTwitterOAuth;

Пришло время зарегистрировать наше приложение Twitter. Чтобы создать приложение, перейдите в Twitter Apps и выполните следующие действия.

Нажмите кнопку «Создать новое приложение».
Заполните поля Имя, Описание, Веб-сайт.
Примите соглашение и нажмите кнопку «Создать приложение Twitter».
На следующей странице щелкните вкладку «Ключи и токены доступа». На этой вкладке вы найдете свой Consumer Key и Consumer Secret. Скопируйте эти данные и храните в надежном месте.
На этой же вкладке вы увидите раздел «Ваш токен доступа». Нажмите кнопку «Создать токен доступа».
На этом этапе скопируйте свой токен доступа и секрет токена доступа. Храните эти детали в безопасности.

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

function __construct() {
    add_action( 'admin_menu', array($this, 'ta_plugin_menu') );
}
 
function ta_plugin_menu() {
    add_options_page('Twitter API', 'Twitter API', 'manage_options', 'twitter_api', array($this, 'ta_settings_page'));
}
 
function ta_settings_page() {
    require_once('inc/ta-settings.php');    
}

Приведенный выше код добавит наше меню под названием «Twitter API» в разделе «Настройки» на панели управления. На этом этапе нам нужно создать каталог inc и поместить в него файл ta-setting.php.

В файле ‘ta-setting.php’ мы дадим возможность сохранить данные нашего Twitter API. Я добавляю в этот файл код ниже. Мы получаем значение (которое мы сохраняем на следующем шаге) для каждого поля из базы данных.

<h1><?php _e('Twitter Information', 'artisansweb'); ?></h1>
<form method="post">
    <table class="form-table">
        <tbody>
            <tr>
                <th scope="row"><label for="blogname"><?php _e('Consumer Key', 'artisansweb'); ?></label></th>
                <td><input name="ta_consumer_key" id="ta_consumer_key" value="<?php if(get_option('ta_consumer_key')) echo get_option('ta_consumer_key'); ?>" class="regular-text" type="text"></td>
            </tr>
            <tr>
                <th scope="row"><label for="blogname"><?php _e('Consumer Secret', 'artisansweb'); ?></label></th>
                <td><input name="ta_consumer_secret" id="ta_consumer_secret" value="<?php if(get_option('ta_consumer_secret')) echo get_option('ta_consumer_secret'); ?>" class="regular-text" type="text"></td>
            </tr>
            <tr>
                <th scope="row"><label for="blogname"><?php _e('Access Token', 'artisansweb'); ?></label></th>
                <td><input name="ta_access_token" id="ta_access_token" value="<?php if(get_option('ta_access_token')) echo get_option('ta_access_token'); ?>" class="regular-text" type="text"></td>
            </tr>
            <tr>
                <th scope="row"><label for="blogname"><?php _e('Access Token Secret', 'artisansweb'); ?></label></th>
                <td><input name="ta_access_token_secret" id="ta_access_token_secret" value="<?php if(get_option('ta_access_token_secret')) echo get_option('ta_access_token_secret'); ?>" class="regular-text" type="text"></td>
            </tr>
            <tr>
                <th scope="row"><label for="blogname"><?php _e('Number of Tweets', 'artisansweb'); ?></label></th>
                <td><input name="ta_no_of_tweets" id="ta_no_of_tweets" value="<?php if(get_option('ta_no_of_tweets')) echo get_option('ta_no_of_tweets'); ?>" class="regular-text" type="number"></td>
            </tr>
        </tbody>
    </table>
    <p class="submit">
        <input name="ta-submit" id="submit" class="button button-primary" value="<?php _e('Save Changes', 'artisansweb'); ?>" type="submit">
    </p>
</form>

На этой странице мы вводим детали API, которые нам нужно сохранить в базе данных. Поэтому я использовал действие init и добавил логику отправки в функцию обратного вызова.

add_action('init', array($this, 'ta_submit_callback')); //add this code in constructor
 
function submit_callback() {
    if (isset($_POST['ta-submit'])) {
        update_option( 'ta_consumer_key', $_POST['ta_consumer_key'] );
        update_option( 'ta_consumer_secret', $_POST['ta_consumer_secret'] );
        update_option( 'ta_access_token', $_POST['ta_access_token'] );
        update_option( 'ta_access_token_secret', $_POST['ta_access_token_secret'] );
        update_option( 'ta_no_of_tweets', $_POST['ta_no_of_tweets'] );
    }
}

На этом этапе мы закончили с настройками серверной части, необходимыми для нашего плагина. Теперь мы переходим к интерфейсу, где нам нужно отображать последние твиты. Мы создаем шорткод, чтобы отображать твиты где угодно, просто разместив шорткод. В конструкторе я размещу под строкой кода.

//add this code in constructor
add_shortcode('tweets', array($this, 'ta_latest_tweets'));
 
if(get_option('ta_consumer_key')) {
    $this->consumer_key = get_option('ta_consumer_key');
}
if(get_option('ta_consumer_secret')) {
    $this->consumer_secret = get_option('ta_consumer_secret');
}
if(get_option('ta_access_token')) {
    $this->access_token = get_option('ta_access_token');
}
if(get_option('ta_access_token_secret')) {
    $this->access_token_secret = get_option('ta_access_token_secret');
}
$this->ta_no_of_tweets = get_option('ta_no_of_tweets')? get_option('ta_no_of_tweets'): 3;

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

protected $consumer_key = '', $consumer_secret = '', $access_token = '', $access_token_secret = '', $ta_no_of_tweets;

Затем мы должны определить нашу функцию обратного вызова шорткода.

function ta_latest_tweets() {
    $connection = new TwitterOAuth($this->consumer_key, $this->consumer_secret, $this->access_token, $this->access_token_secret);
 
    $arr_tweets = $connection->get("statuses/user_timeline", ["count" => ($this->ta_no_of_tweets), "exclude_replies" => true]);
 
    if ($arr_tweets && !empty($arr_tweets)) {
        ?>
        <ul class="tweet-wrap">
            <?php
            foreach ($arr_tweets as $tweet) {
                ?>
                <li>
                    <div>
                        <img src="<?php echo $tweet->user->profile_image_url; ?>">
                        <strong><?php echo $tweet->user->name ?></strong> @<span><?php echo $tweet->user->screen_name; ?></span>
                    </div>
                    <p><?php echo $tweet->text; ?></p>
                </li>
                <?php
            }
            ?>
        </ul>
        <?php
    }
}

Мы добавляем небольшой графический интерфейс для нашего списка твитов. Поэтому я добавляю файл CSS следующим образом.

add_action('wp_enqueue_scripts', array($this, 'ta_include_css')); //add it in constructor
 
function ta_include_css() {
    wp_register_style( "ta-custom-style", plugins_url('/twitter-api'). "/css/custom.css", array(), false, "all" );
    wp_enqueue_style( "ta-custom-style" );
}

В моем файле CSS я добавляю ниже свойства для класса tweet-wrap. Если вы хотите, вы можете добавить больше CSS в соответствии с вашими потребностями.

.tweet-wrap{
    width: 300px;
    list-style-type: none;
}

Вот и все, мы закончили с нашим плагином, который отображает последние твиты. Вы можете загрузить zip-архив плагина, щелкнув ссылку «Получить код плагина» ниже.

Получить код плагина

Источник записи: artisansweb.net