Utilice WordPress con React para crear un CMS sin cabeza para su aplicación web

WordPress Rest API es una de las muchas características excelentes que ofrece WordPress. Permite a los desarrolladores crear complementos y temas fascinantes, y también les permite impulsar aplicaciones de terceros con WordPress CMS.

En las aplicaciones web modernas, el sistema de gestión de contenido también se desarrolla para gestionar el contenido del sitio web. Esto puede agregar una carga de trabajo adicional para los desarrolladores. Con tantas posibilidades que ofrece Rest API , también se puede pensar en usar WordPress con React como un CMS sin cabeza para sus aplicaciones web basadas en JavaScript.

Entonces, ¿qué diablos es WordPress sin cabeza?

Ser 'Headless' definitivamente no significa que al CMS le falte la sección de encabezado. Significa que puede utilizar el CMS como un sistema de gestión de contenido genérico independientemente de la tecnología utilizada para construir el front-end.

Rest API permite a los desarrolladores interactuar con interfaces de tecnología cruzada siempre que ambos hablen el mismo idioma de JSON. WordPress Rest API escupe datos en formato JSON que es comprensible para una gran cantidad de tecnologías web. JSON es una representación basada en texto de objetos JavaScript que contiene datos en un par clave-valor.

 "amigos": [
      {
        "id": 0,
        "nombre": "Harriet Stanley"
      },
      {
        "id": 1,
        "nombre": "Benton Odom"
      },
      {
        "id": 2,
        "nombre": "Jackie Edwards"
      }
    ],

Hoy, demostraré el poder de WordPress Rest API usándolo con React y WordPress como un CMS sin cabeza para mi aplicación web básica.

El beneficio de usar Headless WordPress CMS

Ser una plataforma de código abierto; WordPress ofrece una gran flexibilidad para crear cualquier tipo de sitio web. Usar WordPress como un CMS sin cabeza le permite crear el front-end de su aplicación web usando cualquier tecnología web y administrar su contenido usando uno de los CMS más populares.

Es posible que se encuentre con la situación en la que necesite agregar una función de blog en una aplicación web existente creada con React o Angular. En lugar de codificar el sistema de gestión de contenido completo en el marco nativo; use WordPress CMS sin cabeza para administrar el contenido usando Rest API.

Configurar un sitio de WordPress

Comencemos con la configuración del sitio de WordPress, ya que actuará como una fuente de datos para nuestra aplicación React de front-end.

Descargue el archivo zip del complemento WP-Rest API de git y cargue la carpeta zip dentro de su carpeta de complementos de WordPress. Una vez que se cargue el archivo, active el complemento. Esto habilitará la API de WordPress Rest dentro de su sitio web de WordPress.

Ahora, vaya a Configuración → Enlaces permanentes y seleccione Nombre de publicación o Estructura personalizada.

Dado que estamos trabajando con llamadas a la API, descargue la extensión de Chrome para Postman . Dentro del cartero, ingrese la URL en el siguiente formato:

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

La URL anterior obtendrá los datos de las publicaciones dentro de su sitio de WordPress.

Descargue el complemento de IU de tipo de publicación personalizada para crear tipos de publicación personalizados. Esta publicación personalizada se mostrará cuando usemos WordPress con React en el siguiente paso.

Instale y active el complemento y continúe para agregar un nuevo tipo de publicación. Para este tutorial, crearé un tipo de publicación personalizada para Libros.

Dentro de Post Type Slug, escriba el nombre de su publicación personalizada.

Asegúrese de que la casilla de verificación Mostrar en la API REST esté configurada en verdadero y que también esté configurado el slug base de la API REST. Esto es obligatorio si desea utilizar WordPress como CMS sin cabeza.

Marque todas las casillas para obtener la información que busca obtener de la API REST.

Después de guardar los cambios, notará que se completa una nueva opción en la barra lateral. Haga clic en él para agregar el nuevo libro dentro de su tipo de publicación personalizada.

Creé mi primer libro poniendo los datos de muestra, así como un extracto de mi publicación.

Para verificar que los datos están disponibles a través de API, continúe y presione la URL dentro del Postman.

Ahora, la URL debería verse como https://exampe.com/wp-json/wp/v2/ books

También podemos agregar más campos como Publisher usando ACF y ACF a los complementos de RestAPI .

Instale y active ambos complementos.

De forma predeterminada, ACF no habla con la API de WordPress Rest, por lo tanto, también necesitamos descargar el complemento ACF REST API .

Al usar el complemento de campos personalizados, agregaré el campo Editor para mis libros.

Asegúrese de seleccionar el tipo de publicación deseada de la lista. Después de eso, presione ' Publicar '.

Se completa un nuevo campo dentro de mi tipo de publicación personalizada donde puedo definir el editor de mi libro. Eso es todo lo que necesitábamos hacer para configurar nuestro WordPress para enviar nuestros datos a nuestra aplicación web ReactJS.

Empezando con React

¿Qué es ReactJS?

React es una biblioteca de JavaScript para la web mantenida por Facebook y la comunidad de desarrolladores. JavaScript es una herramienta poderosa para el desarrollo web y hay varias bibliotecas escritas en JavaScript para mejorar la funcionalidad de los sitios web. ReactJS se utiliza principalmente para desarrollar aplicaciones de una sola página que son rápidas, robustas y dinámicas.

Configuración de la aplicación React

Para crear aplicaciones usando React, necesita tener las siguientes dependencias instaladas en su computadora.

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

Después de configurar el entorno, abra la línea de comando y ejecute el siguiente código para crear el proyecto con ReactJS.

 Interfaz npx create-react-app

Una vez creada la aplicación, haga cd (cambiar de directorio) a la carpeta de la aplicación y escriba el siguiente comando para instalar el paquete Axios para las llamadas a la API.

 npm i axios

Ahora, abra la carpeta dentro de su editor de texto favorito. Estoy usando Visual Studio Code.

Inicie la aplicación ejecutando el comando npm start.

Si todo funciona correctamente, estamos listos para construir nuestra aplicación web con React usando WordPress como CMS sin cabeza.

Cree una nueva carpeta ' componentes ' dentro de la carpeta src , y dentro de la carpeta ' componentes ' cree un nuevo archivo ' Books.js '.

Representación de datos de publicación en ReactJS

Dentro del archivo Book.js , obtendremos los datos de la API de WordPress Rest. A continuación se muestra el código que solicita el punto final de la API Rest, que en mi caso es ' / books ', y muestra los datos en formato JSON.

 importar React, {Component} de 'reaccionar'
importar axios de 'axios';

export class Books amplía el componente {
   estado = {
       libros: [],
       isLoaded: falso
   }

 componentDidMount () {
   axios.get ('https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/books/')
       .entonces (res => this.setState ({
           libros: res.data,
           isLoaded: verdadero
       }))
       .catch (err => console.log (err))
   }


   render () {
      console.log (this.state);
       regreso (
           <div>
              
           </div>
       )
   }
}

exportar libros predeterminados

El código anterior mostrará la matriz de datos en la consola que luego se utiliza dentro del bloque de procesamiento.

Ahora, dentro del archivo App.js , llame al componente Libros como se muestra a continuación.

 importar Reaccionar desde 'reaccionar';
importar './App.css';
importar libros de './components/Books';

función App () {
 regreso (
   <div className = "Aplicación">
    <Libros />
   </div>
 );
}

exportar la aplicación predeterminada;

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.

Visualización de datos de publicación en ReactJS

Los datos se pueden mostrar agregando el código dentro del método de representación.

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

En lugar de mostrar datos aquí, crearemos un nuevo componente y lo llamaremos ' BookItems.js ' ya que quiero mantenerlo separado del componente principal.

Cambie el método de renderización dentro de Bookk.js a algo como:

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

Ahora, necesitamos renderizar el componente BookItems en su lugar.

Dentro de BookItems.js agregue el siguiente código:

 importar React, {Component} de 'reaccionar'
importar axios de 'axios';
importar PropTypes de 'prop-types';

Exportar clase BookItems amplía Componente {
 
   render () {
       const {título} = this.props.book;
       regreso (
           <div>
              <h2> {title.rendered} </h2>
           </div>
       )
   }
}

exportar artículos de libro predeterminados

En el código anterior, estoy haciendo referencia al accesorio del libro para obtener el título y otra información.

Nota: asegúrese de hacer referencia al componente BookItems dentro del componente "Libros".

Mi versión final de BookItems.js se parece a esto:

 importar React, {Component} de 'reaccionar'
importar PropTypes de 'prop-types';
importar axios de 'axios';
Exportar clase BookItems amplía Componente {

   estado = {
       imgUrl: '',
       autor: '',
       isLoaded: falso
   }

   propTypes estáticos = {
       libro: PropTypes.object.isRequired
   }

   componentDidMount () {
       const {destacado_media, autor} = this.props.book;
       const getImageUrl = axios.get (`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/media/$ {destacado_media}`);
       const getAuthor = axios.get (`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/users/$ {autor}`);
      
       Promise.all ([getImageUrl, getAuthor]). Luego (res => {

           console.log (res);
           this.setState ({
               imgUrl: res [0] .data.media_details.sizes.full.source_url,
               autor: res [1] .data.name,
               isLoaded: verdadero

           });
       });
    }
 
   render () {
       const {título, extracto} = this.props.book;
       const {autor, imgUrl, isLoaded} = this.state;
       regreso (
           <div>
              <h2> {title.rendered} </h2>
              <img src = {imgUrl} alt = {title.rendered} />
              <strong> {autor} </strong> <br/>
              <div dangerouslySetInnerHTML = {{__ html: excerpt.rendered}}> </div>
           </div>
       )
   }
}

exportar artículos de libro predeterminados

Y la salida en el navegador se ve así:

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

¡Terminando!

Hoy, te he mostrado cómo usar WordPress con React como un CMS sin cabeza para tu aplicación web. El código React también está disponible en Git para que lo descargues. Sin embargo, no se limita a React. También puede experimentar con VueJS, Angular o cualquier marco de JavaScript. Hay muchas cosas que puede hacer con WordPress Rest API. El cielo es el límite, así que adelante, use WordPress para su próximo proyecto web.