Ein einfaches Twitter-Plugin für WordPress erstellen

Code

Mal sehen, wie wir ein sehr einfaches Plugin erstellen können, das die neuesten Beiträge eines Twitter-Kontos enthält.

Schritt 1 Laden Sie die Skripts herunter

Bevor wir mit der Erstellung unseres Plugins beginnen, benötigen wir JavaScript-Code.

Holen Sie sich hier tweetable v1.6!
Besorgen Sie sich hier das neueste Jquery!

Schritt 2 Erstellen Sie die Dateistruktur und kopieren Sie die Dateien

Erstellen Sie dieses Verzeichnis: / wp-content / plugins / tweetfeed-light, und kopieren Sie dann diese Dateien.

 / 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

Schritt 3 Grundlegende Plugin-Daten

Fahren Sie mit dem Erstellen fort tweetfeed-light.php (unser Haupt-Plugin-Dateiname) mit dem unten angegebenen Inhalt.

 / * Plugin Name: Tweetfeed Light Plugin URI: http://wp.tutsplus.com Beschreibung: Neueste Tweets in der Seitenleiste eines bestimmten Twitter-Benutzers anzeigen Version: 1.0 Autor: Adam Burucs Author URI: http://wp.tutsplus.com * /

Schritt 4 Die Plugin-Klasse

Die grundlegende Deklaration unserer Plugin-Klasse.

 Klasse AB_Tweetfeed_Light

Schritt 5 Konstruktorfunktion

Es ist eine gute Idee, die ursprünglichen Einstellungen und Anforderungen in diese Funktion zu übernehmen. In diesem Abschnitt stellen wir Folgendes ein:

Plugin-Pfad
Kurzcode
Skripte importieren
Stile importieren

Der Code für diese Aufgaben:

 öffentliche Funktion __construct () // Plugin-Pfad setzen $ this-> pluginUrl = WP_PLUGIN_URL. '/ tweetfeed-light'; // setze shortcode add_shortcode ('tweetfeed-light', array ($ this, 'shortcode')); // importiere Skripte wp_enqueue_script ('tweetable-script', $ this-> pluginUrl. '/js/jquery.tweetable.min.js', array ('jquery')); // Stil importieren wp_enqueue_style ('tweetable-style', $ this-> pluginUrl. '/css/style.css');

Schritt 6 Tweets abrufen

Holen Sie sich die neuesten Tweets von einem Benutzer. Wir können auch die Grenzvariable einstellen, die die Anzahl der Tweets steuert.

 öffentliche Funktion loadTweets ($ user, $ limit) // Render-Tweets an div-Element-Echo '
'; // Javascript-Code für das magische Echo rendern '';

Schritt 7 Shortcode-Funktion

Dies ist das Hilfsskript für die Verwendung des Plugins mit einem Shortcode.

 // Render Tweets mit Shortcode public Funktion Shortcode ($ data) return $ this-> loadTweets ($ data ['username']);

Schritt 8 Instanziieren

Machen Sie aus der Plugin-Klasse ein Objekt.

 // Plugin ausführen $ tweetfeed_light = new AB_Tweetfeed_Light ();

Schritt 9 Final Code

So sieht der Code aus, wenn er fertig ist.

 / * Plugin Name: Tweetfeed Light Plugin URI: http://wp.tutsplus.com Beschreibung: Neueste Tweets in der Seitenleiste eines bestimmten Twitter-Benutzers anzeigen Version: 1.0 Autor: Adam Burucs Author URI: http://wp.tutsplus.com * / class AB_Tweetfeed_light öffentliche Funktion __construct () // Pluginpfad setzen $ this-> pluginUrl = WP_PLUGIN_URL. '/ tweetfeed-light'; // setze shortcode add_shortcode ('tweetfeed-light', array ($ this, 'shortcode')); // importiere Skripte wp_enqueue_script ('tweetable-script', $ this-> pluginUrl. '/js/jquery.tweetable.min.js', array ('jquery')); // Stil importieren wp_enqueue_style ('tweetable-style', $ this-> pluginUrl. '/css/style.css');  public function loadTweets ($ user, $ limit) // Render-Tweets für div-Element-Echo '
'; // Javascript-Code für das magische Echo rendern '';  // Render-Tweets mit Shortcode public function shortcode ($ data) return $ this-> loadTweets ($ data ['user'], $ data ['limit']);  // Plugin ausführen $ tweetfeed_light = new AB_Tweetfeed_Light ();

Schritt 10 Shortcode-Verwendung

Um dieses Plugin zu verwenden, können Sie das schreiben [tweetfeed-light user = "johnb" limit = "10"] Kurzcode in die gewünschte Seitenquelle. Zum Beispiel:

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

Schritt 11 Der Look

So sieht das Plugin im Standard-WordPress-Design aus, das in ein Seitenobjekt eingefügt wird.

Zusammenfassung

Wie Sie sehen, ist dies eine einfache, aber großartige Lösung für unsere Mini-Twitter-Mission. Für weitere (farbige) Optimierungen sollten Sie in das enthaltene Stylesheet schauen. Vielen Dank an Icontexto für das Twitter-Bild!

Code