wordpress-tag-cloud1

Widgets, o cómo extender WordPress

wordpress-tag-cloud1Hola a todos de nuevo. Aquí volvemos después del paréntesis vacacional con uno de los temas que más me fascinan de WordPress.

Recordar que en mi primer post os comentaba que WordPress no era un software cerrado, sino que se encontraba en contínua expansión; además, te ofrece todo un arsenal de herramientas para que tú mismo construyas lo que necesites. Y para empezar, nada menos que crearemos nuestro primer widget.

Sí, qué fuerte suena, pero no es para tanto. Aunque te pueda parecer complicado, con unas nociones básicas de programación en Php podrás crear tus widgets a medida, o al menos saber cómo funcionan para poder adaptar alguno que te hayas bajado de Internet.

¿Y qué es un widget de WordPress?

¿Y qué es un widget? Pues no es más que un trozo de código escrito en Php y Html que realiza una función en concreto y que aparecerá en uno de esos lugares especiales de nuestro tema llamado sidebar. Estas sidebar vienen definidas en el tema, y normalmente aparecen en el header, footer o a los lados de la página. Más adelante aprenderemos a crear tantos sidebars como necesitemos, así como colocarlos donde nos convenga.

¿Qué puede hacer un widget? Pues de todo: desde mostrar imágenes, listados de posts, categorías, un buscador a… lo que se te ocurra. Piensa en el widget como un trozo de información que puedes pegar sobre tu web donde te convenga que aparezca. Normalmente se usa para dar al usuario información extra: un menú para navegar por la web, un anuncio, tus últimos twits…

Bien, pues ya que sabemos qué es y qué puede hacer, vamos a ponernos manos a la obra. WordPress tiene su propia forma de crear y llamar a los widgets, y lo tendremos que tener siempre en mente a la hora de crearlos.

Coge tu editor que comenzamos. Crea un archivo al que llamarás my_widget.php y escribe:

class my_widget extends WP_Widget {
   function my_widget(){
   // Constructor del Widget.
   }
   function widget($args,$instance){
   // Contenido del Widget que se mostrará en la Sidebar
   }
   function update($new_instance, $old_instance){
   // Función de guardado de opciones
   }
   function form($instance){ // Formulario de opciones del Widget, que aparece cuando añadimos el Widget a una Sidebar } }
?>

widget2Esta parte de código podrás usarla como una especie de plantilla para crear todos tus widgets, al menos los más sencillos. Vamos a ir parte por parte; un widget no es más que una clase (un objeto de programación) que extiende a la clase Wp_Widgets, que viene de fábrica con el WordPress. Es decir, vamos a coger una clase de la librería de WordPress y vamos a extenderla para que haga lo que queramos. Luego ya el propio WordPress se encargará de ejecutar las acciones, por eso no hemos de preocuparnos.

La primera función my_widget es lo que llamamos un constructor, es decir, es la que se encarga de darle a WordPress los parámetros necesarios para que sepa que esto es un widget y sepa que hacer con él. Así que vamos a darle contenido:

function my_widget(){
 // Constructor del Widget.
 $widget_options = array('classname' => 'my_widget', 'description' => "Aquí pones la descripción del widget" );
 $this->WP_Widget('my_widget', "Mi primer Widget", $widget_options);
}

Fijaos que hacemos: creamos un array con una serie de parámetros (que prácticamente no necesitan explicación) y llamamos a la clase madre, a Wp_Widget y le decimos: Eh, vamos a crear un widget que se llama my_widget, con esa descripción, y quiero que esto aparezca en el listado de widgets que vienen en la administración de WordPress.

¿Seguimos?

function widget($args,$instance){
 echo $before_widget;
 ?>
 <div id='my_widget' class='widget my_widget'>
 <h1 class='widget-title'>Mi Primer Widget</h3>
 <p><?php echo $instance["my_widget_texto"]?></p>
 </div>
 <?php
 echo $after_widget;
 }

Esta función es la que se encarga de representar tu widget en la parte pública de la web, es decir, la que ve el usuario, el visitante, el cliente. En nuestro caso, es una chorradita: muestra un título y un contenido que introduciremos desde la administración, cuando activemos el widget y lo coloquemos en una sidebar. Las clases no son más que para darle la apariencia que queramos: colores, tamaño de fuente, etc. Si no creas tu propia hoja de estilos css, WordPress usará por defecto la de tu tema, y tendrá la misma apariencia que el resto de widgets que vienen de fábrica con tu WordPress.

Aunque aparezca la última, ahora vamos a por la parte del widget que se encarga de crear el formulario que tú rellenas en la administración, cuando arrastras el widget a un sidebar:

  function form($instance){
        ?>
         <p>
            <label for="<?php echo $this->get_field_id('my_widget_texto'); ?>">Texto</label>
            <input class="widefat" id="<?php echo $this->get_field_id('my_widget_texto'); ?>" name="<?php echo $this->get_field_name('my_widget_texto'); ?>" type="text" value="<?php echo esc_attr($instance["my_widget_texto"]); ?>" />
         </p>  
         <?php
    }

 

widget1Como vereis, no es más que un pequeño formulario con un solo campo (my_widget_texto). También observareis que el nombre del campo es el mismo que el del array $instance en la función widget. Esto es lógico, puesto que lo que hacemos es leer lo que escribamos ahí para poder representarlo en la parte pública de la web. Para cada uno de los valores que queramos representar, tendremos un input distinto.

Ahora necesitamos que la función update actualice los datos que tú rellenes desde la administración de WordPress; si no, por mucho que escribas ahí, no aparecerá nada en la parte publica de la web. Vamos allá:

function update($new_instance, $old_instance){
 $instance = $old_instance;
 $instance["my_widget_texto"] = strip_tags($new_instance["my_widget_texto"]);
 // Repetimos esto para tantos campos como tengamos en el formulario.
 return $instance;
 }

Fijaos. En el array $instance guardamos cada uno de los campos que hayamos creado en el formulario de la función form. Tenemos que tener los mismos, puesto que los que no guardemos, no se actualizarán, y por lo tanto, perderemos los valores que hayamos introducido.

Y ya está. Guarda el archivo y colócalo en una carpeta dentro de tu tema (por ejemplo widgets…). Ahora, vete al archivo functions.php de tu tema y copia esto:

function crea_my_widget(){
   include_once(get_Stylesheet_directory_uri. '/includes/my_widget.php');
   register_widget('my_widget');
}
add_action('widgets_init','crea_my_widget');

Esto es una función que lo que hace es incluir el archivo donde tenemos el código del widget y registrarlo, es decir, decirle a WordPress que lo almacene como un widget. Posteriormente, con el add_action le decimos a nuestro WordPress que cuando inicie la carga de los widgets, no se olvide del nuestro.

Y ya está. Evidentemente este es un widget muy sencillo, pero puede serviros como base para crear los vuestros, o para entender como funcionan otros. Podemos añadirle su propia hoja de estilos css, su propio archivo js, incluirle librerías, parámetros, todo lo que se te ocurra. Pero ve paso a paso, incluye, cambia y equivócate: es la mejor manera de aprender.

Nos vemos en el próximo post.

The following two tabs change content below.

Francisco Palacios Chaves

Licenciado en Matemáticas, programador en PHP, Bootstrap, CSS, Codeignite entre otros. Francisco Palacios es un Freak de Bing Bang Theory, Pet Shop Boys y Apple, techno malagueño, escritor, politólogo, amante de la noche malagueña, bailongo, Indi adicto a las lágrimas de pollo en Mitjana, emprendedor empedernido, CEO y co-fundador de Social Grown.

Latest posts by Francisco Palacios Chaves (see all)

Posted in Programación and tagged , , , , , , , .

Deja un comentario