Як створити WordPress Twitter Feed Plugin

Останнє оновлення Жов 17, 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!' );

Встановіть Twitter PHP Library

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".
На наступній сторінці натисніть на вкладку "Ключі та маркери доступу". На цій вкладці ви знайдете свій ключ споживача та секрет споживача. Скопіюйте ці деталі та збережіть їх у безпечному місці.
На тій же вкладці ви побачите розділ "Ваш маркер доступу". Натисніть кнопку "Створити маркер доступу".
На цьому кроці скопіюйте свій маркер доступу та секретний маркер доступу. Бережіть ці деталі.

Ми створили наш додаток 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’ ми дамо можливість зберігати наші деталі API Twitter. Я додаю нижче код у цей файл. Ми отримуємо значення (яке ми зберігаємо на наступному кроці) для кожного поля з бази даних.

<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