Durante más de 15 años, WordPress ha sido la solución CMS más popular y completa que le permite crear cualquier cosa, desde una cartera de una sola página hasta una plataforma de comercio electrónico completa. WordPress usa PHP para toda su infraestructura de fondo, como actualizaciones, API, Auth, Cape DB y la mayoría de los frontand. Sin embargo, al igual que otro personal popular, WordPress también se ha visto obligado a evolucionar últimamente. Dado el potencial y el poder creciente de las aplicaciones JavaScript para la Web, así como las aplicaciones de escritorio móvil y nativos, la API de REST WP intenta reducir la distancia entre la herencia del núcleo de WordPress PHP y el crecimiento de JavaScript. Creo que este es un gran paso para WordPress por dos razones:
Los sitios web de WP existentes pueden usar React / Vue u otra biblioteca frontend para crear una mejor experiencia de interfaz de usuario.
Por el contrario, los desarrolladores web reciben un CMS libre estándar en la industria, que puede integrarse fácilmente con la pila de su elección.
Esta es una situación de ganar-ganar para todos. En este artículo, centraremos nuestra energía en la construcción de una frantendda reaccionando por el trasero de WordPress. Pero primero, echemos un vistazo a la API de WordPress. WordPress Bases REST API Desarrollo del descanso API WP comenzó hace unos años e inicialmente se concibió como un complemento de características independientes. WordPress v4.4, nombrado en el código “Clifford”, introdujo la infraestructura real del resto en el centro de WordPress. Los puntos finales reales aparecieron en WordPress V4.7, llamado en el código “Vaughan”. La API WP le permite usar WordPress como CMS sin cabeza, fácil de usar, estable y amigable con JSON.
JSON JSON es tu formato favorito si tienes la intención de integrar WordPress con una pila JavaScript. JSON es similar a XML al proporcionarnos la oportunidad de transferir datos de manera efectiva utilizando una sintaxis muy legible. JSON es en realidad una cadena que incluye una representación basada en texto de un objeto JavaScript. Almacenar datos en un conjunto de valores clave. Un ejemplo simple JSON Publicing WP puede verse así – {ID: 1,
“Título”: {
“Rended”: “Hola mundo”
},
“Contenido”: {
“Rended”: “Bienvenido a WordPress. Esta es la primera
correo. ¡Edítelo o elimínelo, luego comience a bloguear! ”
}
}
Una respuesta JSON completa utilizando la API REST WP generalmente incluye información adicional de publicación como metadatos. Tiene todo lo que necesita para crear un tema frontal o un complemento para su aplicación.
Puntos finales WordPress Los puntos finales son muy accesibles para el público. Si ejecuta la última versión de WordPress, simplemente debe agregar / wp-json / wp / v2 al final de la URL. Por ejemplo, puede acceder a los puntos finales básicos en 127.0.0.1/wp-json/wp/v2 si ha configurado un WordPress en localhost. Si desea especificar el resultado, puede usar una extensión JSON View que hace que JSON se vea bien en su navegador. Lo que ha hecho aquí es definir una ruta y pedirle a su navegador que tome los datos por usted.
¿Qué queremos decir con la ruta? Una ruta es una URL de mapa en cierto método. El núcleo de WordPress lee la ruta y comprende que cada “/” representa una ruta o parámetro específico a seguir. Por ejemplo, un punto final puede ser ” / WP-JSON / WP / V2 / POST / 1″, donde solicita una publicación con una ID equivalente a 1. Las API de WordPress son útiles porque son bastante extensas. Esto se traduce en la posibilidad de hacerse cargo de los datos de su sitio web y transformarlos en un punto final. Se aceptan casi todas las funcionalidades básicas de WordPress y también se aceptarán todas las funciones futuras. Aquí hay una lista de API de WordPress aceptadas al momento de escribir este tutorial: Ruta básica de recursos publica / wp / v2 / publica publicar revisiones /wp/v2/revisiones categorías / wp / v2 / categoría etiquetas / wp / v2 / tags páginas / wp / v2 / pages comentarios / wp / v2 / comentarios > taxonomías / wp / v2 / taxonomies medios / wp / v2 / medios usuarios /wp/v2/users tipos de publicaciones /wp / V2/ tipos estatuto post / wp/ v2/ statuses configuración /wp/v2/settings

Los desarrolladores del tema, así como los desarrolladores de arados, pueden crear puntos finales personalizados para su aplicación. Si desea verificar todos los puntos finales disponibles, puede descargar una aplicación como Postman. Esto le dará una interfaz gráfica especialmente diseñada para la exploración del agua. Además, puede hacer directamente las llamadas de API a aplicaciones de tercera parte sin tener que confiar en los complementos. Tome un ejemplo. Cargar archivos y mantener más versiones es un requisito completo para cualquier aplicación web moderna. Esto es especialmente cierto para los archivos multimedia. En WordPress, hay muchos complementos disponibles que pueden hacer esto por usted; Sin embargo, es posible que deba hacer llamadas al servidor de WordPress para usarlas. Con la API WP, WordPress puede extraer la lógica de gestión de medios. Puede hacer todas las llamadas API de terceros directamente desde Frontand, lo cual es excelente con respecto a la separación de las preocupaciones. Puede usar una biblioteca como Cloudinity para manejar imágenes y otros archivos multimedia sobre la marcha y luego cargarlas en la nube. Una vez cargado, la URL de la imagen se puede almacenar en el fondo de WP. Las opciones son infinitas y puede combinar las piezas de la manera que desee.
Veamos ahora cómo conectar la mochila de WordPress con React. Las nociones introductorias sobre React React es una biblioteca de front-end declarativa para crear interfaces de usuario y aplicaciones web interactivas. Con React, puede componer piezas independientes más pequeñas de código reutilizable conocido como componentes. Creemos nuestro primer componente creando un proyecto React. La forma más popular de crear un proyecto React es ejecutar Create-React-App. CRA ofrece un entorno cómodo para el aprendizaje React y es la mejor manera de comenzar a construir una nueva aplicación de una página si es un principiante. Configura su entorno de desarrollo para que pueda usar las últimas funciones de JavaScript, como ES6 y Webpack. Además, Create-React-APP proporciona una experiencia agradable al desarrollador y optimiza la aplicación de producción. Debe tener Node> = 8.x y NPM> = 5.2 en la computadora. Para crear un proyecto, ejecute los siguientes comandos: NPX Create-React-App WP-React-Demo anterior crea una plantilla de plantilla para nuestra aplicación de reacción, que hemos llamado WP-React-Demo. CD WP-React-Demo NPM Inicio Si todo va bien, debería poder servir a la aplicación recién creada en un servidor de desarrollo en http: // localhost: 3000 /. Si tiene curiosidad por ver la estructura del director generada por Create-React-App, esto es lo que parece :. ├── Readme.md ├── paquete.json ├── público │ ├── favicon.ico │ ├── índice.html │ └── Manifest.json ├── src │ ├── ├ │ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ul App.js │ ├── app.test.js │ ├── index.css │ ├── índice.js │ ├── logo.svg │ └ └─ RegissterServiceWer.js └── Yarn.lock
El director público contiene todos los activos necesarios para lanzar la solicitud. El director del SRC incluye todos los archivos JavaScript para los que trabajaremos y pasaremos mucho tiempo allí. Cuando visita Localhost: 3000, el archivo index.html está cargando. Si abre el archivo public / index.html, no hay nada genial allí. Pero encontrará esta línea en algún lugar en el medio:
es el punto de partida en el que React transforma el árbol de componentes en la raíz de la aplicación.
¿Lo que esto significa? Vaya al director de SRC y abra index.js. importar reaccionar de ‘reaccionar’;
importar reactdom de ‘react-dom’;

Importar aplicación de ‘./App’;
Reactom.render (, document.getElementById (‘root’));
React intenta encontrar un elemento con ID “raíz” en el documento y luego inyectar componente en la raíz. De hecho, el componente de la aplicación se representa y desde aquí viene el logotipo React. Puede verificar esto abriendo el archivo src / app.js

Importar react, {componente} de ‘react’;
importar logotipo de ‘./logo.svg’;
import ‘./app.css’;
La aplicación de clase extiende el componente {
prestar () {
devolver (

Bienvenido a React

Para comenzar, edite src/app.js y guarde para recargar.
);
}
}
Exportar aplicación predeterminada;
En principio, este es un componente. Cada componente reproduce parte de su interfaz de uso. Puede componer un componente dentro de otro y, por lo tanto, obtendrá una estructura de árbol de componentes como esta: si se pregunta por qué podemos usar HTML Inside Render (), esta es JSX Magic. JSX es una extensión de sintaxis JavaScript y le permite usar HTML simple en un archivo JavaScript. Puede leer más sobre esto en documentos oficiales. Eliminaré todo el contenido HTML y luego lo reemplazaré con un
La etiqueta como esta:

Blog de WordPress

Los componentes reaccionan y los componentes de estado son los elementos básicos del React. Cada componente puede tener
Una entrada múltiple (o entradas) típicamente conocida como accesorios.

un estado local para el componente
Métodos que renderizan algo (por ejemplo: render ()) o administrar una cierta lógica comercial
Construiremos un componente que se haga cargo de todas las publicaciones disponibles y las mostrará al usuario. Para hacer esto, primero escribiremos un constructor de clases e inicializaremos el estado en el constructor: constructor (accesorios) {
super (accesorios);
This.state = {
Título: {},
datos: "",
Contenido: {}
};
}
El estado es un objeto JSON. Declaré un título, una vez y propiedades de contenido dentro del fabricante. El título y el contenido son objetos, mientras que la fecha es una matriz. Los datos que toman y la actualización del estado ahora, cuando el componente está montado, deben hacerse cargo de las publicaciones de la API y almacenarlos. Las publicaciones están disponibles en la siguiente URL: http: // localhost/wp-json/wp/v2/publicaciones/Entonces, ¿dónde ponemos esta lógica? El constructor puede sonar como una buena opción porque se invoca cuando se crea el componente, pero no es la mejor opción. En cambio, usaremos algo conocido como método de ciclo de vida. El método del ciclo de vida componentDidMount () se llama después de instalar el componente. ComponentDidMount () {return fetch (`http: // wordpress.com/wp-json/v2/publica/`)
.hen (((respuesta) => respuesta.json ())
.Then ((ResponseJson) => {
// Actualizar estado aquí
})
.catch ((error) => {
console.error (error);
});
}
Utilizamos la búsqueda, que es el estándar de facto en JavaScript para hacer llamadas API. El parámetro a tomar () es la URL que queremos asumir. Fetch devuelve una promesa de que podemos evaluar a través de una cadena .shen (). El primer bloque luego convierte la respuesta en el formato JSON, para que podamos colocarla en el estado. const {title, data, content} = ResponseJson;
This.setsate ({título, datos, contenido});
Entonces, ¿qué está pasando aquí? Primero extraemos los campos de título, dado y contenido del objeto de Respuestajson. La sintaxis extraña que ve aquí se conoce como sintaxis de asignación. Como ya sabrá, WP API devuelve mucha información que no necesitamos. La sintaxis de la asignación de la destrucción permite desempacar los valores del objeto en variables distintas. Luego usamos esto.setsate () para actualizar el estado del componente. El método Settate () acepta un objeto como un parámetro que será el estado actualizado. Restringir nuestro método de reproducción Post WordPress devuelve JSX que discutimos anteriormente. A diferencia de HTML puro, puede incorporar expresiones en JSX. Por ejemplo, si tiene que jugar el título de publicación tomada y nada más, puede hacer esto: render () {return (
{This.state.title.rendered}
);
}
}
¡Intentalo! Del mismo modo, puede jugar la fecha incorporando {this.sate.date}. Sin embargo, el contenido almacenado incluye HTML real. Debido a que el código HTML se devuelve del servidor, es seguro asumir que no hay peligro en jugarlo. Entonces, para reproducir el contenido, deberá atribuir el conjunto interno HTML de la siguiente manera:
Aquí está el método Render () en Action.render () {
devolver (

{this.state.title.rendered}

{this.state.date}

);
}
}
Agregué algunas etiquetas y clases adicionales para el estilo. Puede escribir todos sus estilos en un archivo en el directorio SRC e importarlos en App.js. Puede encontrar estilos para este proyecto en SRC / App.CSS. Recuerde agregar una declaración de importación, de lo contrario, los estilos no funcionarán. import './app.css';
Eso es todo. Has creado un front-end básico para tu backend de WordPress API usando React. Así es como debería verse la publicación predeterminada de Hello World en nuestra aplicación:
Resumen Uf! Es una gran cantidad de tierra cubierta en un día. Comenzamos con WordPress REST API y luego nos familiarizamos con los puntos finales de API. Luego comenzamos a construir una aplicación React desde cero, que prácticamente muestra una publicación de WordPress. Usar React con WordPress es lo mismo que React con cualquier otro backend de API. Con WordPress, es más fácil encontrar datos y saber exactamente dónde buscar. Si acaba de comenzar a explorar React, recomendaría que los documentos Reaccionan como un buen lugar para comenzar. Si tiene alguna pregunta, no dude en hacer los comentarios.

Copyright statement: Unless otherwise noted, this article is Collected from the Internet, please keep the source of the article when reprinting.