Dado que este es contenido de membres\u00eda, no me importa que sea un poco m\u00e1s largo de lo habitual, pero tampoco quiero que sea tan largo que sea dif\u00edcil de seguir. Prefiero que sea una lectura corta con algo pr\u00e1ctico que puedas implementar despu\u00e9s de leer cada publicaci\u00f3n.<\/p>\n
Y una de las cosas que ayuda mucho a escribir un mejor c\u00f3digo de WordPress es Composer.<\/p>\n
Mejor c\u00f3digo de WordPress con Composer<\/h2>\n
Si has le\u00eddo este blog durante alg\u00fan tiempo, sabr\u00e1s que soy fan\u00e1tico de Composer (sin embargo, estoy lejos de ser la \u00fanica persona que trabaja en WordPress que lo es).<\/p>\n
Y aunque he escrito algo de material al respecto, no he escrito algo con el objetivo espec\u00edfico de ponerlo en marcha al final de la lectura de un solo art\u00edculo breve.<\/p>\n
En ese momento, necesitaremos hacer algunos compromisos: a saber, proporcionar\u00e9 un archivo de configuraci\u00f3n de muestra junto con una forma de organizar el directorio de su complemento. Luego, en la pr\u00f3xima publicaci\u00f3n, explicar\u00e9 algunas de las caracter\u00edsticas de Composer.<\/p>\n
\u00bfQu\u00e9 es Compositor?<\/h3>\n
Primero, es importante entender qu\u00e9 es Composer. Y es f\u00e1cil recitar la definici\u00f3n como se indica en el sitio, \u00bfno es as\u00ed? Es un administrador de dependencias para PHP.<\/p>\n
Pero primero, \u00bfqu\u00e9 es una dependencia?<\/h4>\n
Para algunos, sin embargo, plantea algunas preguntas:<\/p>\n
- \n
- \u00bfQu\u00e9 es una dependencia?<\/li>\n
- \u00bfPor qu\u00e9 necesito administrarlos?<\/li>\n<\/ul>\n
Y si profundiza un poco m\u00e1s, es posible que descubra que es un administrador de paquetes, y esto simplemente plantea las mismas preguntas, excepto que simplemente reemplaza "dependencia" con "paquete", y est\u00e1 de vuelta donde comenz\u00f3.<\/p>\n
As\u00ed que har\u00e9 lo que pueda para dejar esto lo m\u00e1s claro posible:<\/p>\n
Una dependencia, o un paquete, una pieza de software que usa su c\u00f3digo. Puede ser algo en lo que se base para la funcionalidad durante el tiempo de ejecuci\u00f3n, como una forma de realizar solicitudes HTTP<\/a>, o puede ser una biblioteca para convertir matrices a XML<\/a>.<\/p>\n
Composer facilita la inclusi\u00f3n de estos paquetes particulares en su biblioteca al permitirle:<\/p>\n
- \n
- descargue e incluya el paquete en su complemento,<\/li>\n
- carga autom\u00e1ticamente su complemento durante el tiempo de ejecuci\u00f3n,<\/li>\n
- haga que sea f\u00e1cil para su complemento crear una instancia o llamar al complemento seg\u00fan sea necesario.<\/li>\n<\/ul>\n
Esto significa que no tenemos que ensuciar los directorios de nuestro c\u00f3digo base con una gran cantidad de archivos agregados manualmente y significa que no tenemos el uso de include<\/strong> o require<\/strong> por todas partes.<\/p>\n
Estos tendr\u00e1n su lugar, del cual hablar\u00e9 en la pr\u00f3xima publicaci\u00f3n, pero no necesitar\u00e1n instalarse autom\u00e1ticamente. En cambio, Composer los administrar\u00e1. Por lo tanto, el administrador de dependencias forma parte de su prop\u00f3sito.<\/p>\n
Ahora que lo tienes instalado<\/a>, tienes algo de contexto.<\/p>\n
Usando el compositor<\/h3>\n
Escribir esta secci\u00f3n en particular es algo dif\u00edcil porque todos tenemos necesidades diferentes, \u00bfverdad? Pero al menos, todos podemos aprovechar un cargador autom\u00e1tico.<\/p>\n
Eso es algo que todos podemos usar.<\/p>\n
As\u00ed que esto es lo que har\u00e9:<\/p>\n
- \n
- Configurar\u00e9 un directorio b\u00e1sico de complementos,<\/li>\n
- Cree los archivos necesarios para manejar el complemento,<\/li>\n
- Configure un archivo Composer simple,<\/li>\n
- Ejecutalo<\/li>\n<\/ol>\n
Y luego te dejar\u00e9 ver los resultados. Podemos ingresar a bibliotecas de terceros u otras caracter\u00edsticas en una publicaci\u00f3n futura (o en una serie futura, en realidad).<\/p>\n
Pero al menos, esto le mostrar\u00e1 c\u00f3mo usar Composer para definir un cargador autom\u00e1tico para que pueda concentrarse en escribir c\u00f3digo y no en preguntarse si las clases est\u00e1n incluidas.<\/p>\n
El directorio de complementos<\/h4>\n
Generalmente estructuro mis complementos as\u00ed:<\/p>\n
- \n
- hay un archivo de arranque le\u00eddo por WordPress,<\/li>\n
- hay un\u00a0 directorio src<\/strong> en el que se guardan todos los directorios y archivos PHP,<\/li>\n
- hay un\u00a0 directorio de activos<\/strong> de nivel superior donde se guardan las im\u00e1genes, los archivos JavaScript y los archivos Sass,<\/li>\n
- y hay una carpeta de proveedores creada por Composer para albergar las dependencias y el cargador autom\u00e1tico.<\/strong><\/li>\n<\/ul>\n
De vez en cuando puede haber alguna otra carpeta extra\u00f1a como una carpeta inc<\/strong> o lib<\/strong>, pero eso es muy irregular en este momento en el tipo de trabajo que hago. Y por eso, no me voy a preocupar por eso en este post.<\/p>\n
En cambio, mi directorio se parece a esto.<\/p>\n
Falta el\u00a0 directorio de proveedores<\/strong> porque todav\u00eda no he creado un archivo Composer que se use para ejecutar. Pero eso lo veremos antes del final del post.<\/p>\n
Archivos de ejemplo<\/h4>\n
Configuremos un archivo de muestra en el complemento. Y cuando digo muestra, tambi\u00e9n quiero decir simple.<\/p>\n
Este archivo va a tener un \u00fanico prop\u00f3sito: imprimir un mensaje en el tablero cuando inicie sesi\u00f3n en WordPress.<\/p>\n
![\"Herramientas](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-160226-61e707e186b99.png\")
<\/a><\/p>\nSin embargo, recuerde que el prop\u00f3sito de esto no es mostrar c\u00f3mo escribir un complemento con una buena arquitectura. En cambio, es para mostrar c\u00f3mo generar un cargador autom\u00e1tico para que los archivos del complemento se generen autom\u00e1ticamente.<\/p>\n
Entonces, el arranque del complemento se ve as\u00ed<\/a> :<\/p>\n
<?php\n\/**\n * The plugin bootstrap file\n *\n * This file is read by WordPress to generate the plugin information in the plugin\n * admin area. This file also includes all of the dependencies used by the plugin,\n * registers the activation and deactivation functions, and defines a function\n * that starts the plugin.\n *\n * @since 0.1.0\n * @package SamplePlugin\n *\n * @wordpress-plugin\n * Plugin Name: Sample Plugin\n * Description: A sample plugin used for a blog post.\n * Version: 0.1.0\n * Author: Tom McFarlin\n * Author URI: https:\/\/tommcfarlin.com\n * License: GPL-3.0+\n * License URI: http:\/\/www.gnu.org\/licenses\/gpl-3.0.txt\n *\/\n\nnamespace SamplePlugin;\n\nuse SamplePluginMessenger;\n\n\/\/ This file called directly.\ndefined('WPINC') || die;\n\n\/\/ Include the autoloader.\nrequire_once __DIR__. '\/vendor\/autoload.php';\n\n\/\/ Start the machine.\n(new Messenger())->start();\n<\/code><\/pre>\nY el archivo espec\u00edficamente responsable de mostrar el mensaje se ve as\u00ed<\/a> :<\/p>\n
<?php\n\nnamespace SamplePlugin;\n\nclass Messenger\n{\n \/**\n * Subscribers the `adminNotices` function to the admin_notices hook in WordPress.\n *\/\n public function start()\n {\n add_action('admin_notices', [$this, 'adminNotices']);\n }\n\n \/**\n * Displays the contents of the `message.html` file into the adminitrative notices\n * area on the dashboard whenever the plugin is active.\n *\/\n public function adminNotices()\n {\n if ('dashboard' !== get_current_screen()->id) {\n return;\n }\n\n include_once dirname(__FILE__). '\/Admin\/Views\/message.html';\n }\n}\n<\/code><\/pre>\nY si tiene curiosidad sobre el archivo HTML, tambi\u00e9n es simple<\/a> :<\/p>\n
<div class=\"notice notice-success is-dismissible\">\n <p>This is a message from the <strong>Sample Plugin<\/strong><\/p>\n<\/div>\n<\/code><\/pre>\nTe dije que era sencillo.<\/p>\n
El archivo de configuraci\u00f3n del compositor<\/h4>\n
Este archivo en particular puede ser tan simple o tan complicado como sea necesario. Para esta publicaci\u00f3n, lo mantendremos simple. El objetivo de esta publicaci\u00f3n es simplemente darle un nombre, una descripci\u00f3n, una licencia, los autores y luego c\u00f3mo configurar el cargador autom\u00e1tico.<\/p>\n
Echa un vistazo aqu\u00ed<\/a> y luego te explicar\u00e9 lo que ves justo debajo:<\/p>\n
{\n \"name\": \"tommcfarlin\/sample-plugin\",\n \"description\": \"A sample plugin used for a blog post.\",\n \"type\": \"wordpress-plugin\",\n \"license\": \"GPL-3.0-or-later\",\n \"authors\": [\n {\n \"name\": \"Tom McFarlin\",\n \"email\": \"tom@tommcfarlin.com\",\n \"homepage\": \"https:\/\/tommcfarlin.com\"\n }\n ],\n \"autoload\": {\n \"psr-4\": {\n \"SamplePlugin\": \"src\/\"\n }\n }\n }<\/code><\/pre>\nPrimero, el nombre, la descripci\u00f3n, el tipo y la licencia deben ser lo suficientemente f\u00e1ciles de seguir. El \u00e1rea del autor tambi\u00e9n es sencilla.<\/p>\n
La carga autom\u00e1tica es el \u00e1rea que nos preocupa en este momento. Deber\u00eda ser bastante claro.<\/p>\n
En resumen, tenemos una directiva para PSR4<\/strong> sobre \u00a0la que puede leer m\u00e1s y luego d\u00f3nde se encuentra un espacio de nombres. Entonces, en el ejemplo anterior, cualquier cosa en el espacio de nombres SamplePlugin<\/strong> se encuentra en src.\u00a0<\/strong><\/p>\n
Esto es lo que le dice al cargador autom\u00e1tico d\u00f3nde buscar ciertos archivos. Y en nuestro caso, solo buscar\u00e1 la\u00a0 clase Messenger<\/strong>.<\/p>\n
Compositor en ejecuci\u00f3n<\/h4>\n
Ahora que hemos cubierto los conceptos b\u00e1sicos del archivo de configuraci\u00f3n de Composer, es hora de ejecutarlo. Recuerde que su directorio de complementos deber\u00eda verse as\u00ed:<\/p>\n
![\"Herramientas](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-160226-61e707e55e20b.png\")
<\/a><\/p>\nEn tu terminal, ingresa el siguiente comando<\/a> :<\/p>\n
Y deber\u00edas ver algo como esto:<\/p>\n
![\"Herramientas](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-160226-61e707e92efb9.png\")
<\/a><\/p>\nSuponiendo que todo haya ido bien, deber\u00eda poder iniciar sesi\u00f3n en WordPress y activar el complemento.<\/p>\n
Verlo todo junto<\/h4>\n
Una vez que se activa el complemento, puede navegar al panel de control de su sitio. All\u00ed, deber\u00eda ver un aviso de descartable que se ve exactamente como vimos al comienzo de la publicaci\u00f3n:<\/p>\n
<\/a><\/p>\nSi has llegado hasta aqu\u00ed, \u00a1entonces est\u00e1s listo para empezar! De lo contrario, verifique dos veces su sintaxis para asegurarse de que todo est\u00e9 bien. Si algo est\u00e1 mal, es probable que no haya podido llegar tan lejos y, asumiendo que tiene configuradas las constantes de depuraci\u00f3n<\/a> b\u00e1sicas, es probable que vea d\u00f3nde existe el problema.<\/p>\n
esto no es todo<\/h2>\n
Hay mucho m\u00e1s en Composer, y recomiendo leer la documentaci\u00f3n correspondiente. Cubrir\u00e9 algo de esto cuando mire las herramientas que planeo cubrir m\u00e1s adelante en esta serie pero, por ahora, recomiendo familiarizarse con algunas de las convenciones.<\/p>\n
\u00a1Vaya! Y no recomiendo consultar el directorio de proveedores en su repositorio. Eso puede convertirse en un directorio enorme m\u00e1s tarde y puede socavar el prop\u00f3sito completo de Composer.<\/p>\n
En el pr\u00f3ximo post, voy a hablar de por qu\u00e9. Algunas personas lo hacen, y est\u00e1 bien, y yo lo he hecho antes, pero es importante ser juicioso cuando lo haces.<\/p>\n
Errar por el lado de no hacerlo. Y te explico por qu\u00e9 en el pr\u00f3ximo post.<\/p>\n
- hay un\u00a0 directorio de activos<\/strong> de nivel superior donde se guardan las im\u00e1genes, los archivos JavaScript y los archivos Sass,<\/li>\n