So erstellen Sie ein WordPress-Twitter-Feed-Plugin

Last updated 18. Oktober 2021

Inhalt

Unnötig zu sagen, wie beliebt Twitter ist? Viele Websites zeigen ihre neuesten Tweets für Benutzer. Normalerweise werden diese Tweets entweder in der Sidebar oder in einer Fußzeile platziert. Im heutigen Beitrag erstellen wir ein einfaches WordPress-Plugin, das die neuesten Tweets anzeigt, wo immer Sie möchten. Wir werden einen Shortcode erstellen, der überall auf Ihrer Website platziert werden kann.

So erstellen Sie ein Plugin

Ein Plugin für WordPress zu erstellen ist kein Hexenwerk. Ein Mann, der PHP und WordPress kennt, kann das Plugin leicht erstellen. Für unsere Aufgabe erstelle ich einen Ordnernamen ‘twitter-api’ im Verzeichnis ‘wp-content/plugins’.

Als nächstes erstelle ich ‘twitter-api.php’ und lege sie im Ordner ‘plugins/twitter-api’ ab. Unsere Plugin-Datei ‘twitter-api.php’ benötigt einige Kommentare, daher füge ich sie im folgenden Format hinzu.

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

Nachdem Sie den obigen Kommentar hinzugefügt haben, wird unser Plugin auf der Plugin-Seite angezeigt, von der aus wir es aktivieren können. Aber da wir keinen Code geschrieben haben, wird er nur aktiviert, macht aber nichts. Wir werden unserem Plugin viel Code hinzufügen. Aber im Moment erstellen wir nur die Grundstruktur unseres Plugins.

class Twitter_API {
    public function __construct() {
 
    }
}

Um direkten Zugriff auf die PHP-Dateien unseres Plugins zu vermeiden, sollten wir die folgende Zeile nach unserem Plugin-Kommentar hinzufügen.

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

Twitter PHP-Bibliothek installieren

Twitter stellt REST-APIs für Entwickler bereit. Für unser Plugin verwenden wir eine beliebte Bibliothek für Twitter, die in PHP gebaut ist. Hier ist die Git-Hub-URL für die Bibliothek –https://github.com/abraham/twitteroauth

Um diese Bibliothek zu installieren, öffne ich eine Eingabeaufforderung in meinem Ordner ‘plugins/twitter-api’ und führe den folgenden Befehl aus.

composer require abraham/twitteroauth

Nach der Installation der Bibliothek werde ich die folgenden Zeilen in unserer Datei ‘twitter-api.php’ platzieren.

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

Jetzt ist es an der Zeit, unsere Twitter-Anwendung zu registrieren. Um eine Anwendung zu erstellen, gehen Sie zu Twitter Apps und befolgen Sie die folgenden Schritte.

Klicken Sie auf die Schaltfläche „Neue App erstellen”.
Füllen Sie die Felder Name, Beschreibung, Website aus.
Akzeptieren Sie die Zustimmung und klicken Sie auf die Schaltfläche ‘Ihre Twitter-Anwendung erstellen’.
Klicken Sie auf der nächsten Seite auf den Reiter ‘Schlüssel und Zugriffstoken’. Unter dieser Registerkarte finden Sie Ihren Verbraucherschlüssel und Ihr Verbrauchergeheimnis. Kopieren Sie diese Angaben und bewahren Sie sie an einem sicheren Ort auf.
Unter derselben Registerkarte sehen Sie den Abschnitt ‘Ihr Zugriffstoken’. Klicken Sie auf die Schaltfläche ‘Zugriffstoken erstellen’.
Kopieren Sie in diesem Schritt Ihr Access Token und Access Token Secret. Bewahren Sie diese Angaben sicher auf.

Wir haben unsere Twitter-Anwendung erstellt und sind auch mit unseren API-Schlüsseln fertig. Um diese Angaben in unserem Plugin verwenden zu können, müssen wir sie zunächst speichern. Dazu erstellen wir eine Optionsseite für unser Plugin. Also füge ich den folgenden Code in unsere Datei ein.

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

Der obige Code fügt unser Menü namens "Twitter API" unter Einstellungen in einem Dashboard hinzu. In diesem Stadium müssen wir das Verzeichnis ‘inc’ erstellen und die Datei ‘ta-setting.php’ darin ablegen.

In der Datei ‘ta-setting.php’ geben wir die Möglichkeit, unsere Twitter-API-Details zu speichern. Ich füge folgenden Code in diese Datei ein. Wir holen den Wert (den wir im nächsten Schritt speichern) für jedes Feld aus der Datenbank.

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

Auf dieser Seite geben wir die API-Details ein, die wir in der Datenbank speichern müssen. Also habe ich die Aktion ‘init’ verwendet und Submit-Logik in der Callback-Funktion hinzugefügt.

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

Zu diesem Zeitpunkt haben wir die für unser Plugin erforderlichen Back-End-Einstellungen abgeschlossen. Jetzt gehen wir zum Frontend, wo wir die neuesten Tweets anzeigen müssen. Wir erstellen Shortcode, damit wir Tweets anzeigen können, wo immer wir wollen, indem wir einfach unseren Shortcode platzieren. Im Konstruktor platziere ich unter der Codezeile.

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

Wir holen auch API-Details im Konstruktor. Wir sollten Klassenvariablen wie unten deklarieren.

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

Als nächstes sollten wir unsere Shortcode-Callback-Funktion definieren.

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

Wir fügen unserer Tweet-Liste ein wenig GUI hinzu. Also füge ich die CSS-Datei wie folgt hinzu.

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

In meiner CSS-Datei füge ich unten Eigenschaften für die Klasse ‘tweet-wrap’ hinzu. Wenn Sie möchten, können Sie je nach Bedarf mehr CSS hinzufügen.

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

Das ist alles, wir sind mit unserem Plugin vervollständigt, das die neuesten Tweets anzeigt. Sie können eine ZIP-Datei eines Plugins herunterladen, indem Sie unten auf den Link ‘Plugin-Code abrufen’ klicken.

Plugin-Code abrufen

Aufnahmequelle: artisansweb.net