Successivamente, esamineremo il rendering dei contenuti sul front-end. Ci stiamo avvicinando alla fine, del refactoring di Boilerplate, ma c’\u00e8 solo un po’ di pi\u00f9 da fare prima di essere pronti per unirlo al ramo principale della codebase.<\/p>\n<\/blockquote>\n
Quindi, in questo post, riprenderemo da l\u00ec. Ora, se hai seguito fino a questo punto, dovresti avere tutto ci\u00f2 di cui hai bisogno dal ramo di sviluppo.<\/p>\n
In caso contrario, assicurati di tirarlo perch\u00e9 \u00e8 l\u00ec che riprenderemo nel resto del post.<\/p>\n
The WordPress Widget Boilerplate: Refactoring Parte 12<\/h2>\n
Ora, quando si tratta di front-end, \u00e8 facile pensare al front-end come a qualsiasi cosa l’utente veda davanti a s\u00e9, indipendentemente dal fatto che si trovi nell’area amministrativa o meno.<\/p>\n
Tuttavia, questa serie \u00e8 stata chiara sul fatto che stiamo dividendo ci\u00f2 che l’utente vede tra l’area amministrativa e l’area pubblica del sito.<\/p>\n
Quindi quello che faremo \u00e8 lavorare sull’area del codice che rende le informazioni per l’utente nell’area pubblica del sito. Inizieremo semplicemente leggendo le informazioni e visualizzandole.<\/p>\n
Quindi nel prossimo post, esamineremo il lavoro con la logica condizionale per quanto riguarda alcune delle opzioni per vedere se c’\u00e8 qualcosa che dobbiamo fare.<\/p>\n
Detto questo, entriamo nel codice.<\/p>\n
Sui dati che mostreremo<\/h3>\n
Ricorda, il widget, a questo punto, ha tre cose che influenzano la sua visualizzazione:<\/p>\n
- \n
- il titolo del widget,<\/li>\n
- il contenuto del widget,<\/li>\n
- un interruttore per decidere se visualizzare o meno il titolo<\/li>\n<\/ol>\n
La terza opzione consiste principalmente nel mostrare come utilizzare un diverso tipo di elemento. Perch\u00e9, tecnicamente, se non volessimo mostrare il titolo del widget, non inseriremmo nulla nel widget.<\/p>\n
Ma penso che aiuti a mostrare come utilizzare diversi tipi di elementi e i loro valori in modo pratico (o semi-pratico).<\/p>\n
Ad ogni modo, detto questo, sappiamo che per ogni data istanza del widget, i dati vengono archiviati con il titolo<\/strong> ,\u00a0 il contenuto<\/strong> e\u00a0 il nome del titolo visualizzato<\/strong> e gli ID forniti da WordPress.<\/p>\n
Pertanto, utilizzeremo quelli nel nostro codice front-end per visualizzare i valori.<\/p>\n
Preparazione delle funzioni di visualizzazione<\/h3>\n
In genere, la\u00a0 funzione widget<\/strong> \u00e8 responsabile della visualizzazione dell’output del widget. Ma una delle cose che abbiamo cercato di fare \u00e8 separare le preoccupazioni del nostro widget in un insieme pi\u00f9 mirato di classi e funzioni.<\/p>\n
La prima cosa che vogliamo fare \u00e8 scrivere una\u00a0 classe WidgetDisplay<\/strong> che si occuper\u00e0, come \u00e8 sicuramente evidente, di visualizzare il contenuto del widget.<\/p>\n
Per ora, questo includer\u00e0 incondizionatamente il titolo, il contenuto e il valore di includere o meno il titolo. WordPress rende disponibili anche alcuni contenuti come il markup che dovrebbero apparire prima del widget e dopo il widget, quindi ci assicureremo di includere anche quello.<\/p>\n
Ma prima, interrompiamo la classe<\/a> :<\/p>\n
<?php\n\nnamespace WordPressWidgetBoilerplateWordPress;\n\nclass WidgetDisplay\n{\n private $widgetSlug;\n\n public function __construct(string $widgetSlug)\n {\n $this->widgetSlug = $widgetSlug;\n }\n\n public function show($args, $instance)\n {\n \/\/ More to come\n }\n}\n<\/code><\/pre>\nDopodich\u00e9, dobbiamo assicurarci di scriverlo anche per le altre classi. Innanzitutto, ci assicureremo di includerlo nella nostra classe Widget<\/a> :<\/p>\n
<?php\npublic function widget($args, $instance)\n{\n return $this->widgetDisplay->show($args, $instance);\n}<\/code><\/pre>\nE poi lo aggiungeremo alla classe WidgetAdmin<\/a> (poich\u00e9 \u00e8 qui che risiedono le funzioni principali dell’API Widget – delega semplicemente la responsabilit\u00e0 alla classe corretta):<\/p>\n
<?php\n\npublic function __construct($widgetSlug)\n{\n parent::__construct($widgetSlug);\n $this->widgetSerializer = new WidgetSerializer($this->getWidgetSlug());\n $this->widgetDisplay = new WidgetDisplay($this->getWidgetSlug());\n}<\/code><\/pre>\nA questo punto, non stiamo ancora visualizzando nulla. Siamo vicini e su questo ci concentreremo presto.<\/p>\n
Visualizzazione dei dati<\/h3>\n
Supponendo che tu sia in grado di aggiungere il codice sopra senza errori, \u00e8 ora di visualizzare il contenuto del widget.<\/p>\n
Possiamo farlo in molti modi, da un semplice var_dump<\/strong> a lavorare effettivamente per visualizzare il contenuto in un modo pi\u00f9 intuitivo. E io sono molto pi\u00f9 un fan di quest’ultimo.<\/p>\n
Quindi facciamolo.<\/p>\n
Nella\u00a0 funzione show<\/strong> della tua\u00a0 classe WidgetDisplay<\/strong>, aggiungi il codice seguente<\/a> :<\/p>\n
<?php\npublic function show($args, $instance)\n{\n include_once 'Views\/Widget.php';\n}<\/code><\/pre>\n
![\"Widget](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-160763-61e7125f80aab.png\")
<\/a><\/p>\n