{"id":230952,"date":"2022-12-18T14:00:00","date_gmt":"2022-12-18T11:00:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230952"},"modified":"2022-12-18T14:00:42","modified_gmt":"2022-12-18T11:00:42","slug":"widgets-de-wordpress-refactorizacion-parte-6","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/widgets-de-wordpress-refactorizacion-parte-6\/","title":{"rendered":"Widgets de WordPress: Refactorizaci\u00f3n, Parte 6"},"content":{"rendered":"\n<p>Debe estar bien versado en la refactorizaci\u00f3n que estamos haciendo con respecto al modelo est\u00e1ndar de widgets de WordPress. Si no, recomiendo ponerse al d\u00eda con la serie hasta ahora:<\/p>\n<ul>\n<li>leyendo <a href=\"https:\/\/tommcfarlin.com\/wordpress-widgets-part-5\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">el post anterior<\/a> ,<\/li>\n<li>o leyendo <a href=\"https:\/\/tommcfarlin.com\/tag\/wordpress-widgets-api\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">toda la serie<\/a> hasta este punto,<\/li>\n<li>y mirando <a href=\"https:\/\/github.com\/tommcfarlin\/WordPress-Widget-Boilerplate\/tree\/develop\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la rama de desarrollo del proyecto<\/a> en GitHub.<\/li>\n<\/ul>\n<p>En lo que respecta al c\u00f3digo base, estamos en un buen lugar ahora mismo. Hemos comenzado a refactorizar gran parte del c\u00f3digo en clases m\u00e1s peque\u00f1as y m\u00e1s enfocadas. Y acabamos de configurar un Registro para que podamos comenzar a trabajar con instancias de objetos en todo el complemento sin la necesidad de demasiado acoplamiento.<\/p>\n<p>Pero todav\u00eda hay un problema al que nos enfrentamos y tiene que ver con los espacios de nombres y la carga autom\u00e1tica. Habl\u00e9 un poco sobre esto hace <a href=\"https:\/\/wordpress.mediadoma.com\/es\/espacios-de-nombres-y-carga-automatica-en-wordpress\/\" title=\"un par de a\u00f1os,\">un par de a\u00f1os,<\/a> pero no en lo que se refiere a Composer.<\/p>\n<p>Y eso es lo que vamos a ver en este post.<\/p>\n<h2>El modelo de widget de WordPress: refactorizaci\u00f3n, parte 6<\/h2>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/es\/widgets-de-wordpress-refactorizacion-parte-2\/\" title=\"En la segunda publicaci\u00f3n de esta serie\">En la segunda publicaci\u00f3n de esta serie<\/a>, comenzamos a hablar sobre Composer. Si le pregunta a la mayor\u00eda de los desarrolladores de PHP (incluidos los que trabajan con WordPress), es probable que escuche que Composer es un administrador de paquetes o un administrador de dependencias.<\/p>\n<p>En resumen, es una forma de traer bibliotecas de terceros a nuestro proyecto y luego utilizar sus caracter\u00edsticas (para que no tengamos que escribir nuestro propio c\u00f3digo para hacerlo).<\/p>\n<p>Pero hay otra caracter\u00edstica que ofrece Composer que es de gran utilidad, especialmente cuando est\u00e1 usando muchas clases y <strong>no<\/strong> quiere usar declaraciones require_once en su base de c\u00f3digo.<\/p>\n<p>Y ese es el cargador autom\u00e1tico.<\/p>\n<h3>El cargador autom\u00e1tico definido<\/h3>\n<p>Directamente del <a href=\"https:\/\/getcomposer.org\/doc\/01-basic-usage.md#autoloading\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">manual:<\/a><\/p>\n<blockquote>\n<p>Para las bibliotecas que especifican informaci\u00f3n de carga autom\u00e1tica, Composer genera un <code>vendor\/autoload.php<\/code>archivo. Simplemente puede incluir este archivo y comenzar a usar las clases que brindan esas bibliotecas sin ning\u00fan trabajo adicional:<\/p>\n<\/blockquote>\n<p>Si ha estado siguiendo el c\u00f3digo hasta ahora, ver\u00e1 que en realidad ya estamos usando el cargador autom\u00e1tico generado por Composer.<\/p>\n<p>Primero, definimos <a href=\"https:\/\/gist.github.com\/tommcfarlin\/94d1c4d9f22431f12102051cff4300ab#file-00-composer-json\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la configuraci\u00f3n necesaria<\/a> :<\/p>\n<pre><code>{\n    \"name\": \"wordpress-widget-boilerplate\/wordpress-widget-boilerplate\",\n    \"description\": \"An organized, maintainable boilerplate for building widgets using WordPress best practices.\",\n    \"type\": \"wordpress-plugin\",\n    \"license\": \"GPL-3.0-or-later\",\n    \"homepage\": \"https:\/\/github.com\/tommcfarlin\/WordPress-Widget-Boilerplate\",\n    \"authors\": [\n      {\n        \"name\": \"Tom McFarlin\",\n        \"email\": \"tom@pressware.co\",\n        \"homepage\": \"https:\/\/pressware.co\"\n      }\n    ],\n    \"support\": {\n      \"issues\": \"https:\/\/github.com\/tommcfarlin\/WordPress-Widget-Boilerplate\/issues\"\n    },\n    \"config\": {\n      \"preferred-install\": \"dist\",\n      \"platform\": {\n          \"php\": \"7.1\"\n      }\n    },\n    \"repositories\": [\n      {\n        \"type\": \"composer\",\n        \"url\": \"https:\/\/wpackagist.org\"\n      }\n    ],\n    \"require\": {\n      \"php\": \"7.1\",\n      \"composer\/installers\": \"^1.4\"\n    },\n    \"require-dev\": {\n        \"friendsofphp\/php-cs-fixer\": \"^2.13.1\",\n        \"jakub-onderka\/php-parallel-lint\": \"^1.0.0\",\n        \"phpmd\/phpmd\": \"^v2.6.0\",\n        \"nikic\/php-parser\": \"^4.0\",\n        \"ocramius\/proxy-manager\": \"^2.0.0\",\n        \"phpro\/grumphp\": \"^0.13.1\"\n    },\n    \"scripts\": {\n      \"test\": [\n        \".\/vendor\/bin\/grumphp run\"\n      ]\n    },\n    \"minimum-stability\": \"stable\"\n  }<\/code><\/pre>\n<p>Luego <a href=\"https:\/\/gist.github.com\/tommcfarlin\/94d1c4d9f22431f12102051cff4300ab#file-01-plugin-boostrap-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">comenzamos a incluirlo en el arranque del complemento<\/a> (que finalizaremos hoy):<\/p>\n<pre><code>&lt;?php\n\n\/\/ Include the autoloader.\n\/\/ TODO: Note this has not yet been defined.\nrequire_once __DIR__. '\/inc\/autoload.php';\n<\/code><\/pre>\n<p>Pero aqu\u00ed hay un problema: \u00bfC\u00f3mo cargamos solo las clases que necesitamos para la distribuci\u00f3n?<\/p>\n<p>Para decirlo de otra manera: hay muchas bibliotecas que usamos en el desarrollo para asegurarnos de escribir c\u00f3digo de alta calidad que cumpla con los est\u00e1ndares. Pero no queremos distribuir 10 MB de datos a quienes usan nuestro proyecto.<\/p>\n<p>En cambio, debemos incluir solo los archivos que se requieren, \u00bfverdad? Y para hacer eso, debemos asegurarnos de generar un cargador autom\u00e1tico que podamos incluir que haga exactamente eso.<\/p>\n<p>Primero, le mostrar\u00e9 <a href=\"https:\/\/gist.github.com\/tommcfarlin\/94d1c4d9f22431f12102051cff4300ab#file-02-composer-distribution-command-txt\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">el comando<\/a> y luego explicar\u00e9 todo lo que hace:<\/p>\n<pre><code>$ composer install --no-dev --no-ansi --no-interaction --optimize-autoloader --no-progress --prefer-dist<\/code><\/pre>\n<p>Esto generar\u00e1 justo lo que necesitamos para que nuestro proyecto funcione en un entorno de producci\u00f3n. Esto es lo que hace cada bandera:<\/p>\n<ul>\n<li><strong>instalaci\u00f3n del compositor<\/strong>. Esto simplemente instala todas las dependencias. Si ya tiene varios de ellos en su directorio de proveedores, esto eliminar\u00e1 todos excepto los que sean necesarios.<\/li>\n<li><strong>sin<\/strong> desarrollo Esto evitar\u00e1 que Composer instale los paquetes en la secci\u00f3n <strong>require-dev<\/strong> de sus archivos de configuraci\u00f3n (es decir, las dependencias que estamos usando con GrumPHP).<\/li>\n<li><strong>no-ansi.<\/strong> Esto evita que se produzca cualquier salida ANSI. Puede que no le importe ejecutar esto o no. Si opta por hacer alg\u00fan tipo de implementaci\u00f3n autom\u00e1tica, util\u00edcelo; de lo contrario, se puede omitir del comando.<\/li>\n<li><strong>sin interacci\u00f3n<\/strong>. Esta es otra bandera que se usa espec\u00edficamente para entornos en los que desea compilar autom\u00e1ticamente el proyecto y no tener que involucrarse con preguntas, resultados y cosas por el estilo.<\/li>\n<li><strong>optimizar-cargador autom\u00e1tico<\/strong>. En resumen, esto genera un cargador autom\u00e1tico m\u00e1s r\u00e1pido. Puede tardar un poco en ejecutarse seg\u00fan el tama\u00f1o de su proyecto, pero vale la pena al iniciar su trabajo.<\/li>\n<li><strong>sin progreso<\/strong>. Esto oculta la barra de progreso para que no se muestre en la terminal. Es posible que realmente quieras ver esto y, si es as\u00ed, eso es genial; sin embargo, es posible que algunos entornos no manejen bien ciertos caracteres (como el retroceso).<\/li>\n<li><strong>prefer-dist<\/strong>. Esto asegurar\u00e1 que los paquetes que se instalan se hagan usando la versi\u00f3n de distribuci\u00f3n (en lugar de algo que es menos estable).<\/li>\n<\/ul>\n<h4>\u00bfA\u00fan interesado?<\/h4>\n<p>Si tiene mucha curiosidad por optimizar el cargador autom\u00e1tico para proyectos fuera de esta publicaci\u00f3n, le recomiendo leer <a href=\"https:\/\/getcomposer.org\/doc\/articles\/autoloader-optimization.md\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">esta p\u00e1gina<\/a> en la documentaci\u00f3n de Composer. Est\u00e1 fuera del alcance de lo que estamos haciendo aqu\u00ed, pero puede ser \u00fatil con otro trabajo que tenga ahora o que haga en el futuro.<\/p>\n<h2>\u00bfC\u00f3mo es este aspecto en el Boilerplate?<\/h2>\n<p>Si est\u00e1 trabajando en Boilerplate en su m\u00e1quina local, es posible que vea algo como esto:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-161015-61e719e23bf2d.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-161015-61e719e23bf2d.png\" alt=\"Widgets de WordPress: Refactorizaci\u00f3n, Parte 6\"><\/a><\/p>\n<p>Pero si ejecuta el comando que se incluye arriba, ver\u00e1 algo como esto:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-161015-61e719e5afd5a.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-161015-61e719e5afd5a.png\" alt=\"Widgets de WordPress: Refactorizaci\u00f3n, Parte 6\"><\/a><\/p>\n<p>Esa es una gran diferencia y este es un proyecto peque\u00f1o. Imagine hacer algo mucho m\u00e1s grande que se ejecutar\u00e1 en producci\u00f3n.<\/p>\n<p>Hablando por experiencia, puedo decirle que los proyectos pueden alcanzar r\u00e1pidamente 20 MB o m\u00e1s de dependencias si est\u00e1 utilizando una variedad de bibliotecas de terceros para cosas como registro, solicitudes HTTP y herramientas de calidad de c\u00f3digo.<\/p>\n<h2>\u00bfIncluiremos en nuestro directorio de proveedores?<\/h2>\n<p>La gente suele decir que no debe incluir el directorio de proveedores en el control de c\u00f3digo fuente y por una buena raz\u00f3n: puede ser enorme.<\/p>\n<p>Incluso la documentaci\u00f3n de Composer <a href=\"https:\/\/getcomposer.org\/doc\/faqs\/should-i-commit-the-dependencies-in-my-vendor-directory.md\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">habla de esto:<\/a><\/p>\n<blockquote>\n<p>La mejor pr\u00e1ctica es hacer que todos los desarrolladores usen Composer para instalar las dependencias. Del mismo modo, el servidor de compilaci\u00f3n, CI, herramientas de implementaci\u00f3n, etc. deben adaptarse para ejecutar Composer como parte de su proyecto de arranque.<\/p>\n<\/blockquote>\n<p>Entonces, \u00bfqu\u00e9 se supone que debemos hacer? Necesitamos el cargador autom\u00e1tico y necesitamos ciertas dependencias porque nuestros usuarios no sabr\u00e1n ejecutar (\u00a1ni deber\u00edan tener que ejecutar!) Composer siempre que descarguen nuestro trabajo.<\/p>\n<p>Debido a la naturaleza de WordPress y el trabajo que estamos haciendo, vamos a necesitar confirmar el directorio de proveedores, pero solo con ciertos requisitos.<\/p>\n<ol>\n<li>Crearemos una rama que se usar\u00e1 para el lanzamiento (la llamaremos creativamente <strong>lanzamiento<\/strong> y podemos fusionarla para <strong>desarrollarla<\/strong> cuando sea necesario).<\/li>\n<li>Nos aseguraremos de que el directorio de proveedores no sea parte del archivo gitignore; sin embargo, nos aseguraremos de que se ignoren los directorios .git dentro del directorio del proveedor (eso a\u00fan puede ocupar mucho espacio).<\/li>\n<\/ol>\n<p>Entonces, hagamos cada paso y veamos c\u00f3mo se ve cuando hayamos terminado.<\/p>\n<h3>Creaci\u00f3n de la rama de lanzamiento<\/h3>\n<p>Para crear una nueva rama desde la terminal, ingrese <a href=\"https:\/\/gist.github.com\/tommcfarlin\/94d1c4d9f22431f12102051cff4300ab#file-03-create-a-branch-txt\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">el siguiente comando<\/a> :<\/p>\n<pre><code>$ git checkout -b release<\/code><\/pre>\n<p>Esto tomar\u00e1 todo el c\u00f3digo en el que estamos trabajando y luego crear\u00e1 una nueva rama con \u00e9l. Ya que esta ser\u00e1 la rama que usaremos para actuar como lo que usar\u00e1n nuestros usuarios (hablaremos sobre <strong>el maestro<\/strong> en una publicaci\u00f3n futura).<\/p>\n<p>Primero, revise su archivo composer.json y aseg\u00farese de que incluya lo siguiente:<\/p>\n<pre><code>\"autoload\": {\n    \"psr-4\": {\n        \"WordPressWidgetBoilerplate\": \"src\/\",\n        \"WordPressWidgetBoilerplateSubscriber\": \"src\/Subscriber\/\",\n        \"WordPressWidgetBoilerplateUtilities\": \"src\/Utilities\/\",\n        \"WordPressWidgetBoilerplateViews\": \"src\/Views\/\"\n    }\n},<\/code><\/pre>\n<p>Ahora debemos asegurarnos de ejecutar el comando Composer anterior para asegurarnos de que nada m\u00e1s que lo que necesitamos est\u00e9 en el\u00a0 directorio de <strong>proveedores<\/strong>.<\/p>\n<pre><code>$ composer install --no-dev --no-ansi --no-interaction --optimize-autoloader --no-progress --prefer-dist<\/code><\/pre>\n<p>Ahora necesitamos actualizar gitignore.<\/p>\n<h3>Actualizar lo que ignoramos<\/h3>\n<p>Y si ha seguido tanto la serie como la publicaci\u00f3n hasta aqu\u00ed, entonces sabe que se ver\u00e1 as\u00ed (puede incluir m\u00e1s o menos, pero deber\u00eda incluir al menos esto).<\/p>\n<p>Para m\u00ed, esto se parece <a href=\"https:\/\/gist.github.com\/tommcfarlin\/94d1c4d9f22431f12102051cff4300ab#file-05-gitignore-txt\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">a lo siguiente<\/a> :<\/p>\n<pre><code>*.DS_Store\n*.log\nwp-config.php\nwp-content\/advanced-cache.php\nwp-content\/backup-db\/\nwp-content\/backups\/\nwp-content\/blogs.dir\/\nwp-content\/cache\/\nwp-content\/upgrade\/\nwp-content\/uploads\/\nwp-content\/mu-plugins\/\nwp-content\/wp-cache-config.php\nwp-content\/plugins\/hello.php\n\n\/.htaccess\n\/license.txt\n\/readme.html\n\/sitemap.xml\n\/sitemap.xml.gz\n\n\/vendor\/**\/.git\n\/vendor\/bin\ncomposer.lock\n<\/code><\/pre>\n<p>Dependiendo de si est\u00e1 utilizando una terminal o un cliente, ver\u00e1 que hay nuevos archivos para confirmar (del directorio del proveedor, espec\u00edficamente). As\u00ed que agr\u00e9galos a tu rama.<\/p>\n<p><a href=\"https:\/\/gist.github.com\/tommcfarlin\/94d1c4d9f22431f12102051cff4300ab#file-06-pushing-a-new-branch-txt\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Luego confirme sus cambios<\/a>. Es posible que deba especificar lo siguiente si est\u00e1 trabajando en la terminal:<\/p>\n<pre><code>$ git push --set-upstream origin release<\/code><\/pre>\n<p>Y con eso, su c\u00f3digo deber\u00eda funcionar y estar disponible en GitHub (o cualquier servicio de control de fuente que est\u00e9 usando). Puedes ver lo que tengo disponible <a href=\"https:\/\/github.com\/tommcfarlin\/WordPress-Widget-Boilerplate\/tree\/release\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">aqu\u00ed<\/a>.<\/p>\n<h2>Adici\u00f3n de funcionalidad<\/h2>\n<p>Ahora que tenemos todas las piezas necesarias en su lugar, es hora de comenzar a usar Composer, el autocargador, nuestras clases abstractas y nuestro Registro para comenzar a agregar algunas funciones b\u00e1sicas a WordPress Widget Boilerplate para que tengamos algo que mostrar para nuestro trabajo. .<\/p>\n<p>Para aquellos que tengan curiosidad, ahora mismo planeo mantener las sucursales organizadas as\u00ed:<\/p>\n<ul>\n<li><strong>master<\/strong> ser\u00e1 lo que est\u00e9 disponible para todos los que quieran crear un widget de WordPress,<\/li>\n<li><strong>desarrollar<\/strong> es estrictamente para desarrolladores, incluidos aquellos que saben c\u00f3mo usar Composer y los temas discutidos en esta publicaci\u00f3n,<\/li>\n<li><strong>release<\/strong> es lo que se utilizar\u00e1 para proporcionar una demostraci\u00f3n funcional.<\/li>\n<\/ul>\n<p>Sin embargo, por ahora, revise lo que se cubre en esta publicaci\u00f3n y lo retomaremos en la pr\u00f3xima publicaci\u00f3n.<\/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>Hay un problema al que nos enfrentamos con los espacios de nombres y la carga autom\u00e1tica y eso es lo que vamos a ver en esta publicaci\u00f3n.<\/p>\n","protected":false},"author":1,"featured_media":223641,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[716],"tags":[1172],"class_list":["post-230952","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollador","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/230952","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=230952"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/230952\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/223641"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=230952"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=230952"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=230952"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}