En este artículo te vamos a mostrar cómo crear un plugin para WordPress, ya sabéis, el CMS más utilizado para desarrollar páginas web, que muestre las últimas actualizaciones de una cuenta de Twitter específica. Si, sé que existen MUCHÍSIMOS plugins para WordPress que muestren los últimos tuits de una cuenta ya definida, pero con esta práctica sabremos hacer dos cosas: manejar la API de Twitter y crear un plugin para WordPress. No está nada mal, ¿verdad?
Paso 1. Bájate los scripts
Antes de empezar a desarrollar el plugin, necesitamos algunas librerías de Javascript.
Paso 2. Crea la estructura de archivos y cópialos
Crea este directorio: /wp-content/plugins/tweetfeed-light, y copia los siguientes ficheros
/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
Paso 3. Datos básicos del plugin
Continua creando el archivo tweetfeed-light.php (el nombre de nuestro fichero principal del plugin) con el siguiente contenido.
/* Plugin Name: Tweetfeed Light Plugin URI: http://wp.tutsplus.com Description: Show latest Tweets in sidebar for a given Twitter user Version: 1.0 Author: Adam Burucs Author URI: http://wp.tutsplus.com */
Paso 4. La clase del plugin
Declaración básica de la clase de nuestro plugin.
class AB_Tweetfeed_Light {
}
Paso 5. Constructor
Es una buena idea poner la configuración y los requisitos iniciales en esta función. En esta sección haremos y definiremos lo siguiente:
- ruta del plugin
- shortcode
- importar los scripts
- importar estilos
El código para dichas tareas:
public function __construct() {
// set plugin path
$this->pluginUrl = WP_PLUGIN_URL . '/tweetfeed-light';
// set shortcode
add_shortcode('tweetfeed-light', array($this, 'shortcode'));
// import scripts
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');
}
Paso 6. Obteniendo los tuits
Con esto recuperaremos los últimos tuits de un usuario. Podemos también definir una variable para limitar el número de tweets que queremos recuperar.
public function loadTweets($user, $limit) { // render tweets to div element echo '<div id="tweets"></div>'; // render javascript code to do the magic echo '<script type="text/javascript"> jQuery(function(){ jQuery("#tweets").tweetable({ username: "' . $user . '", limit: ' . $limit . ', replies: true, position: "append"}); }); </script>';}Paso 7. Función shortcode
Este magnífico script nos ayudará a utilizar el plugin mediante un shortcode.
// render tweets with shortcode
public function shortcode($data) {
return $this->loadTweets($data['username']);
}
Paso 8. Instanciando la clase
Creamos un objeto de la clase del plugin
// run plugin $tweetfeed_light = new AB_Tweetfeed_Light();
Paso 9. Código final
Así es como quedaría el código de nuestro plugin una vez acabado:
/*Plugin Name: Tweetfeed LightPlugin URI: http://wp.tutsplus.comDescription: Show latest Tweets in sidebar for a given Twitter user Version: 1.0Author: Adam BurucsAuthor URI: http://wp.tutsplus.com*/class AB_Tweetfeed_light {public function __construct() { // set plugin path $this->pluginUrl = WP_PLUGIN_URL . '/tweetfeed-light'; // set shortcode add_shortcode('tweetfeed-light', array($this, 'shortcode')); // import scripts 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');}public function loadTweets($user, $limit) { // render tweets to div element echo '<div id="tweets"></div>'; // render javascript code to do the magic echo '<script type="text/javascript"> jQuery(function(){ jQuery("#tweets").tweetable({ username: "' . $user . '", limit: ' . $limit . ', replies: true, position: "append"}); }); </script>';}// render tweets with shortcodepublic function shortcode($data) { return $this->loadTweets($data['user'], $data['limit']);}}// run plugin$tweetfeed_light = new AB_Tweetfeed_Light();Paso 10. Uso del shortcode
Puedes utilizar este plugin escribiendo el shortcode [tweetfeed-light user="noprog" limit="10"] en donde quieras. Por ejemplo:
...<div class="menu">...</div>[tweetfeed-light user="noprog" limit="10"]<div class="footer">...</div>...Muchas gracias a Adam Burucs, por la creación de este plugin y cedernos su divulgación.
Fuente: Adam Burucs