Cómo crear el complemento de feed de Twitter de WordPress

No hace falta decir, ¿qué tan popular es Twitter? Muchos sitios web muestran sus últimos tweets a los usuarios. Normalmente, estos tweets se colocan en la barra lateral o en un pie de página. En la publicación de hoy, crearemos un complemento de WordPress simple que muestra los últimos tweets donde lo desee. Vamos a crear un código corto que se puede colocar en cualquier lugar de su sitio.

Cómo crear un complemento

Crear un complemento para WordPress no es una ciencia espacial. Un hombre que conozca PHP y WordPress puede crear fácilmente el complemento. Para nuestra tarea, estoy creando un nombre de carpeta ‘twitter-api’ en el directorio ‘wp-content / plugins’.

A continuación, creo ‘twitter-api.php’ y lo coloco en la carpeta ‘plugins / twitter-api’. Nuestro archivo de complemento ‘twitter-api.php’ necesita algunos comentarios, así que lo agrego en el siguiente formato.

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

Después de agregar el comentario anterior, nuestro complemento aparecerá en la página de complementos desde donde podemos activarlo. Pero como no escribimos ningún código, simplemente se activa pero no hace nada. Agregaremos mucho código en nuestro complemento. Pero por ahora, solo creamos la estructura básica de nuestro complemento.

class Twitter_API {
    public function __construct() {
 
    }
}

Para evitar el acceso directo a los archivos PHP de nuestro complemento, debemos agregar la siguiente línea después del comentario de nuestro complemento.

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

Instalar la biblioteca PHP de Twitter

Twitter proporciona API REST para desarrolladores. Para nuestro complemento, estamos usando una biblioteca popular para Twitter que está construida en PHP. Aquí está la URL de git-hub para la biblioteca:https://github.com/abraham/twitteroauth

Para instalar esta biblioteca, abriré un símbolo del sistema en mi carpeta ‘plugins / twitter-api’ y ejecutaré el siguiente comando.

composer require abraham/twitteroauth

Después de instalar la biblioteca, colocaré las siguientes líneas en nuestro archivo ‘twitter-api.php’.

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

Ahora es el momento de registrar nuestra aplicación de Twitter. Para crear una aplicación, vaya a Aplicaciones de Twitter y siga los pasos a continuación.

• Haga clic en el botón ‘Crear nueva aplicación’.
• Complete los campos Nombre, Descripción, Sitio web.
• Acepta el acuerdo y haz clic en el botón ‘Crea tu aplicación de Twitter’.
• En la página siguiente, haga clic en la pestaña ‘Claves y tokens de acceso’. En esta pestaña encontrará su clave de consumidor y su secreto de consumidor. Copie estos detalles y guárdelos en un lugar seguro.
• En la misma pestaña, verá la sección ‘Su token de acceso’. Haga clic en el botón ‘Crear token de acceso’.
• En este paso, copie su token de acceso y su secreto de token de acceso. Mantenga estos detalles a salvo.

Hemos creado nuestra aplicación de Twitter y también estamos listos con nuestras claves API. Para usar estos detalles en nuestro complemento, primero debemos almacenarlos. Para ello, estamos creando una página de opciones para nuestro complemento. Así que agrego el siguiente código en nuestro archivo.

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

El código anterior agregará nuestro menú llamado ‘API de Twitter’ en Configuración en un tablero. En esta etapa, necesitamos crear el directorio ‘inc’ y colocar el archivo ‘ta-setting.php’ en él.

En el archivo ‘ta-setting.php’ le daremos la opción de almacenar los detalles de nuestra API de Twitter. Estoy agregando el siguiente código en este archivo. Estamos obteniendo el valor (que almacenamos en el siguiente paso) para cada campo de la base de datos.

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

En esta página, ingresamos los detalles de la API que necesitamos guardar en la base de datos. Así que utilicé la acción ‘init’ y agregué enviar lógica en la función de devolución de llamada.

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

En esta etapa, hemos completado la configuración de back-end requerida para nuestro complemento. Ahora, vamos a la interfaz donde necesitamos mostrar los últimos tweets. Estamos creando shortcode para que podamos mostrar tweets donde queramos simplemente colocando nuestro shortcode. En el constructor, colocaré debajo de la línea de código.

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

También estamos obteniendo detalles de la API en el constructor. Deberíamos declarar variables de clase como se muestra a continuación.

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

A continuación, debemos definir nuestra función de devolución de llamada de código abreviado.

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

Estamos agregando un poco de GUI para nuestra lista de tweets. Así que agrego el archivo CSS de la siguiente manera.

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

En mi archivo CSS, agrego las siguientes propiedades para la clase ‘tweet-wrap’. Si lo desea, puede agregar más CSS según sus necesidades.

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

Eso es todo, hemos terminado con nuestro complemento que muestra los últimos tweets. Puede descargar un zip de un complemento haciendo clic en el enlace ‘Obtener código de complemento’ a continuación.

Obtener el código del complemento