Dónde aprender a desarrollar temas de WordPress

Hace más de una década, hice una pequeña serie de videos de tres partes sobre Diseño para WordPress. Luego hice otras series con el mismo espíritu, como transmitir en video todo el rediseño de la v10, el sitio web de un amigo e incluso escribir un libro. Sin embargo, estos se están volviendo un poco largos. Es posible que aún aprendas al verlos si te estás iniciando en el desarrollo de temas de WordPress, pero habrá momentos en los que te sentirás muy antiguo (UI antiguas y versiones antiguas de software). Sin embargo, todo el código sigue funcionando, porque WordPress es excelente en compatibilidad con versiones anteriores. Todavía escucho de personas que encontraron esos videos muy útiles para ellos.

Pero como el tiempo ha pasado y recientemente me preguntaron qué recursos sugeriría ahora, pensé en echar un vistazo y ver qué me parece bien.

¿A quién le estamos hablando?

Hay un espectro de desarrolladores de WordPress, desde personas que no saben nada de código o que apenas lo tocan, hasta nerds incondicionales de la programación que crean todo a medida.

1. Elija un tema que se vea bien y úselo.
2. ‍♂️
3. ‍♂️
4. ‍♂️
5. ‍♂️
6. Nerd programador incondicional.

No puedo hablar con nadie en ninguno de los extremos de ese espectro. Hay todo este mundo de personas en el medio. Pueden codificar, pero no son expertos en informática. Son personas que hacen el trabajo. Quizás sea algo como esto:

1. Elija un tema que funcione y úselo.
2. Comenzando con un tema, personalícelo un poco usando las herramientas integradas.
3. Comience con un tema, cortéselo con código para hacer lo que necesita.
4. Empezar desde cero, desarrollar lo que necesita.
5. Empiece desde cero y cree un sitio altamente personalizado.
6. Nerd programador incondicional.

Siempre he estado alrededor del número 4 y creo que es un buen punto ideal. Intento dejar que WordPress y los grandes complementos populares hagan el trabajo pesado, pero traeré mi propia interfaz (HTML, CSS y JavaScript) y personalizaré lo que tengo que hacer. Estoy haciendo plantillas. Estoy escribiendo consultas. Estoy construyendo bloques. Estoy modularizando donde puedo.

Me siento poderoso en esa zona. Puedo crear muchos sitios de esa manera, casi solo. Entonces, ¿dónde están hoy los recursos que le ayudarán a aprender este tipo de desarrollo de temas de WordPress? Déjame ver qué puedo encontrar.

Ala, vieja escuela

Hay algo que decir sobre aprender haciendo. Prueba de fuego. He aprendido mucho en estas circunstancias de mi vida.

El truco aquí es instalar WordPress en un servidor activo y luego jugar con la configuración, los complementos, el personalizador y editar los archivos del tema para que el sitio haga cosas. Encontrarás HTML en archivos esos de temas: ¡cómpralo! Verás código PHP escupiendo contenido. ¿Puedes decir qué y cómo manipularlo? Encontrarás un archivo CSS en el tema: ¡edita ese tonto!

La documentación oficial puede ayudarte un poco aquí:

• Cómo instalar WordPress
• Recursos para desarrolladores
• Google cosas cuando te quedas atascado

Hasta cierto punto, soy fanático de hacerlo en vivo (en un sitio web de producción) porque le da una sensación de realidad a lo que haces cuando eres principiante. Hay mucho en juego allí, lo que te da una sensación del poder que tienes. Cuando hago estos cambios, son visibles para cualquier persona en el mundo con conexión a Internet.

Hice esto en mis años de formación comprando un nombre de dominio y alojamiento, instalando WordPress en ese alojamiento, iniciando sesión con credenciales SFTP y, literalmente, trabajando en los archivos activos. Utilicé Coda, que sigue siendo una aplicación popular y se está fortaleciendo activamente en una nueva versión mientras escribo.

Con suerte, lo que está en juego es real pero bajo. Como si estuvieras trabajando en un proyecto favorito o en tu sitio personal. En algún momento, piratear sitios de producción se convierte en una idea demasiado peligrosa. Una línea de sintaxis PHP mal colocada puede terminar con todo el sitio.

Si está trabajando en algo como el sitio de un cliente, necesitará actualizar ese flujo de trabajo.

moderno improvisando

La forma moderna, saludable y estándar de trabajar en sitios web es:

1. Trabajo en ellos localmente.
2. Utilice el control de versiones (Git), donde se realiza el nuevo trabajo en las ramas de la masterrama.
3. La implementación en el sitio web de producción se realiza cuando el código se envía a la masterrama, como si se fusionara su rama de desarrollo.

Aquí un video reciente sobre todo este flujo de trabajo tal como lo hago hoy. Mi conjunto de herramientas es:

• Trabaja localmente con Local by Flywheel.
• Mi alojamiento web también es Flywheel, pero no es obligatorio. Podría ser cualquier cosa que le brinde acceso SFTP y ejecutar lo que WordPress necesita: Apache, PHP y MySQL. Divulgación, Flywheel es patrocinador aquí, pero porque me gustan ellos y su servicio :).
• El código está alojado en un repositorio privado en GitHub.
• Buddy realiza la implementación en el alojamiento Flywheel. Buddy observa los envíos a la mastersucursal y mueve los archivos a través de SFTP al sitio de producción.

Ahora que tienes una configuración local, puedes volverte loco. Haz lo que quieras. No puedes romper nada en el sitio en vivo, por lo que eres más libre de realizar cambios experimentales y simplemente ver qué sucede.

Cuando trabaje localmente, es probable que edite archivos con un editor de código. Yo diría que la opción más popular hoy en día es VS Code gratuito, pero también están Atom y Sublime, y editores más sofisticados como PhpStorm.

La libertad de piratear archivos es especialmente evidente una vez que has enviado tu código a un repositorio de Git. Una vez que haya hecho eso, tendrá la libertad de revertir los archivos al estado del último envío.

Utilizo el software Git Tower y eso me permite ver qué archivos han cambiado desde la última vez que confirmé el código. Si cometí un error, causé un problema o hice algo que no me gusta, incluso si no recuerdo exactamente qué cambié, puedo descartar esos cambios y devolverlos a su último estado. Ese es un buen nivel de libertad.

Cuando confirmo el código, para masterizar o fusionar una rama en master, es cuando Buddy entra en acción e implementa los cambios en el sitio de producción.

Pero, ¿por dónde empezar?

Estamos hablando del desarrollo de temas de WordPress aquí, así que comienzas con un tema. Los temas son literalmente carpetas de archivos en su instalación de WordPress.

root  - /wp-content/    - /themes/       - /theme-name/

WordPress viene con algunos temas listos para usar. Mientras escribo, el tema Twenty Twenty viene con WordPress, ¡y es agradable! Absolutamente podrías comenzar tu tema pirateando eso.

Los temas tienden a tener algunas opiniones sobre cómo se organizan y hacen las cosas, y Twenty Twenty no es diferente. Yo diría, quizás de manera controvertida, que no existe una única forma verdadera de organizar su tema, siempre y cuando sea un código válido y haga las cosas a la manera de “WordPress”. Esto es algo que tendrás que entender mientras creas temas.

Temas de inicio

Los temas iniciales eran una forma muy popular de empezar a crear un tema desde cero en mi época. No tengo muy claro si eso sigue siendo cierto, pero la gran idea era un tema con todas las plantillas básicas que necesitarás (páginas de publicaciones de blog individuales, una página de inicio, una página 404, una página de resultados de búsqueda, etc.) con muy poco marcado y sin ningún estilo. De esa manera, tendrá un lienzo vacío desde el cual crear usted mismo todo su HTML, CSS y JavaScript a su gusto. Es como si estuvieras construyendo cualquier otro sitio desde cero con estas tecnologías centrales, solo que con algo de PHP que escupe contenido.

Había un tema llamado Starkers que era popular, pero ya está muerto. Yo mismo hice uno llamado BLANK pero no lo he tocado en mucho tiempo. Mirando un poco a mi alrededor, encontré algunos temas más nuevos con este mismo espíritu. Aquí están los tres mejores que encontré:

• HTML5 en blanco
• Pizarra en blanco
• _s (“guiones bajos”)

No puedo responder personalmente por ellos, pero todos se han actualizado recientemente y me parecen bastante buenos puntos de partida. Les daría una oportunidad en el caso de que estuviera comenzando desde cero en un proyecto. Me sentiría tentado a descargar uno y luego arreglarlo exactamente como me gusta y guardarlo como mi propio iniciador en caso de que tuviera que hacerlo nuevamente.

Vale la pena mencionar que gran parte del desarrollo web no comienza desde cero, sino que trabaja en proyectos existentes. En ese caso, el proceso aún es configurar un entorno local; simplemente no estás empezando desde cero, sino con el tema existente. Sugeriría duplicar el tema y cambiar el nombre mientras lo pirateas, de modo que incluso si lo implementas, no afecta el tema en vivo. Otros podrían sugerir usar el tema inicial como tema "principal" y luego ramificarlo en un tema "secundario".

Para sincronizar todo su entorno de desarrollo local con exactamente cómo es el sitio web de producción, creo que la mejor herramienta es WP DB Migrate Pro, que puede extraer la base de datos de producción a su sitio local y todos los archivos multimedia (producto pago y un complemento pagado, vale cada centavo).

Temas iniciales más sofisticados

En lugar de comenzar desde cero, hay temas que vienen con valores predeterminados sensatos e incluso procesos de compilación modernos para comenzar. La idea es que construir un sitio con HTML, CSS y JavaScript esencialmente sin formato, si bien es completamente factible, simplemente no tiene suficientes comodidades modernas para ser cómodo.

Aquí están algunas.

• Morten Rand-Hendriksen tiene un proyecto llamado WP Rig que tiene todo tipo de herramientas de desarrollo integradas. Un proceso de compilación basado en Gulp activa un servidor BrowserSync para la actualización automática. JavaScript se procesa en Babel. CSS se procesa en PostCSS y el código se codifica. Enseña WordPress con él.
• Roots crea un tema llamado Sage que viene con un motor de plantillas, el marco CSS de su elección y elementos sofisticados del proceso de compilación.
• Ignition tiene un proceso de construcción y todo tipo de ayudantes.
• Timber viene con un motor de plantillas y un montón de ayudas de código.

Creo que todos estos son geniales, pero probablemente tampoco sean para desarrolladores principiantes.

Libros

Esto es difícil por la cantidad que hay. En una búsqueda rápida en Google, encontré un sitio que vendía quince libros de WordPress en un paquete por $9,99. ¿Cómo sabrías por dónde empezar? ¿Qué tan buenos pueden ser por ese precio bajísimo? No se.

Escribí un libro con Jeff Starr hace mucho tiempo llamado Digging Into WordPress. Después de todos estos años, Jeff todavía mantiene el libro actualizado, ¡así que diría que es una elección decente! Jeff tiene otros libros como The Tao of WordPress y WordPress Themes In Depth.

Muchos otros libros específicamente sobre el desarrollo de temas de WordPress son bastante antiguos. Cosas de 2008-2015. Nuevamente, no es que no haya nada que aprender allí, especialmente porque WordPress no cambia tan rápidamente, pero aún así, me gustaría leer un libro más reciente que tenga más de media década. Parece una gran oportunidad para un público objetivo tan grande como los usuarios y desarrolladores de WordPress. O si ya hay cosas que simplemente no encuentro, déjamelo saber en los comentarios.

Tal vez el aprendizaje se esté desplazando tanto hacia lo online que la gente ya no escribe libros tanto...

Cursos de aprendizaje en línea

Nuestro socio de aprendizaje oficial Frontend Masters tiene un curso sobre WordPress centrado en JavaScript y WordPress, por lo que puede que no sea perfecto para aprender los conceptos básicos del desarrollo de temas. Aún así, cosas fascinantes.

Aquí hay algunos otros que me parecieron bien mientras miraba a mi alrededor:

• SuperHola: WordPress
• Chris Dixon: Academia de desarrollo de temas de WordPress 5 con Bootstrap v4
• WPSHOUT: El curso básico
• WPCasts (gratis en YouTube)
• Conozca el Código que enseña con marcos temáticos específicos.
• Udemy: Curso completo de desarrollo de complementos temáticos de WordPress de Zac Gordon

El curso de Zac parece la opción más actualizada y quizás la mejor que existe.

Una dirección totalmente diferente para el desarrollo temático.

¡Una forma de crear un sitio con WordPress es no utilizar temas de WordPress en absoluto! En su lugar, puede utilizar la API de WordPress para extraer datos de WordPress y crear un sitio como quiera.

• La API REST de WordPress (¡integrada!) que podrías usar para hacer algo como esto.
• Gatsby y WordPress
• Utilice GraphQL en lugar de REST con wp-graphql.

Esta idea de desacoplar el CMS y la interfaz que usted construye es bastante interesante. A menudo se lo conoce como el uso de un CMS "sin cabeza". No es para todos. (Una gran razón es que, en cierto modo, duplica su deuda técnica). Pero puede brindar libertad tanto al CMS como al front-end para evolucionar de forma independiente.