Mi viaje para crear un complemento de WordPress con ChatGPT: 120 horas de trabajo, sin experiencia previa
Publicado: 2024-08-28Seré honesto: de hecho pensé que podría crear un complemento de WordPress con ChatGPT en solo un par de horas. O, al menos, eso es lo que todos los tutoriales de YouTube y los hilos de Twitter me hicieron creer.
Pero déjenme decirles que esas historias omitieron algunos detalles cruciales: alrededor de 120 horas de detalles, para ser exactos. Sí, ese es el tiempo que me llevó crear el complemento de principio a fin: ¡120 horas!
Por contexto, no tenía ninguna experiencia previa con complementos o desarrollo de WordPress, pero decidí sumergirme de todos modos. Y aunque me encantó el desafío, fue mucho más difícil de lo que esperaba. En cada paso del camino, me encontré con un obstáculo tras otro, muchos de los cuales ni siquiera sabía que existían. Fue frustrante, pero también una enorme – ¡enorme (!) – experiencia de aprendizaje.
Suponiendo que planee seguir mis pasos, le recomiendo encarecidamente que lea este artículo en su totalidad de antemano. No lo digo como una especie de autopromoción. Lo digo porque realmente le ahorrará horas (incluso días) de trabajo extra. Hay tantas cosas con las que me topé en este proceso que no tenía idea de que fueran importantes hasta después del hecho. Desafortunadamente, eso llevó a innumerables revisiones de código (llenas de mucha frustración) que podrían haberse evitado. Al leer esto, no tendrás ese problema.
¿Para quién es y para quién no? 🙋♂️
Dependiendo de sus antecedentes y habilidades, es posible que se pregunte si está “lo suficientemente calificado” para hacer esto. Diré esto mucho:
Si bien no es necesario tener ningún conocimiento previo de codificación, sí debe estar entusiasmado por aprender algo de código y el proceso general de desarrollo de un complemento. Hay muchas fases que superar y, a menudo, una fase no tiene nada que ver con la otra en términos de las habilidades (o incluso herramientas) que necesitas para completarla. En resumen, prepárate para aprender: MUCHO .
Dependiendo de la naturaleza de su complemento y sus objetivos finales, fácilmente podría llevarle un mes o más crear un producto final.
Tener buen ojo para los detalles y reconocer patrones será de gran ayuda, al igual que saber qué hacen PHP, JavaScript y CSS. No es necesario saber cómo codificar con ellos, pero comprender su propósito y cómo se utilizan será una ventaja.
Si nada de lo anterior lo describe (particularmente la voluntad de aprender) y está buscando una solución rápida y sencilla, entonces esto no es para usted. No es ni rápido ni fácil. Pero es posible si te esfuerzas.
Si estás de acuerdo con eso, entonces comencemos.
Fase uno: planifique su complemento en detalle 📝
La primera pregunta que debes hacerte (y responder) es ¿qué tipo de complemento quiero crear y qué quiero que haga?
Es posible que tengas la tentación de apresurarte para poder comenzar a construir y codificar, pero te insto a que te tomes tu tiempo. Lo que haga aquí sentará las bases para sus indicaciones y le permitirá construir de manera organizada, en lugar de agregar cosas sobre la marcha. Para superar esta fase de manera efectiva, considere lo siguiente:
- ¿Qué funciones quieres que tenga tu complemento?
- ¿Cómo quieres que se vea el lado wp-admin?
- Cree estructuras alámbricas o diagramas de flujo para visualizar el flujo de trabajo del complemento.
- Mapéelo y descríbalo hasta el más mínimo detalle.
- Decide si lo quieres para uso privado o si quieres que esté disponible en el repositorio de WordPress para acceso público.
Funciones
El administrador de wp
A continuación, considere cómo desea que aparezca y funcione su complemento en el área de administración de WordPress. Esto incluye:
- Páginas de configuración : ¿Qué opciones desea proporcionar? ¿Cómo los organizarás?
- Menús : ¿Dónde aparecerá su complemento en el menú de administración? ¿Tendrá submenús?
- Metaboxes : si su complemento interactúa con publicaciones o páginas, ¿necesitará metaboxes personalizados?
- Tablas : si está almacenando datos, ¿cómo los mostrará para que los revise el administrador?
En mi caso, me decidí por una página de configuración principal con pestañas para cada uno de mis códigos cortos, una página separada para documentación y también una página con un formulario de contacto en caso de que los usuarios quieran ponerse en contacto conmigo. Esto es lo que se me ocurrió:
Desafortunadamente para mí, pero no para ti porque estás leyendo esto, es que estaba tan concentrado en la funcionalidad frontal de mi complemento durante la fase de planificación, que descuidé por completo el lado de wp-admin.
Esto hizo que me llevara más tiempo de lo que hubiera tardado si lo hubiera planeado con anticipación porque tuve que revisar el código una y otra vez cuando me di cuenta de que lo que tenía estaba incompleto o tenía una experiencia de usuario deficiente. Si lo hubiera trazado con anticipación, o mejor aún, si hubiera usado wireframes, entonces esta fase habría sido mucho más fluida, lo cual es una transición perfecta al siguiente punto.
Wireframes o diagramas de flujo
Combina todo y descríbelo en detalle.
Uso privado versus acceso público a través del repositorio de WordPress
Hay una decisión más que debes tomar antes de pasar a la fase dos. Esa decisión tiene que ver con para quién vas a crear este complemento.
¿Quieres hacerlo sólo para ti (o un cliente)? ¿O desea enviarlo al repositorio de WordPress para su aprobación y que esté disponible para el público en general?
Técnicamente, no es necesario que tomes esta decisión todavía. Sin embargo, en retrospectiva, desearía haberlo hecho antes en el proceso. Por eso te recomiendo que lo hagas ahora.
La razón es que mi objetivo desde el principio era enviar mi complemento al repositorio, pero inicialmente lo construí sin seguir los estándares de codificación de WordPress. Me concentré únicamente en la funcionalidad y en llevarla a un punto en el que funcionara sin errores.
Como resultado, terminé teniendo que hacer muchos ajustes adicionales en el código para que mi código se ajustara a los estándares. No hace falta decir que esto tomó mucho tiempo y podría haberse evitado.
Dicho esto, incluso si planeas crear un complemento solo para uso privado, te recomendaría seguir los estándares de codificación. Esto reducirá la probabilidad de que su complemento no funcione correctamente en versiones posteriores de WordPress. En cuanto al proceso, la principal diferencia es que no será necesario ser tan anal con los aspectos no funcionales de los estándares.
Por ejemplo, cuando haces comentarios en línea como // Use global default. es necesario poner un punto al final. El período no tiene ningún propósito funcional, pero si falta, se marcará como un "error" según los estándares. Para una compilación privada, puedes ignorar este tipo de "error".
Fase dos: proporcione a ChatGPT un mensaje detallado para comenzar el desarrollo 🗣️
La idea principal aquí es brindarle a GPT una descripción general de su complemento con instrucciones claras. Como sugerencia general, te aconsejaría que evitaras intentar construir toda la casa de una vez. Es mejor adoptar un enfoque ladrillo por ladrillo.
Digamos que vas a crear mi complemento como ejemplo.
Aunque tiene ocho efectos, recomendaría decirle a GPT que desea comenzar con un efecto. Casi como si estuvieras creando un complemento de un efecto en lugar de uno de ocho efectos . Luego verifique para asegurarse de que el efecto funcione, incluida el área de configuración del back-end. Corrija cualquier error y, una vez que todo se vea bien, agregue el siguiente efecto. Luego simplemente siga este proceso, uno por uno.
La razón para hacerlo de esta manera es que facilita la corrección de cualquier error que pueda introducirse en su código a medida que su código crece en complejidad. Si GPT genera todo el código a la vez y muchas cosas no funcionan, será mucho más difícil de solucionar.
Aún desea brindarle a GPT una descripción general amplia de su visión general del complemento, pero finalice el mensaje enfocándose primero en algo específico.
Para ahorrarte algo de tiempo, he creado una plantilla de ejemplo que puedes proporcionarle a ChatGPT para comenzar.
Las secciones entre corchetes [X] requieren su entrada para completarse. Es posible que tengas que editarlo más o no, dependiendo del tipo de complemento que planeas crear.
Si no entiende todo lo que aparece en el mensaje, no se preocupe, yo tampoco lo entendí. Aprenderá a medida que avance en el proceso.
Mi mensaje 🤖
I want to build a WordPress plugin called [name] that does the following: [General overview but don't give GPT the specifics yet] I'd like it to work via [Refer back to the section "combine everything and describe it in detail" from phase one; think about how you want your plugin to function - if you're not sure, then you can delete this part] . I would also like to create a settings menu in wp-admin so that users can [Explain what you want your settings menu to look like and do, including any specific UI/UX considerations; if you create any wireframes, upload those as well] I plan on using the following tools for this process: - Docker and/or Local by Flywheel {Choose one or use both} - Terminal (MAC) {if you're using a PC, substitute with Command Prompt} - Sublime Text - Chrome and Chrome inspector tool Also, I want to use GitHub for version control to track changes and collaborate effectively. I will use the default WordPress template provided by GitHub to generate the code for the .gitignore file. However, I will need your help to walk me through how to set up a repository and how to commit my files to it. For the main PHP file, the author name should be [your name] and the author URI should be [your website if you have one] . For any code you generate, please use tabs for indentation and not spaces. {important if you plan on submitting your plugin to the WordPress repository} If you need to enqueue any scripts, please ask me questions to help me figure out whether we should use conditional loading or if we should enqueue globally. In addition, when generating CSS, please follow BEM (Block Element Modifier) methodology. Let's begin with [insert which feature you'd like to build first] Please [Optional: help me setup Local by Flywheel and then] generate the initial PHP file and advise on next steps after that.Después de proporcionarle su mensaje a ChatGPT, lo guiará a través del resto de los pasos, que describo a continuación. Vale la pena señalar que, dependiendo del estado de ánimo de ChatGPT o de su propio deseo de seguir el proceso tal como lo expuse, la forma en que enumero todo puede no ser tan lineal como se presenta.
Para darle una idea de lo que quiero decir, probé el mensaje tres veces diferentes. Además de ayudarme a configurar Local by Flywheel y generar el archivo PHP inicial, optó por realizar los demás pasos de una manera diferente cada vez.
primer intento
En mi primer intento, ChatGPT no fue más allá de generar el archivo PHP y me presentó dos opciones sobre cómo me gustaría proceder a continuación. En particular, siguió las instrucciones sobre cómo poner en cola scripts con carga condicional y también lo mencionó.
Segundo intento
El segundo intento resultó en el archivo PHP más simple, pero la respuesta general más completa en términos de seguir los pasos. Saltó directamente al uso de Terminal para configurar directorios de proyectos e inicializar Sublime. Incluso llegó a enseñarme cómo configurar el repositorio de Git.
Tercer intento
El tercer intento fue algo similar al primero. Aunque, a diferencia del primer intento, ChatGPT no configuró la carga condicional para los scripts ni me preguntó al respecto. Simplemente los generó como globales de forma predeterminada.
la comida para llevar
La razón por la que compartí brevemente estos tres intentos con usted fue no solo para reforzar lo que dije antes sobre cómo el flujo de trabajo no necesariamente estará estandarizado, sino también para señalar que el mensaje es tanto para usted como para GPT .
Lo que quiero decir es que depende de usted prestar atención a lo que ChatGPT está haciendo (y lo que no está haciendo) y volver a encarrilarlo si falla. Entonces, a medida que avanza en este viaje, no olvide consultar el mensaje y también los consejos que compartiré un poco más adelante en la sección de depuración. Recuerde y reoriente ChatGPT para que haga lo que usted desea que haga tanto como sea necesario.
Descarga mi complemento y pruébalo 📥
Si desea probar la “versión funcional” de mi complemento, el archivo zip se encuentra a continuación. Actualizaré esto en un futuro próximo para incluir la versión del repositorio de WP, pero esto le permitirá usarlo por ahora.
Fase tres: herramientas, scripts, directorios y Git 👩💻
En esta fase, sentará las bases para crear su complemento. También es donde la curva de aprendizaje aumentará rápidamente, especialmente una vez que empieces a instalar scripts y usar Terminal (o símbolo del sistema si estás en una PC). Aquí está el desglose:
- Decida qué herramienta de entorno local desea utilizar (por ejemplo, Local by Flywheel, Docker).
- Configure los directorios de sus proyectos.
- Instale sus scripts (por ejemplo, npm, Composer).
- Configure un repositorio Git (“repo”) y envíe (cargue) sus archivos de complementos en él
Construir un entorno local
Configurar directorios de proyectos
Instalar scripts
Cree un repositorio Git (“repo”) y confirme sus archivos
Una vez realizados todos los pasos anteriores, es hora de crear un repositorio Git y enviarle sus archivos iniciales. Este paso crea una instantánea del punto de partida de su proyecto.
Personalmente usé GitHub porque eso es lo que usamos aquí en Themeisle, por lo que ya tenía una cuenta allí, pero también hay otras plataformas (por ejemplo, GitLab, Bitbucket). Si terminas usando una plataforma que no sea GitHub, no olvides ajustar la plantilla de aviso en la fase tres .
En aras de la brevedad, no voy a explicarte cómo hacer esto. Una vez que llegue a este paso, ChatGPT puede guiarlo a través del proceso paso a paso, incluidos los comandos que deberá escribir en su Terminal/Símbolo del sistema.
Al enviar sus archivos iniciales, tenga en cuenta estos puntos:
- Revise lo que está confirmando: asegúrese de incluir solo los archivos necesarios. Utilice su archivo
.gitignorepara excluir cualquier archivo temporal o generado. - Escriba un mensaje de confirmación claro: algo como "Confirmación inicial: configuración y estructura básica del proyecto" funciona bien.
- No te preocupes por la perfección: este es solo tu punto de partida. Realizará muchas más confirmaciones a medida que desarrolle su complemento.
Nuevamente, lo más probable es que ChatGPT le brinde orientación sobre los comandos específicos que debe usar para esta confirmación inicial. Si no es así, pídelo. Asegúrese de escribir que necesita los pasos exactos según su configuración y plataforma Git.
Al completar este paso, iniciará oficialmente su proyecto de desarrollo de complementos con una base sólida para el control de versiones. De ahora en adelante, podrá realizar un seguimiento de cada cambio que realice, experimentar con nuevas funciones de forma segura y colaborar con otras personas si así lo decide.
Fase cuatro: tiempo de reproducción del complemento 🖱️
De todas las fases, diría que esta y la siguiente son probablemente las más divertidas porque es cuando realmente empiezas a ver que todo se junta. Para comenzar, querrás iniciar sesión en tu instalación local de WordPress. Si terminas usando Local by Flywheel, es muy sencillo, simplemente haz clic en el botón WP Admin cerca de la parte superior derecha:
Si terminas usando Docker u otra herramienta de desarrollo local y no estás seguro de cómo ingresar a tu sitio, pregúntale a ChatGPT.
Una vez que haya iniciado sesión, active su complemento yendo a Complementos → Complementos instalados . Luego busque su complemento en la lista y haga clic en Activar :
⚠️ Importante : si no ves tu complemento aquí, no entres en pánico. Lo más probable es que el directorio no coincida, pero de todos modos, puedes tocar ChatGPT para ayudarte a resolverlo. Si todavía te encuentras atascado después de repetidos intentos y ChatGPT no te ha sugerido que pruebes el modo de depuración de WordPress, entonces pídele que te proporcione los fragmentos de código correspondientes. Se verán así:
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );Después de activar su complemento, comience a usarlo y tome notas:
- ¿Está todo funcionando como se supone que debe hacerlo? Altamente improbable .
- ¿Qué no funciona? ¿De qué manera no funciona?
- ¿Cuáles son algunas cosas menores que pasó por alto por completo en su descripción inicial y que no funcionan correctamente?
Una vez que haya tomado sus notas, estará listo para pasar a la siguiente fase: depuración y linting.
Fase cinco: depuración y linting 💻
La complejidad del complemento y los errores tienen una relación de correlación: cuanto más complejo se vuelve su complemento, mayor es el potencial de errores . Pero incluso los complementos más simples requerirán depuración y depuración.
pelusa
Si este artículo es la primera vez que ve la palabra "linting" y no está seguro de lo que significa, muy simplemente, verifica el código de su complemento con un conjunto de reglas y estándares para ese tipo de código. Luego le indica si encontró algún error o inconsistencia, en qué líneas se encuentran y cómo resolverlos.
La eliminación de pelusas es bastante sencilla. Solo asegúrese de estar utilizando las herramientas de linting adecuadas para los tipos de código/archivos en los que trabajará:
- PHP_CodeSniffer con estándares de codificación de WordPress para linting PHP.
- ESLint para linting de JavaScript.
- StyleLint para linting CSS.
Para JavaScript, es posible que también quieras agregar:
- ESLint Unicorn: Más de 100 poderosas reglas de ESLint.
- ESLint Promise: útil para administrar tareas asincrónicas como llamadas API, consultas de bases de datos, manejo de archivos o cualquier operación que demore tiempo en completarse.
Depuración
A diferencia de linting, la depuración es muy parecida a lo que hizo en la fase anterior, que es que usted mismo usa el complemento, identifica los problemas que deben solucionarse y luego los soluciona usted mismo o le pide a ChatGPT que lo ayude.
Personalmente, encontré que la depuración es más complicada que el linting. Una razón importante es que cuando haces lint, el resultado del proceso de linting te dice exactamente cuáles son los problemas y en qué parte de tu código se encuentran. Con la depuración, no se puede dar ese lujo. Depende de usted y de ChatGPT resolverlo.
Sin embargo, a ChatGPT le resulta difícil concentrarse en líneas de código problemáticas, lo que significa que debe encargarse del "listo, listo" antes de dejar que "dispare".
Para facilitarle las cosas, preparé una lista de todos los diversos consejos que me habría dado antes de comenzar la fase de depuración.
No seas vago y no lo dejes en manos de ChatGPT
Si no le das a ChatGPT instrucciones muy específicas, comenzará a escupirte interminables líneas de código y muchas veces el código ni siquiera será diferente de lo que ya te dio. Querrá que "verifiques dos veces" que sea correcto, pero lo único que hace es perder el tiempo. No hay nada más frustrante que esto:
Lo que deberías hacer en su lugar es darle a ChatGPT instrucciones muy específicas para no simplemente generar código, sino para aislar específicamente qué líneas de código cree que están causando el problema y mostrárselas. Dígale que explique cómo planea cambiar esas líneas y por qué cree que estos cambios resolverán el problema. Finalmente, pídale que le diga cuál debería ser el resultado esperado después de que se implementen estos cambios.
Estas instrucciones le ayudarán a centrarse en el problema y minimizarán los errores indirectos que podrían solucionar su único problema pero causar nuevos problemas en el proceso.
CSS normal frente a CSS BEM
En relación con lo anterior, pero específico de CSS, debes tener en cuenta que para cualquier fragmento de CSS, ChatGPT generará CSS estándar, o lo que yo llamo "CSS de aula" de forma predeterminada.
Este es el CSS básico que aprenderías al realizar un curso para principiantes sobre el tema. Es fácil de entender y técnicamente no tiene nada de malo en sí mismo, pero al desarrollar complementos de WordPress, puede generar conflictos con otros complementos o temas.
En su lugar, es mejor decirle a GPT que utilice la metodología BEM (Block Element Modifier). BEM ayuda a reducir el riesgo de conflictos CSS al proporcionar una convención de nomenclatura clara y estructurada. Garantiza que sus estilos sean más predecibles y fáciles de administrar, ya que cada bloque, elemento y modificador tiene un nombre de clase descriptivo distinto que minimiza la posibilidad de impactos de estilo no deseados. Además, BEM mejora la capacidad de mantenimiento al facilitar la localización y actualización de estilos específicos sin afectar a otros.
Ya incluí una mención de esto en el mensaje de ejemplo en la fase dos, pero lo resalto aquí para que siempre recuerdes darle estas instrucciones a ChatGPT para tus fragmentos de CSS.
Carga condicional versus puesta en cola global
Otro comportamiento predeterminado de ChatGPT tiene que ver con poner en cola los scripts. No te preocupes si aún no sabes lo que significa esta frase. Lo que importa es que lo reconozcas en tu código cuando lo veas. Se verá así:
function enqueue_my_scripts() { wp_enqueue_script('my-plugin-script', plugin_dir_url( FILE ) . 'js/my-script.js', array('jquery'), '1.0.0', true); } add_action('admin_enqueue_scripts', 'enqueue_my_scripts');En el ejemplo anterior, el código pondrá en cola globalmente un script para todas las páginas de administración, lo que a menudo es innecesario y puede provocar problemas de rendimiento. Desafortunadamente, eso es lo que ChatGPT te dará a menos que hables y le digas que no lo haga. Para ser claros, en algunos casos esto es completamente apropiado, pero en muchos casos no lo es.
Por lo tanto, tan pronto como notes que ChatGPT genera algún código con la palabra "poner en cola", asegúrate de tener una conversación al respecto. Pregúntele a ChatGPT si tiene sentido poner en cola sus scripts globalmente o solo en las páginas específicas donde se necesitan los scripts, lo que se conoce como "carga condicional".
Recordar y recordar con frecuencia
ChatGPT tiene tendencia a ser olvidadizo y esto es aún más cuando lo usas para codificar. Entonces, si bien puede darle instrucciones específicas, la probabilidad de que siga esas instrucciones durante la duración de su proyecto es cero .
A veces incluso ignorará por completo lo que le pidas que haga. Si esto sucede, sea más severo y hágale saber que no está haciendo lo que usted quiere:
Además de eso, después de unas pocas interacciones, rápidamente volverá a su comportamiento estándar de intentar ahogarte en cantidades masivas de código que no tienen nada que ver con la sección de código que estás intentando depurar.
Cuando esto suceda, simplemente presione el botón de detener en la salida de GPT y recuérdele que siga sus instrucciones. También es útil copiarlos y pegarlos en la ventana de chat cuando estás dando el recordatorio.
Y hablando de generar largas líneas de código…
Evite que ChatGPT regenere archivos completos por usted
Cuando no está acostumbrado a trabajar con código y se siente intimidado por él, pedirle a ChatGPT que regenere el archivo completo después de cada ajuste de código puede parecer atractivo al principio.
Todo lo que tienes que hacer es "copiar y pegar", ¿verdad?
Si bien puede parecer tentador, en realidad es una mala idea . A la larga te causará más problemas. No sólo perderá mucho tiempo haciendo esto, especialmente si está depurando su archivo PHP, que puede llegar a ser bastante largo, sino que ChatGPT podría introducir nuevos errores en su código existente en el proceso. Solucionará el problema en el que estás trabajando, pero luego modificará accidentalmente alguna otra parte del archivo y romperá algo.
Es mejor aislar las partes específicas del código que están causando el problema y trabajar solo en ellas.
Tómelo un error a la vez
En línea con lo anterior, incluso si tiene varios errores, a menos que sean muy menores, solo informe a ChatGPT sobre uno de ellos a la vez. Corrija cada error antes de pasar al siguiente.
Preste mucha atención a las líneas superior e inferior de los fragmentos de código.
Cuando ChatGPT le proporciona fragmentos de código, a veces, pero no siempre, los encapsulará mostrándole la línea superior del archivo general con el que está trabajando, y también la línea final. Por lo tanto, debe tener cuidado de no copiar y pegar siempre el fragmento completo porque esto provocará que el código se rompa.
⚠️ Presta mucha atención a la línea superior:
Si no es relevante para el fragmento de código específico que está intentando depurar, ignórelo.
Lo mismo ocurre con el resultado final, aunque esto puede ser más complicado de detectar. A veces puede ser tan simple como algo como }); lo que hace que su código se rompa porque cierra un fragmento principal que aún no debe cerrarse.
Después de un tiempo, mejorará su capacidad para resolverlo, pero cuando comience su viaje de desarrollo de complementos, si nota que muchas cosas fallan después de agregar un fragmento, intente eliminar esa última línea para ver si "mágicamente" ”arregla todo.
La consola es tu mejor amiga.
Si ChatGPT intenta depurar el mismo problema sin éxito y te encuentras dando vueltas, pídele que agregue líneas console.log a las secciones de código que cree que están causando el problema. Luego abre la consola mientras recreas el error. Explicará lo que pasó. Luego puede capturar esta explicación y entregársela a ChatGPT para que pueda descubrir cómo solucionarlo.
Para acceder a la consola en Google Chrome, haga clic derecho en la página y seleccione Inspeccionar :
Cuando la consola no te da respuestas revisa tu base de datos
La consola es excelente y muchas veces te dará las respuestas que necesitas. Sin embargo, en algunas ocasiones, solo confirmará lo que está experimentando, pero sin darle ningún tipo de dirección sobre cómo solucionarlo.
Por ejemplo, cuando intentaba agregar un efecto de escritura a mi complemento, la velocidad de vista previa predeterminada del efecto en wp-admin se configuró en 23 milisegundos. Pasé una enorme cantidad de tiempo revisando mis archivos PHP y JavaScript para intentar solucionar el problema, pero fue en vano.
La consola confirmó que cargaba en 23, pero más allá de eso, no me dio ninguna otra información valiosa:
Finalmente, verifiqué la base de datos y me di cuenta de que el valor defectuoso provenía de allí:
Cambié ese 23 por 60, que es lo que quería, y resolvió el problema.
Si terminas usando Local by Flywheel, puedes acceder a tu base de datos fácilmente a través de la interfaz haciendo clic en la pestaña Base de datos:
Una vez que obtenga acceso, un buen lugar para comenzar a buscar es el mismo lugar donde me vio buscar en la captura de pantalla anterior: wp_options. La mayoría de las veces la configuración de tus complementos se encontrará allí.
⚠️ Sin embargo, también es importante señalar que el problema subyacente más importante aquí fue que a mi código le faltaban instrucciones de activación. Cuando su complemento se activa por primera vez, debería verificar si existen ciertas configuraciones en la base de datos. Si no es así, su complemento debería agregarlos con los valores predeterminados previstos. Esto garantiza que cada nueva instalación de su complemento comience con la configuración correcta. Aprendí esto de la manera más difícil para que tú no tengas que hacerlo.
Un hilo nuevo puede brindarle avances
A medida que su código crezca y su hilo con ChatGPT se haga cada vez más largo, será propenso a cometer errores u olvidar cosas. En cierto punto, es una buena idea iniciar un nuevo hilo. Sube tus archivos de complementos principales al nuevo hilo y explícale a ChatGPT lo que estás haciendo y dónde lo dejaste.
A continuación se muestra un mensaje de ejemplo que puede utilizar:
Estaba trabajando contigo en depurar un complemento de WordPress en otro hilo, pero creo que el hilo se hizo demasiado largo y empezabas a confundirte. Empecemos de nuevo.
Eche un vistazo a los archivos del complemento aquí e intentemos solucionar el problema [describa su error] .
Además, y esto es MUY IMPORTANTE, cuando genere nuevas versiones de fragmentos de código en un intento de solucionar el problema, no solo genere el fragmento, sino que también proporcione una explicación sobre qué líneas cambió de lo que ya está presente. Además, explique la razón detrás del cambio de esas líneas y qué podemos esperar ver con los cambios que ha realizado.
[Si genera CSS, no olvide recordarle a ChatGPT que siga la metodología BEM (Block Element Modifier).]
No tengas miedo de usar tu cerebro
Cuanto más complejo sea su complemento, mayor será la posibilidad de que GPT estropee su código. Si bien le ayuda a depurar, a veces descubrirá que es mejor encontrar la solución por su cuenta. Para ser honesto, esto me sucedió bastante, especialmente en las últimas etapas de mi compilación, donde mi archivo PHP principal había crecido a más de 500 líneas (con versiones posteriores que superaban las 1000).
Dependiendo de su familiaridad y comodidad con la lectura de códigos, esto podría ser un elemento disuasivo, pero si es decente en el reconocimiento de patrones y en la detección de inconsistencias, entonces podrá arreglárselas.
Ciertamente no soy un programador experto, aunque entiendo lo que hacen varios lenguajes de programación y estoy familiarizado con el código, lo que me ayudó.
Aún así, incluso si eres un completo novato, puedes mirar las líneas de código que GPT cree que podrían estar causando el problema. Luego busque un elemento idéntico en su código que funcione correctamente. Compare su código con el código del elemento roto e intente ver qué tiene de diferente. Muchas veces esto resolverá el problema:
Mantenga copias de seguridad de sus archivos de complementos (opcional si usa Git)
Si bien el uso de Git proporciona una forma poderosa de administrar y revertir los cambios en su código, nunca es mala idea mantener también copias de seguridad manuales. Cada vez que alcances un hito con tu código, te sugiero que guardes una copia de tus archivos de código principal en otra carpeta:
Esto puede servir como una red de seguridad adicional, permitiéndole volver fácilmente a una versión anterior mejor si encuentra errores graves mientras continúa compilando.
No te rindas fácilmente, pero conoce tus límites.
Es posible que haya algunas funciones o ajustes que simplemente no podrás implementar por mucho que lo intentes. Esté preparado para ajustar sus expectativas y solucionarlas . Esto no significa darse por vencido si choca contra una pared. Sin embargo, sí significa que si ha realizado 100 intentos y ha pasado horas (o días) intentando lograr algo sin éxito, entonces probablemente no sea posible o esté fuera de su capacidad y de ChatGPT.
Por último, si se pregunta si debe depurar o eliminar primero, según tengo entendido, no hay una respuesta clara. Depuré antes de linting, pero puedes elegir de forma predeterminada la preferencia de ChatGPT a medida que avanzas en el proceso o decirle cuál quieres hacer primero.
Fase seis (opcional): pruebas 🔬
Si está creando un complemento relativamente simple y confía en su funcionalidad según sus propias pruebas manuales, entonces no es necesario que dé este paso. Digo esto porque todavía requiere mucho trabajo codificar estas pruebas, y de la misma manera que no obtendrás un complemento que funcione con ChatGPT, también es poco probable que obtengas una prueba funcional sin errores presentes.
En pocas palabras, aquí existe un equilibrio entre la inversión de tiempo y el valor práctico .
En mi propia experiencia, pude crear con éxito una prueba que verificaba si mis complementos podían realizar sus funciones principales cuando un usuario interactúa con ellos, ¡pero me tomó un día entero de depuración!
Desde un punto de vista práctico, ya había verificado manualmente las funcionalidades de mi complemento, pero fue agradable ver que la prueba confirmó que todo estaba funcionando.
Si va a intentar crear un complemento más complejo que el que hice yo, o si las funciones de su complemento se centrarán en el back-end (donde no puede verificar manualmente si están funcionando o no), tómese el tiempo para Las pruebas realizadas correctamente valen la pena el trabajo manual.
tipos de pruebas
Herramientas a considerar
Fase siete (opcional): envía tu complemento al repositorio de WordPress 🥳
Si has llegado hasta este punto, entonces has ascendido con éxito a la proverbial montaña de complementos. Lo único que queda por hacer es plantar su bandera para que se una a los otros 59.650 complementos en el repositorio de WordPress.
Tiene su propio proceso separado, que va acompañado de una lista de verificación en la página Agregue su complemento:
- Lea las preguntas frecuentes.
- Cumpla con todas las pautas para desarrolladores de complementos.
- Asegúrese de tener permiso para cargar su complemento en WordPress.org para que otros lo usen y compartan.
- Su complemento, incluidas todas sus bibliotecas y cualquier otro activo incluido, tiene licencia GPL o es compatible con GPL.
- Realiza una ronda final de pruebas con el complemento Plugin Check y resuelve los problemas indicados (excluyendo los que cree que son falsos positivos).
Verificación de complementos (PCP)Versión actual: 1.1.0
Última actualización: 28 de agosto de 2024
complemento-check.1.1.0.zip
Podrías pensar que después de toda la depuración, linting y pruebas que hiciste, el complemento que te piden que uses no detectará nada. Sin embargo, como desarrollador de complementos por primera vez, es probable que le queden algunos problemas pendientes por resolver, especialmente si no elimina los archivos de prueba de su compilación antes de ejecutar la verificación.
Para continuar, vaya a Herramientas → Verificación de complementos :
Luego marque las cinco categorías y ejecute la verificación:
Luego puede enviar esos problemas pendientes a ChatGPT y resolverlos. Cuando haya terminado, ejecute la verificación nuevamente para garantizar un resultado limpio. Hazlo tantas veces como necesites. Una vez que obtenga una verificación completamente limpia (excluyendo falsos positivos), puede enviar su complemento al equipo de desarrollo de WordPress. Luego espera pacientemente a que lo revisen.
Pensamientos finales 🧠
Si bien crear un complemento con ChatGPT es un proceso divertido y gratificante, de ninguna manera es un proceso rápido. Es necesario invertir mucho esfuerzo para crear un producto final que funcione decentemente. Sin embargo, al final, apreciará todas las nuevas habilidades que le enseñará este proyecto.
Aquí hay algunas cosas que aprendí (y que tú también podrías):
- Aprendí a navegar por mi disco duro usando comandos de Terminal y también aprendí otros comandos relacionados con el proceso de creación de un complemento.
- Ahora me siento bastante cómodo con Docker y Local by Flywheel, los cuales nunca había usado antes de este experimento.
- También estoy familiarizado con muchas herramientas y scripts de desarrollo que ni siquiera sabía que existían antes de esto.
- Tomé algunas clases en el pasado con Free Code Camp y Codecademy, y aunque ambas fueron geniales, siento que obtuve muchos más conocimientos prácticos al completar este proyecto.
- En relación con lo anterior, ahora tengo una gran cantidad de información de codificación aleatoria que me resultará útil si vuelvo a trabajar en algo similar.
- La brecha entre cero y un complemento que funciona es mucho menor que la brecha entre un complemento que funciona y un complemento listo para enviar. Obtuve una versión funcional de mi complemento en unos pocos días, pero me tomó algunas semanas más antes de realizar todos los ajustes para hacerlo lo suficientemente bueno como para enviarlo al repositorio de WordPress.
En general, esta fue una de las actividades más interesantes que he hecho en mucho tiempo. Gracias por tomarse el tiempo de leer. Si termina utilizando esta información para crear su primer complemento, envíeme un comentario a continuación. Me encantaría ver tu resultado final.