Si alguna vez intentaste desarrollar un plugin para Wordpress, al terminar de hacerlo, te preguntaste cómo se hacía para que esté disponible como Widget y el usuario simplemente tenga que arrastrarlo, en vez de andar copiando y pegando código en los archivos del theme.
En este post voy a explicar cómo hacer para pasar un plugin de copiarypegarcódigo a widget, inclusive pasándole parámetros a través del panel de control.
Para eso, voy a tomar el plugin Facebook Posted Items realizado por Fepe, que permite mostrar un listado de los links compartidos en Facebook. Este plugin es una simple función PHP a la que le pasamos un parámetro de nuestro usuario en la red social y luego lista los links. Para usarlo, hay que llamar a la función fb_posted_items() desde alguna parte de nuestro código. Por lo tanto, veremos cómo hacer para que sea un widget y podamos automáticamente elegir la ubicación del mismo en la sidebar.
1. Creando el Widget
La creación del widget -sin parámetros ni opciones- es muy fácil. En primer lugar vamos a definir la función a la que llamará el widget, es decir, que aparecerá en el blog en la ubicación del widget. En este caso, llamaremos a la función widget_fb_posted_items() y es la siguiente:
1
2
3
4
5
6
7
8
9
10
11
| <?php function widget_fb_posted_items($args) {
extract($args);
echo $before_widget;
echo $before_title;
echo "Facebook Posted Items";
echo $after_title;
fb_posted_items(UrlDelRSSdelosPostedItems);
echo $after_widget;
}
?> |
Como verán, la función es bastante sencilla. Mostramos las variables propias de Wordpress para antes y después de un widget ($before_widget y $after_widget), y las del título (que suelen ser la apertura y cierre de h2) con el que aparecerá en la sidebar. Luego de tener esta función definida, la registramos como Widget y ya estará disponible desde el panel de control.
1
| <?php register_sidebar_widget("Facebook Posted Items", "widget_fb_posted_items"); ?> |
La función con la que lo hacemos es register_sidebar_widget y recibe dos parámetros: el nombre con el que queremos que aparezca en el panel y la función misma a la que llama.
Así ya tenemos definido el widget y puede utilizarse completamente. Sin embargo, para personalizarlo (en este caso podemos cambiar el título de la sidebar -si queremos- y es obligatorio que definamos la URL del RSS de los links de Facebook) habría que meterse a tocar el código y redefinir el archivo. Ya que lo tenemos definido como Widget, podríamos definirle las opciones en el mismo panel de control, pudiendo cambiar todo sin la necesidad de re-subir el archivo por FTP.
2. Definiendo opciones para el Widget
Para definir opciones para el Widget, utilizaremos las funciones get_option() y update_option() de WordPress, así como también register_widget_control() para definir los controles.
Así como antes creamos una función para el widget, ahora crearemos una para los controles. En mi caso se llamará widget_fb_posted_items_control() y estará compuesta así:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <?php function widget_fb_posted_items_control() {
$options = $newoptions = get_option('widget_fb_posted_items');
if ($_POST["fbpi-submit"]){
$newoptions['title'] = strip_tags(stripslashes($_POST["fbpi-title"]));
if(empty($newoptions['title']))
$newoptions['title'] = 'Facebook Posted Items';
$newoptions['url'] = strip_tags(stripslashes($_POST["fbpi-url"]));
}
if ($options != $newoptions) {
$options = $newoptions;
update_option('widget_fb_posted_items', $newoptions);
}
$title = htmlspecialchars($options['title'], ENT_QUOTES);
$url = htmlspecialchars($options['url'], ENT_QUOTES);
?>
<p><label for="fbpi-title"><?php _e('Title:'); ?> <input style="width: 180px;" id="fbpi-title" name="fbpi-title" type="text" value="<?php echo $title; ?>" /></label></p>
<p><label for="fbpi-url"><?php _e('URL Facebook Posted Item:'); ?> <input style="width: 180px;" id="fbpi-url" name="fbpi-url" type="text" value="<?php echo $url; ?>" /></label></p>
<input type="hidden" id="fbpi-submit" name="fbpi-submit" value="1" />
<?php } ?> |
Lo primero que hacemos en la función es obtener las funciones del widget con get_option(“widget_fb_posted_items”) y guardarlas en ambos arrays, $options y $newoptions. Luego verificamos si el formulario fue enviado y si fue así, actualizamos los valores de $newoptions["title"] y $newoptions["url"] con los de los campos de los controles.
Siguiendo, verificamos que $newoptions sea distinta de $options (si son iguales es porque no se ha hecho ningún cambio), y si son distintas, guardamos los nuevos valores de $newoptions mediante la función update_option() (a la que le pasamos el nombre del widget y el array con las opciones).
Como verán, quedaron definidas las opciones title y url, las cuales son para el sutítulo con el que aparecerá el widget en la sidebar y la url de los links de Facebook.
Por último, en la función, definimos los campos del formulario que mostraremos para que se le puedan pasar los datos. Y luego, definimos esta función como control del widget con
1
| register_widget_control("Facebook Posted Items", "widget_fb_posted_items_control"); |
Pasándole el nombre del widget y la función. El nombre del Widget en esta función debe coincidir con el que le pasamos en register_sidebar_widget() para que Wordpress sepa asociarlos.
Ya están totalmente definidos los controles y las opciones que le pasemos serán guardadas. Sin embargo, debemos modificar la función del widget original para que aparezcan en el widget. Para eso, utilizaremos la función que ya usamos antes get_option().
1
2
3
4
5
6
7
8
9
10
| <?php function widget_fb_posted_items($args) {
extract($args);
$options = get_option('widget_fb_posted_items');
echo $before_widget;
echo $before_title;
echo $options["title"];
echo $after_title;
fb_posted_items($options["url"]);
echo $after_widget;
} ?> |
De esta manera, ahora dentro de la función traemos las opciones y las guardamos en el array $options. Luego mostraremos $options["title"] y le pasaremos a la función original el $options["url"], quedando totalmente definido el widget.
Espero que este ejemplo haya servido un poco para entender como se crean widgets y sus opciones a los que están empezando a hacer plugins en Wordpress o quieren pasar a Widget alguno de los que ya han hecho. Cualquier duda pueden dejarla en los comentarios.
