{"id":231364,"date":"2022-12-19T17:33:00","date_gmt":"2022-12-19T14:33:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=231364"},"modified":"2022-12-19T17:35:41","modified_gmt":"2022-12-19T14:35:41","slug":"widgets-do-wordpress-refatoracao-parte-8","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/widgets-do-wordpress-refatoracao-parte-8\/","title":{"rendered":"Widgets do WordPress: Refatora\u00e7\u00e3o, Parte 8"},"content":{"rendered":"\n<p>Quando se trata de refatorar o WordPress Widget Boilerplate, fizemos muito trabalho para trazer a base de c\u00f3digo para um padr\u00e3o mais orientado a objetos. Al\u00e9m disso, introduzimos uma variedade de outras ferramentas que nos permitem trazer nosso c\u00f3digo para padr\u00f5es mais modernos<\/p>\n<p>Agora que passamos tempo fazendo isso, \u00e9 hora de voltar ao c\u00f3digo e come\u00e7ar a refator\u00e1-lo de forma que permita o uso de <a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/aulas-de-resumo-parte-1-comportamento-de-abstracao\/\" title=\"classes abstratas\">classes abstratas<\/a> e assinantes (que funcionam como parte do <a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/o-basico-dos-ganchos-de-acao-no-wordpress\/\" title=\"padr\u00e3o de design orientado a eventos\">padr\u00e3o de design orientado a eventos<\/a> ).<\/p>\n<p>No final do post anterior, escrevi:<\/p>\n<blockquote>\n<p>Nas pr\u00f3ximas postagens, veremos como podemos implementar assinantes para o lado p\u00fablico do site (ou seja, onde o conte\u00fado do widget \u00e9 exibido). E faremos o mesmo para a \u00e1rea de administra\u00e7\u00e3o do site.<\/p>\n<\/blockquote>\n<p>Ent\u00e3o, neste post, vamos fazer exatamente isso. Especificamente, vamos come\u00e7ar a trabalhar em um assinante para o widget e, em seguida, fazer com que o widget base seja exibido primeiro no lado administrativo do site.<\/p>\n<h2>The WordPress Widget Boilerplate: Refatora\u00e7\u00e3o, Parte 8<\/h2>\n<p>O motivo pelo qual estou interessado em focar principalmente no lado administrativo do site \u00e9 que ele nos permite:<\/p>\n<ul>\n<li>saiba como os assinantes funcionam,<\/li>\n<li>veja como a base de c\u00f3digo precisar\u00e1 ser organizada,<\/li>\n<li>codificar algumas informa\u00e7\u00f5es antes de trabalhar com serializa\u00e7\u00e3o.<\/li>\n<\/ul>\n<p>Uma vez que tudo isso esteja no lugar, estaremos em uma boa posi\u00e7\u00e3o para voltar nossa aten\u00e7\u00e3o para coisas mais avan\u00e7adas. Ou seja, poderemos apresentar assinantes para exibir informa\u00e7\u00f5es na \u00e1rea de administra\u00e7\u00e3o e assinantes para sanitizar, serializar, recuperar, validar e exibir dados.<\/p>\n<p>Mas primeiro, vamos fazer o trabalho necess\u00e1rio para configurar uma nova classe, configurar o autoloader e exibir o conte\u00fado na \u00e1rea administrativa do site.<\/p>\n<h3>1 O Assinante Abstrato<\/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\">Vamos revisar<\/a> primeiro o assinante abstrato, pois \u00e9 isso que todos os assinantes implementar\u00e3o.<\/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>Observe que ele tem duas fun\u00e7\u00f5es p\u00fablicas \u2013 a constru\u00e7\u00e3o que define o gancho e uma fun\u00e7\u00e3o para recuperar o gancho. Ele tamb\u00e9m possui uma fun\u00e7\u00e3o de carga abstrata que \u00e9 onde qualquer classe que estende essa classe implementa sua funcionalidade espec\u00edfica.<\/p>\n<p>Lembre-se de que, devido \u00e0 maneira como o WordPress lida com a\u00e7\u00f5es e filtros, tudo \u00e9 anexado a um gancho espec\u00edfico (aqueles <a href=\"https:\/\/codex.wordpress.org\/Plugin_API\/Hooks\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">que o WordPress define<\/a> ou ganchos personalizados).<\/p>\n<h3>2 O espa\u00e7o de nomes do WordPress<\/h3>\n<p>Sempre que estou trabalhando em uma funcionalidade fortemente acoplada ao WordPress, tento me certificar de coloc\u00e1-la em um namespace do WordPress. Isso indica para mim, assim como para outros desenvolvedores, que o que quer que resida nesse namespace n\u00e3o pode ser divorciado do aplicativo principal.<\/p>\n<p>Portanto, dentro do\u00a0 diret\u00f3rio <strong>src<\/strong>, crie um\u00a0 diret\u00f3rio <strong>WordPress<\/strong>. \u00c9 aqui que a classe principal do Widget residir\u00e1 junto com quaisquer outras classes que ser\u00e3o introduzidas ao longo desta s\u00e9rie.<\/p>\n<p>Isso significa que n\u00e3o precisamos mais da classe no diret\u00f3rio da API. Portanto, certifique-se de mover a classe, atualizar seu namespace e remover o diret\u00f3rio. Eu vou ter uma captura de tela e algum c\u00f3digo para isso um pouco mais tarde.<\/p>\n<p>Al\u00e9m disso, lembre-se no in\u00edcio da s\u00e9rie, colocamos o\u00a0 diret\u00f3rio <strong>Views<\/strong> na raiz do\u00a0 diret\u00f3rio <strong>src<\/strong>, mas agora podemos mov\u00ea-lo para o\u00a0 diret\u00f3rio <strong>WordPress<\/strong>. Ent\u00e3o v\u00e1 em frente e fa\u00e7a isso agora.<\/p>\n<p>O resultado final deve ficar mais ou menos assim:<\/p>\n<p>Agora podemos voltar nossa aten\u00e7\u00e3o para o c\u00f3digo.<\/p>\n<h3>3 Uma olhada na classe Widget<\/h3>\n<p>Vamos simplificar um pouco a classe de widget principal neste post. Vai desfazer parte do trabalho que fizemos, mas precis\u00e1vamos desse trabalho anterior para chegar a este ponto.<\/p>\n<p>Por enquanto, estamos nos concentrando no construtor e na fun\u00e7\u00e3o para recuperar o slug do widget. Isso \u00e9 o que acabar\u00e1 por nos permitir ver algo na \u00e1rea administrativa do WordPress.<\/p>\n<p>Ent\u00e3o, primeiro, certifique-se de que sua classe Widget seja <a href=\"https:\/\/gist.github.com\/tommcfarlin\/f2e397e634ed2422d4840e6402a59fb9#file-01-widget-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">assim<\/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>Em seguida, como movemos este arquivo para o\u00a0 namespace do <strong>WordPress<\/strong>, precisamos atualizar a se\u00e7\u00e3o de carregamento autom\u00e1tico do <a href=\"https:\/\/gist.github.com\/tommcfarlin\/f2e397e634ed2422d4840e6402a59fb9#file-02-composer-json\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">nosso arquivo de configura\u00e7\u00e3o do 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>Em seguida, precisamos apresentar um assinante.<\/p>\n<h3>4 Apresentando o Assinante de Widget<\/h3>\n<p>Sempre que tenho uma classe principal de algum tipo, geralmente tento criar um assinante simples que instancia a classe principal e permite que ela fa\u00e7a seu trabalho.<\/p>\n<p>Fa\u00e7o isso porque o WordPress, como mencionado, usa o padr\u00e3o de design orientado a eventos, o que significa que tudo deve ser registrado em algum tipo de gancho. E eu n\u00e3o gosto de misturar l\u00f3gica de dom\u00ednio com a mesma classe que se conecta ao WordPress. Ent\u00e3o eu os separo.<\/p>\n<p>E \u00e9 isso que um assinante faz. Ele se registra no WordPress e ent\u00e3o invoca a classe respons\u00e1vel por realmente fazer o trabalho.<\/p>\n<p>Com isso dito, volte sua aten\u00e7\u00e3o para o\u00a0 diret\u00f3rio <strong>Subscriber<\/strong> e adicione uma classe chamada <strong>WidgetSubscriber<\/strong>. Nessa classe, <a href=\"https:\/\/gist.github.com\/tommcfarlin\/f2e397e634ed2422d4840e6402a59fb9#file-03-widget-subscriber-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">adicione o seguinte c\u00f3digo<\/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>O construtor registrar\u00e1 a classe com um gancho espec\u00edfico que revisaremos em breve; ent\u00e3o ele usar\u00e1 a API do WordPress para instanciar nosso widget (que \u00e9 o que est\u00e1 acontecendo na\u00a0 fun\u00e7\u00e3o de <strong>carregamento<\/strong> ).<\/p>\n<h3>5 O Bootstrap<\/h3>\n<p>Finalmente, precisamos atualizar o bootstrap para que:<\/p>\n<ul>\n<li>registra o <strong>WidgetSubscriber<\/strong> com o gancho apropriado,<\/li>\n<li>adiciona o assinante ao <strong>Registro<\/strong> ,<\/li>\n<li>e inicia o plugin (o que estamos fazendo).<\/li>\n<\/ul>\n<p>O bootstrap, depois de tudo isso, deve se parecer <a href=\"https:\/\/gist.github.com\/tommcfarlin\/f2e397e634ed2422d4840e6402a59fb9#file-04-bootstrap-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">com o seguinte<\/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>Em seguida, voc\u00ea poder\u00e1 fazer login no WordPress e ativar o plug-in.<\/p>\n<h2>Um olhar sobre a \u00e1rea administrativa<\/h2>\n<p>Neste ponto, n\u00e3o h\u00e1 muito o que olhar, mas estamos chegando l\u00e1. Primeiro, voc\u00ea deve notar que o widget agora aparece na \u00e1rea que inclui os widgets dispon\u00edveis:<\/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=\"Widgets do WordPress: Refatora\u00e7\u00e3o, Parte 8\"><\/a><\/p>\n<p>E voc\u00ea tamb\u00e9m deve ver que ao arrastar o widget para uma \u00e1rea widgetizada (ou qualquer barra lateral) ele n\u00e3o tem op\u00e7\u00f5es dispon\u00edveis.<\/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=\"Widgets do WordPress: Refatora\u00e7\u00e3o, Parte 8\"><\/a><\/p>\n<p>Dito isso, estamos em um bom lugar para continuar construindo o que temos. Voc\u00ea sempre pode continuar acompanhando o desenvolvimento do clich\u00ea <a href=\"https:\/\/github.com\/tommcfarlin\/WordPress-Widget-Boilerplate\/tree\/develop\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">no GitHub<\/a>.<\/p>\n<h2>Continuando<\/h2>\n<p>Em seguida, continuaremos desenvolvendo a funcionalidade para a \u00e1rea administrativa do widget. Depois disso, voltaremos nossa aten\u00e7\u00e3o para o lado p\u00fablico do widget, bem como para a funcionalidade de serializa\u00e7\u00e3o.<\/p>\n<p>Voc\u00ea deve ser capaz de ver como as coisas est\u00e3o come\u00e7ando a tomar forma \u00e0 medida que come\u00e7amos a separar a l\u00f3gica em seus v\u00e1rios componentes. Se n\u00e3o, por\u00e9m, n\u00e3o se preocupe \u2013 h\u00e1 muito mais por vir.<\/p>\n<p>E a vers\u00e3o final do Boilerplate, \u00e9 claro, demonstrar\u00e1 todos os princ\u00edpios que estamos construindo ao longo desta s\u00e9rie de posts.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Come\u00e7aremos separando os v\u00e1rios componentes que comp\u00f5em os widgets do WordPress, come\u00e7ando pela \u00e1rea administrativa.<\/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":[722,846,867],"tags":[1170],"class_list":["post-231364","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvedor","category-tutoriais","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/231364","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=231364"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/231364\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/234945"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=231364"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=231364"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=231364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}