Successivamente, continueremo a creare funzionalit\u00e0 per l’area amministrativa del widget. Successivamente, rivolgeremo la nostra attenzione al lato pubblico del widget e alla funzionalit\u00e0 di serializzazione.<\/p>\n<\/blockquote>\n
E questo ci prepara esattamente a dove siamo diretti in questo particolare post. Vale a dire, scriveremo un front-end amministrativo che ci consentir\u00e0 di:<\/p>\n
- \n
- definire un titolo per il widget,<\/li>\n
- definire il contenuto di testo per il widget,<\/li>\n
- e alternare se vogliamo o meno mostrare il titolo.<\/li>\n<\/ul>\n
Non \u00e8 pensato per essere innovativo n\u00e9 \u00e8 pensato per essere il tipo di widget che chiunque altro potrebbe voler vendere. Invece, ha lo scopo di mostrare come possiamo prendere ci\u00f2 che abbiamo per creare qualcosa di simile a ci\u00f2 che abbiamo gi\u00e0 visto in WordPress e come impieghiamo solide pratiche di programmazione.<\/p>\n
L’interfaccia utente: un primo passaggio<\/h3>\n
Dopo il nostro lavoro l’ultima volta, abbiamo un widget che appare nell’area amministrativa di WordPress e pu\u00f2 anche essere spostato in una barra laterale o in un’altra area con widget; tuttavia, in realt\u00e0 non fa nulla.<\/p>\n
Per ora, andiamo avanti e aggiungiamo tre elementi all’interfaccia utente:<\/p>\n
- \n
- aggiungere un input di testo per il titolo del widget,<\/li>\n
- includere un elemento textarea per visualizzare quello che potrebbe essere un paragrafo di testo,<\/li>\n
- e infine, aggiungi una casella di controllo per alternare le informazioni sul titolo.<\/li>\n<\/ol>\n
Per fare ci\u00f2, dovremo modificare un file nella\u00a0 directory Views<\/strong>. Vale a dire, aggiorneremo il\u00a0 file Admin.php<\/strong>. Inizieremo con gli elementi<\/a> esattamente come necessario senza markup estraneo.<\/p>\n
<input type=\"text\" name=\"widget-title\" value=\"\" \/>\n\n<textarea name=\"widget-content\"><\/textarea>\n\n<label>\n <input\n type=\"checkbox\"\n value=\"1\"\n name=\"widget-title-enabled\"\n \/>\n Display Title?\n<\/label><\/code><\/pre>\nNon servir\u00e0 ancora molto da guardare sul front-end, ma ci sta avvicinando a dove vogliamo essere.<\/p>\n
Una classe per gli amministratori<\/h3>\n
Successivamente, vogliamo assicurarci di rimanere coerenti con il mantenimento di un alto livello di coesione con le nostre classi. Ci\u00f2 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.<\/p>\n
A tal fine, creeremo una seconda classe chiamata WidgetAdmin<\/strong> nella\u00a0 directory e nello spazio dei nomi di WordPress<\/strong>.<\/p>\n
In questo file, includeremo il seguente codice<\/a> :<\/p>\n
<?php\n\n\/*\n * This file is part of WordPress Widget Boilerplate\n * (c) Tom McFarlin <tom@tommcfarlin.com>\n *\n * This source file is subject to the GPL license that is bundled\n * with this source code in the file LICENSE.\n *\/\n\nnamespace WordPressWidgetBoilerplateWordPress;\n\n\/**\n * Manages the administrative functionality of the widget.\n *\/\nclass WidgetAdmin extends Widget\n{\n \/**\n * {@inheritdoc}\n *\/\n public function __construct($widgetSlug)\n {\n parent::__construct($widgetSlug);\n }\n\n \/**\n * Displays the administrative view of the form and includes the options\n * for the instance of the widget as arguments passed into the function.\n *\n * @param array $instance the options for the instance of this widget.\n *\/\n public function form($instance)\n {\n include plugin_dir_path(__FILE__).'Views\/Admin.php';\n }\n}\n<\/code><\/pre>\nQuindi, nel codice originale per creare un’istanza del nostro widget, cambieremo questa riga<\/a> :<\/p>\n
<?php\n\n\/**\n * Registers the core Widget class using the WordPress APIs.\n *\/\npublic function load()\n{\n register_widget(new Widget('widget-name'));\n}<\/code><\/pre>\nPer assomigliare a questo<\/a> :<\/p>\n
<?php\n\/**\n * Registers the core Widget class using the WordPress APIs.\n *\/\npublic function load()\n{\n register_widget(new WidgetAdmin('widget-name'));\n}<\/code><\/pre>\nNei prossimi articoli, questo continuer\u00e0 ad evolversi ma, come puoi vedere, ci stiamo assicurando di avere un’unica classe base di funzionalit\u00e0 per parlare con WordPress e una classe specifica per il rendering del modulo amministrativo.<\/p>\n
L’interfaccia utente: un secondo passaggio<\/h3>\n
Infine, ripuliamo il modulo in modo che abbia un po’ pi\u00f9 di solida UX che si integra bene con l’area di amministrazione di WordPress nel suo insieme.<\/p>\n
Prendi il seguente codice<\/a> :<\/p>\n
<input type=\"text\" name=\"widget-title\" value=\"\" \/>\n\n<textarea name=\"widget-content\"><\/textarea>\n\n<label>\n <input\n type=\"checkbox\"\n value=\"1\"\n name=\"widget-title-enabled\"\n \/>\n Display Title?\n<\/label><\/code><\/pre>\n
![\"Widget](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-160909-61e71613309d7.png\")
<\/a><\/p>\n