Creación rápida de prototipos con WordPress: del concepto al complemento
Hablé sobre el uso de WordPress como una herramienta para el desarrollo rápido de aplicaciones en un artículo anterior.
Pero cuanto más tiempo trabajo con WordPress y más código veo, más potencial me doy cuenta de que tiene tanto como plataforma para la creación rápida de prototipos como para llevar esos prototipos a aplicaciones completamente desarrolladas.
Estos complementos pueden ser aplicaciones web, complementos, temas, sitios web, lo que sea. Para los propósitos de esta publicación, no importa. En cambio, lo que importa es que, por ejemplo:
- tienes una idea para un complemento,
- quieres ver cómo podría funcionar dentro de WordPress,
- rápidamente armas algo,
- comienzas a refinarlo.
Para muchos de los que se están involucrando en un desarrollo de WordPress más serio, pensé que valdría la pena echar un vistazo a cómo se ve esto. Es decir, tomaré una idea para un complemento, crearé un prototipo y luego lo refinaré hasta convertirlo en un complemento bien organizado y orientado a objetos.
Entonces, en la próxima serie de artículos, voy a explicar ese proceso.
Creación rápida de prototipos con WordPress: el concepto
Aunque este no siempre es el caso, los conceptos iniciales para, digamos, un complemento surgirán de la necesidad de algo que puede desear para usted o para otra persona.
Si eres como yo, es útil esbozar algunas ideas iniciales sobre cómo podría funcionar y tomar las notas necesarias que ayudarán en el desarrollo.
Mis agudas habilidades de diseño para el prototipo.
Por supuesto, para otros, pueden optar por saltar directamente al IDE y comenzar a trabajar en el código. Y dado que, en esta fase, es solo un prototipo rápido, no hay nada de malo en eso.
Como puede ver en el boceto anterior, estoy buscando escribir un pequeño complemento que muestre mis tres publicaciones más recientes en un cuadro meta.
La idea detrás del plugin es esta:
- Cuando estoy escribiendo una publicación, tener una referencia fácil a mis tres publicaciones más recientes me dará la capacidad de vincularlas fácilmente cuando desee compartir mi contenido en las redes sociales.
Tal vez el propósito del complemento parezca tonto; tal vez no. Recuerde que lo que sea que elija construir debe ser algo que sea beneficioso tanto para usted como para su audiencia. Si alguien más no lo entiende, está bien.
Comenzando el proceso
Ahora que tenemos una idea básica, sabemos que vamos a necesitar algunas cosas:
- El archivo del complemento para mostrar en la pantalla del complemento de WordPress,
- Un cuadro meta para mostrar las publicaciones,
- Una consulta para recuperar las publicaciones,
- Una forma de mostrar un mensaje si no hay publicaciones para mostrar.
Mediante el uso de algunos ganchos básicos y API de WordPress, podemos armar algo, ejem, rápidamente. Así es cómo:
El encabezado del complemento
Recuerde que el encabezado del complemento es responsable de mostrar el contenido del complemento (su título, descripción, versión y autor) en la pantalla del complemento. Asegúrate de que sea conciso, descriptivo y directo.
<?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/rapid-prototyping/
* Description: Displays the three mot recent posts in your post editor screen.
* Version: 0.1.0
* Author: Tom McFarlin
* Author URI: https://tommcfarlin.com
* Text Domain: three-recent-posts
* License: MIT
* License URI: http://www.gnu.org/licenses/gpl-3.0.txt
*/Una vez escrito esto, el complemento aparecerá dentro del área de administración de WordPress, pero en realidad no hará nada. Entonces, démosle al complemento alguna funcionalidad real.
La metacaja
Primero, necesitamos registrar un meta box. Podemos usar el gancho add_meta_boxes para esto. Es fácil de definir y conectar en nuestro cuadro meta. Tome nota de los comentarios para cada uno de los argumentos del método.
<?php
add_action( 'add_meta_boxes', 'three_recent_posts_meta_box' );
/**
* Registers the Meta Box with WordPress. Defines the ID, title, display function,
* and the post type on which it will live.
*/
function three_recent_posts_meta_box() {
add_meta_box(
'three-recent-posts', // Meta Box ID.
'Three Recent Posts', // Meta Box Title.
'three_recent_posts_display', // Function for rendering the meta box.
'post', // Post type on which this meta box will live.
'side' // Where the meta box will be displayed.
);
}Fíjate casi que tenemos una función encargada de mostrar información. Tenemos que definir esto, de lo contrario, WordPress intentará activar una función que no existe y esto dará como resultado un error.
Definamos esa función ahora :
<?php
/**
* If there are posts to display, renders them in the metabox. Otherwise, displays
* a note that there are no posts to display.
*/
function three_recent_posts_display() {
$query = _three_recent_posts_get();
if ($query->have_posts()) {
_three_recent_posts_show_posts( $query );
} else {
_three_recent_posts_no_posts();
}
}
Ahora, si nota, esta función se basa en tres funciones diferentes para ayudarlo a hacer su trabajo. Así que también necesitamos definir esas funciones. Idealmente, cada una de estas funciones debería tener un propósito de función, sin embargo, dado que estamos creando rápidamente un prototipo de este proyecto, es posible que tengamos un poco más de trabajo por función de lo habitual.
Consulta de publicaciones
Primero, necesitamos consultar las publicaciones. Para hacer esto, aprovecharemos WP_Query.
<?php
/**
* Defines a query for retrieving the three most recent posts and orders them by
* descing date (with the most recent being first).
*
* @return WP_Query $query The query for retrieving the three most recent posts.
*/
function _three_recent_posts_get() {
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'orderby' => 'date',
'order' => 'desc',
);
$query = new WP_Query( $args );
return $query;
}
Observe que devolvemos la instancia del objeto de consulta. Haremos más con esto momentáneamente.
Mostrar un resultado
Si hay publicaciones para mostrar, usaremos una función para recorrer las publicaciones que encontró la instancia de WP_Query y mostrar el enlace permanente y el título en una lista ordenada.
<?php
/**
* Creates the content for the meta box if there are posts to display. Creates a notice
* that up to three posts will be displayed, then links to each of the three most recent
* post.
*
* @param WP_Query $query The query that contains results to render in the display.
*/
function _three_recent_posts_show_posts( $query) {
// There may not always be three posts, so display a message explaining.
$html = '<p>';
$html .= '<span class="description">';
$html .= 'Displays up to the three most recent posts.';
$html .= '</span>';
$html .= '</p>';
// Create an ordered lists of the most recent posts.
$html .= '<ol>';
while ($query->have_posts()) {
$query->the_post();
$html .= '<li>';
$html .= '<a href="'. get_the_permalink(). '">';
$html .= get_the_title();
$html .= '</a>';
$html .= '</li>';
}
$html .= '</ol>';
echo $html;
}
Tenga en cuenta que esto enumerará hasta tres, pero no necesariamente un total de tres.
Mostrar ningún resultado
Si no hay resultados, debemos mostrar un mensaje al usuario de que la consulta no encontró publicaciones. El código puede ser algo como esto :
<?php
/**
* Displays a message in the meta box if there are no recent posts.
*/
function _three_recent_posts_no_posts() {
$html .= '<span class="description">';
$html .= 'There are no recent posts.';
$html .= '</span>';
echo $html;
}
Por supuesto, puede personalizar el mensaje para esto por su cuenta.
Creación rápida de prototipos, listo.
En este punto, hay un complemento con todas las funciones. Sin embargo, no está exento de problemas:
- Estamos mezclando HTML con nuestro PHP, lo que da como resultado un acoplamiento más estrecho de lo necesario,
- El HTML no está desinfectado ni seguro de ninguna manera,
- No hay absolutamente ninguna orientación a objetos para estas funciones que, aunque algunos pueden argumentar que es innecesaria, hace que esto sea muy poco modular.
Pero el objetivo de esta serie es tomar un prototipo rápido y moverlo a un complemento de nivel más profesional. Así que hemos hecho la primera parte y ahora es el momento de comenzar a pasar a la segunda fase.
Mientras tanto, puede seguir el desarrollo de este complemento en GitHub. Estaré etiquetando cada lanzamiento que corresponda a una publicación de blog. Entonces, esta publicación en particular se puede encontrar en la etiqueta 0.1.0 .
La rama maestra también incluirá la última versión de todo el código fusionado y la rama de desarrollo incluirá el código en el que estoy trabajando pero que no está completo (ni es estable).
Y empezaré a hacerlo en el próximo post.
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