¿Como construir un headless WordPress?

Esta técnica consiste en utilizar WordPress como parte interna de la web (backend) junto a un framework o librería de Javascript representando la parte frontal (frontend), algunos de estos frameworks pueden ser Vue.js, React.js, Angular.js o Svelte.js entre otros.

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, la tarea de conectar toda aplicación estaría a cargo de la REST API de WordPress que envía un objeto JSON, esto sería el CONTROLADOR y por ultimo las VISTAS se generaran con el framework de Javascript que elijamos y con el que nos sintamos más cómodos, para ello utilizaremos los distintos endpoints de los que dispongamos.

Las ventajas de utilizar un WordPress desacoplado:

  • Mejoras en el rendimiento y el proceso de carga.
  • Disminuye la entrada de ataques de fuerza bruta (mejora la seguridad).
  • Podemos tener el backend en un servidor y el frontend en otro distinto.
  • Es más fácil de construir Aplicaciones web progresiva (PWA).
  • Los proyectos se vuelven más escalables a nivel de frontend.
  • Facilidad a la hora de replantearse un nuevo diseño.
  • Reutilización de componentes web.
  • Podemos desarrollar Aplicaciones móviles nativas.

Desventajas:

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

Si vamos a 

WordPress nos ofrece de serie todo lo necesario para gestionar un proyecto mediante un montón de funcionalidades, muchas de ellas las podemos seguir utilizando como pueden ser el envío de emails, la gestión de usuarios, 

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

JSON añadir campos como ACF

Con este artículo quiero que entiendas la importancia que tuvo la inclusión en el núcleo de la REST API, que descubras otras formas de trabajar un proyecto sin abandonar el poder de WordPress y que entiendas las posibles ventajas que tendrías si tomas la decisión de utilizar un WordPress desacoplado.

*Podemos crear nuestros propios endpoints

*Podemos utilizar Javascript Vanilla (sin utilizar un framework)

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

*Podemos sustituir la REST API por WPGraphQL

Deshabilitar las funciones innecesarias de WordPress

Plugins:

Enlaces de interés

  • Netlify
  • Now

Artículos de inspiración de esta entrada

Ejemplos interesantes (Web de noticias, sitio de reseñas de libros…)

Servicios externos:

  • ElasticSearch para integrar un buscador (evitar numerosas consultas a la base de datos)

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.