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 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
*/
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 shortcode
public
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