Prototipazione rapida con WordPress: dal concetto al plug-in
Ho parlato dell’utilizzo di WordPress come strumento per lo sviluppo rapido di applicazioni in un articolo precedente.
Ma più a lungo lavoro con WordPress e più codice vedo, maggiore è il potenziale che ha sia come piattaforma per la prototipazione rapida che per portare quei prototipi ad applicazioni completamente sviluppate.
Questi plugin possono essere applicazioni web, plugin, temi, siti web, qualunque cosa. Ai fini di questo post, non importa. Quello che invece importa è che ad esempio:
- hai un’idea per un plugin,
- vuoi vedere come potrebbe funzionare all’interno di WordPress,
- metti insieme qualcosa velocemente,
- inizi a perfezionarlo.
Per molti che si stanno impegnando per uno sviluppo più serio di WordPress, ho pensato che valesse la pena dare un’occhiata a come appare. Vale a dire, prenderò un’idea per un plug-in, lo prototiporrò e poi lo perfezionerò in un plug-in ben organizzato e orientato agli oggetti.
Quindi, nella prossima serie di articoli, analizzerò questo processo.
Prototipazione rapida con WordPress: il concetto
Anche se questo non è sempre il caso, i concetti iniziali per, diciamo, un plug-in verranno fuori dal bisogno di qualcosa che potresti desiderare per te stesso o per qualcun altro.
Se sei come me, aiuta a abbozzare alcune idee iniziali su come potrebbe funzionare e prendere tutte le note necessarie che aiuteranno nello sviluppo.
Le mie acute capacità di progettazione per il prototipo.
Naturalmente, per gli altri, possono scegliere di passare direttamente all’IDE e iniziare a lavorare sul codice. E poiché, in questa fase, è solo un prototipo rapido, non c’è niente di sbagliato in questo.
Come puoi vedere dallo schizzo sopra, sto cercando di scrivere un piccolo plugin che visualizzerà i miei tre post più recenti in una meta box.
L’idea alla base del plugin è questa:
- Quando scrivo un post, avere un facile riferimento ai miei tre post più recenti mi darà la possibilità di collegarmi facilmente a loro quando voglio condividere i miei contenuti sui social.
Forse lo scopo del plugin sembra sciocco; forse no. Ricorda che qualunque cosa tu scelga di costruire dovrebbe essere qualcosa di vantaggioso sia per te che per il tuo pubblico. Se qualcun altro non lo capisce, va bene.
Avvio del processo
Ora che abbiamo un’idea di base in atto, sappiamo che avremo bisogno di alcune cose:
- Il file del plug-in da visualizzare nella schermata del plug-in di WordPress,
- Una meta box per visualizzare i post,
- Una query per recuperare i post,
- Un modo per visualizzare un messaggio se non ci sono post da visualizzare.
Attraverso l’uso di alcuni hook di base e API di WordPress, possiamo mettere insieme qualcosa, ehm, rapidamente. Ecco come:
L’intestazione del plugin
Ricorda che l’intestazione del plug- in è responsabile della visualizzazione del contenuto del plug-in – titolo, descrizione, versione e autore – sullo schermo del plug-in. Assicurati che sia conciso, descrittivo e al punto.
<?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 volta scritto, il plugin apparirà nell’area di amministrazione di WordPress, ma in realtà non farà nulla. Quindi diamo al plugin alcune funzionalità effettive.
La Meta Box
Innanzitutto, dobbiamo registrare una meta box. Possiamo usare l’ hook add_meta_boxes per questo. È facile da definire e cablare sulla nostra meta box. Prendere nota dei commenti per ciascuno degli argomenti del metodo.
<?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.
);
}Si noti quasi che abbiamo una funzione responsabile della visualizzazione delle informazioni. Dobbiamo definire questo altrimenti WordPress tenterà di attivare una funzione che non esiste e questo risulterà in un errore.
Definiamo ora quella funzione :
<?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();
}
}
Ora, se noti, questa funzione si basa su tre diverse funzioni per aiutarla a fare il suo lavoro. Quindi abbiamo anche bisogno di definire quelle funzioni. Idealmente, ciascuna di queste funzioni dovrebbe avere uno scopo funzionale, tuttavia, dato che stiamo rapidamente creando prototipi di questo progetto, potremmo avere un po’ più di lavoro per funzione del solito.
Interrogazione di post
Per prima cosa, dobbiamo interrogare i post. Per fare ciò, sfrutteremo 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;
}
Si noti che si restituisce l’istanza dell’oggetto query. Faremo di più con questo momentaneamente.
Visualizzazione di un risultato
Se ci sono post da visualizzare, useremo una funzione per scorrere i post trovati dall’istanza di WP_Query e renderizzare il permalink e il titolo in un elenco ordinato.
<?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;
}
Nota che questo elencherà fino a tre, ma non necessariamente un totale di tre.
Visualizzazione di nessun risultato
Se non ci sono risultati, dobbiamo mostrare un messaggio all’utente che la query non ha trovato post. Il codice potrebbe assomigliare a questo :
<?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;
}
Naturalmente, puoi personalizzare il messaggio per questo tutto da solo.
Prototipazione rapida, fatto.
A questo punto, c’è un plug-in completamente funzionante. Non è senza problemi, però:
- Stiamo mescolando HTML con il nostro PHP che si traduce in un accoppiamento più stretto del necessario,
- L’HTML non è disinfettato o protetto in alcun modo,
- Non c’è assolutamente alcun orientamento agli oggetti per queste funzioni che, sebbene alcuni possano ritenere non necessario, lo rende altamente non modulare.
Ma lo scopo di questa serie è prendere un prototipo rapido e spostarlo in un plug-in di livello più professionale. Quindi abbiamo fatto la prima parte e ora è il momento di iniziare a passare alla seconda fase.
Nel frattempo, puoi seguire lo sviluppo di questo plugin su GitHub. Taggherò ogni versione che corrisponde a un post del blog. Quindi questo particolare post può essere trovato nel tag 0.1.0.
Il ramo master includerà anche l’ultima versione di tutto il codice unito e il ramo di sviluppo includerà il codice su cui sto lavorando ma non è completo (né stabile).
E inizierò a farlo nel prossimo post.
Messaggi di serie
- Prototipazione rapida con WordPress: dal concetto al plug-in
- Prototipazione rapida con WordPress: analisi concettuale
- Prototipazione rapida: da prototipazione a codice, parte 1
- Prototipazione rapida: dal prototipo al codice, parte 2
- Prototipazione rapida: introduzione del caricamento automatico