Si hubiera planeado todo con antelación, habría optado por el diseño de pestañas que eventualmente utilicé, justo desde el principio. El proceso en general habría sido mucho más fluido.
Aquí está lo que creo que funciona mejor
Una vez que decidas qué quieres que haga tu plugin a nivel general, encuentra plugins existentes que hagan lo mismo o tengan cierta superposición. Instálalos en un sitio ficticio utilizando TasteWP y úsalos. Pero no los uses como un usuario normal. Úsalos como lo haría un investigador de experiencia de usuario. Toma notas detalladas sobre cómo funcionan cosas diferentes.
¿Qué te gusta? ¿Qué harías diferente?
Después de realizar esta prueba del plugin, organiza tus notas. Luego elabora una descripción detallada de tu prototipo. Pregúntate cómo interactuarán los usuarios con él.
¿Usarán shortcodes? ¿Agregarán bloques adicionales dentro del editor de bloques? ¿Habrá un área de configuración en el backend?
Cubre todas tus bases.
Considera usar wireframes para mapear visualmente cómo los usuarios navegarán por tu plugin. Puedes obtener wireframes gratuitos en Figma.
Cuando termines lo anterior, utiliza tu descripción detallada y posiblemente cualquier wireframe que crees para darle tu primera indicación a ChatGPT. Mi recomendación para la indicación es comenzar poco a poco y construir gradualmente. De esta forma puedes aislar y corregir más fácilmente cualquier error que surja.
Usando mi plugin como ejemplo, si tuviera que hacerlo todo de nuevo, primero le daría a GPT una visión general de lo que quiero hacer. También mencionaría las herramientas y scripts que quiero usar. Luego comenzaría a construir solo el primer efecto junto con el área correspondiente para el en backend. Lo probaría para asegurarme de que funcione. Si todo estaba bien, agregaría el siguiente efecto, y así sucesivamente.
Error #2: Ignoré los estándares de codificación de WordPress al principio
Otro error grande que cometí fue que no me di cuenta de lo grande que es la brecha entre simplemente construir un plugin que funcione y construir un plugin que sea digno de ser enviado al repositorio de WordPress. Puede que te sorprenda, pero pasar de cero a un plugin funcional es mucho más fácil y rápido que pasar de un plugin funcional a un plugin bien codificado.
Para ponerlo en términos concretos:
Sólo me tomó alrededor de dos o tres días construir un plugin funcional, pero me llevó otra siete semanas de trabajo antes de llegar a un punto en el que pude enviarlo al repositorio de WordPress para su consideración.
Aunque tu objetivo final no sea enviar tu plugin y solo lo quieras para ti o para el sitio de un cliente, debes seguir las mejores prácticas de codificación. Esto garantizará que tu plugin no cause problemas en tu sitio y no ejerza una presión innecesaria sobre los recursos de tu sitio.
Aquí está lo que creo que funciona mejor
Asegúrate de decirle a ChatGPT (o Claude) desde el principio que todo el código que genere deberá seguir los estándares de codificación de WordPress.
Si tienes pensado enviar tu plugin al repositorio de WordPress, también agrega que cualquier indentación debe hacerse con tabulaciones y no con espacios. GPT tiende a usar espacios de forma predeterminada, pero esto va en contra de los estándares de codificación.
Si no lo solucionas desde el principio, tendrás que hacerlo más tarde cuando hagas tu revisión de código. Más vale hacerlo correctamente desde el principio.
Error #3: Permití que GPT regenerara constantemente archivos completos de código
Una cosa a la que puedes ser tentado cuando tienes poca experiencia trabajando con código es pedirle a ChatGPT que regenere archivos enteros de código cuando estás depurando. Yo fui culpable de esto, hasta que me di cuenta de que no me llevaba a ninguna parte.
No es necesariamente un problema si estás tratando con un archivo JavaScript relativamente pequeño de 50 a 100 líneas. Sin embargo, a medida que tu plugin se vuelve más complejo y tu archivo PHP principal crece considerablemente, entonces se vuelve altamente problemático.
Para empezar, lleva algo de tiempo a GPT generar ese código. Por ejemplo, digamos que tienes un error en un archivo que contiene 800 líneas de código. Ahora imagina que el problema real se encuentra en solo una de esas 800 líneas. ¿Tiene sentido sentarte frente a tu monitor durante cinco minutos, viendo a GPT regenerar 799 líneas que no necesita? No, no lo tiene.
Y aquí está el otro problema:
A medida que crece la longitud de tu código, la memoria de ChatGPT empeora. Lo que sucede si le permites regenerar secciones de código muy largas, es que no solo ajustará las líneas problemáticas que estás intentando depurar, sino que también cambiará accidentalmente otras líneas. Así que ahora podrías corregir el error que querías, pero te quedarás con algunos errores nuevos. Si continúas de la misma forma, te quedarás atrapado en un bucle interminable de depuración. Te sentirás como si estuvieras atrapado en la Matrix. Neo no vendrá a salvarte. Debes salvarte a ti mismo.
Aquí está lo que creo que funciona mejor
Cuando estés depurando, asegúrate de incluir instrucciones muy específicas para ChatGPT en tus indicaciones para mantenerlo enfocado. Después de algunas pruebas, descubrí que decirle lo siguiente funcionaba bien:
- No regeneres el archivo completo para mí.
- Analiza y aisla las líneas específicas de código que crees que están causando el problema y muéstramelas.
- Explica específicamente qué crees que puede ser el problema con esas líneas.
- Luego explica cómo vas a cambiar las líneas y qué resultado esperas como resultado de los cambios.
- Por último, por favor dame las líneas actualizadas en un fragmento de código para que pueda copiarlas y pegarlas.
Error #4: Usé CSS básico en lugar de CSS BEM
Si hay algo que aprendí al construir un plugin con ChatGPT, es que a ChatGPT le encanta darte el código mínimo viable posible. Su principio de funcionamiento es “si funciona, entonces es suficiente”.
Para ser mejor que suficiente, debes ser vocal al respecto. Por eso enfaticé antes que le instruyeras que siguiera los estándares de codificación de WordPress desde el principio. Sin embargo, esta no es la única área donde debes expresarte. También debes hacerlo con cualquier código CSS que GPT genere para ti.
No me di cuenta de esto hasta que estaba profundamente en mi proceso y solo porque Claude me lo señaló mientras resolvía un problema separado pero relacionado.
Estaba usando el CSS predeterminado que ChatGPT me estaba dando, que funcionaba, pero era el estándar de CSS que obtendrías en un curso introductorio de CSS. Para ser claro, el CSS estándar no es “incorrecto”, pero no es lo que quieres cuando estás construyendo un plugin de WordPress. Aquí está la razón:
El problema de usar CSS estándar es que si usas una clase llamada “body” o “sidebar”, es posible que interfieras con otros elementos de WordPress que también usan exactamente el mismo nombre de clase (por ejemplo, elementos en tu tema o en otro plugin). Es por eso que BEM es un enfoque mejor, porque está estructurado de tal manera que los nombres de clase son específicos solo para tu plugin. Por lo tanto, evita cualquier posible conflicto de código.
Aquí está lo que creo que funciona mejor
No hay mucho que decir aquí. Es muy directo. Una vez que llegues al punto en el que GPT esté generando código CSS para ti, instrúyele que siga la metodología BEM (Block, Element, Modifier). También recomendaría que si necesitas revisar tu CSS en algún momento en el futuro, incluir un recordatorio en tu indicación de que estás utilizando BEM.
Error #5: Supuse que solo había un linter global
De todos los errores en esta lista, este es probablemente el más vergonzoso. Sentí que era un momento de sentido común tan obvio cuando Claude me hizo darme cuenta de que no estaba avanzando en mi archivo JavaScript era porque estaba usando el linter que había usado para mi archivo PHP.
Lo más frustrante fue que perdí horas yendo y viniendo con ChatGPT sobre esto y no dijo nada. Claramente vio que estaba usando un linter de PHP en un archivo JavaScript, pero por alguna razón no sintió la necesidad de señalarlo. En lugar de eso, simplemente intentó incansablemente hacer que encajara una pieza cuadrada en un agujero redondo:
La razón por la que terminé preguntándole a Claude eventualmente es porque claramente no estaba llegando a ninguna parte con GPT. Ojalá lo hubiera preguntado antes, porque Claude detectó el problema de inmediato.
Aquí está lo que creo que funciona mejor
Este es otro bastante directo: asegúrate de usar el linter adecuado para cada uno de tus archivos. Los tres que terminé usando fueron:
Error #6: Puse en cola mis scripts globalmente
Recuerda lo que dije en la sección de CSS sobre el principio de funcionamiento de GPT de “si funciona, entonces es suficiente”?
Aplica de nuevo aquí.
A menos que le digas a ChatGPT lo contrario, cuando llegue el momento de encolar tus scripts (o estilos), lo hará de forma global. Eso es exactamente lo que me pasó a mí. Desafortunadamente, no lo noté hasta que utilicé la herramienta de verificación de plugins proporcionada por el equipo de desarrollo de WordPress. En retrospectiva, debería haberla usado mucho antes de lo que hice, pero me estoy adelantando. Hablaré de ese error en un momento.
De cualquier manera, si te estás preguntando qué significa encolar tus scripts globalmente, en términos sencillos, significa que tus archivos JavaScript y CSS se cargarán en cada página de cualquier sitio de WordPress que tenga instalado tu plugin. Debo mencionar que hay casos en los que esto es realmente necesario. Por lo tanto, no es una regla estricta de “nunca hagas esto”. Sin embargo, en muchos casos, es equivalente a usar un mazo para clavar un clavo: efectivo pero innecesariamente contundente y generalizado.
En términos prácticos, perjudicará cualquier sitio que use el plugin al asignar de manera excesiva los recursos del sitio de forma inútil. Como resultado, el sitio podría experimentar tiempos de carga más largos, lo que lleva a usuarios frustrados. Si es lo suficientemente malo, incluso podría dañar la clasificación de búsqueda del sitio.
Aquí está lo que creo que funciona mejor
A menos que un script necesite encolarse globalmente, la forma correcta de hacerlo es usar algo llamado “carga condicional”. Este método implica cargar tus scripts solo donde sean absolutamente necesarios. Por ejemplo, si tu plugin afecta solo las páginas de publicaciones, asegúrate de que tus scripts se carguen solo en esas páginas.
Puedes lograr esto usando etiquetas condicionales en WordPress. Por ejemplo, usa is_single() para verificar si se está mostrando una publicación única de WordPress y luego encola tu script. Así es como podría verse:
function
Fuente
