Comment créer un plugin de flux Twitter WordPress

Inutile de dire à quel point Twitter est-il populaire? De nombreux sites Web montrent leurs derniers tweets aux utilisateurs. Normalement, ces tweets sont placés dans la barre latérale ou dans un pied de page. Dans le post d’aujourd’hui, nous allons créer un plugin WordPress simple qui affiche les derniers tweets où vous le souhaitez. Nous allons créer un shortcode qui pourra être placé n’importe où sur votre site.

Comment créer un plugin

Créer un plugin pour WordPress n’est pas sorcier. Un homme qui connaît PHP et WordPress peut facilement créer le plugin. Pour notre tâche, je crée un nom de dossier ‘twitter-api’ sous le répertoire ‘wp-content/plugins’.

Ensuite, je crée ‘twitter-api.php’ et le place dans le dossier ‘plugins/twitter-api’. Notre fichier de plugin ‘twitter-api.php’ a besoin de quelques commentaires, je l’ajoute donc au format ci-dessous.

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

Après avoir ajouté le commentaire ci-dessus, notre plugin apparaîtra sur la page des plugins d’où nous pourrons l’activer. Mais comme nous n’avons écrit aucun code, il est simplement activé mais ne fait rien. Nous allons ajouter beaucoup de code dans notre plugin. Mais pour l’instant, nous créons simplement la structure de base de notre plugin.

class Twitter_API {
    public function __construct() {
 
    }
}

Pour éviter un accès direct aux fichiers PHP de notre plugin, nous devons ajouter la ligne ci-dessous après le commentaire de nos plugins.

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

Installer la bibliothèque PHP Twitter

Twitter fournit des API REST pour les développeurs. Pour notre plugin, nous utilisons une bibliothèque populaire pour Twitter qui est construite en PHP. Voici l’URL git-hub de la bibliothèque –https://github.com/abraham/twitteroauth

Pour installer cette bibliothèque, je vais ouvrir une invite de commande dans mon dossier "plugins/twitter-api" et exécuter la commande ci-dessous.

composer require abraham/twitteroauth

Après avoir installé la bibliothèque, je placerai les lignes ci-dessous dans notre fichier ‘twitter-api.php’.

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

Maintenant, il est temps d’enregistrer notre application Twitter. Pour créer une application, accédez aux applications Twitter et suivez les étapes ci-dessous.

• Cliquez sur le bouton « Créer une nouvelle application ».
• Remplissez les champs Nom, Description, Site Web.
• Acceptez l’accord et cliquez sur le bouton « Créez votre application Twitter ».
• Sur la page suivante, cliquez sur l’onglet ‘Clés et jetons d’accès’. Sous cet onglet, vous trouverez votre clé client et votre secret client. Copiez ces informations et conservez-les en lieu sûr.
• Sous le même onglet, vous verrez la section ‘Votre jeton d’accès’. Cliquez sur le bouton ‘Créer un jeton d’accès’.
• À cette étape, copiez votre jeton d’accès et votre secret de jeton d’accès. Gardez ces détails en sécurité.

Nous avons créé notre application Twitter et nous sommes également prêts avec nos clés API. Pour utiliser ces détails dans notre plugin, nous devons d’abord les stocker. Pour cela, nous créons une page d’options pour notre plugin. J’ajoute donc ci-dessous le code dans notre fichier.

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

Le code ci-dessus ajoutera notre menu appelé « API Twitter » sous Paramètres sur un tableau de bord. A ce stade, nous devons créer le répertoire ‘inc’ et y placer le fichier ‘ta-setting.php’.

Dans le fichier ‘ta-setting.php’, nous vous donnerons la possibilité de stocker les détails de notre API Twitter. J’ajoute le code ci-dessous dans ce fichier. Nous récupérons la valeur (que nous stockons à l’étape suivante) pour chaque champ de la base de données.

<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>

Sur cette page, nous entrons les détails de l’API que nous devons enregistrer dans la base de données. J’ai donc utilisé l’action ‘init’ et ajouté une logique de soumission dans la fonction de rappel.

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

À ce stade, nous avons terminé avec les paramètres back-end requis pour notre plugin. Maintenant, nous allons au front end où nous devons afficher les derniers tweets. Nous créons un shortcode afin que nous puissions afficher des tweets où nous voulons simplement en plaçant notre shortcode. Dans le constructeur, je placerai en dessous la ligne de code.

//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;

Nous récupérons également les détails de l’API dans le constructeur. Nous devrions déclarer des variables de classe comme ci-dessous.

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

Ensuite, nous devons définir notre fonction de rappel de shortcode.

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

Nous ajoutons un peu d’interface graphique pour notre liste de tweets. J’ajoute donc un fichier CSS de la manière suivante.

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" );
}

Dans mon fichier CSS, j’ajoute ci-dessous les propriétés de la classe ‘tweet-wrap’. Si vous le souhaitez, vous pouvez ajouter plus de CSS selon vos besoins.

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

C’est tout, nous sommes complétés par notre plugin qui affiche les derniers tweets. Vous pouvez télécharger un zip d’un plugin en cliquant sur le lien "Obtenir le code du plugin" ci-dessous.

Obtenir le code du plugin