Headless WordPress

¿Qué es ésto? 😅

Esta técnica o procedimiento de enfoque desacoplado consiste en utilizar WordPress como zona de administración de la web (back-end) y utilizar una librería de javascript para hacer la interfaz o parte frontal (front-end). Alguna de las librerías más conocidas  para el front-end y que podemos utilizar como: Vue.js, React.js, Angular.js o Svelte.js entre otras.

Para conectar ambas tecnologías del front-end y del back-end utilizaremos el poder de la REST API de WordPress o GraphQL a través del plugin WPGraphQL. Todo esto entra dentro de las nuevas arquitecturas modernas denominadas JAMStack.

Desde la aparición de la REST API en la versión 4.7 de WordPress, los desarrolladores tenemos la posibilidad de conectar WordPress con cualquier otra tecnología para desarrollar proyectos de gran calibre.

Para ponernos un poco más técnicos, si nos planteamos seguir un patrón de diseño MVC (modelo, vista, controlador), las distintas tablas de la base de datos de WordPress representarían el MODELO de datos, la conexión entre todas las aplicaciones a través de la REST API de WordPress o de GraphQL, que nos exportará un objeto JSON con todos los datos, esto sería el CONTROLADOR y por ultimo las VISTAS, que se generarán con la librería de Javascript que elijamos, para ello utilizaremos los distintos endpoints que dispongamos de las APIs.

¿Por qué debería plantearme un proyecto headless WordPress?

Estas son algunas de las ventajas de utilizar un WordPress desacoplado:

  • ✅ Mejoras en el rendimiento y el proceso de carga. Al final lo que servimos desde nuestro servidor solo es HTLM, CSS y Javascript, que son los lenguajes de la web.
  • ✅ Disminuye la entrada de ataques de fuerza bruta DDoS (mejora la seguridad).
  • ✅ Podemos tener el back-end en un servidor y el front-end en otro distinto.
  • ✅ Gran flexibilidad y control a los desarrolladores.
  • ✅ Es más fácil de construir Aplicaciones web progresiva (PWA).
  • ✅ Los proyectos se vuelven más escalables a nivel de front-end.
  • ✅ Facilidad a la hora de replantearse un nuevo diseño.
  • ✅ Reutilización de componentes web.
  • ✅ Podemos desarrollar Aplicaciones móviles nativas.
  • ✅ Ahorro en costes de hosting.

También tenemos que tener en cuenta una serie de inconvenientes como:

  • Tener el proyecto dividido en más partes, significa que tienes que mantener más instalaciones.
  • Al no tener un front-end con WordPress perdemos el poder del editor (Gutenberg) y algunas funcionalidades como la vista previa.
  • La curva de aprendizaje de algunas librerías  de javascript no son relativamente baja. 

¿Te gusta este stack de tecnologías para tu proyecto?

¿Cuándo te deberías plantear un headless WordPress?

  • Tenemos cierta información que queremos representar con distintas tecnologías en múltiples plataformas. (por ejemplo un equipo de redactores que crea contenido a diario y luego ese contenido se muestra en varias webs con distintos dominios y en sus respectivas Apps móviles). Utilizamos un único WordPress que alimenta 4 aplicaciones 2 webs y 2 móviles.

Ejemplos interesantes (periódico o revista digital, web de noticias, sitio de reseñas de libros, comics o discos de música, alquiler o ventas de viviendas, web de viajes )

¿Cómo deberías plantearlo? (Pequeña receta)

  1. Hacemos una instalación básica de un WordPress que es donde vamos a tener todo el contenido de nuestro proyecto. Un modelo de datos (base de datos) y los campos personalizados que necesitemos. (para los campos personalizados podemos utilizar plugins como Advanced Custom Fields, CMB2..) en cualquier caso tendremos que habilitar la REST API de estos plugins para poder extraer el contenido que introduzcamos en estos campos personalizados.
  2. Instalamos el plugin para dejar el WordPress desacoplado (sin front-end). Este plugin nos bloqueará la parte frontal de WordPress, activará todo el poder de la REST API y hará una redirección a través del wp-config.php al dominio donde tenemos nuestra aplicación con javascript. (Cada plugin puede tener un funcionamiento distinto a éste).
  3. Si vamos a manejar productos de WooCommerce, tendremos que activar los servicios de la REST API desde ajustes de WooCommerce.
  4. De igual manera si utilizamos plugins específicos que guardan datos en la base de datos como de reservas, eventos, academia online, red social, foro… tendremos que entender, cómo activar los servicios de la REST API de esos plugins. En cualquier caso si no se disponen de esos endpoints, nosotros podemos crearlos.
  5. Elegimos una librería de javascript (hacemos una instalación básica, por ejemplo con el CLI de Vue.js. Nuxt.js , Next.js, Ionic CLI o React Native CLI por ejemplo). Esto nos creará desde una SPA, una PWA, una APP móvil o una página estática con algún componente que renderizará una supuesta home con la que podremos empezar a construir nuestro proyecto. Esto sería la punta del iceberg, deberás ir añadiendo funcionalidades según tus necesidades por ejemplo el enrutamiento,  añadir una store para almacenar los estados de los componente, etc.
  6. Utilizaremos una librería como Axios o la API fetch que ya viene en los navegadores, para conectar todas las aplicaciones y obtener los datos guardados en WordPress.
  7. WordPress al ser un monolito, nos ofrece todo lo necesario para gestionar un proyecto mediante distintas funcionalidades, al desacoplar el front-end de WordPress debemos quedarnos con las funcionalidades que nos faciliten el resultado y que nos ofrece el propio CMS, como: Gestión de usuarios, roles y permisos, enrutamiento, autenticación, categorías, menús, gestión de comentarios, formularios…

    Lo complicado de todo esto será extraer todos los datos de la API de WordPress para mostrarlos a través del stack de tecnologías que hayamos escogido

  8. Algunas de estas funcionalidades se pueden contratar o pueden depender de servicios de terceros como micro servicios, por ejemplo tener los comentarios gestionados a través de disqus.
  9. Cuando tenemos todos estos pasos ya definidos empezamos con el desarrollo de  vistas y layouts, con la librería de javascript que hayamos elegido, haciendo uso de los componentes web.
  10. Desplegamos la aplicación en un servidor

¿Qué deberías saber?

La elección de la librería o framework de javascript que queramos utilizar es una característica agnóstica dentro de lo que sería el JAMStack. 

La API de WordPress viene con varios endpoints de serie que podremos examinar en la siguiente ruta:

https://midominio.com/wp-json/

Esto daría para más tutoriales. ¿Qué más podemos hacer?💁‍♂️

*Podemos crear nuestros propios endpoints.

*Podemos utilizar Javascript Vanilla (sin utilizar una libreria).

*Incluir en el archivo JSON otros datos que se almacenen en WordPress generados por otros plugins como hemos hecho con Advanced Custom Field.

*Podemos sustituir la REST API de WordPress por GraphQL con el plugin WPGraphQL.

*A demás de la API de WordPress podemos conectar otras APIs externas.

*Habilitar la API de WooCommerce.

*Utilizar un generador de sitios estáticos como Gatsby, Gridsome,

*Tutorial de Postman que es una herramienta fantástica para explorar APIs.

*Deshabilitar las funciones innecesarias de WordPress

*Desplegar la aplicación en Netlify o Gitlab pages

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información básica sobre protección de datos Ver más

  • Responsable Israel Escuer .
  • Finalidad Moderar los comentarios. Responder las consultas.
  • Legitimación Tu consentimiento.
  • Destinatarios Israel Escuer.
  • Derechos Acceder, rectificar y suprimir los datos.
  • Información Adicional Puedes consultar la información detallada en la Política de Privacidad.

Ir arriba