{"id":231499,"date":"2022-12-22T18:55:00","date_gmt":"2022-12-22T15:55:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=231499"},"modified":"2022-12-22T18:56:23","modified_gmt":"2022-12-22T15:56:23","slug":"widgets-do-wordpress-refatoracao-parte-13","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/widgets-do-wordpress-refatoracao-parte-13\/","title":{"rendered":"Widgets do WordPress: Refatora\u00e7\u00e3o, Parte 13"},"content":{"rendered":"\n<p>Estamos finalmente no post final da s\u00e9rie sobre refatora\u00e7\u00e3o do WordPress Widget Boilerplate. Ao final deste post, teremos o branch de desenvolvimento do nosso c\u00f3digo pronto e estaremos prontos para mesclar tudo no branch master.<\/p>\n<p>No entanto, ainda h\u00e1 um pouco de trabalho a fazer. <a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/widgets-do-wordpress-refatoracao-parte-12\/\" title=\"A saber\">A saber<\/a> :<\/p>\n<blockquote>\n<p>A \u00faltima coisa que vamos ver depois disso \u00e9 refor\u00e7ar um pouco da l\u00f3gica condicional junto com uma palavra sobre cache de dados (j\u00e1 que j\u00e1 estamos fazendo um pouco disso em posts anteriores).<\/p>\n<\/blockquote>\n<p>Ent\u00e3o, essas s\u00e3o as duas coisas que veremos neste post. Especificamente, veremos como lidar com a l\u00f3gica condicional para o front-end e como implementar o cache b\u00e1sico.<\/p>\n<h2>The WordPress Widget Boilerplate: Refatorando Parte 13<\/h2>\n<p>Antes de entrarmos na rodada final de detalhes, quero ter certeza de que voc\u00ea est\u00e1 executando <a href=\"https:\/\/github.com\/tommcfarlin\/WordPress-Widget-Boilerplate\/tree\/develop\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">a vers\u00e3o mais recente do c\u00f3digo<\/a>, pois esta \u00e9 a \u00fanica vez em que acredito ser imperativo ter o c\u00f3digo pronto para a rodada final de altera\u00e7\u00f5es.<\/p>\n<p>Ent\u00e3o, se voc\u00ea n\u00e3o tem o c\u00f3digo rodando em sua m\u00e1quina, agora \u00e9 a hora. A \u00faltima parte do c\u00f3digo em que precisamos trabalhar \u00e9 bem pequena.<\/p>\n<p>Mas \u00e9 importante certificar-se de que voc\u00ea est\u00e1 executando a vers\u00e3o mais recente. Assim que voc\u00ea fizer um pull do c\u00f3digo mais recente, estamos prontos para encerrar isso.<\/p>\n<h3>1 Renderizando o Front-End<\/h3>\n<p>Lembre-se que no post anterior, renderizamos informa\u00e7\u00f5es gerais do widget \u2013 o t\u00edtulo, o conte\u00fado e se o t\u00edtulo deve ou n\u00e3o ser exibido \u2013 simplesmente exibindo os valores no front-end.<\/p>\n<p>Mas agora \u00e9 hora de configurar as informa\u00e7\u00f5es para ter certeza de que n\u00e3o vamos apenas renderizar as informa\u00e7\u00f5es com base nas op\u00e7\u00f5es na \u00e1rea de administra\u00e7\u00e3o do widget, mas tamb\u00e9m se houver alguma informa\u00e7\u00e3o.<\/p>\n<p>Ent\u00e3o vamos come\u00e7ar com a op\u00e7\u00e3o mais simples: A op\u00e7\u00e3o que nos permite alternar se o t\u00edtulo \u00e9 exibido. Em outras palavras, vamos supor se os valores est\u00e3o preenchidos e essa op\u00e7\u00e3o est\u00e1 marcada no backend.<\/p>\n<p>Lembre-se, o\u00a0 arquivo <strong>Widget.php<\/strong> atualmente se parece <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2f6bbe19253188596f804a7c211d9cd5#file-00-widget-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">com isso<\/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?&gt;\n&lt;div id=\"&lt;?php echo $args['id']; ?&gt;\"&gt;\n    &lt;h3 class=\"widget-title\"&gt;&lt;?php echo $instance['title']; ?&gt;&lt;\/h3&gt;\n    &lt;p&gt;&lt;?php echo $instance['content']; ?&gt;&lt;\/p&gt;\n    &lt;pre&gt;&lt;?php echo $instance['display-title']; ?&gt;&lt;\/pre&gt;\n&lt;\/div&gt;&lt;!-- #&lt;?php echo $args['id']; ?&gt;--&gt;\n<\/code><\/pre>\n<p>Ent\u00e3o, vamos refatorar essa parte primeiro. Claro, \u00e9 uma coisa relativamente f\u00e1cil de introduzir, certo? Ou seja, a l\u00f3gica fica assim:<\/p>\n<ul>\n<li>Se a op\u00e7\u00e3o para exibir o t\u00edtulo estiver marcada, mostramos o t\u00edtulo; caso contr\u00e1rio, n\u00f3s n\u00e3o.<\/li>\n<\/ul>\n<p>Isso pode ser resolvido com uma simples\u00a0 instru\u00e7\u00e3o <strong>if<\/strong>, avaliando o valor da\u00a0 op\u00e7\u00e3o <strong>display-title<\/strong> que temos. Devido \u00e0 maneira como constru\u00edmos a fun\u00e7\u00e3o ao longo desta s\u00e9rie, se a op\u00e7\u00e3o estiver marcada, ela ter\u00e1 a op\u00e7\u00e3o <strong>on<\/strong> ; caso contr\u00e1rio, est\u00e1 vazio.<\/p>\n<p>Isso significa que podemos configurar uma condicional como esta no mesmo c\u00f3digo que <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2f6bbe19253188596f804a7c211d9cd5#file-01-widget-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">compartilhamos acima<\/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?&gt;\n&lt;div id=\"&lt;?php echo $args['id']; ?&gt;\"&gt;\n  &lt;?php if (isset($instance['display-title']) &amp;&amp; 'on' === $instance['display-title']): ?&gt;\n        &lt;h3 class=\"widget-title\"&gt;&lt;?php echo $instance['title']; ?&gt;&lt;\/h3&gt;\n    &lt;?php endif; ?&gt;\n    &lt;p&gt;&lt;?php echo $instance['content']; ?&gt;&lt;\/p&gt;\n&lt;\/div&gt;&lt;!-- #&lt;?php echo $args['id']; ?&gt;--&gt;\n<\/code><\/pre>\n<p>Dessa forma, se a op\u00e7\u00e3o estiver marcada, o t\u00edtulo ser\u00e1 exibido.<\/p>\n<h3>Um corol\u00e1rio disso<\/h3>\n<p>Uma coisa que acho que vale a pena mencionar \u00e9 que h\u00e1 momentos em que as pessoas podem ativar widgets, mas optam por n\u00e3o ter conte\u00fado. Claro, voc\u00ea pode argumentar que se eles fazem isso, ent\u00e3o a culpa \u00e9 deles.<\/p>\n<p>H\u00e1 verdade nisso.<\/p>\n<p>Mas tamb\u00e9m acho que cuidar de usu\u00e1rios que podem estar descobrindo as coisas ou que podem ter feito acidentalmente algo que eles n\u00e3o sabiam pode ajud\u00e1-los. Talvez isso nos torne desenvolvedores respons\u00e1veis \u200b\u200b(ou talvez nos torne mais agressivos \u2013 fa\u00e7a a sua escolha, estou com o primeiro).<\/p>\n<p>Ent\u00e3o, neste caso, acho que vale a pena garantir que o t\u00edtulo e o conte\u00fado n\u00e3o estejam vazios. Se estiverem, ent\u00e3o n\u00e3o renderize nada.<\/p>\n<p>O c\u00f3digo ent\u00e3o fica <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2f6bbe19253188596f804a7c211d9cd5#file-02-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?&gt;\n\n&lt;?php if (empty($instance['title']) &amp;&amp; empty($instance['content'])): return;\nendif; ?&gt;\n\n&lt;div id=\"&lt;?php echo $args['id']; ?&gt;\"&gt;\n    &lt;?php if (isset($instance['display-title']) &amp;&amp; 'on' === $instance['display-title']): ?&gt;\n        &lt;h3 class=\"widget-title\"&gt;&lt;?php echo $instance['title']; ?&gt;&lt;\/h3&gt;\n    &lt;?php endif; ?&gt;\n    &lt;p&gt;&lt;?php echo $instance['content']; ?&gt;&lt;\/p&gt;\n&lt;\/div&gt;&lt;!-- #&lt;?php echo $args['id']; ?&gt;--&gt;\n<\/code><\/pre>\n<p>E isso encerrar\u00e1 isso no que diz respeito ao front-end. Mas e o cache de que falamos em um post anterior?<\/p>\n<h3>2 Apresentando o Cache<\/h3>\n<p>O armazenamento em cache, para um widget como este, \u00e9 algo que considero opcional, mas como constru\u00edmos a funcionalidade b\u00e1sica no Boilerplate para liberar o cache, segue logicamente a introdu\u00e7\u00e3o da funcionalidade de armazenamento em cache de dados, certo?<\/p>\n<p>Ent\u00e3o vamos fazer isso. Tamb\u00e9m n\u00e3o deve ser dif\u00edcil. Na realidade, estamos simplesmente pegando o t\u00edtulo, o conte\u00fado e a caixa de sele\u00e7\u00e3o e armazenando em cache os valores para a inst\u00e2ncia dada do widget.<\/p>\n<p>Para fazer isso, precisamos localizar a fun\u00e7\u00e3o do <strong>widget<\/strong> e fazer o seguinte:<\/p>\n<p>Primeiro, apresentaremos <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2f6bbe19253188596f804a7c211d9cd5#file-03-cache-widget-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">uma fun\u00e7\u00e3o para armazenar em cache o widget<\/a> :<\/p>\n<pre><code>&lt;?php\n\n\/**\n * Caches the values for the instance of this widget.\n *\n * @param array $args     argument provided by WordPress that may be useful in rendering the widget\n * @param array $instance the values of the widget\n *\/\nprivate function cacheWidget($args, $instance)\n{\n    $cache = [];\n    $cache['widget_id'] = $args['widget_id'];\n    $cache['title'] = empty($instance['title'])? '': $instance['title'];\n    $cache['content'] = empty($instance['content'])? '': $instance['content'];\n\n    $instance['display-title'] = isset($instance['display-title'])? $instance['display-title']: '';\n    $cache['display-title'] = $instance['display-title'];\n\n    wp_cache_set($this-&gt;getWidgetSlug(), $cache, 'widget');\n}<\/code><\/pre>\n<p>Em seguida, apresentaremos uma fun\u00e7\u00e3o para recuperar <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2f6bbe19253188596f804a7c211d9cd5#file-04-get-cached-widget-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">a vers\u00e3o em cache do widget<\/a> :<\/p>\n<pre><code>&lt;?php\n\n\/**\n * @return array the cached instance of this widget if it's not empty\n *\/\nprivate function getCachedWidget()\n{\n    $cache = wp_cache_get($this-&gt;getWidgetSlug(), 'widget');\n    if (!empty($cache)) {\n        return $cache;\n    }\n    return [];\n}<\/code><\/pre>\n<p>Em seguida, revisitamos a fun\u00e7\u00e3o original para garantir que estamos exibindo o que \u00e9 necess\u00e1rio. Se o cache estiver vazio, n\u00e3o faremos nada al\u00e9m de exibir os valores <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2f6bbe19253188596f804a7c211d9cd5#file-05-widget-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">como est\u00e3o<\/a>.<\/p>\n<pre><code>&lt;?php\n\n\/**\n * Displays the widget based on the contents of the included template.\n *\n * @param array $args     argument provided by WordPress that may be useful in rendering the widget\n * @param array $instance the values of the widget\n *\/\npublic function widget($args, $instance)\n{\n    \/\/ Get a cached version of the widget. If it's empty, cache what we have.\n    $cache = $this-&gt;getCachedWidget();\n    if (empty($cache)) {\n        $this-&gt;cacheWidget($args, $instance);\n    }\n\n    return $this-&gt;widgetDisplay-&gt;show($args, $instance);\n}<\/code><\/pre>\n<p>E isso encerra a funcionalidade do Widget Boilerplate completamente refatorado.<\/p>\n<h2>O fim<\/h2>\n<p>Este grave em particular tem sido longo. Pessoalmente, foi muito bom revisitar o WordPress Widget Boilerplate e traz\u00ea-lo para padr\u00f5es mais modernos.<\/p>\n<p>Ainda h\u00e1 algumas coisas que preciso fazer, como atualizar o arquivo README e fornecer mais algumas instru\u00e7\u00f5es antes de mescl\u00e1-lo no\u00a0 branch <strong>master<\/strong>, mas se voc\u00ea estiver acompanhando toda esta s\u00e9rie, provavelmente estar\u00e1 a bordo com tudo. Al\u00e9m disso, aprecio seu tempo em conviver com ele e espero que tenha sido ben\u00e9fico para voc\u00ea em alguns n\u00edveis.<\/p>\n<p>Com isso dito, procurarei migrar para conte\u00fado premium de formato mais curto, j\u00e1 que esta s\u00e9rie e a \u00faltima foram bastante longas. Como de costume, voc\u00ea sempre pode entrar em contato comigo ou oferecer solicita\u00e7\u00f5es de pull conforme necess\u00e1rio &#8211; \u00e9 de c\u00f3digo aberto e tamb\u00e9m recebe melhorias.<\/p>\n<p>Por enquanto, por\u00e9m, isso encerra esta s\u00e9rie.<\/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>Aqui, finalizamos a vers\u00e3o atualizada do WordPress Widget Boilerplate atualizando o que os usu\u00e1rios veem no front-end e trabalhando com cache.<\/p>\n","protected":false},"author":1,"featured_media":236089,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[898,722,846,867],"tags":[1170],"class_list":["post-231499","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","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\/231499","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=231499"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/231499\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/236089"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=231499"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=231499"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=231499"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}