Crear un Widget para WordPress

Hola, en esta entrada os quiero explicar como crear un widget para wordpress. Haremos un widget muy sencillo  para mostrar las redes sociales que queramos(los iconos he utilizado fontAwesome).

Para empezar tenemos que crear una carpeta en la ruta wp-content/plugins/ con el nombre de nuestro widget, en este caso la he llamado social_widget.

Dentro de esta carpeta crearemos un archivo llamado social_widget.php. En este archivo tenemos que declarar  los datos para registrar el widget en wordpress, primero de todo abrir el <?php y declarar las datos del widget, tales como nombre, autor, etc.

/* Plugin Name: Redes Sociales

Plugin URI: https://www.gmdavid.com/

Description: Widget de redes Sociales

Version: 1.0

Author: David Gutiérrez

Author URI: https://www.gmdavid.com/ */

Después tenemos que declarar la función para instanciar el widget que en nuestro caso la llamaremos redesSociales_widget()

function redesSociales_widget(){

include_once(plugin_dir_path( __FILE__ ).'/includes/social_widget.php');  register_widget('social_widget');

}

add_action('widgets_init','redesSociales_widget');

Básicamente lo que hace esta función es que recoja el archivo social_widget.php y lo registre como un widget llamado social_widget.

Después declararemos también otra función que nos permitirá cargar una hoja de estilos a nuestro widget, la llamaremos carga_estilo_del_widgetsocial()

function carga_estilo_del_widgetsocial () {

wp_register_style( 'social_widget', plugins_url('social_widget.css', __FILE__) );  wp_enqueue_style( 'social_widget' );

}

add_action( 'wp_enqueue_scripts', 'carga_estilo_del_widgetsocial' );

Hace exactamente lo mismo registra donde se encuentra el archivo .css y  registra en WordPress con el nombre social_widget

Ahora vamos a crear una carpeta includes y dentro de ella un archivo social_widget.php.
Dentro de este archivo tenemos que declarar una clase social_widget que extienda de WP_Widget, esta clase debe tener cuatro funciones:

function social_widget(){

// Constructor del Widget.

$widget_ops = array('classname' => 'social_widget', 'description' => "Puedes poner el icono de facebook, twitter, pinterest, google plus, instagram, youtube, linkedin " ); $this->WP_Widget('social_widget', "Widget Redes Sociales", $widget_ops);

}

Es la función constructora, la que  instancia una vez que nuestro Widget es llamado. En esta función,tenemos que hacer la llamada al constructor de WP_Widget con las opciones del Widget:

Esta función es la que muestra el contenido en la zona de Widgets, lo que ve el usuario final.

function update($new_instance, $old_instance){

$instance = $old_instance;

$instance["rs_face"] = strip_tags($new_instance["rs_face"]);         
$instance["rs_Twitter"] = strip_tags($new_instance["rs_Twitter"]);         
$instance["rs_google"] = strip_tags($new_instance["rs_google"]);

return $instance;

}

La función update se encarga de guardar en la bbdd la configuración establecida para el Widget. Suele tener siempre esta misma estructura, cambiando los parámetros de los campos.

function form($instance){

// Formulario de opciones del Widget, que aparece cuando añadimos el Widget a una Sidebar ?>

<p>

<label for="<?php echo $this->get_field_id('rs_face'); ?>">Facebook</label>

<input class="widefat" id="<?php echo $this->get_field_id('rs_face'); ?>" name="<?php echo $this->get_field_name('rs_face'); ?>" type="text" value="<?php echo esc_attr($instance["rs_face"]); ?>" />

<label for="<?php echo $this->get_field_id('rs_Twitter'); ?>">Twitter</label>

<input class="widefat" id="<?php echo $this->get_field_id('rs_Twitter'); ?>" name="<?php echo $this->get_field_name('rs_Twitter'); ?>" type="text" value="<?php echo esc_attr($instance["rs_Twitter"]); ?>" />

<label for="<?php echo $this->get_field_id('rs_google'); ?>">Google +</label>

<input class="widefat" id="<?php echo $this->get_field_id('rs_google'); ?>" name="<?php echo $this->get_field_name('rs_google'); ?>" type="text" value="<?php echo esc_attr($instance["rs_google"]); ?>" />

</p>

<?php }

La función form es la que muestra el formulario de configuración del Widget en el panel de administración de WordPress.

Para finalizar solo tendríamos que darle estilo en nuestro css que hemos llamado anteriormente social_widget.css, que se encuentra en la raíz de nuestro widget.

Ahora iremos a nuestro panel de administración Apariencia -> Widgets y en Widgets disponibles nos saldrá el nuestro.

Cualquier duda siempre tenéis codex , o escribirme un comentario y os responde lo antes posible.

Saludos y gracias.

Comparte el post de: Crear un Widget para WordPress