Creación rápida de prototipos: Prototipo a código, Parte 1
En lo que respecta a los prototipos rápidos y WordPress, hemos hecho dos cosas hasta ahora:
En este punto, hemos trabajado lo suficiente como para justificar comenzar a refactorizar nuestro código. Es decir, vamos a empezar a convertir el prototipo en código. Pero esto es algo que tendrá que hacerse en dos fases.
Primero, simplemente vamos a presentar clases que representan los diagramas de la publicación anterior y que encapsulan la responsabilidad de cada proyecto.
Después de eso, veremos cómo organizar el código en espacios de nombres y paquetes. Sin embargo, antes de que podamos hacer eso, debemos asegurarnos de que el código esté orientado a objetos y siga siendo funcional. Así que eso es lo que va a pasar en este post.
Prototipo a código
Si ha estado leyendo las publicaciones anteriores, tenga en cuenta que planeo seguir la organización que esbocé en la última publicación. Por supuesto, no tienes que seguir este diseño en particular.
Una palabra sobre el control de código fuente
Si está utilizando el control de código fuente, aquí es donde recomiendo crear una rama a partir de la rama maestra (si está utilizando Git) para que pueda hacer su trabajo sin afectar la versión estable del código.
Esto está un poco más allá del alcance de la serie, por lo que si no está utilizando el control de fuente, no se preocupe. Si es así, optaré por desarrollar como el nombre de esta rama. Lo fusionaré de nuevo en maestro una vez que esté seguro de que es funcional.
Código de escritura
Según el trabajo esbozado ayer, voy a crear dos clases:
- la clase de caja meta,
- la clase de visualización de cuadro meta.
Habrá algo de reutilización de código de lo que ya hemos visto, como verá en el siguiente código.
El código
Primero, nuestro cuadro meta :
<?php
/**
* Registers the Meta Box with WordPress.
*
* @author Tom McFarlin
* @since 0.2.0
*/
/**
* Registers the Meta Box with WordPress. Defines the ID, title, display function,
* and the post type on which it will live.
*
* @author Tom McFarlin
* @since 0.2.0
*/
class Meta_Box {
/**
* A reference to the class that will display the contents in the meta box.
*
* @access private
* @var Meta_Box_Display
*/
private $meta_box_display;
/**
* Instantiates the class by setting its property equal to a reference to its display.
*/
public function __construct() {
$this->meta_box_display = new Meta_Box_Display();
}
/**
* The function responsible for hooking into the WordPress API.
*/
public function init() {
add_meta_box(
'three-recent-posts',
'Three Recent Posts',
array( $this->meta_box_display, 'display' ),
'post',
'side'
);
}
}
Y a continuación, nuestra pantalla :
<?php
/**
* Defines the display for the meta box.
*
* @author Tom McFarlin
* @since 0.2.0
*/
/**
* Defines the display for the meta box that will render the content in the
* context of its meta box.
*
* @author Tom McFarlin
* @since 0.2.0
*/
class Meta_Box_Display {
/**
* A reference to the class that will display the contents in the meta box.
*
* @access private
* @var Post_Messenger
*/
private $messenger;
/**
* Instantiates the object by setting a property equal to that of the class
* responsible for rendering the messages from the post query.
*/
public function __construct() {
$this->messenger = new Post_Messenger( $this );
}
/**
* If there are posts to display, renders them in the metabox. Otherwise, displays
* a note that there are no posts to display.
*/
public function display( $message) {
$this->messenger->get_message();
}
}
Que en el código del cuadro meta, en el código del cuadro meta estamos instanciando explícitamente la visualización para que podamos llamar a su método de visualización cuando sea necesario.
Otra alternativa sería crear una instancia de los dos objetos por separado y luego inyectar la pantalla en el cuadro meta a través de la inyección del constructor o algo similar. Esto tendría que hacerse en una clase de terceros.
Las ventajas de esto provienen de desacoplar un poco más las dos clases. Quizás revisemos cómo hacer esto en la próxima publicación.
Después de eso, debemos continuar y definir la clase responsable de mostrar los mensajes dentro del contexto de Meta Box Display. Esto es lo que llamaremos Post Messenger :
<?php
/**
* Display content for the meta box when requested.
*
* @author Tom McFarlin
* @since 0.2.0
*/
/**
* Retrieves information from the class responsible for querying the database and
* renders it in the context of our meta box when called via the Meta Box Display.
*
* @author Tom McFarlin
* @since 0.2.0
*/
class Post_Messenger {
/**
* A reference to the query resonsible for retrieving post information from
* the database.
*
* @access private
* @var WP_Query
*/
private $query;
/**
* A reference to the message that's displayed in the view of the
* meta box.
*
* @access private
*/
private $message;
/**
* Instantiates the class by setting a reference to the query.
*/
public function __construct() {
$this->query = new Post_Query();
}
/**
* Retrieves the content to be displayed in the meta box.
*/
public function get_message() {
$this->get_description();
if ($this->query->has_posts()) {
$this->get_post_message();
} else {
$this->get_no_posts_message();
}
}
/**
* Displays the description of the content of the meta box.
*
* @access private
*/
private function get_post_message() {
include_once 'post-list.php';
}
/**
* Displays the description of the content of the meta box.
*
* @access private
*/
private function get_description() {
include_once 'message-description.php';
}
/**
* Displays a message of there are no recent posts.
*
* @access private
*/
private function get_no_posts_message() {
include_once 'no-post-list.php';
}
}
Observe aquí que Post Messenger también hace referencia a Post Query. Esta es la clase donde ocurre la comunicación con la base de datos. También he incluido algunas funciones auxiliares para simplificar un poco el código de la vista, como veremos en un momento.
<?php
/**
* Queries the database for three most recent posts.
*
* @author Tom McFarlin
* @since 0.2.0
*/
/**
* Queries the database for three most recent posts. Returns the query to the
* caller so that it can be interrogates for posts or not.
*
* @author Tom McFarlin
* @since 0.2.0
*/
class Post_Query {
/**
* A reference to the WP_Query this class wraps.
*
* @access private
* @var WP_Query
*/
private $query;
/**
* Instantiates the class by preparing instance data and executing the
* query so the display can render the contents.
*/
public function __construct() {
$this->query = null;
$this->get_posts();
}
/**
* Executes the query for returning the post recent posts ordered by date.
*
* @access private
*/
private function get_posts() {
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'orderby' => 'date',
'order' => 'desc',
);
$this->query = new WP_Query( $args );
return $this->query;
}
/**
* A helper function to determine if the query has any posts.
*/
public function has_posts() {
return! $this->query->have_posts();
}
/**
* A helper function for retrieving the next post in the list of
* posts
*/
public function the_post() {
return $this->query->the_post();
}
}
Y eso es todo para las clases principales. Por supuesto, todavía tenemos que hablar de las vistas.
Las vistas
Las vistas son responsables de representar el HTML en el contexto del cuadro meta. No me gusta escribir HTML en el contexto de PHP (tampoco me gusta mezclar PHP en el contexto de HTML, pero esto es inevitable en este proyecto).
Hay algunos grandes proyectos de plantillas para hacer esto más fácil, pero estoy divagando. De todos modos, notará que en el archivo post-list.php, hay referencias a funciones auxiliares en la clase Post Query. Esto es para asegurarme de que no estoy exponiendo demasiadas propiedades y violando la Ley de Deméter.
Echemos un vistazo a ese archivo primero, ya que es el más complicado :
<ol>
<?php while ($this->query->has_posts()) { ?>
<?php $this->query->the_post(); ?>
<li>
<a href="<?php get_the_permalink(); ?>" target="_blank">
<?php echo get_the_title(); ?>
</a>
</li>
<?php } ?>
</ol>Se parece al código estándar de WordPress, pero recuerda que dado que este archivo se llama dentro de Post Messenger, se referirá a la consulta como la consulta envuelta por esa clase.
Los dos últimos archivos son bastante sencillos. Uno de ellos proporciona una descripción :
<p>
<span class="description">
Displays up to the three most recent posts.
</span><!-- .description -->
</p>El otro proporciona un mensaje cuando no hay publicaciones :
<p>There are no recent posts.</p>Aparte de eso, la funcionalidad básica está hecha.
Arrancando el complemento
Lo último que debemos hacer es iniciar el complemento. Para hacer esto, modificamos el código en el archivo del complemento principal para que se vea así :
<?php
/**
* Three Recent Posts
*
* @package TRP
* @author Tom McFarlin
* @copyright 2017 Tom McFarlin
* @license MIT
*
* @wordpress-plugin
* Plugin Name: Three Recent Posts
* Plugin URI: https://tommcfarlin.com/three-recent-posts/
* Description: Displays the three mot recent posts in your post editor screen.
* Version: 0.2.0
* Author: Tom McFarlin
* Author URI: https://tommcfarlin.com
* Text Domain: three-recent-posts
* License: GPL
* License URI: http://www.gnu.org/licenses/gpl-3.0.txt
*/
include 'class-meta-box.php';
include 'class-meta-box-display.php';
include 'class-post-messenger.php';
include 'class-post-query.php';
add_action( 'add_meta_boxes', 'trp_start' );
/**
* Starts the plugin.
*/
function trp_start() {
$meta_box = new Meta_Box();
$meta_box->init();
}
Eso se conectará a WordPress, creará una instancia de nuestro complemento y luego lo pondrá en marcha. Cuando lo ejecuta dentro de su instalación de WordPress, debería verse exactamente como lo hizo durante la primera versión.
La única diferencia es que ahora tenemos las cosas organizadas en clases en lugar de funciones individuales.
notas
Primero, hay oportunidades para la refactorización aquí que reducirían aún más el desacoplamiento (como diferentes tipos de inyección de dependencia, etc.), pero el propósito de esta serie no es cubrir eso.
En cambio, es tomar la idea de ver complementos escritos por muchas funciones de procedimiento y luego dividirlos en clases más conceptuales que encapsulen sus responsabilidades.
En segundo lugar, si revisa el código fuente en el repositorio de esta versión del proyecto, verá que también presenté composer.json. Esto es para que pueda aprovechar PHP CodeSniffer y los estándares de codificación de WordPress al escribir código.
En la última parte de la serie, repasaremos el espacio de nombres y reorganizaremos los archivos. Si el tiempo lo permite, incluiremos un cargador automático para que no tengamos que incluir archivos manualmente en la parte superior de nuestro archivo de complemento.
Finalmente, fusioné este código en maestro y lo etiqueté como 0.2.1 (ya que tuve que hacer una pequeña revisión) ya que todavía es un trabajo en progreso.
Publicaciones de la serie
- Creación rápida de prototipos con WordPress: del concepto al complemento
- Prototipos Rápidos con WordPress: Análisis de Concepto
- Creación rápida de prototipos: Prototipo a código, Parte 1
- Creación rápida de prototipos: de prototipo a código, parte 2
- Creación rápida de prototipos: Introducción a la carga automática