¡Acceso ilimitado 24/7 a todos nuestros libros y vídeos! Descubra la Biblioteca Online ENI. Pulse aquí
¡Acceso ilimitado 24/7 a todos nuestros libros y vídeos! Descubra la Biblioteca Online ENI. Pulse aquí
  1. Libros
  2. WordPress
  3. Crear una extensión widget en PHP
Extrait - WordPress Desarrolle con PHP - extensiones, widgets y temas avanzados (teoría, TP, recursos) (2ª edición)
Extractos del libro
WordPress Desarrolle con PHP - extensiones, widgets y temas avanzados (teoría, TP, recursos) (2ª edición) Volver a la página de compra del libro

Crear una extensión widget en PHP

Introducción

Los widgets son extensiones. Se deslizan en una sidebar y puede organizarlos como desee, gracias a un sistema de arrastrar y soltar de Ajax. Dispone de varios widgets predeterminados, por ejemplo, una lista de los artículos más recientes, una nube de etiquetas, un campo de búsqueda, un menú personalizado, etc.

También puede descargar widgets y así agregar funcionalidad a su sitio.

En este capítulo, aprenderá a crear su propio widget. El propósito de este widget será mostrar una lista de artículos según una o más categorías. Se puede configurar a través de la pestaña de administración Apariencia - Widgets. Verá cómo usar el objeto WP_widget en su propia clase y el objeto WP_Query para consultar la base de datos y recuperar información de los artículos.

Configurar la extensión

Para crear un widget, como para cualquier creación de una extensión, debe crear una subcarpeta en la carpeta wp-content/plugins y darle un nombre. Para el ejercicio, llámela "widget-post".

Dentro de la carpeta widget-post, cree un archivo widget-post.php. Inserte los archivos readme.txt, licence.txt e index.php (vacío) en la carpeta, si lo desea.

En la parte superior del archivo widget-post.php, agregue un comentario en el encabezado con información sobre la extensión, y active la extensión. Luego, verifique que aparezca en la administración con la información correcta.

El comentario es el siguiente:

<?php 
/* 
Plugin Name: Widget post 
Description: widget que permite mostrar una lista de artículos 
según la categoría. 
Version: 1.0 
License: GPLv2 
This program is free software; you can redistribute it and/or 
modify it under the terms of the GNU General Public License 
as published by the Free Software Foundation; either version 2 
of the License, or (at your option) any later version. 
 
This program is distributed in the hope that it will be useful, 
but WITHOUT ANY WARRANTY; without even the implied warranty of 
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the 
GNU General Public License for more details. 
 
You should have received a copy...

La clase WP_Widget

La API de los widgets de WordPress permite administrar, crear y modificar widgets gracias a varios métodos, y permite extender la clase WP_Widget, para crear widgets de una manera muy intuitiva.

Referencia al códex: https://codex.wordpress.org/Widgets_API

Estructura de construcción de un widget: https://codex.wordpress.org/Widgets_API#Example

La clase WP_Widget ha sido especialmente diseñada para facilitar el desarrollo de widgets. Permite la creación de una clase extendida, que le permitirá utilizar sus métodos.

Para crear la clase de su propio widget, usará la clase WP_Widget de la siguiente manera:

class Mi_clase extends WP_Widget {} 

Este sistema permite simplificar la creación de un widget, por lo que deberá familiarizarse con su implementación y los métodos de la clase WP_Widget.

Para desarrollar un widget, su clase deberá contener cuatro métodos específicos:

  • El método constructor __construct(), que se utiliza para configurar el widget.

    PHP permite a los desarrolladores declarar constructores para clases. Las clases que tienen un método constructor, llaman a este método cada vez que se crea una nueva instancia del objeto, lo cual es interesante para todas las inicializaciones que el objeto necesita antes de ser utilizado.

    Ver: https://www.php.net/manual/es/language.oop5.decon.php

  • El método...

Configurar el widget

Para configurar el widget, debe crear una instancia del objeto padre del método constructor __construct(), de esta manera: parent::__construct(). Esto le permite configurar el widget e indicar a WordPress que hay un nuevo widget.

    public function __construct(){ 
        parent::__construct($id_base , $name, $widget_ops, $control_ops ); 
    } 

Este es el detalle para instanciar el padre del método __construct():

parent::__construct($id_base, $name, $widget_ops, $control_ops ); 
  • $id_base: nombre clave del widget.

  • $name: nombre del widget.

  • $widget_ops: acepta una tabla que contiene un nombre de clase HTML y una descripción.

Ejemplo

$widget_ops =array(‘classname' => 'your_class', 'description' => 
'your_description'); 
  • $control_ops: acepta una tabla adicional de argumentos (anchura, altura, id).

Ejemplo

$control_ops = array(‘width' =>'your_width', 'height' 
=>'your_height', 'id_base' => 'your_id'); 

El método __construct() tiene el siguiente código:

public function __construct() { 
  $widget_ops = array(‘classname' => 'widget-post', 
                'description' => 'widget que permite la visualización de una 
 ...

Guardar el widget con la función register_widget()

Antes de usar el widget, guárdelo fuera de la clase, usando la función WordPress register_widget().

<?php register_widget($widget_class ); ?> 
  • $widget_class: el nombre de clase del widget implicado.

Existe una función inversa que permite eliminar el registro de un widget:

<?php unregister_widget($widget_class ); ?> 

Estos son los nombres de las clases de los widgets nativos de WordPress:

  • WP_Widget_Pages: nombre de clase para el widget Páginas.

  • WP_Widget_Calendar: nombre de clase para el widget Calendario.

  • WP_Widget_Archives: nombre de clase para el widget Archivos.

  • WP_Widget_Links: nombre de clase para el widget Widget Post.

  • WP_Widget_Media_Audio: nombre de clase para el widget Sonido.

  • WP_Widget_Media_Image: nombre de clase para el widget Imagen.

  • WP_Widget_Media_Video: nombre de clase para el widget Vídeo.

  • WP_Widget_Meta: nombre de clase para el widget Meta.

  • WP_Widget_Search: nombre de clase para el widget Buscar.

  • WP_Widget_Text: nombre de clase para el widget Texto.

  • WP_Widget_Categories: nombre de clase para el widget Categorías.

  • WP_Widget_Recent_Posts: nombre de clase para el widget Últimas entradas. 

  • WP_Widget_Recent_Comments: nombre de clase para el widget Últimos comentarios.

  • WP_Widget_RSS: nombre de clase para el widget RSS.

  • WP_Widget_Tag_Cloud: nombre...

Mostrar el widget gracias a un hook

Para mostrar el widget, inserte el módulo en el núcleo de WordPress utilizando el hook de acción widgets_init, que se ejecuta cuando se inicializan los widgets.

add_action(‘widgets_init', 'register_my_widget'); 

Ahora el widget aparece en la administración Apariencia - Widgets.

Crear el formulario del widget

1. Añadir los campos HTML

Para crear el formulario del widget en la administración, agregue el código HTML en el método form().

Cree los campos en HTML, hay dos: un input de texto para el título y un select con un bucle sobre las categorías, para mostrar todas las categorías del sitio web, y poder seleccionar la que desee.

Pase el identificador de cada categoría como valor en los campos option. Esto le permitirá recuperar el identificador de la categoría seleccionada y usarla en la solicitud que recuperará la información sobre los artículos con el objeto WP_Query y la función get_posts().

Si no existe ninguna categoría, cree una y asocie uno o más artículos a cada categoría; de lo contrario, el bucle no devolverá ningún resultado. Una categoría solo se muestra si está asociada con uno o más artículos.

Aquí está el codigo:

public function form($instance) { ?> 
<p> 
   <label for="">Título:</label> 
   <input type="text" id="" name="" value="" style="width:100%;" /> 
</p> 
<p> 
   <label for="">Categoría: 
   </label> 
   <select id="" name="" value="" style="width:100%;" > 
    <option>todas las categorías</option> 
<?php 
 foreach((get_categories()) as $cat) { 
    echo '<option value="'.$cat->cat_ID.'">'.$cat->cat_name.'</option>'; 
 } 
?> 
 </select> 
</p> 
<?php 
} 

La función get_categories() de WordPress devuelve una tabla...

Guardar y actualizar las opciones del widget

Para actualizar o guardar la información en la base de datos, modifique el método update(). WordPress una vez más simplifica la tarea. Simplemente devuélvale una tabla $instance con los nuevos valores, para que guarde los cambios.

WordPress gestionará automáticamente los dos argumentos que se pasan al método. Permiten recuperar fácilmente las tablas nueva y antigua.

Utilice la función PHP strip_tags() durante el registro del widget, para proteger los campos de la tabla y evitar la inyección de código.

Aquí está el código del método update():

public function update($new_instance,$old_instance ){ 
   $instance = $old_instance; 
 
   $instance['title'] = strip_tags($new_instance['title'] ); 
   $instance['category'] = strip_tags($new_instance['category'] ); 
 
   return $instance; 
} 

Mostrar el widget en la sidebar

Para mostrar el widget en el sitio web, solo queda alimentar el método de visualización widget().

En primer lugar, use la función PHP extract() en la tabla $args, para extraer las claves de la tabla como variables y asignarles automáticamente el valor asociado. Recuerde que $args es una tabla que contiene información de la sidebar. Por lo tanto, las variables se definen directamente de acuerdo con la configuración de la sidebar (consulte el capítulo Personalizar el sitio con el archivo functions.php - sección Crear barras laterales y zonas para ellas).

Ejemplo

$args=array('before_title'=>'<h1>','after_title'=>'</h1>'); 
extract($args); 
echo $before_title.'mi título'.$after_title; 

El título estará rodeado por etiquetas HTML <h1></h1>, las claves de la tabla se pueden usar directamente como variables, por lo que la clave before _title se puede usar en la forma $before_title, gracias a la función PHP extract().

Enlace a la guía oficial de PHP, para la función PHP extract(): http://php.net/manual/es/function.extract.php

Este es el código del método widget:

public function widget($args,$instance) { 
 extract($args); 
 
} 

En su caso, la tabla $args tiene las variables...