Kuinka luoda WordPress Twitter -syötelaajennus

Tarpeetonta sanoa, kuinka suosittu Twitter on? Monet sivustot näyttävät uusimmat twiitit käyttäjille. Normaalisti tämä twiitti joko sijoitetaan sivupalkkiin tai alatunnisteeseen. Tämänpäiväisessä viestissä luomme yksinkertaisen WordPress-laajennuksen, joka näyttää uusimmat twiitit missä haluat. Aiomme luoda lyhytkoodin, joka voidaan sijoittaa mihin tahansa sivustollesi.

Kuinka luoda laajennus

Laajennuksen luominen WordPressille ei ole raketitiede. Mies, joka tuntee PHP: n ja WordPressin, voi helposti luoda laajennuksen. Tehtävää varten luon kansion nimen ‘twitter-api’ hakemistoon ‘wp-content / plugins’.

Seuraavaksi luon ‘twitter-api.php’ ja laitan sen ‘plugins / twitter-api’ -kansioon. Laajennustiedostomme ‘twitter-api.php’ tarvitsee kommentteja, joten lisätään sen alla olevaan muotoon.

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

Kun olet lisännyt yllä olevan kommentin, laajennuksemme näkyy laajennussivulla, josta voimme aktivoida sen. Mutta koska emme kirjoittaneet mitään koodia, se vain aktivoituu, mutta ei tee mitään. Lisäämme paljon koodia laajennukseemme. Mutta toistaiseksi luomme vain laajennuksemme perusrakenteen.

class Twitter_API {
    public function __construct() {
 
    }
}

Välttääksesi suoraa pääsyä laajennuksemme PHP-tiedostoihin, meidän on lisättävä rivin alapuolelle laajennusten kommentin jälkeen.

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

Asenna Twitter PHP -kirjasto

Twitter tarjoaa REST-sovellusliittymät kehittäjille. Laajennuksellemme käytämme suosittua kirjastoa Twitterille, joka on rakennettu PHP: hen. Tässä on kirjaston git-hub-URL –https://github.com/abraham/twitteroauth

Tämän kirjaston asentamiseksi avaan komentokehotteen plugins / twitter-api-kansioon ja suoritan alla olevan komennon.

composer require abraham/twitteroauth

Kun olet asentanut kirjaston, sijoitan rivien alapuolelle ‘twitter-api.php’ -tiedostoon.

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

Nyt on aika rekisteröidä Twitter-sovelluksemme. Luo sovellus siirtymällä Twitter-sovelluksiin ja noudattamalla alla olevia ohjeita.

• Napsauta painiketta Luo uusi sovellus.
• Täytä Nimi-, Kuvaus-, Verkkosivusto-kentät.
• Hyväksy sopimus ja napsauta Luo Twitter-sovellus -painiketta.
• Napsauta seuraavalla sivulla välilehteä ‘Avaimet ja käyttöoikeustunnukset’. Tämän välilehden alla on kuluttaja-avain ja kuluttajasalaisuus. Kopioi nämä tiedot ja säilytä niitä turvallisessa paikassa.
• Saman välilehden alla on kohta ” Käyttöoikeustunnuksesi ”. Napsauta painiketta Luo käyttöoikeustunnus.
• Kopioi tässä vaiheessa käyttöoikeustunnus ja käyttöoikeustunnuksen salaisuus. Pidä nämä yksityiskohdat turvassa.

Olemme luoneet Twitter-sovelluksemme ja olemme valmiita myös API-avaimiemme kanssa. Jos haluat käyttää näitä tietoja laajennuksessamme, meidän on ensin tallennettava se. Tätä varten luomme lisäosan lisäsivun. Joten lisätään alla oleva koodi tiedostoon.

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

Yllä oleva koodi lisää valikkomme nimeltä ” Twitter API ” hallintapaneelin Asetukset-kohtaan. Tässä vaiheessa meidän on luotava ‘inc’ -hakemisto ja sijoitettava siihen ‘ta-setting.php’ -tiedosto.

Ta-setting.php-tiedostossa annamme mahdollisuuden tallentaa Twitter-sovellusliittymän tiedot. Lisään alla olevan koodin tähän tiedostoon. Haetaan jokaiselle kentälle arvoa (jonka tallennamme seuraavassa vaiheessa) tietokannasta.

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

Tälle sivulle syötämme API-tiedot, jotka meidän on tallennettava tietokantaan. Joten käytin ‘init’ -toimintoa ja lisäsin lähetyslogiikan soittopyyntöön.

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

Tässä vaiheessa olemme suorittaneet laajennuksellemme vaaditut tausta-asetukset. Nyt olemme menossa käyttöliittymään, jossa meidän on näytettävä viimeisimmät twiitit. Luomme lyhytkoodia, jotta voimme näyttää twiittejä missä tahansa vain asettamalla lyhytkoodin. Konstruktorissa asetan koodirivin alapuolelle.

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

Haemme myös api-yksityiskohtia konstruktorista. Meidän tulisi ilmoittaa luokan muuttujat kuten alla.

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

Seuraavaksi meidän pitäisi määritellä lyhytkoodin takaisinsoittotoiminto.

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

Lisäämme pienen käyttöliittymän tweet-listallemme. Joten lisätään CSS-tiedosto seuraamalla.

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

Lisään CSS-tiedostooni alla olevat ominaisuudet luokalle ‘tweet-wrap’. Halutessasi voit lisätä lisää CSS: ää tarpeen mukaan.

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

Siinä kaikki, olemme valmiit laajennuksellamme, joka näyttää viimeisimmät twiitit. Voit ladata laajennuksen zip-tiedoston napsauttamalla alla olevaa linkkiä Hae laajennuskoodi.

Hanki laajennuskoodi