{"id":231561,"date":"2022-12-19T17:25:00","date_gmt":"2022-12-19T14:25:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=231561"},"modified":"2022-12-19T17:25:52","modified_gmt":"2022-12-19T14:25:52","slug":"widget-wordpress-refactoring-parte-8","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/widget-wordpress-refactoring-parte-8\/","title":{"rendered":"Widget WordPress: refactoring, parte 8"},"content":{"rendered":"\n<p>Quando si tratta di refactoring di WordPress Widget Boilerplate, abbiamo lavorato molto per portare la base di codice a uno standard pi\u00f9 orientato agli oggetti. Inoltre, abbiamo introdotto una variet\u00e0 di altri strumenti che ci consentono di portare il nostro codice a standard pi\u00f9 moderni<\/p>\n<p>Ora che abbiamo passato del tempo a farlo, \u00e8 ora di tornare al codice e iniziare a refactoring in modo tale da consentire l&#8217;uso di <a href=\"https:\/\/wordpress.mediadoma.com\/it\/classi-astratte-parte-1-comportamento-astratto\/\" title=\"classi\">classi<\/a> e abbonati astratti (che funzionano come parte del <a href=\"https:\/\/wordpress.mediadoma.com\/it\/le-basi-degli-hook-dazione-in-wordpress\/\" title=\"modello di progettazione basato sugli eventi\">modello di progettazione basato sugli eventi<\/a> ).<\/p>\n<p>Alla fine del post precedente ho scritto:<\/p>\n<blockquote>\n<p>Nei prossimi post, vedremo come implementare gli abbonati per il lato pubblico del sito (ovvero, dove viene visualizzato il contenuto del widget). E faremo lo stesso per l&#8217;area di amministrazione del sito.<\/p>\n<\/blockquote>\n<p>Quindi in questo post faremo esattamente questo. In particolare, inizieremo lavorando su un abbonato per il widget e quindi facendo in modo che il widget di base venga visualizzato prima sul lato amministrativo del sito.<\/p>\n<h2>The WordPress Widget Boilerplate: Refactoring, parte 8<\/h2>\n<p>Il motivo per cui sono interessato a concentrarmi principalmente sul lato amministrativo del sito \u00e8 che ci consente di:<\/p>\n<ul>\n<li>ottenere un controllo su come funzionano gli abbonati,<\/li>\n<li>guarda come dovr\u00e0 essere organizzata la base di codice,<\/li>\n<li>codificare alcune informazioni prima di lavorare con la serializzazione.<\/li>\n<\/ul>\n<p>Una volta che tutto questo sar\u00e0 a posto, saremo in una buona posizione per rivolgere la nostra attenzione a cose pi\u00f9 avanzate. Vale a dire, saremo in grado di introdurre abbonati per la visualizzazione delle informazioni nell&#8217;area di amministrazione e abbonati per la sanificazione, serializzazione, recupero, convalida e visualizzazione dei dati.<\/p>\n<p>Ma prima, eseguiamo il lavoro necessario per impostare una nuova classe, configurare il caricatore automatico e visualizzare il contenuto nell&#8217;area amministrativa del sito.<\/p>\n<h3>1 L&#8217;abbonato astratto<\/h3>\n<p><a href=\"https:\/\/gist.github.com\/tommcfarlin\/f2e397e634ed2422d4840e6402a59fb9#file-00-abstract-subscriber-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Esaminiamo<\/a> prima l&#8217;abbonato astratto poich\u00e9 questo \u00e8 ci\u00f2 che tutti gli abbonati implementeranno.<\/p>\n<pre><code>&lt;?php\n\n\/*\n * This file is part of WordPress Widget Boilerplate\n * (c) Tom McFarlin &lt;tom@tommcfarlin.com&gt;\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 WordPressWidgetBoilerplateSubscriber;\n\n\/**\n * An abstract implementation of a subscriber that requires a hook and the ability to\n * start the class.\n *\/\nabstract class AbstractSubscriber\n{\n    \/**\n     * @var string a reference to the hook to which the subscriber should be registered\n     *\/\n    protected $hook;\n\n    \/**\n     * @param string $hook the hook to which the subscriber is registered\n     *\/\n    public function __construct(string $hook)\n    {\n        $this-&gt;hook = $hook;\n    }\n\n    \/**\n     * @return string the hook to which the subscriber is registered\n     *\/\n    public function getHook(): string\n    {\n        return $this-&gt;hook;\n    }\n\n    \/**\n     * Implements the domain logic for the concrete class implementating this subcriber.\n     *\/\n    abstract public function load();\n}\n<\/code><\/pre>\n<p>Si noti che ha due funzioni pubbliche: il costrutto che imposta l&#8217;hook e una funzione per recuperare l&#8217;hook. Ha anche una funzione di caricamento astratta che \u00e8 dove qualsiasi classe che estende questa classe implementa la sua funzionalit\u00e0 specifica.<\/p>\n<p>Ricordiamo che a causa del modo in cui WordPress gestisce azioni e filtri, tutto \u00e8 collegato a uno specifico hook (sia quelli <a href=\"https:\/\/codex.wordpress.org\/Plugin_API\/Hooks\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">che WordPress definisce<\/a> sia quelli personalizzati).<\/p>\n<h3>2 Lo spazio dei nomi di WordPress<\/h3>\n<p>Ogni volta che lavoro su funzionalit\u00e0 strettamente legate a WordPress, cerco di assicurarmi di inserirle in uno spazio dei nomi di WordPress. Questo indica a me e ad altri sviluppatori che qualunque cosa risieda in questo spazio dei nomi non pu\u00f2 essere separata dall&#8217;applicazione principale.<\/p>\n<p>Quindi all&#8217;interno della\u00a0 directory <strong>src<\/strong>, crea una\u00a0 directory di <strong>WordPress<\/strong>. \u00c8 qui che risieder\u00e0 la classe Widget principale insieme a tutte le altre classi che verranno introdotte in questa serie.<\/p>\n<p>Ci\u00f2 significa che non abbiamo pi\u00f9 bisogno della classe nella directory API. Quindi assicurati di spostare la classe, aggiornare il suo spazio dei nomi e rimuovere la directory. Avr\u00f2 uno screenshot e del codice per questo un po &#8216;pi\u00f9 tardi.<\/p>\n<p>Inoltre, ricordando in precedenza nella serie, abbiamo posizionato la\u00a0 directory <strong>Views<\/strong> nella radice della\u00a0 directory <strong>src<\/strong>, ma ora possiamo spostarla nella directory di <strong>WordPress<\/strong>. Quindi vai avanti e fallo ora.<\/p>\n<p>Il risultato finale dovrebbe assomigliare a questo:<\/p>\n<p>Ora possiamo rivolgere la nostra attenzione al codice.<\/p>\n<h3>3 Uno sguardo alla classe dei widget<\/h3>\n<p>Semplificheremo un po&#8217; la classe del widget principale in questo post. Distrugger\u00e0 parte del lavoro che abbiamo fatto, ma avevamo bisogno di quel lavoro precedente per arrivare a questo punto.<\/p>\n<p>Per ora, ci stiamo concentrando sul costruttore e sulla funzione per recuperare lo slug del widget. Questo \u00e8 ci\u00f2 che alla fine ci permetter\u00e0 di vedere qualcosa nell&#8217;area amministrativa di WordPress.<\/p>\n<p>Quindi, per prima cosa, assicurati che la tua classe Widget assomigli <a href=\"https:\/\/gist.github.com\/tommcfarlin\/f2e397e634ed2422d4840e6402a59fb9#file-01-widget-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">a questa<\/a> :<\/p>\n<pre><code>&lt;?php\n\n\/*\n * This file is part of WordPress Widget Boilerplate\n * (c) Tom McFarlin &lt;tom@tommcfarlin.com&gt;\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\nuse WP_Widget;\n\nclass Widget extends WP_Widget\n{\n    \/**\n     * @var string unique identifier for your widget\n     *\/\n    protected $widgetSlug;\n\n    \/**\n     * Initializes the plugin by setting its properties and calling the parent class with the description.\n     *\n     * @param mixed $widgetSlug\n     *\/\n    public function __construct($widgetSlug)\n    {\n        $this-&gt;widgetSlug = $widgetSlug;\n\n        parent::__construct(\n            $this-&gt;getWidgetSlug(),\n            __('Widget Name', $this-&gt;getWidgetSlug()),\n            [\n                'classname' =&gt; $this-&gt;getWidgetSlug().'-class',\n                'description' =&gt; __('Short description of the widget goes here.', $this-&gt;getWidgetSlug()),\n            ]\n        );\n    }\n\n    \/**\n     * Return the widget slug.\n     *\n     * @return string slug variable\n     *\/\n    public function getWidgetSlug()\n    {\n        return $this-&gt;widgetSlug;\n    }\n}<\/code><\/pre>\n<p>Successivamente, poich\u00e9 abbiamo spostato questo file nello spazio dei nomi di <strong>WordPress<\/strong>, dobbiamo aggiornare la sezione di caricamento automatico del <a href=\"https:\/\/gist.github.com\/tommcfarlin\/f2e397e634ed2422d4840e6402a59fb9#file-02-composer-json\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">nostro file di configurazione di Composer<\/a> :<\/p>\n<pre><code>\"autoload\": {\n    \"psr-4\": {\n        \"WordPressWidgetBoilerplate\": \"src\/\",\n        \"WordPressWidgetBoilerplateUtilities\": \"src\/Utilities\/\",\n        \"WordPressWidgetBoilerplateSubscriber\": \"src\/Subscriber\/\",\n        \"WordPressWidgetBoilerplateWordPress\": \"src\/WordPress\/\"\n    }\n},<\/code><\/pre>\n<p>Successivamente, dobbiamo presentare un abbonato.<\/p>\n<h3>4 Presentazione dell&#8217;abbonato al widget<\/h3>\n<p>Ogni volta che ho una classe principale di qualche tipo, generalmente provo a creare un semplice abbonato che istanzia la classe principale e le permetta di fare il suo lavoro.<\/p>\n<p>Lo faccio perch\u00e9 WordPress, come accennato, utilizza il modello di progettazione basato sugli eventi, il che significa che tutto deve essere registrato su un tipo di hook. E non mi piace mescolare la logica di dominio con la stessa classe che si aggancia a WordPress. Quindi li separo.<\/p>\n<p>Ed \u00e8 quello che fa un abbonato. Si registra con WordPress, quindi richiama la classe responsabile dell&#8217;effettiva esecuzione del lavoro.<\/p>\n<p>Detto questo, rivolgi la tua attenzione alla\u00a0 directory <strong>Subscriber<\/strong> e aggiungi una classe chiamata <strong>WidgetSubscriber<\/strong>. In quella classe, <a href=\"https:\/\/gist.github.com\/tommcfarlin\/f2e397e634ed2422d4840e6402a59fb9#file-03-widget-subscriber-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">aggiungi il seguente codice<\/a> :<\/p>\n<pre><code>&lt;?php\n\n&lt;?php\n\nnamespace WordPressWidgetBoilerplateSubscriber;\n\nuse WordPressWidgetBoilerplateWordPressWidget;\n\n\/**\n * Initializes the core Widget class that's used by WordPress to instantiate the widget,\n * renders the administrative area, provide serialization functionality, and displays the\n * public-facing view.\n *\/\nclass WidgetSubscriber extends AbstractSubscriber\n{\n    \/**\n     * {@inheritdoc}\n     *\/\n    public function __construct(string $hook)\n    {\n        parent::__construct($hook);\n    }\n\n    \/**\n     * Registers the core Widget class using the WordPress APIs.\n     *\/\n    public function load()\n    {\n        register_widget(new Widget('widget-name'));\n    }\n}\n<\/code><\/pre>\n<p>Il costruttore registrer\u00e0 la classe con un hook specifico che esamineremo tra poco; quindi utilizzer\u00e0 l&#8217;API di WordPress per creare un&#8217;istanza del nostro widget (che \u00e8 ci\u00f2 che sta accadendo nella\u00a0 funzione di <strong>caricamento<\/strong> ).<\/p>\n<h3>5 Il Bootstrap<\/h3>\n<p>Infine, dobbiamo aggiornare il bootstrap in modo che:<\/p>\n<ul>\n<li>registra il <strong>WidgetSubscriber<\/strong> con l&#8217;apposito hook,<\/li>\n<li>aggiunge l&#8217;iscritto al <strong>Registro<\/strong> ,<\/li>\n<li>e avvia il plugin (cosa che abbiamo fatto).<\/li>\n<\/ul>\n<p>Il bootstrap, dopo tutto questo, dovrebbe essere <a href=\"https:\/\/gist.github.com\/tommcfarlin\/f2e397e634ed2422d4840e6402a59fb9#file-04-bootstrap-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">simile al seguente<\/a> :<\/p>\n<pre><code>&lt;?php\n\nnamespace WordPressWidgetBoilerplate;\n\nuse WordPressWidgetBoilerplateUtilitiesRegistry;\nuse WordPressWidgetBoilerplatePlugin;\nuse WordPressWidgetBoilerplateSubscriberWidgetSubscriber;\n\n\/\/ Prevent this file from being called directly.\ndefined('WPINC') || die;\n\n\/\/ Include the autoloader.\nrequire_once __DIR__. '\/vendor\/autoload.php';\n\n\/\/ Setup a filter so we can retrieve the registry throughout the plugin.\n$registry = new Registry();\nadd_filter('wpwBoilerplateRegistry', function() use ($registry) {\n    return $registry;\n});\n\n\/\/ Add the Widget base class to the Registry.\n$registry-&gt;add('widgetSubscriber', new WidgetSubscriber('widgets_init'));\n\n\/\/ Start the machine.\n(new Plugin($registry))-&gt;start();<\/code><\/pre>\n<p>Successivamente, dovresti essere in grado di accedere a WordPress e attivare il plug-in.<\/p>\n<h2>Uno sguardo all&#8217;area amministrativa<\/h2>\n<p>A questo punto non c&#8217;\u00e8 molto da guardare, ma ci stiamo arrivando. Innanzitutto, dovresti notare che il widget ora appare nell&#8217;area che include i widget disponibili:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-160941-61e7175c46bcc.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-160941-61e7175c46bcc.png\" alt=\"Widget WordPress: refactoring, parte 8\"><\/a><\/p>\n<p>E dovresti anche vedere che quando trascini il widget in un&#8217;area con widget (o qualsiasi barra laterale) che non ha opzioni disponibili.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-160941-61e7175f91557.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-160941-61e7175f91557.png\" alt=\"Widget WordPress: refactoring, parte 8\"><\/a><\/p>\n<p>Detto questo, siamo in una buona posizione per continuare a costruire su ci\u00f2 che abbiamo. Puoi sempre continuare a monitorare lo sviluppo del boilerplate <a href=\"https:\/\/github.com\/tommcfarlin\/WordPress-Widget-Boilerplate\/tree\/develop\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">su GitHub<\/a>.<\/p>\n<h2>Continuando<\/h2>\n<p>Successivamente, continueremo a creare funzionalit\u00e0 per l&#8217;area amministrativa del widget. Successivamente, rivolgeremo la nostra attenzione al lato pubblico del widget e alla funzionalit\u00e0 di serializzazione.<\/p>\n<p>Dovresti essere in grado di vedere come le cose stanno iniziando a prendere forma mentre iniziamo a separare la logica nelle sue varie componenti. In caso contrario, per\u00f2, non preoccuparti: c&#8217;\u00e8 molto altro in arrivo.<\/p>\n<p>E la versione finale di Boilerplate, ovviamente, dimostrer\u00e0 tutti i principi su cui stiamo costruendo in questa serie di post.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte di registrazione:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Inizieremo a dividere i vari componenti che compongono i widget di WordPress a partire dall&#8217;area amministrativa.<\/p>\n","protected":false},"author":1,"featured_media":234945,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[720,844,865],"tags":[1168],"class_list":["post-231561","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sviluppatore","category-tutorial","category-wordpress-6","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/231561","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=231561"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/231561\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/234945"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=231561"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=231561"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=231561"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}