WordPress headless: Un enfoque dinámico

Usando Angular con WordPress Headless: Un enfoque dinámico César Aquino
Maximiliano @cesjam7 Ng Conf Perú 2024

Un poco sobre mi - Software developer especializado en desarrollo
web - Trabajo diariamente con WordPress y Laravel - En el backend uso PHP y NodeJS y en el frontend uso Angular - En desarrollo mobile hago apps híbridas con IONIC - Profesor de diseño web y programación - Bombero voluntario con grado de Teniente - Papá de 2 hermosos hijos - He sido danzante y ahora intento ser deportista En resumen: Un nerd chévere

Optional tag here ¿WordPress Headless?

El CMS guarda la información Cuenta con sus propias plantillas
Carga la información directamente del admin a la plantilla El CMS guarda la información No se usa la plantilla de WordPress El frontend (desarrollado en Angular u otro) lee la información mediante un api WP Normal WP Headless WordPress normal y headless

El CMS guarda la información Cuenta con sus propias plantillas
Carga la información directamente del admin a la plantilla El CMS guarda la información No se usa la plantilla de WordPress El frontend (desarrollado en Angular u otro) lee la información mediante un api WP Normal WP Headless WordPress normal y headless WP Headless dinámico MÁS ADELANTE HABLAREMOS DE ELLO :)

Ya, pero ¿por qué WordPress?

WP REST API WordPress ofrece nativamente la posibilidad de crear
un API para compartir su información con otra aplicación. Así hacen funcionar su editor en bloques Gutenberg https://developer.wordpress.org/rest-api/ JSON desarrollado con estudiantes para proyecto con IONIC

• Flexibilidad en el Diseño • Componentización • Rendimiento Optimizado
• Mejor Uso de APIs • Actualización Asincrónica • Escalabilidad y Modularidad Ventajas de usar WP con Angular

Ahora sí veamos ese enfoque dinámico

Imagina seguir usando las plantillas y rutas de WordPress pero
con Angular

- Ya no usamos API para leer la información -
Seguimos usando nuestros archivos del template de WordPress - Los plugins podrán seguir trabajando con nuestro front para ingresar data (como SEO) - Las rutas no las maneja Angular. Seguiremos trabajando con el potente manejo de rutas de WP. - Es una forma divertida de aprender ambos mundos: Armar vistas en Angular y crear plantillas en WP Qué es un WordPress Headless dinámico

Aquí irá nuestro Angular

¿Y cómo le pasamos la información?

<app-root></app-root> <noscript id="app-data"> { "tipo": "home", "general": { "titulo": "Blog
Ng Conf", "url": "http://localhost:10019" }, "articulos": [] } </noscript>

home.component.ts data: any = {}; constructor() { const dataElement =
document.getElementById('app-data'); this.data = JSON.parse(dataElement.textContent || '{}'); } home.component.html <article class="post" *ngFor="let articulo of data.articulos"> <h2><a [href]="articulo.url">{{ articulo.titulo }}</a></h2> <p>{{ articulo.resumen }}</p> </article>

<head> <?php wp_head(); ?> </head> <body> <app-root></app-root> <noscript id="app-data"> {
"tipo": "single", "articulo": {} } </noscript> <?php wp_footer(); ?> </body> No usamos el index.html compilado sí no: - index.php - archive.php - single.php - page.php - 404.php - Author.php etc!

¡Código en vivo!

Gracias :) César Aquino Maximiliano Software Developer cesar.pe @cesjam7

WordPress headless: Un enfoque dinámico

WordPress headless: Un enfoque dinámico

César J. Aquino Maximiliano

More Decks by César J. Aquino Maximiliano

Other Decks in Programming

Featured

Transcript

Usando Angular con WordPress Headless: Un enfoque dinámico César Aquino

Un poco sobre mi - Software developer especializado en desarrollo

Optional tag here ¿WordPress Headless?

El CMS guarda la información Cuenta con sus propias plantillas

El CMS guarda la información Cuenta con sus propias plantillas

El CMS guarda la información Cuenta con sus propias plantillas

Ya, pero ¿por qué WordPress?

WP REST API WordPress ofrece nativamente la posibilidad de crear

• Flexibilidad en el Diseño • Componentización • Rendimiento Optimizado

Ahora sí veamos ese enfoque dinámico

Imagina seguir usando las plantillas y rutas de WordPress pero

- Ya no usamos API para leer la información -

Aquí irá nuestro Angular

¿Y cómo le pasamos la información?

<app-root></app-root> <noscript id="app-data"> { "tipo": "home", "general": { "titulo": "Blog

home.component.ts data: any = {}; constructor() { const dataElement =

<head> <?php wp_head(); ?> </head> <body> <app-root></app-root> <noscript id="app-data"> {

¡Código en vivo!

Gracias :) César Aquino Maximiliano Software Developer cesar.pe @cesjam7