Cómo usar WordPress con React para crear un CMS sin cabeza para tu aplicación web

Headless WordPress ha surgido como un enfoque transformador del desarrollo web, que revoluciona la forma de gestionar y presentar los contenidos en línea. Headless WordPress desvincula las capacidades del sistema de gestión de contenidos (CMS) de WordPress de la capa de presentación del frontend, permitiendo a los desarrolladores una flexibilidad y creatividad sin precedentes a la hora de crear experiencias de usuario.

Con los rápidos avances en las tecnologías de desarrollo web, el acoplamiento tradicional de backend y frontend a menudo dificulta la adopción de nuevas herramientas y marcos de trabajo. Headless WordPress garantiza que el contenido siga siendo accesible y adaptable a las tendencias y tecnologías emergentes.

Headless WordPress representa un cambio en el CMS y el desarrollo web, ofreciendo flexibilidad y escalabilidad al mismo tiempo. Al desacoplar el CMS backend de la capa de presentación frontend, Headless WordPress permite a los desarrolladores crear experiencias digitales dinámicas, interactivas y altamente personalizables que trascienden las limitaciones de las configuraciones tradicionales de WordPress.

¿Qué es Headless WordPress?

Un sitio web WordPress sin cabecera es un sitio que utiliza principalmente WordPress para la gestión de contenidos y utiliza cualquier otra tecnología para construir el front-end y mostrar el contenido a los visitantes del sitio web.

La API Rest permite a los desarrolladores interactuar con interfaces de distintas tecnologías, siempre que ambas hablen el mismo lenguaje, JSON. La API Rest de WordPress escupe datos en formato JSON, que es comprensible por un gran número de tecnologías web. JSON es una representación basada en texto de objetos JavaScript que contiene datos en pares clave-valor.

"friends": [

      {

        "id": 0,

        "name": "Harriet Stanley"

      },

      {

        "id": 1,

        "name": "Benton Odom"

      },

      {

        "id": 2,

        "name": "Jackie Edwards"

      }

    ],

Hoy voy a demostrar la potencia de la API Rest de WordPress utilizándola con React y WordPress como un CMS headless para mi aplicación web básica.

API WordPress sin cabeza 5 veces más rápida

Nuestra pila ofrece tiempos de respuesta de API de 200 ms para frontends React/Next.js, con endpoints autoescalables y caché JAMstack integrada para un rendimiento sin fisuras.

Lanzar Headless CMS →

Headless vs Decoupled CMS – Aprende la diferencia

Headless CMS y Decoupled CMS son dos enfoques arquitectónicos de los sistemas de gestión de contenidos que ofrecen más flexibilidad y agilidad en comparación con las configuraciones CMS monolíticas tradicionales. Aquí tienes un desglose de las diferencias entre ambos:

Aspecto	CMS sin cabeza	CMS desacoplado
Flexibilidad del frontend	Proporciona la máxima flexibilidad para el desarrollo del frontend.	Proporciona cierta flexibilidad, pero está vinculada a una tecnología específica de frontend.
Independencia del backend	Separa completamente el backend (gestión de contenidos) del frontend.	Desacopla la capa de presentación del frontend, pero sigue dependiendo del CMS para la funcionalidad del backend.
Tecnología agnóstica	Permite el uso de cualquier tecnología frontend, por ejemplo, React, Angular, Vue.js.	A menudo viene con tecnologías frontales o marcos predefinidos.
Rendimiento	Normalmente ofrece un mejor rendimiento, ya que el contenido se sirve directamente al frontend sin la sobrecarga de renderizado del CMS.	Puede experimentar cuellos de botella en el rendimiento debido al estrecho acoplamiento entre el backend y el frontend.
Escalabilidad	Altamente escalable, ya que te permite escalar el frontend y el backend de forma independiente.	La escalabilidad puede ser limitada debido al acoplamiento entre el backend y el frontend.
Velocidad de desarrollo	Acelera el proceso de desarrollo permitiendo que los equipos de frontend y backend trabajen simultáneamente.	El desarrollo puede ser más lento debido a las dependencias entre los equipos de frontend y backend.
Sindicación de contenidos	Permite la sindicación de contenidos a través de múltiples plataformas y canales fácilmente.	La sindicación de contenidos puede ser más difícil debido a la arquitectura acoplada.

Cómo configurar ReactJS con Headless WordPress

Configurar ReactJS con una configuración headless de WordPress implica desacoplar el front-end (ReactJS) del back-end (WordPress) y utilizar WordPress únicamente como sistema de gestión de contenidos (CMS).

Paso 1: Elegir el proveedor de alojamiento

Elegir la plataforma de alojamiento de WordPress adecuada es el primer y crucial paso a la hora de configurar WordPress y crear un CMS sin cabeza.

El alojamiento desempeña un papel fundamental con WordPress sin cabeza, porque aunque la “cabeza” (la parte frontal) se separa en un enfoque sin cabeza, el “cuerpo” (la parte trasera) sigue residiendo en un servidor que necesita alojamiento.

El rendimiento, la seguridad y la fiabilidad del servidor son fundamentales para garantizar que el contenido llegue sin problemas al front-end, independientemente de la tecnología utilizada.

Por lo tanto, elegir un host que ofrezca un rendimiento óptimo del servidor y una mayor seguridad es de gran ayuda. Teniendo esto en cuenta, yo recomendaría Cloudways, porque ofrece la combinación perfecta de velocidad, seguridad y asistencia, garantizando que tu viaje por WordPress sin cabeza transcurra sin contratiempos.

En concreto, Cloudways proporciona alojamiento web totalmente gestionado en proveedores de nube de primer nivel como AWS, Google Cloud y DigitalOcean, garantizando un rendimiento y una escalabilidad de alta velocidad. La plataforma ofrece instalaciones con un solo clic, lo que facilita la configuración de WordPress y otras herramientas. También tienes la opción de seleccionar Cloudways Autonomous, que es un servidor de alojamiento WordPress de alta disponibilidad.

React Frontend + WordPress Backend = Combinación perfecta

Despliega sitios headless con acceso SSH/Git, una API REST de WordPress aislada y una CDN gratuita Cloudflare Enterprise para una velocidad global.

Construir mi sitio sin cabeza

Además, con cachés avanzadas integradas y una red de distribución de contenidos (CDN), tu contenido se entrega más rápido, independientemente de la ubicación del usuario.

Además, Cloudways garantiza una seguridad robusta mediante parches de seguridad regulares, un cortafuegos dedicado y la instalación de SSL, lo que ayuda a proteger tus datos e interacciones backend. Las copias de seguridad automatizadas y las opciones de restauración sencilla proporcionan una capa adicional de protección de datos y tranquilidad.

Además, el servicio de atención al cliente 24 horas al día, 7 días a la semana, y la amplia base de conocimientos de Cloudways garantizan la rápida resolución de cualquier problema que te surja, permitiéndote centrarte en la creación y gestión de tu CMS headless sin complicaciones relacionadas con el alojamiento.

Paso 2: Activar la API Rest de WordPress

• Primero, descarga el archivo zip del plugin WP-Rest API desde git.
• Sube la carpeta zip dentro de tu carpeta de plugins de WordPress.
• Una vez subido el archivo, activa el plugin para habilitar la API Rest de WordPress.

Paso 3: Obtener los datos de la entrada

Para obtener los datos del puesto, sigue estos pasos:

• Ve a Configuración → Enlaces permanentes y selecciona Nombre de la entrada o Estructura personalizada.

• Como estamos trabajando con llamadas a la API, descarga la extensión de Chrome para Postman.
• Dentro del Cartero, introduce la URL con el siguiente formato:

https://example.com/wp-json/wp/v2/posts

• La URL anterior obtendrá los datos de las entradas dentro de tu sitio WordPress.

Paso 4: Crear tipos de entrada personalizados

Para crear tipos de entrada personalizados:

• Descarga el plugin Custom Post Type UI para crear tipos de entrada personalizados.

• Instala y activa el plugin y añade un nuevo tipo de entrada.
• Para este tutorial, voy a crear un tipo de entrada personalizado para Libros.

• Dentro del Post Type Slug, escribe el nombre de tu entrada personalizada.

• Asegúrate de que la casilla Mostrar en la API REST está marcada como verdadera y de que también está marcada la babosa base de la API REST. Esto es obligatorio si deseas utilizar WordPress como CMS sin cabecera.

• Marca todas las casillas de la información que pretendes obtener de la API REST.

• Tras guardar los cambios, verás que aparece una nueva opción en la barra lateral. Haz clic en ella para añadir el nuevo Libro dentro de tu tipo de entrada personalizado.

• He creado mi primer libro poniendo los datos de muestra y un extracto para mi entrada.

Nosotros nos encargamos de WordPress, tú de React

Céntrate en tu código frontend mientras optimizamos WordPress como CMS, aseguramos los puntos finales de la API y autoescalamos los recursos para los picos de tráfico.

Prueba gratis Headless Hosting

Paso 5: Comprobar y verificar

• Para verificar que los datos están disponibles a través de la API, sigue adelante y pulsa la URL dentro del Postman.
• Ahora, la URL debería parecerse ahttps://exampe.com/wp-json/wp/v2/books.
• También podemos añadir más campos, como Editor, utilizando los plugins ACF y ACF a RestAPI.

• Instala y activa ambos plugins.

• Por defecto, ACF no habla con la API Rest de WordPress. Por lo tanto, necesitamos descargar también el plugin ACF REST API.

• Utilizando el plugin de campos personalizados, añadiré el campo Editor para mis libros.

• Asegúrate de seleccionar el tipo de publicación deseado de la lista. Después, pulsa “Publicar”.

Se rellena un nuevo campo dentro de mi tipo de entrada personalizado donde puedo definir el editor de mi libro. Eso es todo lo que necesitamos hacer para configurar nuestro WordPress para enviar nuestros datos a nuestra aplicación web ReactJS.

Tu frontend, tus reglas

Empareja WordPress con React, Next.js o Vue utilizando políticas CORS preconfiguradas y monitorización de la API en tiempo real para un control creativo total.

Empieza a codificar ahora

Qué es React y cómo configurarlo

JavaScript es una potente herramienta para el desarrollo web y React es una biblioteca JavaScript para la web mantenida por Facebook y la comunidad de desarrolladores.

ReactJS se utiliza principalmente para desarrollar aplicaciones de una sola página que sean rápidas, robustas y dinámicas.

Requisitos previos

Asegúrate de que tienes las siguientes dependencias instaladas en tu ordenador antes de crear aplicaciones React.

• NodeJS y NPM.
• Editor de texto como Sublime o Visual Studio Code.
• Git para el control de versiones (Opcional)

Cómo crear un proyecto con ReactJS

• Después de configurar el entorno, abre la línea de comandos y ejecuta el siguiente código para crear el proyecto con ReactJS.

npx create-react-app frontend

• Una vez creada la app, cd (cambia de directorio) a la carpeta de la aplicación y escribe el siguiente comando para instalar el paquete Axios para llamadas a la API.

npm i axios

• Ahora, abre la carpeta dentro de tu editor de texto favorito. Yo estoy utilizando Visual Studio Code.
• Inicia la aplicación ejecutando el comando npm start.
• Estamos listos para construir nuestra aplicación web con React utilizando WordPress como CMS sin cabeza si todo funciona correctamente.
• Crea una nueva carpeta “components” dentro de la carpeta src, y dentro de la carpeta “components”, crea un nuevo archivo “Books.js”.

Cómo Renderizar Post Data en ReactJS

Dentro del archivo Book.js, obtendremos los datos de la API Rest de WordPress.

A continuación se muestra el código que solicita el punto final de la API Rest -que en mi caso es “/libros”- y muestra los datos en formato JSON:

import React, { Component } from 'react'
import axios from 'axios';
export class Books extends Component {
   state = {
       books: [],
       isLoaded: false
   }
 componentDidMount () {
   axios.get('https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/books/')
       .then(res => this.setState({
           books: res.data,
           isLoaded: true
       }))
       .catch(err => console.log(err))
   }
   render() {
      console.log(this.state);
       return (
           <div>              
           </div>
       )
   }
}

exportar Libros por defecto

• El código anterior mostrará la matriz de datos en la consola, que luego se utilizará dentro del bloque de renderizado.
• Ahora, dentro del archivo App.js, llama al componente Libros como se muestra a continuación.

import React from 'react';
import './App.css';
import Books from './components/Books';
function App() {
return (
<div className="App">
<Books/>
</div>
);
}

exportar App por defecto;

App.js es el punto de entrada de nuestra aplicación web. Por lo tanto, es importante hacer referencia a los componentes “Libros” dentro de este archivo.

Cómo mostrar datos de publicación en ReactJS

Así es como puedes mostrar los datos de la entrada en ReactJS

• Añade el código siguiente dentro del método renderizar:

render() {
       const {books, isLoaded} = this.state;
       return (
           <div>
               {books.map(book =>
               <h4>{book.title.rendered}</h4>
               )}
           </div>
       );
   }

 

• En lugar de mostrar los datos aquí, crearemos un nuevo componente y lo llamaremos “BookItems.js”, ya que quiero mantenerlo separado del componente padre.
• Cambia el método render dentro de Bookk.js por algo como

render() {
       const {books, isLoaded} = this.state;
       return (
           <div>
               {books.map(book =>
               <BookItems key={book.id} book={book}/>
               )}
           </div>
       );
   }

• Ahora, en su lugar, tenemos que renderizar el componente BookItems.
• Dentro del BookItems.js, añade el siguiente código:

import React, { Component } from 'react'
import axios from 'axios';
import PropTypes from 'prop-types';
export class BookItems extends Component {
   render() {
       const { title } = this.props.book;
       return (
           <div>
              <h2>{title.rendered}</h2>
           </div>
       )
   }
}

exportar por defecto BookItems

• En el código anterior, hago referencia al libro prop para obtener el título y otra información.

Nota: Asegúrate de hacer referencia al componente BookItems dentro del componente “Libros”.

Mi versión final de BookItems.js tiene este aspecto:

import React, { Component } from 'react'
import PropTypes from 'prop-types';
import axios from 'axios';
export class BookItems extends Component {
   state = {
       imgUrl: '',
       author: '',
       isLoaded: false
   }
   static propTypes = {
       book: PropTypes.object.isRequired
   }
   componentDidMount () {
       const {featured_media, author} = this.props.book;
       const getImageUrl = axios.get(`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/media/${featured_media}`);
       const getAuthor = axios.get(`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/users/${author}`);
     
       Promise.all([getImageUrl, getAuthor]).then(res => {
           console.log(res);
           this.setState({
               imgUrl: res[0].data.media_details.sizes.full.source_url,
               author: res[1].data.name,
               isLoaded: true
           });
       });
    }
   render() {
       const { title, excerpt } = this.props.book;
       const {author, imgUrl, isLoaded} = this.state;
       return (
           <div>
              <h2>{title.rendered}</h2>
              <img src={imgUrl} alt={title.rendered}/>
              <strong>{author}</strong><br/>
              <div dangerouslySetInnerHTML={{__html: excerpt.rendered}}></div>
           </div>
       )
   }
}

export default BookItems
Y la salida en el navegador tiene este aspecto:

No es el más bonito, ¿verdad? Bueno, eso es porque el estilismo está fuera del alcance de este tutorial.

CMS WordPress sin cabeza – Ventajas e inconvenientes

Ahora que sabes cómo crear el CMS WordPress sin cabeza, debes conocer los posibles beneficios e inconvenientes de tenerlo.

Ventajas de utilizar Headless WordPress

La primera ventaja, y la más importante, de utilizar un CMS wordpress headless es la flexibilidad que ofrece. Con el enfoque headless, tienes la libertad de elegir y diseñar la cara (o front-end) que quieras, utilizando tecnologías modernas. Esto hace que tu sitio web sea más rápido, responda mejor y se adapte con precisión a las necesidades de tus usuarios.

Y no sólo eso, tu sitio web es más seguro , porque cuando la parte delantera está separada de la trasera, hay pocas posibilidades de que los malos actores se metan con tu contenido.

Inconvenientes de usar Headless WordPress

En cuanto a los inconvenientes considerados, el CMS headless wordpress es complejo. Las configuraciones tradicionales de WordPress te permiten utilizar temas y plugins que se integran fácilmente.

Además, ir sin cabeza significa que puedes perderte algunas de estas funciones integradas, y tendrás que hacer un esfuerzo adicional para reinventarlas.

Y para los equipos más pequeños y los novatos, gestionar dos sistemas distintos puede resultar agotador, ya que tendrás que ocuparte de las actualizaciones, las comprobaciones de compatibilidad y las correcciones tanto del CMS como del front-end.

¡Terminando!

En conclusión, utilizar WordPress con React para crear un CMS sin cabeza para tu aplicación web abre un mundo de posibilidades tanto para los desarrolladores como para los creadores de contenidos. Al desacoplar el front-end y el back-end, obtienes la flexibilidad de diseñar una interfaz de usuario con las potentes funciones de React mientras gestionas el contenido sin problemas a través de WordPress.

A lo largo de este blog, te hemos guiado por los pasos esenciales, las mejores prácticas y consejos útiles para integrar estas dos robustas tecnologías, garantizando un proceso de desarrollo fluido y eficiente.