Prototipagem Rápida com WordPress: Do Conceito ao Plugin
Eu falei sobre o uso do WordPress como uma ferramenta para desenvolvimento rápido de aplicativos em um artigo anterior.
Mas quanto mais eu trabalho com o WordPress e quanto mais código vejo, mais potencial percebo que ele tem tanto como plataforma para prototipagem rápida quanto para levar esses protótipos para aplicativos totalmente desenvolvidos.
Esses plugins podem ser aplicativos da web, plugins, temas, sites, o que for. Para os propósitos deste post, não importa. Em vez disso, o que importa é que, por exemplo:
- você tem uma ideia para um plugin,
- você quer ver como isso pode funcionar no WordPress,
- você rapidamente monta algo,
- você começa a refiná-lo.
Para muitos que estão se envolvendo em um desenvolvimento mais sério do WordPress, achei que valeria a pena dar uma olhada em como é isso. Ou seja, vou pegar uma ideia para um plugin, prototipá-lo e depois refiná-lo em um plugin bem organizado e orientado a objetos.
Então, na próxima série de artigos, vou percorrer esse processo.
Prototipagem Rápida com WordPress: O Conceito
Embora isso nem sempre seja o caso, os conceitos iniciais para, digamos, um plug-in surgirão da necessidade de algo que você pode querer para si mesmo ou para outra pessoa.
Se você é como eu, ajuda a esboçar algumas ideias iniciais de como isso pode funcionar e fazer as anotações necessárias que ajudarão no desenvolvimento.
Minhas habilidades de design afiadas para o protótipo.
Claro, para outros, eles podem optar por ir direto para o IDE e começar a trabalhar no código. E como, nesta fase, é apenas um protótipo rápido, não há nada de errado com isso.
Como você pode ver no esboço acima, estou procurando escrever um pequeno plugin que exibirá meus três posts mais recentes em uma meta box.
A ideia por trás do plugin é esta:
- Quando estou escrevendo uma postagem, ter uma referência fácil às minhas três postagens mais recentes me dará a capacidade de vincular facilmente a elas quando quiser compartilhar meu conteúdo nas redes sociais.
Talvez o propósito do plugin pareça bobo; talvez não. Lembre-se de que o que quer que você escolha construir deve ser algo benéfico tanto para você quanto para o seu público. Se outra pessoa não entender, tudo bem.
Iniciando o processo
Agora que temos uma ideia básica, sabemos que vamos precisar de algumas coisas:
- O arquivo de plugin para exibição na tela WordPress Plugin,
- Uma meta box para exibir as postagens,
- Uma consulta para recuperar as postagens,
- Uma maneira de exibir uma mensagem se não houver postagens para exibir.
Através do uso de alguns ganchos básicos e APIs do WordPress, podemos montar algo rapidamente. Veja como:
O cabeçalho do plug-in
Lembre-se que o cabeçalho do plugin é responsável por exibir o conteúdo do plugin – seu título, descrição, versão e autor – na tela do plugin. Certifique-se de que seja conciso, descritivo e direto ao ponto.
<?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
*/Depois que isso for escrito, o plugin aparecerá na área de administração do WordPress, mas na verdade não fará nada. Então vamos dar ao plugin alguma funcionalidade real.
A Caixa Meta
Primeiro, precisamos registrar uma meta box. Podemos usar o gancho add_meta_boxes para isso. É fácil definir e conectar em nossa meta box. Anote os comentários para cada um dos argumentos do 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.
);
}Observe quase que temos uma função responsável por exibir informações. Temos que definir isso, caso contrário o WordPress tentará disparar uma função que não existe e isso resultará em um erro.
Vamos definir essa função agora :
<?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();
}
}
Agora, se você notar, esta função conta com três funções diferentes para ajudá-la a fazer seu trabalho. Portanto, também precisamos definir essas funções. Idealmente, cada uma dessas funções deve ter um propósito de função, no entanto, como estamos prototipando rapidamente este projeto, podemos ter um pouco mais de trabalho por função do que o normal.
Consulta de postagens
Primeiro, precisamos consultar posts. Para fazer isso, vamos aproveitar 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 retornamos a instância do objeto de consulta. Faremos mais com isso momentaneamente.
Exibindo um resultado
Se houver postagens para exibir, usaremos uma função para iterar pelas postagens que a instância de WP_Query encontrou e renderizar o permalink e o título em uma 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;
}
Observe que isso listará até três, mas não necessariamente um total de três.
Exibindo nenhum resultado
Se não houver resultados, precisamos exibir uma mensagem ao usuário informando que a consulta não encontrou postagens. O código pode ser algo assim :
<?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;
}
Claro, você pode personalizar a mensagem para isso por conta própria.
Prototipagem Rápida, Feito.
Neste ponto, há um plugin totalmente funcional. Não é sem problemas, no entanto:
- Estamos misturando HTML com nosso PHP, o que resulta em um acoplamento mais apertado do que o necessário,
- O HTML não é higienizado ou seguro de forma alguma,
- Não há absolutamente nenhuma orientação a objetos para essas funções que, embora alguns possam argumentar que é desnecessária, torna isso altamente não modular.
Mas o objetivo desta série é pegar um protótipo rápido e movê-lo para um plug-in de nível mais profissional. Então nós fizemos a primeira parte e agora é hora de começar a passar para a segunda fase.
Enquanto isso, você pode acompanhar o desenvolvimento deste plugin no GitHub. Estarei marcando cada lançamento que corresponde a uma postagem no blog. Portanto, este post em particular pode ser encontrado na tag 0.1.0 .
A ramificação master também incluirá a versão mais recente de todo o código mesclado e a ramificação de desenvolvimento incluirá o código em que estou trabalhando, mas não está completo (nem estável).
E vou começar a fazer isso no próximo post.
Postagens da série
- Prototipagem Rápida com WordPress: Do Conceito ao Plugin
- Prototipagem Rápida com WordPress: Análise de Conceito
- Prototipagem Rápida: Protótipo para Código, Parte 1
- Prototipagem Rápida: Protótipo para Código, Parte 2
- Prototipagem Rápida: Apresentando o Autoloading