Como crear un Widget con acceso a datos para Wordpress

Actualmente pueden crearse bloques de código sidebar para insertar widget en cualquier lugar de una web, un widget te permite mostrar tus últimas entradas, mostrar imágenes, poner un calendario o la funcionalidad que necesitemos.

Los plugin tiene un apartado en el menú de administración de Wordpress mientras que los widgets no tienen un menú. Como se utilizan para insertarlos en el diseño de la web dentro de algún sidebar definido, los widget se encuentran en el menú Apariencia > Widgets. Allí podremos ver todos los widgets disponibles a la izquierda y a la derecha de la pantalla, los sidebar donde podremos arrastrar e insertar los widget.

Para este tutorial crearemos un widget que nos permita insertar en una web un pequeño formulario de contacto
Lo primero que haremos será crear una directorio denominado Wcontacto en la ruta /wp-content/plugins/ y dentro de este directorio crearemos un archivo llamado fcontacto.php, de esta manera crearemos un plugin para instalar en wordpress y el widget que utilizaremos en la web.

Comenzaremos nuestro código definiendo la cabecera del plugin:

<?php /* Plugin Name: Wcontacto Plugin URI: http://midominio.com Description: Formulario de contacto Version: 1.0 Author: Innovesoft Author URI: http://innoesfot.net License: GPL2 Copyright 2015 Licencia de software */?>

Dentro de la cabecera el nombre del plugin es lo mas importante ya que wordpress tomara automáticamente ese nombre para visualizarlo en el panel de administración. También describiremos el plugin o widget que estamos creando, la licencia y los datos del autor.

A continuación debajo del código anterior, vamos a escribir el código para indicar WordPress que queremos crear un nuevo widget, para ello usamos el siguiente código:

<? add_action('widgets_init', create_function('', 'register_widget( "Wcontacto_Widget" );')); ?>

Este codigo lo que hace es crear y ejecutar una función llamada register_widget que llamara a la clase principal del widget Wcontacto_Widget y también lo mostrara en el listado de widgets disponibles en Wordpress. Ahora debemos realizar el código de la clase principal Wcontacto_Widget, dicha clase definirá las funcionalidades que realizará nuestro widget, para ello escribiremos a continuación el siguiente código:

add_action('widgets_init', create_function('', 'register_widget( "Wcontacto_Widget" );'));

class Wcontacto_Widget extends WP_Widget{

public function __construct() {


parent::__construct(
'wcontacto', //ID del widget
'Contacto', //Nombre del widget
array('description' => 'Registrar un contacto en la base de datos') //Descripción del widget

);
}
/// aquí definimos las funciones y funcionalidades
}

En el código creamos una clase llamada Wcontacto_Widget la cual extiende o hereda las propiedades de la clase WP_Widget, definimos los datos necesarios para wordpress como el id del widget, el nombre y una descripción.

A continuación deberemos definir la funciones que serán las funcionalidades propiamente dichas del widget, para esto utilizamos la función heredada de la clase Wp_Widget que se llama widget() a la que podemos enviarle parámetro como argumentos e instancia si tenemos un widget con múltiples funciones, los argumento e instancia son parámetros opcionales.

Implementamos entonces la funcion debajo del constructor:

public function widget( $args, $instance ) { $this -> mostrarformulario(); if(!empty($_POST['nombre'])){ $resultado = $this -> Grabarcontacto(); if($resultado == 1){ echo "<script>alert('Contacto registrado');</script>"; } else{ echo "<script>alert('Fallo base de datos');</script>"; } } }

La función widget lo que hace es llamar a la función para mostrar el formulario con los campos de datos y al enviar si el campo nombre no esta vacío llama a la función para grabar los datos.

Creamos ahora debajo de la función widget la función para mostrar el formulario:

public function mostrarformulario(){ ?> <form name="frmcontacto" method="post" action=""> Nombre <br> <input type="text" name="nombre"value="" /><br> Email <br> <input type="text" name="email"value="" /><br> Recibir Boletin <input name="SI" type="checkbox" value="si"> <br> <br> <input type="submit" name="submit" value="Suscribirse"/> </form> <?php }

Luego creamos la función para grabar los datos debajo de la función mostrar formulario:

public function Grabarcontacto((){ global $wpdb; $query = "INSERT INTO contactos (id,nombre, email) VALUES (0,'{$_POST[nombre]}','{$_POST[email]}')"; $resultado = $wpdb -> query($query); return $resultado; }

Nuestra función Grabarcontacto() por medio de la variable $wpdb. WordPress posee una clase llamada wpdb, esta clase de tipo global es la que contiene las funciones necesarias para gestionar la base de datos. Permite a través de sus métodos realizar cualquier operación con una tabla de base de datos

Por lo tanto la función Grabarcontacto() realiza la inserción en la base de datos validando si el campo nombre no esta vacío permite entonces grabar los datos en la base de datos. Si la operación es correcta devuelve un 1 como resultado, que luego sera utilizado para validad si la operación se realizo exitosamente o no.

Hasta aquí creamos el widget, ahora veremos como crear un sidebar si quisiéramos para insertar nuestro widget.

COMO CREAR SIDEBAR PARA INSERTAR WIDGET

Para ello vamos a nuestro archivo functions.php que esta en la plantilla de nuestra web wordpress y escribimos el siguiente código para definir un sidebar

if(function_exists('register_sidebar')){register_sidebar(array('name' => 'Contacto','before_widget' => '<div class="case css">','after_widget' => '</div>'));}

Luego en la pagina donde queramos poner el widget habilitamos un bloque para que nos aparezca el sidebar

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Cointacto') ) : ?> <?php endif; ?>;

También podemos crear widget para el panel de administración de wordpress de la siguiente mediante la función de wordporess wp_add_dashboard_widget. Por ejemplo podemos añadir funciones directamente editando el archivo functions.php o bien haciendo un archivo aparte y luego invocandolo con la función include de php.

Un ejemplo sencillo de Widget para el panel de administración de Wordpress donde mostremos al administrador diversos datos que podemos programar en un widget recogiendo información de sistema o de otras funcionalidades que tengamos instaladas en el sistema podemos hacerlo de la siguiente manera:

//función que implementa la funcionalidad que queremos añadirfunction Bienvenido_widget_escritorio_function() { echo "<b>Bienvenido Administrador</b> <b>Fecha:</b>". date('d/m/Y').'<br>'; echo "<b>Estabilidad de sistema:</b> No se encontraron problemas<br>"; echo "<b>Actualizaciones disponibles:</b> 5 <a href='' >Actualizar Ahora</a> <br>"; echo "<b>Nuevas sucripciones:</b> 15<br>"; echo "<b>Nuevos pedidos en espera:</b> 15<br>"; echo "<b>Pagos recibidos:</b> 10<br><br>"; echo "<form name='frmcontacto' method='post' action=''> Cambiar su contraseña <br> <input type='text' name='codig' value='' /><br> <br> <br> <input type='submit' name='submit' value='Cambiar'/> </form><br>";}//función que añade el widget al escritoriofunction Agregar_widgets_escritorio() { wp_add_dashboard_widget('Bienvenido_widget_escritorio','Widget de bienvenida', 'Bienvenido_widget_escritorio_function');}//función que activa el widget al iniciar el panel de administraciónadd_action('wp_dashboard_setup', 'Agregar_widgets_escritorio' );

El resultado del código anterior seria el siguiente:

Hasta aquí vimos una parte de Cómo desarrollar widget y crear nuevas funcionalidades para wordpress según nuestras necesidades, tambien podemos crear nuevos componentes para widget ya desarrollados.

Así vemos como podemos extender las funcionalidades de wordpress de manera sencilla programando nuestros propios componentes para nuestras paginas web o bien desarrollando widget para poner a disposición de otras personas desde la web de Wordpress.org para que quien quiera se lo pueda descargar y utilizarlo o desarrollar aplicaciones para luego comerciar con otros usuarios.

También podemos crear componente y widget que nos permitan conectarnos a otra plataformas como paypal, facebook o monitorizar nuestra web recabando información de nuestra propia pagina web.