Hur man skapar WordPress Twitter Feed Plugin

Naturligtvis, hur mycket populärt Twitter är? Många webbplatser visar sina senaste tweets för användare. Normalt tweets placeras antingen i sidofältet eller i en sidfot. I dagens inlägg skapar vi ett enkelt WordPress-plugin som visar senaste tweets vart du vill. Vi ska skapa en kortkod som kan placeras var som helst på din webbplats.

Hur man skapar ett plugin

Att skapa ett plugin för WordPress är inte en raketvetenskap. En man som känner till PHP och WordPress kan enkelt skapa plugin. För vår uppgift skapar jag ett mappnamn ‘twitter-api’ under katalogen ‘wp-content / plugins’.

Därefter skapar jag ‘twitter-api.php’ och placerar den i mappen ‘plugins / twitter-api’. Vår plugin-fil ‘twitter-api.php’ behöver några kommentarer, så jag lägger till den i nedanstående format.

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

Efter att ha lagt till ovanstående kommentar kommer vårt plugin att visas på pluginsidan där vi kan aktivera det. Men eftersom vi inte skrev någon kod blir den bara aktiverad men gör ingenting. Vi kommer att lägga till mycket kod i vårt plugin. Men för närvarande skapar vi bara den grundläggande strukturen för vårt plugin.

class Twitter_API {
    public function __construct() {
 
    }
}

För att undvika direkt åtkomst till våra plugins PHP-filer bör vi lägga till nedanför raden efter vår plugin-kommentar.

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

Installera Twitter PHP-biblioteket

Twitter tillhandahåller REST API: er för utvecklare. För vårt plugin använder vi ett populärt Twitter-bibliotek som är inbyggt i PHP. Här är git-hub-URL för bibliotek –https://github.com/abraham/twitteroauth

För att installera det här biblioteket öppnar jag en kommandotolk i min "plugins / twitter-api" -mapp och kör kommandot nedan.

composer require abraham/twitteroauth

Efter att ha installerat biblioteket kommer jag att placera nedanför raderna i vår ‘twitter-api.php’ -fil.

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

Nu är det dags att registrera vår Twitter-ansökan. För att skapa applikation, gå till Twitter Apps och följ stegen nedan.

• Klicka på knappen ‘Skapa ny app’.
• Fyll i namn, beskrivning, webbplatsfält.
• Acceptera avtalet och klicka på knappen "Skapa din Twitter-applikation".
• Klicka på fliken "Nycklar och åtkomsttoken" på nästa sida. Under den här fliken hittar du din konsumentnyckel och konsumenthemlighet. Kopiera dessa uppgifter och förvara dem på ett säkert ställe.
• Under samma flik ser du avsnittet "Din åtkomsttoken". Klicka på knappen ‘Skapa åtkomsttoken’.
• I det här steget kopierar du åtkomsttoken och åtkomsttokenhemlighet. Håll dessa uppgifter säkra.

Vi har skapat vår Twitter-applikation och vi är också redo med våra API-nycklar. För att använda dessa detaljer i vårt plugin måste vi först lagra det. För detta skapar vi en alternativsida för vårt plugin. Så jag lägger till koden nedan i vår fil.

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

Ovanstående kod kommer att lägga till vår meny som heter ‘Twitter API’ under Inställningar på en instrumentpanel. I det här skedet måste vi skapa ‘inc’ katalog och placera ‘ta-setting.php’ fil i den.

I filen ‘ta-setting.php’ ger vi möjlighet att lagra våra Twitter API-detaljer. Jag lägger till nedanstående kod i den här filen. Vi hämtar värde (som vi lagrar i nästa steg) för varje fält från databasen.

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

På den här sidan anger vi API-uppgifterna som vi behöver spara i databasen. Så jag använde ‘init’ -åtgärd och lade till skicka logik i återuppringningsfunktionen.

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

I detta skede har vi slutfört med backend-inställningar som krävs för vårt plugin. Nu går vi till fronten där vi behöver visa senaste tweets. Vi skapar kortkod så att vi kan visa tweets vart vi vill bara genom att placera kortkoden. I konstruktören kommer jag att placera under kodraden.

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

Vi hämtar också API-detaljer i konstruktören. Vi bör förklara klassvariabler som nedan.

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

Därefter ska vi definiera vår kortkodsåteruppringningsfunktion.

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

Vi lägger till lite GUI för vår tweet-lista. Så jag lägger till CSS-fil genom att följa sättet.

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

I min CSS-fil lägger jag till egenskaper nedan för klass ‘tweet-wrap’. Om du vill kan du lägga till mer CSS enligt dina behov.

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

Det är allt, vi kompletteras med vårt plugin som visar senaste tweets. Du kan ladda ner ett zip-tillägg från ett plugin genom att klicka på länken "Get Plugin Code" nedan.

Hämta plugin-kod