Een eenvoudige Twitter-plug-in voor WordPress maken

Laten we eens kijken hoe we een zeer eenvoudige plug-in kunnen maken met enkele laatste berichten van een Twitter-account.

Stap 1 Download scripts

Voordat we onze plug-in gaan schrijven, hebben we een JavaScript-code nodig.

Ontvang tweetable v1.6 hier!
Grijp hier de nieuwste jQuery!

Stap 2 Maak een bestandsstructuur en kopieer bestanden

Maak deze map aan: / Wp-content / plugins / tweetfeed-light, en kopieer vervolgens deze bestanden.

 / 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

Stap 3 Basispluginegegevens

Ga door met het maken tweetfeed-light.php (onze hoofdnaam van het plug-in-bestand) met de onderstaande inhoud.

 / * Plugin Name: Tweetfeed Light Plugin URI: http://wp.tutsplus.com Beschrijving: Toon de nieuwste tweets in de zijbalk voor een gegeven Twitter-gebruiker Versie: 1.0 Auteur: Adam Burucs Auteur URI: http://wp.tutsplus.com * /

Stap 4 De plugin-klasse

De basisverklaring van onze plugin-klasse.

 klasse AB_Tweetfeed_Light

Stap 5 Constructorfunctie

Het is een goed idee om de initiële instellingen en vereisten in deze functie te plaatsen. In deze sectie stellen we het volgende:

plugin pad
Korte code
scripts importeren
stijlen importeren

De code voor deze taken:

 publieke functie __construct () // set plugin path $ this-> pluginUrl = WP_PLUGIN_URL. '/ Tweetfeed-light'; // stel shortcode in add_shortcode ('tweetfeed-light', array ($ this, 'shortcode')); // importscripts wp_enqueue_script ('tweetable-script', $ this-> pluginUrl. '/js/jquery.tweetable.min.js', array ('jquery')); // importstijl wp_enqueue_style ('tweetable-style', $ this-> pluginUrl. '/css/style.css');

Stap 6 Tweets oprapen

Download de nieuwste tweets van een gebruiker. We kunnen ook de limietvariabele instellen die het aantal tweets regelt.

 publieke functie loadTweets ($ user, $ limit) // render tweets naar div element echo '
'; // render javascript code om de magische echo te doen '';

Stap 7 Shortcode-functie

Dit is het hulpscript voor het gebruik van de plug-in met een shortcode.

 // render tweets met shortcode publieke functie shortcode ($ data) retourneer $ this-> loadTweets ($ data ['gebruikersnaam']);

Stap 8 Instantiate klasse

Maak een object uit de plugin-klasse.

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

Stap 9 Laatste code

Hier ziet u hoe de code eruitziet als deze is voltooid.

 / * Plugin Name: Tweetfeed Light Plugin URI: http://wp.tutsplus.com Beschrijving: Toon de nieuwste tweets in de zijbalk voor een gegeven Twitter-gebruiker Versie: 1.0 Auteur: Adam Burucs Auteur URI: http://wp.tutsplus.com * / class AB_Tweetfeed_light public function __construct () // set plugin path $ this-> pluginUrl = WP_PLUGIN_URL. '/ Tweetfeed-light'; // stel shortcode in add_shortcode ('tweetfeed-light', array ($ this, 'shortcode')); // importscripts wp_enqueue_script ('tweetable-script', $ this-> pluginUrl. '/js/jquery.tweetable.min.js', array ('jquery')); // importstijl wp_enqueue_style ('tweetable-style', $ this-> pluginUrl. '/css/style.css');  publieke functie loadTweets ($ user, $ limit) // render tweets naar div element echo '
'; // render javascript code om de magische echo te doen '';  // render tweets met shortcode publieke functie shortcode ($ data) return $ this-> loadTweets ($ data ['user'], $ data ['limit']);  // plug-in uitvoeren $ tweetfeed_light = new AB_Tweetfeed_Light ();

Stap 10 Gebruik van shortcodes

Om deze plug-in te gebruiken, kunt u de [tweetfeed-light user = "johnb" limit = "10"] shortcode in de gewenste paginabron. Bijvoorbeeld:

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

Stap 11 De look

Hier ziet u hoe de plug-in eruitziet in het standaard WordPress-thema dat is ingevoegd in een pagina-object.

Samenvatting

Zoals u kunt zien is dit een eenvoudige, maar geweldige oplossing voor onze mini-Twitter-missie. Voor verder (kleur) tweaken moet je kijken naar het inbegrepen stylesheet. Met dank aan Icontexto voor de Twitter-afbeelding!

Code