Creazione di un semplice plugin Twitter per WordPress

Vediamo come possiamo creare un plugin molto semplice che mostri alcuni post più recenti da un account Twitter.


Passaggio 1 Scarica gli script

Prima di iniziare a scrivere il nostro plugin, abbiamo bisogno di un codice JavaScript.

  • Ottieni tweetable v1.6 qui!
  • Prendi l'ultimo jquery qui!

Passaggio 2 Creare la struttura dei file e copiare i file

Crea questa directory: / Wp-content / plugins / tweetfeed-light, e quindi copiare questi file.

 / css style.css / img buttons.png interface.png interface_dark.png twitter_bird.png / js jquery.tweetable.min.js jquery-1.7.2.min.js

Passaggio 3 Dati di base del plug-in

Continua con la creazione tweetfeed-light.php (il nostro nome del file plugin principale) con il contenuto indicato di seguito.

 / * Nome plugin: Plugin Light Plug-in Tweetfeed: http://wp.tutsplus.com Descrizione: Mostra gli ultimi tweet nella barra laterale per un dato utente di Twitter Versione: 1.0 Autore: URI di Adam Burucs Autore: http://wp.tutsplus.com * /

Passaggio 4 La classe del plugin

La dichiarazione di base della nostra classe di plugin.

 classe AB_Tweetfeed_Light 

Step 5 Funzione Costruttore

È una buona idea inserire le impostazioni e i requisiti iniziali in questa funzione. In questa sezione abbiamo impostato quanto segue:

  • percorso del plugin
  • codice corto
  • importazione di script
  • importazione di stili

Il codice per queste attività:

 funzione pubblica __construct () // imposta percorso plugin $ this-> pluginUrl = WP_PLUGIN_URL. '/ Tweetfeed-light'; // imposta shortcode add_shortcode ('tweetfeed-light', array ($ this, 'shortcode')); // script di importazione wp_enqueue_script ('tweetable-script', $ this-> pluginUrl. '/js/jquery.tweetable.min.js', array ('jquery')); // import style wp_enqueue_style ('tweetable-style', $ this-> pluginUrl. '/css/style.css'); 

Passaggio 6 Recupero dei tweet

Ricevi gli ultimi tweet da un utente. Possiamo anche impostare la variabile limite che controlla il numero di tweet.

 funzione pubblica loadTweets ($ user, $ limit) // rendering tweets su div element echo '
'; // mostra il codice javascript per fare l'eco magico '';

Passaggio 7 Funzione Shortcode

Questo è lo script di aiuto per l'utilizzo del plugin con uno shortcode.

 // esegue il rendering dei tweet con shortcode della funzione pubblica shortcode ($ data) return $ this-> loadTweets ($ data ['username']); 

Step 8 Instantiate Class

Crea un oggetto dalla classe del plugin.

 // avvia plugin $ tweetfeed_light = new AB_Tweetfeed_Light ();

Passaggio 9 Codice finale

Ecco come appare il codice quando è finito.

 / * Nome plugin: Plugin Light Plug-in Tweetfeed: http://wp.tutsplus.com Descrizione: Mostra gli ultimi tweet nella barra laterale per un dato utente di Twitter Versione: 1.0 Autore: URI di Adam Burucs Autore: http://wp.tutsplus.com * / class AB_Tweetfeed_light public function __construct () // imposta percorso plugin $ this-> pluginUrl = WP_PLUGIN_URL. '/ Tweetfeed-light'; // imposta shortcode add_shortcode ('tweetfeed-light', array ($ this, 'shortcode')); // script di importazione wp_enqueue_script ('tweetable-script', $ this-> pluginUrl. '/js/jquery.tweetable.min.js', array ('jquery')); // import style wp_enqueue_style ('tweetable-style', $ this-> pluginUrl. '/css/style.css');  loadTweets di funzione pubblica ($ user, $ limit) // rendering tweets a div element echo '
'; // mostra il codice javascript per fare l'eco magico ''; // esegue il rendering dei tweet con shortcode della funzione pubblica shortcode ($ data) return $ this-> loadTweets ($ data ['user'], $ data ['limit']]; // avvia plugin $ tweetfeed_light = new AB_Tweetfeed_Light ();

Passaggio 10 Uso Shortcode

Per usare questo plugin puoi scrivere il [tweetfeed-light user = "johnb" limit = "10"] shortcode nella sorgente della pagina che desideri. Per esempio:

... 
...
[tweetfeed-light user = "johnb" limit = "10"]
...
...

Step 11 The Look

Ecco come appare il plugin nel tema predefinito di WordPress inserito in un oggetto di pagina.


Sommario

Come puoi vedere questa è una soluzione semplice ma eccezionale per la nostra mini missione Twitter. Per ulteriori (colore) tweaking si dovrebbe esaminare il foglio di stile incluso. Grazie a Icontexto per l'immagine di Twitter!