Lavorare con classi, modelli e parziali in WordPress
Quando mi sono seduto per iniziare questo post, avevo programmato di scrivere qualcosa di molto più coinvolto che io condividerò. Inizialmente, volevo esaminare una di queste due cose:
- La guida completa alla creazione di un ambiente di sviluppo,
- Integrazione degli strumenti di qualità del codice in PhpStorm
Il primo sarebbe concentrarsi su una varietà di altre cose di cui ho parlato, collegarle tutte insieme e avere un riferimento definitivo. Ma questo è qualcosa che voglio dedicare del tempo a mettere insieme per assicurarmi che sia fatto bene.
Il secondo è quello che ritengo importante, ma sono in una fase un po’ di transizione con alcuni dei miei strumenti. Fino a quando non sarà fatto, preferirei non scriverne.
Anche ancora, c’è sempre qualcosa da coprire, giusto? Quindi oggi ho optato per qualcosa di più semplice: abbattere l’uso di classi, modelli e parziali nei plugin di WordPress usando un semplice esempio.
Classi, modelli e parziali in WordPress
Per questo particolare argomento, una domanda immediata che potrebbe venire in mente è semplice: perché preoccuparsi di parlarne?
Perché è il 2018 e stiamo ancora vedendo un mix grossolano di PHP, CSS, markup e JavaScript in un unico file. Questo non è per bussare ad altre tecnologie che lo fanno per impostazione predefinita (come React). Sto parlando specificamente dei plugin di WordPress e della scrittura di codice gestibile in modo tale che sia facile [ovviamente] mantenere, scrivere e leggere.
Un esempio pratico
Diciamo che stai lavorando su una pagina di sottomenu per qualcosa che apparirà in un menu personalizzato. Registra la tua pagina utilizzando l’API di WordPress:
<?php
public function addMenuPage()
{
add_menu_page(
'Acme Menu',
'Acme Menu',
'manage_options',
'acme-custom-menu',
array($this, 'display'),
'dashicons-dashboard',
30
);
add_submenu_page(
'acme-custom-menu',
'Acme Menu',
'Acme Menu',
'Acme Menu',
'acme-custom-menu',
array($this, 'display')
);
}
Ma quando si imposta una funzione di richiamata per visualizzare la pagina, non si utilizza la funzione per mescolare insieme tutte le varie lingue. Invece, lo usi per includere un file.
<?php
public function display()
{
include_once $this->pluginPath. 'views/acme-settings.php';
}
Nota che nel file sopra, faccio riferimento a una proprietà $this->pluginPath. Questo è impostato nel costruttore della classe in modo che io possa accedere facilmente alla radice del plugin.
Ad ogni modo, come potrebbe essere questo file?
Un modello e un parziale
In questo caso, presumo che il tuo modello sia ciò che fornirà informazioni all’utente e richiederà il loro input. Il parziale sarà responsabile della visualizzazione di un messaggio di successo, errore o avviso all’utente.
Un modello
Per semplificare, manterrò sia il modello che il parziale il più snelli possibile. In questo caso, supponiamo di eseguire il rendering di una pagina, chiedere all’utente di salvare un valore e, se il valore viene salvato correttamente (e quindi esiste nella tabella wp_options ), visualizzeremo il messaggio di successo.
Questo significa:
- il modello visualizzerà il titolo della pagina, le informazioni, l’input e il pulsante di salvataggio,
- il parziale visualizzerà il messaggio di successo quando necessario.
Dai un’occhiata al codice per il modello qui sotto:
<?php
/**
* Renders the settings page for the plugin.
*/
?>
<div class="wrap">
<h1 class="wp-heading-inline"><?php echo get_admin_page_title(); ?></h1>
<?php if ($this->showSuccessMessage()) { ?>
<?php include_once 'partials/settings-saved.php'; ?>
?>
<div id="acme-settings-schedule">
<form id="acme-form" method="post" action="<?php echo esc_html(admin_url('admin-post.php')); ?>"">
<!-- This is where your settings go. -->
<p>
<?php
submit_button(
'Save',
'primary',
'acme-save-settings',
false
);
wp_nonce_field(
'acme-save',
'acme-save-nonce'
);
?>
</p>
</form>
</div>
</div>
Nota che, sì, ha un input, un pulsante di salvataggio e un nonce che sono tutti importanti (ma oltre lo scopo di questo post) per salvare le informazioni.
Ma nota anche che ha una funzione di supporto che utilizzo per verificare la presenza di informazioni salvate con successo. Questa funzione risiede nella stessa classe responsabile del rendering del modello.
Parziale
Sembra qualcosa del genere:
<?php
public function showSuccessMessage()
{
return (false !== get_option('acme_custom_setting'));
}
E il parziale risultante è molto semplice:
<?php
/**
* Renders the success message if the option has been properly saved.
*/
?>
<div class="notice-success notice is-dismissible">
<p>Your settings have been successfully saved.</p>
<button type="button" class="notice-dismiss">
<span class="screen-reader-text">Dismiss this notice.</span>
</button>
</div>
Naturalmente, l’implementazione della funzione può variare. Lo scopo non è tanto quello di mostrare come implementare la funzione, ma come sfruttare una funzione per controllare le informazioni per visualizzare un parziale.
C’è di più (ma non qui)
Forse questo è qualcosa che dovrebbe essere inserito all’inizio dell’articolo.
Ad essere onesti, penso che sia una di quelle cose in cui alcuni potrebbero trovare più utile vederlo dall’inizio (ma poi mancano il contesto del codice) e altri lo trovano più utile alla fine perché possono vedere come si adatta tutto insieme.
In ogni caso, spero che alla fine fornisca chiarezza su come tutto questo si incastri.
Inoltre, c’è molto spazio in posti per cose da personalizzare come:
- verificando che l’utente abbia il permesso di salvare,
- verificando il valore nonce,
- sanificazione e validazione dei dati,
- determinare cosa costituisce successo, avvisi ed errori.
Ma se devo coprire tutto quanto sopra, stiamo guardando un post straordinariamente lungo o una lunga serie di post. Non è qualcosa a cui sono contrario, ma è anche qualcosa che ora non vale lo sforzo a questo punto.
Non esitare mai a offrire un feedback. Ma nel frattempo, spero che tutto questo ti aiuti a darti una base su cui costruire quando lavori al tuo prossimo progetto.