Prototipazione rapida: da prototipazione a codice, parte 1
Per quanto riguarda i prototipi rapidi e WordPress, finora abbiamo fatto due cose:
A questo punto, abbiamo fatto abbastanza lavoro per giustificare l’inizio del refactoring del nostro codice. Cioè, inizieremo a convertire il prototipo in codice. Ma questo è qualcosa che dovrà essere fatto in due fasi.
Innanzitutto, introdurremo semplicemente classi che rappresentano i diagrammi del post precedente e che incapsulano la responsabilità di ogni progetto.
Successivamente, esamineremo l’organizzazione del codice in spazi dei nomi e pacchetti. Prima di poterlo fare, però, dobbiamo assicurarci che il codice sia orientato agli oggetti e rimanga funzionale. Ecco cosa accadrà in questo post.
Prototipo da codificare
Se hai letto i post precedenti, nota che ho intenzione di seguire l’organizzazione che ho delineato nell’ultimo post. Non devi seguire questo particolare design, ovviamente.
Una parola sul controllo del codice sorgente
Se stai usando il controllo del codice sorgente, è qui che ti consiglio di creare un ramo del ramo principale (se stai usando Git) in modo da poter svolgere il tuo lavoro senza gravare sulla versione stabile del codice.
Questo è un po’ oltre lo scopo della serie, quindi se non stai usando il controllo del codice sorgente, non preoccuparti. Se lo sei, sto optando per sviluppare come nome di questo ramo. Lo unirò di nuovo al master una volta che sarò sicuro che sia funzionante.
Scrivere codice
Come per il lavoro abbozzato ieri, creerò due classi:
- la classe meta box,
- la classe di visualizzazione meta box.
Ci sarà del riutilizzo del codice da ciò che abbiamo già visto, come vedrai nel codice seguente.
Il codice
Innanzitutto, la nostra meta box :
<?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'
);
}
}
E poi, il nostro display :
<?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();
}
}
Quello che nel codice della meta box, nel codice della meta box, stiamo creando un’istanza esplicita del display in modo che possiamo chiamarlo come metodo di visualizzazione quando necessario.
Un’altra alternativa sarebbe quella di istanziare i due oggetti separatamente e quindi iniettare il display nella meta box tramite l’iniezione del costruttore o qualcosa di simile. Questo dovrebbe essere fatto in una classe di terze parti.
I vantaggi di questo derivano dal disaccoppiare un po’ di più le due classi. Forse esamineremo come farlo nel prossimo post.
Dopodiché, dobbiamo andare avanti e definire la classe responsabile della visualizzazione dei messaggi nel contesto del Meta Box Display. Questo è ciò che chiameremo 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';
}
}
Si noti qui che Post Messenger fa riferimento anche a Post Query. Questa è la classe in cui avviene la comunicazione al database. Ho anche incluso alcune funzioni di supporto per rendere il codice di visualizzazione un po’ più semplice, come vedremo tra poco.
<?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();
}
}
E questo è tutto per le classi principali. Naturalmente, dobbiamo ancora parlare delle opinioni.
Le visualizzazioni
Le viste sono responsabili del rendering dell’HTML nel contesto della meta box. Non mi piace scrivere HTML nel contesto di PHP (né mi piace mischiare PHP nel contesto di HTML, ma questo è inevitabile in questo progetto).
Ci sono alcuni grandi progetti di modelli per renderlo più facile, ma sto divagando. Ad ogni modo, noterai che nel file post-list.php ci sono riferimenti a funzioni di supporto nella classe Post Query. Questo per assicurarmi di non esporre troppe proprietà e di violare la legge di Demetra.
Diamo prima un’occhiata a quel file poiché è il più complicato :
<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>Assomiglia al codice standard di WordPress, ma ricorda che poiché questo file è chiamato all’interno di Post Messenger, si riferirà alla query come alla query che è racchiusa da quella classe.
Gli ultimi due file sono abbastanza semplici. Uno di questi fornisce una descrizione :
<p>
<span class="description">
Displays up to the three most recent posts.
</span><!-- .description -->
</p>L’altro fornisce un messaggio quando non ci sono post :
<p>There are no recent posts.</p>A parte questo, la funzionalità di base è stata eseguita.
Avvio del plug-in
L’ultima cosa che dobbiamo fare è avviare il plugin. Per fare ciò, modifichiamo il codice nel file del plugin principale in modo che appaia così :
<?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();
}
Ciò si collegherà a WordPress, istanzia il nostro plug-in e quindi lo metterà in moto. Quando lo esegui all’interno della tua installazione di WordPress, dovrebbe apparire esattamente come nella prima versione.
L’unica differenza è che ora abbiamo le cose organizzate in classi piuttosto che in singole funzioni.
Appunti
In primo luogo, ci sono opportunità per il refactoring qui che ridurrebbe ulteriormente il disaccoppiamento (come diversi tipi di iniezione di dipendenza, ecc.), Ma lo scopo di questa serie non è quello di coprirlo.
Invece, è prendere l’idea di vedere plugin scritti da molte funzioni procedurali e poi suddividerli in classi più concettuali che incapsulano le loro responsabilità.
In secondo luogo, se rivedi il codice sorgente nel repository per questa versione del progetto, vedrai che ho introdotto anche composer.json. Questo è così che posso sfruttare PHP CodeSniffer e gli standard di codifica di WordPress durante la scrittura del codice.
Nell’ultima parte della serie, analizzeremo lo spazio dei nomi e riorganizzeremo i file. Se il tempo lo consente, includeremo un caricatore automatico in modo da non dover includere manualmente i file nella parte superiore del nostro file di plug-in.
Infine, ho unito questo codice in master e l’ho etichettato come 0.2.1 (poiché ho dovuto fare un piccolo aggiornamento rapido) poiché è ancora un lavoro in corso.
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