{"id":231117,"date":"2022-12-22T18:10:00","date_gmt":"2022-12-22T15:10:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=231117"},"modified":"2022-12-22T18:11:24","modified_gmt":"2022-12-22T15:11:24","slug":"widgets-de-wordpress-refactorizacion-parte-13","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/widgets-de-wordpress-refactorizacion-parte-13\/","title":{"rendered":"Widgets de WordPress: Refactorizaci\u00f3n, Parte 13"},"content":{"rendered":"\n<p>Finalmente estamos en la publicaci\u00f3n final de la serie sobre la refactorizaci\u00f3n de WordPress Widget Boilerplate. Al final de esta publicaci\u00f3n, habremos terminado la rama de desarrollo de nuestro c\u00f3digo y estaremos listos para fusionar todo en la rama maestra.<\/p>\n<p>Sin embargo, todav\u00eda queda un poco de trabajo por hacer. <a href=\"https:\/\/wordpress.mediadoma.com\/es\/widgets-de-wordpress-refactorizacion-parte-12\/\" title=\"A saber\">A saber<\/a> :<\/p>\n<blockquote>\n<p>Lo \u00faltimo que vamos a ver despu\u00e9s de esto es reforzar algo de la l\u00f3gica condicional junto con una palabra sobre el almacenamiento en cach\u00e9 de datos (ya que ya estamos haciendo un poco de eso en publicaciones anteriores).<\/p>\n<\/blockquote>\n<p>Esas son las dos cosas que vamos a ver en esta publicaci\u00f3n. Espec\u00edficamente, veremos el manejo de la l\u00f3gica condicional para el front-end y luego c\u00f3mo implementar el almacenamiento en cach\u00e9 b\u00e1sico.<\/p>\n<h2>El modelo de widget de WordPress: Refactorizaci\u00f3n Parte 13<\/h2>\n<p>Antes de entrar en la ronda final de detalles, quiero asegurarme de que est\u00e1 ejecutando <a href=\"https:\/\/github.com\/tommcfarlin\/WordPress-Widget-Boilerplate\/tree\/develop\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la \u00faltima versi\u00f3n del c\u00f3digo<\/a>, ya que esta es la \u00fanica vez en la que creo que es imperativo tener el c\u00f3digo listo para la ronda final de cambios.<\/p>\n<p>Entonces, si no tiene el c\u00f3digo ejecut\u00e1ndose en su m\u00e1quina, ahora es el momento. El \u00faltimo fragmento de c\u00f3digo en el que tenemos que trabajar es bastante peque\u00f1o.<\/p>\n<p>Pero es importante asegurarse de que est\u00e1 ejecutando la \u00faltima versi\u00f3n. Entonces, una vez que haya extra\u00eddo el c\u00f3digo m\u00e1s reciente, estamos listos para terminar con esto.<\/p>\n<h3>1 Representaci\u00f3n del front-end<\/h3>\n<p>Recuerde que en la publicaci\u00f3n anterior, presentamos informaci\u00f3n general del widget (el t\u00edtulo, el contenido y si el t\u00edtulo debe mostrarse o no) simplemente mostrando los valores en el front-end.<\/p>\n<p>Pero ahora es el momento de configurar la informaci\u00f3n para asegurarnos de que no solo vamos a presentar informaci\u00f3n en funci\u00f3n de las opciones en el \u00e1rea de administraci\u00f3n del widget, sino tambi\u00e9n si hay alguna informaci\u00f3n.<\/p>\n<p>Entonces, comenzaremos con la opci\u00f3n m\u00e1s simple: la opci\u00f3n que nos permite alternar si se muestra el t\u00edtulo. En otras palabras, vamos a asumir si los valores est\u00e1n poblados y esa opci\u00f3n est\u00e1 marcada en el backend.<\/p>\n<p>Recuerde, el\u00a0 archivo <strong>Widget.php<\/strong> actualmente se ve <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2f6bbe19253188596f804a7c211d9cd5#file-00-widget-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">as\u00ed<\/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>As\u00ed que vamos a refactorizar esta parte, primero. Por supuesto, es algo relativamente f\u00e1cil de introducir, \u00bfverdad? Es decir, la l\u00f3gica es as\u00ed:<\/p>\n<ul>\n<li>Si la opci\u00f3n para mostrar el t\u00edtulo est\u00e1 marcada, mostramos el t\u00edtulo; de lo contrario, no lo hacemos.<\/li>\n<\/ul>\n<p>Esto se puede abordar con una\u00a0 declaraci\u00f3n <strong>if<\/strong> simple evaluando el valor de la\u00a0 opci\u00f3n <strong>de t\u00edtulo de visualizaci\u00f3n<\/strong> que tenemos. Debido a la forma en que hemos construido la funci\u00f3n a lo largo de esta serie, si la opci\u00f3n est\u00e1 marcada, entonces tiene la opci\u00f3n de <strong>encendido<\/strong> ; de lo contrario, est\u00e1 vac\u00edo.<\/p>\n<p>Esto significa que podemos configurar un condicional como este en el mismo c\u00f3digo que hemos <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2f6bbe19253188596f804a7c211d9cd5#file-01-widget-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">compartido anteriormente<\/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>De esta forma, si la opci\u00f3n est\u00e1 marcada, se mostrar\u00e1 el t\u00edtulo.<\/p>\n<h3>Un corolario de esto<\/h3>\n<p>Una cosa que creo que vale la pena mencionar es que hay ocasiones en las que las personas pueden activar widgets pero optar por no tener contenido. Claro, puedes argumentar que si hacen eso, entonces es su culpa.<\/p>\n<p>Hay verdad en eso.<\/p>\n<p>Pero tambi\u00e9n creo que cuidar a los usuarios que pueden estar averiguando cosas o que pueden haber hecho algo accidentalmente que no sab\u00edan puede ayudarlos. Tal vez nos haga desarrolladores responsables (o tal vez nos haga m\u00e1s agresivos, elige, estoy con el primero).<\/p>\n<p>Entonces, en este caso, creo que vale la pena asegurarse de que el t\u00edtulo y el contenido no est\u00e9n vac\u00edos. Si lo son, entonces no renderices nada.<\/p>\n<p>El c\u00f3digo entonces se ve <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2f6bbe19253188596f804a7c211d9cd5#file-02-widget-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">as\u00ed<\/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>Y eso terminar\u00e1 con esto en lo que respecta al front-end. Pero, \u00bfqu\u00e9 pasa con el almacenamiento en cach\u00e9 del que hablamos en una publicaci\u00f3n anterior?<\/p>\n<h3>2 Introducci\u00f3n al almacenamiento en cach\u00e9<\/h3>\n<p>El almacenamiento en cach\u00e9, para un widget como este, es algo que considero opcional, pero dado que hemos incorporado la funcionalidad b\u00e1sica en Boilerplate para vaciar el cach\u00e9, l\u00f3gicamente sigue para introducir la funcionalidad para almacenar datos en cach\u00e9, \u00bfverdad?<\/p>\n<p>As\u00ed que hagamos eso. Tampoco deber\u00eda ser dif\u00edcil. En realidad, simplemente estamos tomando el t\u00edtulo, el contenido y la casilla de verificaci\u00f3n y almacenando en cach\u00e9 los valores para la instancia dada del widget.<\/p>\n<p>Para hacer esto, necesitamos ubicar la funci\u00f3n del <strong>widget<\/strong> y luego hacer lo siguiente:<\/p>\n<p>Primero, presentaremos <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2f6bbe19253188596f804a7c211d9cd5#file-03-cache-widget-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">una funci\u00f3n para almacenar en cach\u00e9 el 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>Luego, presentaremos una funci\u00f3n 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\">la versi\u00f3n en cach\u00e9 del 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>Luego revisamos la funci\u00f3n original para asegurarnos de mostrar lo que se necesita. Si la memoria cach\u00e9 est\u00e1 vac\u00eda, no hacemos nada m\u00e1s que mostrar los valores <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2f6bbe19253188596f804a7c211d9cd5#file-05-widget-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">tal como est\u00e1n<\/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>Y eso concluye la funcionalidad para el redise\u00f1o completo de Widget Boilerplate.<\/p>\n<h2>El fin<\/h2>\n<p>Este serio en particular ha sido largo. Personalmente, ha sido realmente bueno volver a visitar el modelo est\u00e1ndar de widgets de WordPress y actualizarlo a est\u00e1ndares m\u00e1s modernos.<\/p>\n<p>Todav\u00eda hay algunas cosas que debo hacer, como actualizar el archivo README y luego proporcionar algunas instrucciones m\u00e1s antes de fusionarlo con la\u00a0 rama <strong>maestra<\/strong>, pero si ha estado siguiendo toda esta serie, es probable que est\u00e9 a bordo. con todo. Adem\u00e1s, agradezco el tiempo dedicado a esto y espero que haya sido beneficioso para usted en algunos niveles.<\/p>\n<p>Dicho esto, buscar\u00e9 pasar a contenido premium de forma m\u00e1s corta ya que esta serie y la \u00faltima fueron bastante largas. Como de costumbre, siempre puede ponerse en contacto conmigo u ofrecer solicitudes de extracci\u00f3n seg\u00fan sea necesario: es de c\u00f3digo abierto y tambi\u00e9n admite mejoras.<\/p>\n<p>Por ahora, sin embargo, esto envuelve esta serie.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aqu\u00ed, finalizamos la versi\u00f3n actualizada de WordPress Widget Boilerplate actualizando lo que los usuarios ven en el front-end y trabajando con el almacenamiento en cach\u00e9.<\/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":[892,716,840,861],"tags":[1172],"class_list":["post-231117","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-desarrollador","category-tutoriales","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/231117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=231117"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/231117\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/236089"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=231117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=231117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=231117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}