Widgets de WordPress: Refactorización, Parte 9
Aunque la última publicación de esta serie de refactorización no fue increíblemente larga, creo que fue un poco densa. Es decir, requirió una buena cantidad de trabajo colocar el código en un lugar en el que podamos trabajar más fácilmente con él.
Pero eso es todo: todo el trabajo que hicimos debería facilitar el avance con el resto del código que necesitamos escribir.
Y para asegurarnos de que estamos aprovechando el trabajo y la base que hemos sentado hasta ahora, vamos a completar la serie con un conjunto de artículos más breves y más enfocados que deberían tomar menos tiempo para leer, implementar y entender lo que estamos haciendo con el código.
El modelo de widget de WordPress: Refactorización Parte 9
Recuerdo del último mensaje:
A continuación, continuaremos desarrollando funcionalidades para el área administrativa del widget. Después de eso, centraremos nuestra atención en el lado público del widget, así como en la funcionalidad de serialización.
Y esto nos prepara exactamente hacia dónde nos dirigimos en esta publicación en particular. Es decir, vamos a escribir una interfaz administrativa que nos permita:
- definir un título para el widget,
- definir el contenido de texto para el widget,
- y cambiar si queremos o no mostrar el título.
No pretende ser innovador ni pretende ser el tipo de widget que alguien más quiera vender. En cambio, pretende mostrar cómo podemos tomar lo que tenemos para crear algo similar a lo que ya hemos visto en WordPress y cómo empleamos prácticas de programación sólidas.
La interfaz de usuario: un primer paso
Después de nuestro último trabajo, tenemos un widget que aparece en el área administrativa de WordPress e incluso se puede mover a una barra lateral u otra área de widgets; sin embargo, en realidad no hace nada.
Por ahora, sigamos adelante y agreguemos tres elementos a la interfaz de usuario:
- agregue una entrada de texto para el título del widget,
- incluir un elemento de área de texto para mostrar lo que puede ser un párrafo de texto,
- y, por último, agregue una casilla de verificación para alternar la información del título.
Para hacer esto, necesitaremos editar un archivo en el directorio Vistas. Es decir, vamos a actualizar el archivo Admin.php. Comenzaremos con los elementos exactamente como se necesitan sin marcas superfluas.
<input type="text" name="widget-title" value="" />
<textarea name="widget-content"></textarea>
<label>
<input
type="checkbox"
value="1"
name="widget-title-enabled"
/>
Display Title?
</label>Todavía no será mucho para ver en la parte delantera, pero nos está acercando a donde queremos estar.
Una clase para administradores
A continuación, queremos asegurarnos de mantener un alto nivel de cohesión con nuestras clases. Esto significa que no necesitamos una sola clase para hacer todo lo relacionado con la administración, la visualización y todo el resto del trabajo requerido por la API de WordPress.
Con ese fin, crearemos una segunda clase llamada WidgetAdmin en el directorio y espacio de nombres de WordPress .
En este archivo, incluiremos el siguiente código :
<?php
/*
* This file is part of WordPress Widget Boilerplate
* (c) Tom McFarlin <tom@tommcfarlin.com>
*
* This source file is subject to the GPL license that is bundled
* with this source code in the file LICENSE.
*/
namespace WordPressWidgetBoilerplateWordPress;
/**
* Manages the administrative functionality of the widget.
*/
class WidgetAdmin extends Widget
{
/**
* {@inheritdoc}
*/
public function __construct($widgetSlug)
{
parent::__construct($widgetSlug);
}
/**
* Displays the administrative view of the form and includes the options
* for the instance of the widget as arguments passed into the function.
*
* @param array $instance the options for the instance of this widget.
*/
public function form($instance)
{
include plugin_dir_path(__FILE__).'Views/Admin.php';
}
}
Luego, en el código original para instanciar nuestro widget, cambiaremos esta línea :
<?php
/**
* Registers the core Widget class using the WordPress APIs.
*/
public function load()
{
register_widget(new Widget('widget-name'));
}Para verse así :
<?php
/**
* Registers the core Widget class using the WordPress APIs.
*/
public function load()
{
register_widget(new WidgetAdmin('widget-name'));
}En los próximos artículos, esto continuará evolucionando pero, como puede ver, nos estamos asegurando de tener una única clase básica de funcionalidad para hablar con WordPress y una clase específica para representar el formulario administrativo.
La interfaz de usuario: un segundo paso
Finalmente, limpie el formulario para que tenga un poco más de experiencia de usuario sólida que combine bien con el área de administración de WordPress en su conjunto.
<input type="text" name="widget-title" value="" />
<textarea name="widget-content"></textarea>
<label>
<input
type="checkbox"
value="1"
name="widget-title-enabled"
/>
Display Title?
</label>Y actualízalo para que se vea así :
<div class="widget-content">
<p>
<input
type="text"
name="widget-title"
value=""
placeholder="Widget Title"
class="widefat"
/>
</p>
<p>
<textarea
name="widget-content"
placeholder="Widget Content"
style="width:100%;"></textarea>
</p>
<p>
<input
type="checkbox"
value="1"
name="widget-title-enabled"
class="checkbox"
/>
<label for="widget-title-enabled">Display Title?</label>
</p>
</div><!-- .widget-content -->Suponiendo que todo haya ido bien, ahora debería ver algo parecido a esto:
Y ahí es donde vamos a detenernos con las características administrativas de esta publicación. Recuerde que también puede realizar un seguimiento de todo esto en la rama de desarrollo en GitHub.
Higienización y serialización
En la próxima publicación, veremos qué es necesario para desinfectar y serializar (o limpiar y guardar) el contenido de nuestro widget.
También nos aseguraremos de mostrar la información en el área administrativa después de que la información se haya guardado y recuperado.
Finalmente, la herencia y la cohesión de clases continuarán evolucionando pero, por ahora, concéntrese en lo que se cubre en esta publicación y luego continuaremos en el próximo artículo.