Opprette en enkel Twitter Plugin for WordPress

La oss se hvordan kan vi lage en veldig enkel plugin som viser noen siste innlegg fra en Twitter-konto.


Trinn 1 Last ned skript

Før vi begynner å skrive pluginet, trenger vi litt JavaScript-kode.

  • Få tweetable v1.6 her!
  • Ta tak i siste jquery her!

Trinn 2 Opprett filestruktur og kopier filer

Lag denne katalogen: / Wp-innhold / plugg / tweetfeed-light, og kopier deretter disse filene.

 / 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

Trinn 3 Grunnleggende Plugin Data

Fortsett med å lage tweetfeed-light.php (vårt hovedpluginfilnavn) med det oppgitte innholdet nedenfor.

 / * Plugin Name: Tweetfeed Light Plugin URI: http://wp.tutsplus.com Beskrivelse: Vis nyeste tweets i sidebar for en gitt Twitter bruker Versjon: 1.0 Forfatter: Adam Burucs Forfatter URI: http://wp.tutsplus.com * /

Trinn 4 Plugin Class

Den grunnleggende erklæringen av vår plugin klasse.

 klasse AB_Tweetfeed_Light 

Trinn 5 Konstruksjonsfunksjon

Det er en god idé å sette de innledende innstillingene og kravene til denne funksjonen. I denne delen angir vi følgende:

  • plugin banen
  • kort kode
  • importerer skript
  • importere stiler

Koden for disse oppgavene:

 offentlig funksjon __construct () // sett plugin path $ this-> pluginUrl = WP_PLUGIN_URL. '/ Tweetfeed-lys'; // sett shortcode add_shortcode ('tweet-lys', array ($ this, 'shortcode')); // importskript wp_enqueue_script ('tweetable-script', $ this-> pluginUrl. '/js/jquery.tweetable.min.js', array ('jquery')); // import stil wp_enqueue_style ('tweetable-style', $ this-> pluginUrl. '/css/style.css'); 

Trinn 6 Henter tweets

Få de siste tweets fra en bruker. Vi kan også angi grensevariabelen som styrer antall tweets.

 offentlig funksjon loadTweets ($ bruker, $ grense) // gjør tweets til div element echo '
'; // gjeng javascript kode for å gjøre det magiske ekko'et';

Trinn 7 Kortnummer Funksjon

Dette er hjelpeskriptet for å bruke pluginet med en kortkode.

 // gjengi tweets med shortcode offentlig funksjon shortcode ($ data) return $ this-> loadTweets ($ data ['brukernavn']); 

Trinn 8 Instantiate Class

Lag et objekt fra plugin-klassen.

 // kjøre plugin $ tweetfeed_light = ny AB_Tweetfeed_Light ();

Trinn 9 Sluttkode

Slik ser koden ut når den er ferdig.

 / * Plugin Name: Tweetfeed Light Plugin URI: http://wp.tutsplus.com Beskrivelse: Vis nyeste tweets i sidebar for en gitt Twitter bruker Versjon: 1.0 Forfatter: Adam Burucs Forfatter URI: http://wp.tutsplus.com * / klasse AB_Tweetfeed_light offentlig funksjon __construct () // sett plugin path $ this-> pluginUrl = WP_PLUGIN_URL. '/ Tweetfeed-lys'; // sett shortcode add_shortcode ('tweet-lys', array ($ this, 'shortcode')); // importskript wp_enqueue_script ('tweetable-script', $ this-> pluginUrl. '/js/jquery.tweetable.min.js', array ('jquery')); // import stil wp_enqueue_style ('tweetable-style', $ this-> pluginUrl. '/css/style.css');  offentlig funksjon loadTweets ($ bruker, $ grense) // gjengi tweets til div element echo '
'; // gjeng javascript kode for å gjøre det magiske ekko'et'; // gjengi tweets med shortcode offentlig funksjon shortcode ($ data) return $ this-> loadTweets ($ data ['bruker'], $ data ['limit']); // kjøre plugin $ tweetfeed_light = new AB_Tweetfeed_Light ();

Trinn 10 Bruk av kortnummer

For å bruke dette pluginet kan du skrive [tweetfeed-light user = "johnb" limit = "10"] shortcode til siden kilden du vil ha. For eksempel:

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

Trinn 11 Utsikten

Slik ser pluggen ut i standard WordPress-tema, lagt inn i et sidobjekt.


Sammendrag

Som du kan se er dette en enkel, men flott løsning for vårt mini Twitter-oppdrag. For ytterligere (farge) tweaking bør du se på det medfølgende stilarket. Takk til Icontexto for Twitter-bildet!