Hoy vas a aprender a crear un tema para WordPress utilizando Angular.

  • Porque si WordPress es la caña.
  • Y Angular es la caña.

Imagínate lo que pueden hacer los dos juntos.

¿Qué necesitas para crear tu theme?

Pues necesitas saber un poco por encima qué es Angular y cómo funciona.

Y digo que solo necesitas saberlo por encima porque la parte difícil ya la he hecho yo para ti.

Yo he hecho un tema desde cero y te voy a dejar la base para que te lo descargues completamente gratis.

Y no solo eso, es que además te voy a explicar cómo está estructurado el tema y qué tienes que hacer para echarlo a andar.

Para empezar, ve a WPAngular.com y descarga el proyecto.

Nota: lo estoy actualizando constantemente con nuevas mejoras y demás.

¿Cómo hago que funcione mi tema con Angular?

Pues obviamente tienes que tener preparado tu entorno de trabajo, con NodeJS, npm y la CLI de Angular instalada.

Abres la carpeta del proyecto:

Crear un tema para WordPress con Angular Paso a paso

Y ahí puedes ver que el proyecto está bastante bien estructurado, para que puedas encontrar y modificar las partes que consideres oportunas.

De momento, ve al archivo /shared/global-constants.ts y pon la URL base de la REST API de tu instalación de WordPress.

Por ejemplo, en mi caso es:

export const GlobalConstants = Object.freeze({
    WP_API_BASE: 'https://www.salamarkesa.com/wp-json'
});

Espera, ¿esto qué es?

Pues es el lugar al que se conectarán los servicios de comunicación del proyecto con tu instalación.

¿Por qué?

Porque vamos a utilizar la REST API de WordPress para todas las interacciones con tu backend.

Esto da muchísima versatilidad a lo que estamos haciendo, ya que podrías hasta crear una aplicación para tu móvil sin hacer nada difícil.

Cuando tengas eso puesto, en la terminal escribes:

ng serve -o

¿Por qué?

  • ng para ejecutar un comando de angular
  • serve para montar tu proyecto y verlo funcionando
  • -o para abrir el navegador automáticamente

Y si has hecho las cosas bien, verás que ya tienes tu plantilla de WordPress funcionando con Angular.

Naturalmente, esto se está ejecutando en local, en tu ordenador.

Así puedes hacer todos los cambios que te dé la gana, revisar el código, aprender, cambiar, etc...

Y cuando estés ready para subirlo al servidor en forma definitiva de plantilla pues haces lo siguiente.

Convertir un proyecto de Angular en una plantilla WordPress

Abres una terminal y haces:

ng build --prod --deploy-url="/wp-content/themes/wpangular/dist/app/" --aot=false --buildOptimizer=false

Esto es:

  • ng: angular
  • build: construir
  • --prod: porque vas a subirlo a tu mundo real
  • --deploy-url: para que Angular sepa de dónde tiene que sacar los bundles JS para funcionar

Y listo.

Luego te vas a tu servidor, donde tengas WordPress instalado.

Creas la carpeta wpangular dentro de /wp-content/themes

También le puedes poner otro nombre, si te da la gana, pero tendrás que considerarlo también en el "deploy-url" del paso anterior.

Y a esa carpeta subes los archivos index.php, functions.php, style.css y la carpeta dist enterita.

¿Por qué eso es así?

Porque los temas de WordPress necesitan el index.php, functions.php y el style.css

Y la carpeta dist pues porque ese es tu proyecto Angular entero.

Y ahora simplemente ve al panel de administración y activa el tema.

Estaré actualizando este artículo constantemente.