Jak stworzyć wtyczkę WordPress Twitter Feed?

Ostatnia aktualizacja paź 18, 2021

Zadowolony

Nie trzeba dodawać, jak popularny jest Twitter? Wiele stron internetowych pokazuje użytkownikom swoje najnowsze tweety. Zwykle te tweety są umieszczane na pasku bocznym lub w stopce. W dzisiejszym poście stworzymy prostą wtyczkę WordPress, która wyświetla najnowsze tweety w dowolnym miejscu. Stworzymy krótki kod, który można umieścić w dowolnym miejscu na Twojej stronie.

Jak stworzyć wtyczkę

Tworzenie wtyczki do WordPressa nie jest nauką rakietową. Człowiek, który zna PHP i WordPressa, bez problemu stworzy wtyczkę. Dla naszego zadania tworzę folder o nazwie „twitter-api" w katalogu „wp-content/plugins”.

Następnie tworzę ‘twitter-api.php’ i umieszczam go w folderze ‘plugins/twitter-api’. Nasz plik wtyczki ‘twitter-api.php’ wymaga komentarza, więc dodaję go w poniższym formacie.

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

Po dodaniu powyższego komentarza nasza wtyczka pojawi się na stronie wtyczek, z której możemy ją aktywować. Ale ponieważ nie napisaliśmy żadnego kodu, po prostu zostaje aktywowany, ale nic nie robi. Dodamy dużo kodu w naszej wtyczce. Ale na razie tworzymy tylko podstawową strukturę naszej wtyczki.

class Twitter_API {
    public function __construct() {
 
    }
}

Aby uniknąć bezpośredniego dostępu do plików PHP naszej wtyczki, powinniśmy dodać poniższy wiersz po komentarzu naszej wtyczki.

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

Zainstaluj bibliotekę PHP na Twitterze

Twitter zapewnia programistom interfejsy API REST. W naszej wtyczce używamy popularnej biblioteki dla Twittera, która jest zbudowana w PHP. Oto adres URL git-hub dla biblioteki –https://github.com/abraham/twitteroauth

Aby zainstalować tę bibliotekę, otworzę wiersz polecenia w moim folderze „plugins/twitter-api” i uruchomię poniższe polecenie.

composer require abraham/twitteroauth

Po zainstalowaniu biblioteki umieszczę poniżej wierszy w naszym pliku ‘twitter-api.php’.

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

Teraz nadszedł czas, aby zarejestrować naszą aplikację na Twitterze. Aby utworzyć aplikację, przejdź do Twitter Apps i wykonaj poniższe czynności.

Kliknij przycisk „Utwórz nową aplikację”.
Wypełnij pola Nazwa, Opis, Witryna.
Zaakceptuj umowę i kliknij przycisk „Utwórz swoją aplikację na Twitterze”.
Na następnej stronie kliknij zakładkę „Klucze i tokeny dostępu”. W tej zakładce znajdziesz swój klucz klienta i tajny klucz klienta. Skopiuj te dane i przechowuj je w bezpiecznym miejscu.
W tej samej zakładce zobaczysz sekcję „Twój Token dostępu”. Kliknij przycisk „Utwórz token dostępu”.
Na tym etapie skopiuj swój token dostępu i klucz tajny tokenu dostępu. Zachowaj te dane w bezpiecznym miejscu.

Stworzyliśmy naszą aplikację Twitter i jesteśmy gotowi z naszymi kluczami API. Aby wykorzystać te dane w naszej wtyczce, musimy je najpierw zapisać. W tym celu tworzymy stronę opcji dla naszej wtyczki. Dlatego dodaję poniższy kod do naszego pliku.

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

Powyższy kod doda nasze menu o nazwie „Twitter API” w Ustawieniach na pulpicie nawigacyjnym. Na tym etapie musimy stworzyć katalog ‘inc’ i umieścić w nim plik ‘ta-setting.php’.

W pliku ‘ta-setting.php’ udostępnimy opcję przechowywania danych naszego Twittera API. Dodaję poniższy kod w tym pliku. Pobieramy wartość (którą przechowujemy w następnym kroku) dla każdego pola z bazy danych.

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

Na tej stronie wpisujemy dane API, które musimy zapisać w bazie danych. Użyłem więc akcji ‘init’ i dodałem logikę submit w funkcji callback.

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

Na tym etapie ukończyliśmy ustawienia zaplecza wymagane dla naszej wtyczki. Teraz przechodzimy do frontendu, gdzie musimy wyświetlać najnowsze tweety. Tworzymy shortcode, abyśmy mogli wyświetlać tweety w dowolnym miejscu, po prostu umieszczając nasz shortcode. W konstruktorze umieszczę poniżej linii kodu.

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

Pobieramy również szczegóły api w konstruktorze. Powinniśmy zadeklarować zmienne klasowe jak poniżej.

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

Następnie powinniśmy zdefiniować naszą funkcję zwrotną 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
    }
}

Dodajemy trochę GUI do naszego wpisu na Twitterze. Więc dodaję plik CSS w następujący sposób.

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

W moim pliku CSS dodaję poniżej właściwości dla klasy „tweet-wrap”. Jeśli chcesz, możesz dodać więcej CSS zgodnie z potrzebami.

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

To wszystko, kończymy naszą wtyczką wyświetlającą najnowsze tweety. Możesz pobrać plik zip wtyczki, klikając poniższy link „Pobierz kod wtyczki”.

Pobierz kod wtyczki

Źródło nagrywania: artisansweb.net