Widget WordPress: refactoring, parte 9
Sebbene l’ultimo post di questa serie di refactoring non sia stato incredibilmente lungo, penso che sia stato un po’ denso. Cioè, ha richiesto una discreta quantità di lavoro per ottenere il codice in un posto in cui possiamo lavorarci più facilmente.
Ma questo è tutto: tutto il lavoro che abbiamo fatto dovrebbe rendere più facile andare avanti con il resto del codice che dobbiamo scrivere.
E per assicurarci di sfruttare il lavoro e le basi che abbiamo gettato finora, completeremo la serie con una serie di articoli più brevi e mirati che dovrebbero richiedere meno tempo per essere letti, implementati e capire cosa stiamo facendo con il codice.
The WordPress Widget Boilerplate: Refactoring Parte 9
Richiamo dall’ultimo post:
Successivamente, continueremo a creare funzionalità per l’area amministrativa del widget. Successivamente, rivolgeremo la nostra attenzione al lato pubblico del widget e alla funzionalità di serializzazione.
E questo ci prepara esattamente a dove siamo diretti in questo particolare post. Vale a dire, scriveremo un front-end amministrativo che ci consentirà di:
- definire un titolo per il widget,
- definire il contenuto di testo per il widget,
- e alternare se vogliamo o meno mostrare il titolo.
Non è pensato per essere innovativo né è pensato per essere il tipo di widget che chiunque altro potrebbe voler vendere. Invece, ha lo scopo di mostrare come possiamo prendere ciò che abbiamo per creare qualcosa di simile a ciò che abbiamo già visto in WordPress e come impieghiamo solide pratiche di programmazione.
L’interfaccia utente: un primo passaggio
Dopo il nostro lavoro l’ultima volta, abbiamo un widget che appare nell’area amministrativa di WordPress e può anche essere spostato in una barra laterale o in un’altra area con widget; tuttavia, in realtà non fa nulla.
Per ora, andiamo avanti e aggiungiamo tre elementi all’interfaccia utente:
- aggiungere un input di testo per il titolo del widget,
- includere un elemento textarea per visualizzare quello che potrebbe essere un paragrafo di testo,
- e infine, aggiungi una casella di controllo per alternare le informazioni sul titolo.
Per fare ciò, dovremo modificare un file nella directory Views. Vale a dire, aggiorneremo il file Admin.php. Inizieremo con gli elementi esattamente come necessario senza markup estraneo.
<input type="text" name="widget-title" value="" />
<textarea name="widget-content"></textarea>
<label>
<input
type="checkbox"
value="1"
name="widget-title-enabled"
/>
Display Title?
</label>Non servirà ancora molto da guardare sul front-end, ma ci sta avvicinando a dove vogliamo essere.
Una classe per gli amministratori
Successivamente, vogliamo assicurarci di rimanere coerenti con il mantenimento di un alto livello di coesione con le nostre classi. Ciò significa che non abbiamo bisogno di una singola classe per fare tutto per l’amministrazione, la visualizzazione e tutto il resto del lavoro richiesto dall’API di WordPress.
A tal fine, creeremo una seconda classe chiamata WidgetAdmin nella directory e nello spazio dei nomi di WordPress.
In questo file, includeremo il seguente codice :
<?php
/*
* This file is part of WordPress Widget Boilerplate
* (c) Tom McFarlin <tom@tommcfarlin.com>
*
* This source file is subject to the GPL license that is bundled
* with this source code in the file LICENSE.
*/
namespace WordPressWidgetBoilerplateWordPress;
/**
* Manages the administrative functionality of the widget.
*/
class WidgetAdmin extends Widget
{
/**
* {@inheritdoc}
*/
public function __construct($widgetSlug)
{
parent::__construct($widgetSlug);
}
/**
* Displays the administrative view of the form and includes the options
* for the instance of the widget as arguments passed into the function.
*
* @param array $instance the options for the instance of this widget.
*/
public function form($instance)
{
include plugin_dir_path(__FILE__).'Views/Admin.php';
}
}
Quindi, nel codice originale per creare un’istanza del nostro widget, cambieremo questa riga :
<?php
/**
* Registers the core Widget class using the WordPress APIs.
*/
public function load()
{
register_widget(new Widget('widget-name'));
}Per assomigliare a questo :
<?php
/**
* Registers the core Widget class using the WordPress APIs.
*/
public function load()
{
register_widget(new WidgetAdmin('widget-name'));
}Nei prossimi articoli, questo continuerà ad evolversi ma, come puoi vedere, ci stiamo assicurando di avere un’unica classe base di funzionalità per parlare con WordPress e una classe specifica per il rendering del modulo amministrativo.
L’interfaccia utente: un secondo passaggio
Infine, ripuliamo il modulo in modo che abbia un po’ più di solida UX che si integra bene con l’area di amministrazione di WordPress nel suo insieme.
<input type="text" name="widget-title" value="" />
<textarea name="widget-content"></textarea>
<label>
<input
type="checkbox"
value="1"
name="widget-title-enabled"
/>
Display Title?
</label>E aggiornalo in modo che assomigli a questo :
<div class="widget-content">
<p>
<input
type="text"
name="widget-title"
value=""
placeholder="Widget Title"
class="widefat"
/>
</p>
<p>
<textarea
name="widget-content"
placeholder="Widget Content"
style="width:100%;"></textarea>
</p>
<p>
<input
type="checkbox"
value="1"
name="widget-title-enabled"
class="checkbox"
/>
<label for="widget-title-enabled">Display Title?</label>
</p>
</div><!-- .widget-content -->Supponendo che tutto sia andato bene, ora dovresti vedere qualcosa che assomiglia a questo:
Ed è qui che ci fermeremo con le funzionalità amministrative per questo post. Ricorda che puoi anche tenere traccia di tutto questo nel ramo di sviluppo su GitHub.
Sanificazione e serializzazione
Nel prossimo post, vedremo cosa è necessario per sanificare e serializzare (o pulire e salvare) il contenuto del nostro widget.
Ci assicureremo inoltre di visualizzare le informazioni nell’area amministrativa dopo che le informazioni sono state salvate e recuperate.
Infine, l’eredità e la coesione di classe continueranno ad evolversi ma, per ora, concentrati su ciò che è trattato in questo post e poi continueremo nel prossimo articolo.