Use WordPress con React para crear un CMS sin encabezado 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 les permite impulsar aplicaciones de terceros con WordPress CMS.

El sistema de administración de contenido también está desarrollado para administrar el contenido del sitio web en aplicaciones web modernas. 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.

¿Qué es WordPress sin cabeza?

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

Rest API permite a los desarrolladores interactuar con interfaces de tecnología cruzada siempre que ambas 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 de JavaScript que contiene datos en pares clave-valor.

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

Hoy, demostraré el poder de la API Rest de WordPress usándola con React y WordPress como un CMS autónomo para mi aplicación web básica.

Los beneficios de usar el CMS de WordPress sin cabeza

Al ser una plataforma de código abierto, WordPress ofrece una gran flexibilidad para crear cualquier 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 necesita agregar una función de blog en una aplicación web existente creada con React o Angular. En lugar de codificar el sistema de administración de contenido completo en el marco nativo, use WordPress CMS sin cabeza para administrar el contenido usando Rest API.

Cómo configurar un sitio de WordPress para ReactJS

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 carga el archivo, active el complemento. Esto habilitará la API Rest de WordPress dentro de su sitio web de WordPress.

Vaya a Configuración → Enlaces permanentes y seleccione Nombre de la publicación o Estructura personalizada.

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

https://ejemplo.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 interfaz de usuario de tipo de publicación personalizado 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 agregue un nuevo tipo de publicación. Para este tutorial, crearé un tipo de publicación personalizada para Libros.

Dentro de Post Type Slug, escribe el nombre de tu publicación personalizada.

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

Marque todas las casillas de 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 y un extracto de mi publicación.

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

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

También podemos agregar más campos como Editor mediante el uso de complementos ACF y ACF para RestAPI .

Instale y active ambos complementos.

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

Usando 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.

Primeros pasos 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 existen varias bibliotecas escritas en JavaScript para mejorar la funcionalidad de los sitios web. ReactJS se usa 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 React, debe tener las siguientes dependencias instaladas en su computadora.

• NodeJS y NPM.
• Editor de texto como Sublime o Visual Studio Code.
• Git para 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 de npx create-react-app

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

 npm y axios

Ahora, abra la carpeta dentro de su editor de texto favorito. Estoy usando el código de Visual Studio.

Inicie la aplicación ejecutando el comando npm start.

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

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

Cómo renderizar datos de publicación en ReactJS

Dentro del archivo Book.js , buscaremos 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 ' /books ', y muestra los datos en formato JSON.

 importar Reaccionar, {Componente} de 'reaccionar'
importar axios desde 'axios';

exportar clase Libros extiende Componente {
   estado = {
       libros: [],
       está cargado: falso
   }

 componenteDidMontaje () {
   axios.get('https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/books/')
       .then(res => this.setState({
           libros: res.data,
           está cargado: verdadero
       }))
       .catch(err => consola.log(err))
   }


   prestar() {
      consola.log(este.estado);
       devolver (
           <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 React desde 'react';
importar './Aplicación.css';
importar libros desde './components/Books';

aplicación de función () {
 devolver (
   <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.

Cómo mostrar datos de publicaciones en ReactJS

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

 prestar() {
       const {libros, isLoaded} = this.state;
       devolver (
           <div>
               {libros.mapa(libro =>
               <h4>{libro.título.rendered}</h4>
               )}
           </div>
       );
   }

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

Cambie el método de procesamiento dentro de Bookk.js a algo como:

 prestar() {
       const {libros, isLoaded} = this.state;
       devolver (
           <div>
               {libros.mapa(libro =>
               <BookItems clave={libro.id} libro={libro}/>
               )}
           </div>
       );
   }

Ahora, necesitamos renderizar el componente BookItems en su lugar.

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

 importar Reaccionar, {Componente} de 'reaccionar'
importar axios desde 'axios';
importar PropTypes desde 'prop-types';

exportar clase BookItems extiende Componente {
 
   prestar() {
       const {título} = this.props.book;
       devolver (
           <div>
              <h2>{título.representado}</h2>
           </div>
       )
   }
}

exportar artículos de libros predeterminados

En el código anterior, hago 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 "Books".

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

 importar Reaccionar, {Componente} de 'reaccionar'
importar PropTypes desde 'prop-types';
importar axios desde 'axios';
exportar clase BookItems extiende Componente {

   estado = {
       imgURL: '',
       autor: '',
       está cargado: falso
   }

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

   componenteDidMontaje () {
       const {medios destacados, autor} = 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 => {

           consola.log(res);
           este.setState({
               imgUrl: res[0].data.media_details.sizes.full.source_url,
               autor: res[1].data.name,
               está cargado: verdadero

           });
       });
    }
 
   prestar() {
       const {título, extracto} = this.props.book;
       const {autor, imgUrl, isLoaded} = this.state;
       devolver (
           <div>
              <h2>{título.representado}</h2>
              <img src={imgUrl} alt={título.representado}/>
              <strong>{autor}</strong><br/>
              <div peligrosamenteSetInnerHTML={{__html: extracto.rendered}}></div>
           </div>
       )
   }
}

exportar artículos de libros predeterminados

Y la salida en el navegador se ve así:

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

¡Terminando!

Hoy, le mostré cómo usar WordPress con React como un CMS sin cabeza para su 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 toneladas de cosas que puedes hacer con WordPress Rest API. El cielo es el límite, así que adelante y usa WordPress para tu próximo proyecto web.