API REST de WordPress: la función CMS de próxima generación

Más de una cuarta parte de la web se ejecuta en WordPress. Es una hazaña bastante notable, teniendo en cuenta que existe desde hace más de una década, lo que lo hace bastante viejo en los años tecnológicos.

¿Cuál es la salsa secreta de WordPress? Fácil: es la forma más simple pero extensible de administrar su contenido. Sin embargo, por un tiempo, WordPress parecía haberse quedado atrás.

A medida que la web se ha vuelto más dependiente de JavaScript para crear experiencias inmersivas e interactivas, se hizo cada vez más claro que WordPress necesitaría ofrecer nuevas formas para que los usuarios y desarrolladores interactúen con su contenido.

Si bien WordPress se basa, y se seguirá construyendo, en PHP, la API REST de WP es un intento de crear un puente entre el legado del núcleo PHP WordPress y el potencial y el poder de las aplicaciones web de JavaScript, así como las aplicaciones móviles nativas. y aplicaciones de escritorio.

La API REST de WordPress lleva el contenido de cualquier sitio web de WordPress a una API de fácil consumo, lo que permite que WordPress sirva como un sistema de almacenamiento y recuperación para publicar contenido en la web.

Llevando la API REST a WordPress

Si cree que la API REST de WP apareció de la nada, está equivocado.

Agregar una función completamente nueva a WordPress no es una tarea sencilla. Por ser un software de código abierto, el desarrollo de WordPress depende de la comunidad en general para progresar.

El desarrollo de la API comenzó hace unos años como un complemento de función independiente, que permitía a los desarrolladores experimentar y contribuir al proyecto en un entorno controlado.

A lo largo de muchas iteraciones y mejoras, y dos versiones completamente separadas, los colaboradores detrás de la API REST tuvieron que probar y evaluar los beneficios y las inmensas consecuencias de proporcionar acceso API abierto a los datos en decenas de millones de sitios web.

WordPress 4.4, nombre en clave "Clifford", trajo la infraestructura inicial del proyecto al núcleo de WordPress, mientras que los puntos finales no aparecieron hasta WordPress 4.7, "Vaughan".

Esencialmente, esto permitió que los desarrolladores tuvieran tiempo para probar la funcionalidad que impulsa la API sin exponer los datos en sí.

Ahora que los puntos finales de contenido inicial se han fusionado con todas las versiones actuales de WordPress, los desarrolladores de complementos y los autores de temas pueden experimentar con nuevas y emocionantes formas de recuperar, ver y cambiar los datos fuera de la experiencia tradicional de wp-admin.

Desglosando las abreviaturas: de HTTP a una API JSON REST

Para comprender la importancia de la API REST de WP, puede ser útil comprender la base de cómo compartimos datos en línea y hacia dónde se dirige Internet.

HTTP es la base de la mayor parte del tráfico web con el que tratamos a diario. Si escribe una URL en un navegador, está realizando una solicitud . El servidor correspondiente recibe su solicitud y proporciona una respuesta . Esta transacción es la base de casi todo lo que hacemos en línea. Los navegadores realizan solicitudes y los servidores brindan respuestas.

El tipo de solicitud que hacemos puede afectar el tipo de respuesta que obtenemos. La mayoría de las veces, hacemos una simple solicitud GET : "Ok Google, OBTÉNME tu página de destino". Google da una respuesta.

A medida que la web se volvió más interactiva, comenzamos a aprovechar otras solicitudes HTTP, incluidas PUT , POST y DELETE .

Por ejemplo, completamos una barra de búsqueda en un sitio web: "Hola Google, PUBLIQUE mi dirección de correo electrónico y contraseña en su página de inicio de sesión". Google inicia una nueva sesión para nosotros y brinda una respuesta diferente.

Este protocolo es la base básica sobre la que construimos nuestros sitios de WordPress.

Usamos formularios y PHP para OBTENER y PUBLICAR datos en nuestra base de datos. Contrariamente a la opinión popular, esta base subyacente de WordPress no va a cambiar en el corto plazo. Todo lo que WordPress está haciendo ahora es proporcionar a los desarrolladores una nueva forma de interactuar con sus datos de WordPress a través de una API RESTful.

Transferencia de estado representacional (REST)

Los desarrolladores de WordPress deben estar familiarizados con las API en general, como la API de código abreviado y la API de opciones. Estas API definen la funcionalidad de los componentes que componen WordPress, por lo que los autores de temas y complementos pueden ampliar las capacidades principales de WordPress. La API REST de WP, sin embargo, es un poco diferente.

Una API REST , o RESTful, se trata de exponer de forma segura sus datos a solicitudes HTTP de fuentes externas. También se trata de configurar una arquitectura común y un conjunto de protocolos para responder a esas solicitudes. Si bien hay ideas y principios más avanzados detrás de este tipo de servicio, están fuera del alcance de este artículo.

La existencia de la API REST de WP, específicamente después de WordPress 4.7, significa que ahora se puede acceder directamente a todo el contenido de su sitio, incluidas publicaciones, páginas, comentarios y cualquier meta publicación pública, como datos sin procesar. También significa que puede realizar cambios en estos datos desde fuera de la tradición wp-admin si lo desea, tal vez a través de una aplicación móvil o de escritorio.

En lugar de pensar en sus datos como simples filas en una base de datos, ahora puede tener acceso serializado a ellos en forma de JSON.

JSON - ¿Qué pasó con XML?

Los veteranos de WordPress tienen mucha experiencia con XML, un formato común para compartir contenido entre sitios.

Similar a XML, JSON es simplemente un mecanismo que nos permite transferir datos fácilmente al agruparlos en una sintaxis específica. JSON es en realidad una cadena, una representación textual de un objeto de JavaScript, que almacena sus datos en un conjunto de pares clave-valor. Una representación JSON común de una publicación de WordPress puede verse así:

 { “id”: 1, “title”: { “rendered”: “Hello World” }, “content”: { “rendered”: “Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!” } }

(Puede usar una herramienta de formateo JSON para embellecer la respuesta JSON si es necesario).

Una respuesta JSON completa a través de la API REST de WP incluirá información adicional sobre la publicación, incluidos los metadatos. Al agrupar convenientemente estos datos en el formato JSON, puede interactuar con su contenido de WordPress de maneras nuevas y emocionantes.

No es casualidad que JSON se combine mejor con JavaScript. A medida que más desarrolladores de WordPress comiencen a "aprender JavaScript en profundidad", veremos usos cada vez más avanzados de WordPress como backend.

Cómo encontramos los datos: siga la ruta hasta un punto final

Acceder a todos los datos de su sitio a través de la API REST es tan simple como redactar una URL.

Para cualquier sitio de WordPress que ejecute al menos la versión 4.7, agregue la siguiente cadena al final de la URL de su sitio: /wp-json/wp/v2 (por ejemplo, http://example.com/wp-json/wp/v2 ). Ponga esa URL en su navegador y vea lo que aparece.

El resultado probablemente parezca un gran desorden de datos, a menos que haya instalado una extensión de navegador que limpie JSON. Ese gran lío de datos es el contenido y la metainformación de su sitio particular de WordPress en formato JSON.

Al cargar ese contenido, acaba de definir una ruta y le pidió a su navegador que la CONSIGA por usted.

Una ruta es una URL que está asignada a un método específico. El núcleo de WordPress lee esa ruta, y cada barra inclinada '/' representa una ruta o parámetro particular que debe seguirse.

El camino concluye en un punto final , donde las funciones internas del núcleo de WordPress pueden tomar decisiones sobre qué datos proporcionar y qué hacer con los datos proporcionados.

Un punto final de ejemplo puede ser '/wp-json/wp/v2/posts/1', donde hemos agregado las rutas '/posts' y '/1'. Este punto final en particular le dice a nuestro sitio que revise nuestros datos, consulte nuestras publicaciones y consulte la publicación con la ID de 1.

Lo que hace que la API REST sea tan útil es el hecho de que es extensible, lo que significa que puede tomar cualquier dato dentro de su sitio web y agregarlo como punto final. La mayor parte de la funcionalidad principal de WordPress actualmente es (o pronto será) compatible.

Sin embargo, los desarrolladores de temas y complementos pueden comenzar a agregar su contenido y configuración personalizados como puntos finales, lo que permite a los usuarios interactuar con sus sitios web de nuevas maneras.

Si tiene curiosidad acerca de los puntos finales disponibles actualmente en su sitio de WordPress, una aplicación de navegador como Postman proporciona una GUI específicamente para explorar las API.

Encabezados y autenticación

Escribir puntos finales de URL en el navegador parece simple, pero en realidad incluye un conjunto de encabezados predeterminados junto con la solicitud. A su vez, también se devuelve un conjunto de encabezados con la respuesta. Estos encabezados incluyen mucha información útil, pero los más importantes para nuestros propósitos tienen que ver con el tipo de solicitud que estamos realizando y si estamos autenticados o no.

Si salta a las "herramientas de desarrollo" de su navegador, puede examinar los encabezados HTTP para cualquier activo que se cargue en la ventana del navegador, incluidos archivos HTML, hojas de estilo CSS, imágenes y más.

El primer encabezado a considerar es el Método de solicitud , que corresponde directamente a las solicitudes HTTP que aprendimos anteriormente. Aquí lo más probable es que vea GET como el método de solicitud, si simplemente estamos viendo una página.

Una aplicación que llame a su API REST puede optar por cambiar el método de solicitud del encabezado a POST.

Un método POST le dice a su sitio web que ingrese nuevos datos o cambie los datos existentes en su base de datos de WordPress. Al enviar información a través del método POST, otras aplicaciones tienen la capacidad de alterar sus datos, sin iniciar sesión en wp-admin.

Sin embargo, no debe preocuparse porque, a menos que también hayan incluido encabezados que proporcionen las credenciales adecuadas para la autenticación , su sitio web los rechazará.

NOTA: Sin embargo, los métodos para autenticar las llamadas a su API REST aún no están finalizados, lo que hace que la autenticación sea la mayor barrera de entrada para los desarrolladores que desean trabajar con la API REST para agregar o cambiar datos.

Por ahora, hay opciones disponibles, incluido un complemento de los desarrolladores detrás de REST API. A medida que los procedimientos estándar que rodean la autenticación se abren paso en el núcleo, los últimos obstáculos serán claros para el uso generalizado de la API REST de WP.

Aplicación de muestra de la API REST de WP

Lo que hace que la API REST de WP sea tan poderosa es el hecho de que es consistente, por lo que podemos esperar los mismos resultados básicos de cualquier sitio que ejecute WordPress 4.7 o superior. Sin embargo, WordPress es una API distribuida, lo que significa que no hay un solo lugar para obtener todos los datos.

Cada sitio web que ejecuta WordPress es una aplicación única, con usuarios y autenticación únicos. Si bien puede requerir distintas técnicas de autorización para editar contenido a través de la API REST, en realidad podemos acceder a las publicaciones de la mayoría de los blogs administrados por WordPress con bastante facilidad.

Para demostrarlo, haremos una demostración rápida de codepen que carga extractos de las últimas publicaciones de algunos blogs populares relacionados con WordPress que, por supuesto, se ejecutan en WordPress. Mientras estamos en eso, incluiremos un formulario de búsqueda, para que podamos buscar en todos estos sitios a la vez y extraer los artículos relevantes de cada uno.

Finalmente, nos aseguraremos de incluir el enlace para leer el texto completo del artículo en el sitio web original.

Fase 1: Obtener publicaciones recientes

Comenzaremos configurando una instancia rápida de Vue y montándola en un elemento. También incluiremos Bootstrap para que podamos tener una cuadrícula y un estilo básico en los elementos del formulario que agregaremos más adelante.

Cuando definamos los datos, querremos un lugar para almacenar el nombre del sitio (que no está incluido en la respuesta predeterminada), la URL y las publicaciones una vez que las obtengamos. Aquí hay un ejemplo:

 { “name”: “wordpress.org”, “url”: “https://wordpress.org/news/wp-json/wp/v2/posts?per_page=3”, “posts”: [] }

Notará que también incluimos nuestro primer parámetro al final de la URL, per_page . Por lo general, la API REST de WP paginará los resultados siguiendo las mismas reglas que paginaría un bucle WP_Query normal. Limitaremos nuestras consultas a las tres primeras publicaciones.

A continuación, definiremos el método loadPosts() , que recorrerá nuestra lista de fuentes, obtendrá los resultados con vue-resource y completará la matriz de posts vacías de cada fuente con los resultados.

 loadPosts : function(){ var self = this; self.sources.forEach(function(source, index){ self.$delete(source, 'posts'); // Get API with vue-resource self.$http.get(source.url).then(function(response) { self.$set(source, 'posts', response.data); }, function(response) { console.log('Error'); }); }); }

También incluiremos una llamada inicial a loadPosts() cuando nuestra instancia de Vue se haya montado correctamente.

 mounted : function(){ this.$nextTick(function(){ // Load posts on initial page load this.loadPosts(); }); }

Mantener loadPosts() como un método separado será útil en el futuro a medida que comencemos a realizar múltiples llamadas a la API. En nuestro HTML, usaremos las directivas de representación de listas simples de Vue y la sintaxis de plantilla para generar todas nuestras publicaciones.

Vea el Pen incrustado para ver una demostración funcional:

Consulte el ejemplo de búsqueda de la API REST de Pen WP (fase uno) de Brian Coords (@bacoords) en CodePen.

Fase 2: Filtrado de resultados

Agreguemos una barra lateral y creemos algunos filtros para mostrar/ocultar las diversas fuentes. Para hacer esto, agregamos una nueva propiedad al objeto de sources , un booleano que nombraremos en .

Mientras agregamos filtros, generemos un filtro Vue para ayudarnos a mostrar la fecha correctamente también. WordPress almacena la fecha y la hora de la publicación como una marca de tiempo de Unix.

Usaremos la biblioteca de terceros Moment.js para convertir la fecha a un formato más legible.

 filters: { // Using Moment.js to convert post date to a readable format prettyDate: function(value){ // Return if date is empty if(!value) return ''; // Convert date to Moment.js var date = moment.utc(value); // Return formatted date return date.format("MMM DD, YYYY,"); } },

Vea el lápiz incrustado para ver una demostración funcional:

Consulte el ejemplo de búsqueda de la API REST de Pen WP (fase uno) de Brian Coords (@bacoords) en CodePen.

Fase final: Consultas de búsqueda

Aquí agregaremos un nuevo parámetro a nuestra solicitud de API. Ya hemos agregado el parámetro per_page=3 para limitar la cantidad de resultados que obtenemos de cada sitio. Si hay algo escrito en la barra de búsqueda, lo agregaremos como un parámetro adicional.

Esto nos permitirá usar la función de búsqueda integrada de cada sitio, como si estuviéramos consultando la barra de búsqueda en ese sitio web.

Agregaremos una barra de búsqueda y la vincularemos a una variable usando la directiva v-model de Vue.

En lugar de llamar inmediatamente a todas las API, cuando el usuario comience a escribir, agregaremos un botón y vincularemos un evento al envío del formulario. Luego agregaremos un método a nuestra instancia de Vue que agrega los parámetros de búsqueda (URL codificados, por supuesto) a la URL.

 generateUrl : function(source){ var self = this; // Add search parameters. if(self.searchQuery){ return source.url + '&search=' + encodeURI(self.searchQuery); }else{ return source.url; } }

Vea el lápiz incrustado para ver una demostración funcional:

Consulte el ejemplo de búsqueda de la API REST de Pen WP (fase uno) de Brian Coords (@bacoords) en CodePen.

Si bien este es un ejemplo simple de la API REST de WP, podríamos imaginar una aplicación potencial para algo como esto dentro de WordPress. Por ejemplo, ya existe el metabox 'WordPress News'.

Podríamos transformar fácilmente esta demostración en un complemento de WordPress, mostrándola en el tablero de WordPress. Ahora hemos integrado la capacidad de buscar ayuda en algunos de los principales sitios de tutoriales de diseño web y WordPress directamente desde nuestro propio sitio web.

Potencial futuro de la API REST

Aunque el ejemplo anterior solo rasca la superficie de las capacidades de la API REST de WP, debería transmitir algunas de las posibilidades que comienzan a surgir cuando comienza a jugar con los datos. Ya sea que se use para mejorar la experiencia del usuario en el sitio web o para recopilar y manipular los datos de una fuente externa, es una herramienta poderosa.

Si bien algunos expertos de la industria han expresado su preocupación acerca de la posibilidad de que su contenido sea 'raspado' y mostrado en otro lugar, es importante recordar que esta funcionalidad es similar a las fuentes RSS, y es vital que los mantenedores del sitio tengan un control claro de qué datos son y qué son. no publico.

A medida que la API REST de WP se arraigue más en la estructura de WordPress, comenzaremos a ver sus efectos, quizás sin siquiera darnos cuenta. Los ejemplos van desde aplicaciones sencillas (Citas sobre diseño de Chris Coyier) hasta aplicaciones complejas de una sola página (sitio Guggenheim).

Otro caso de uso popular para la API REST de WP es el desarrollo de aplicaciones móviles.

Debido a que el contenido es tan accesible a través de la API REST, los desarrolladores pueden crear aplicaciones nativas para iOS y Android y evitar tener que crear fuentes de datos duplicadas.

A medida que los usuarios interactúen con estas aplicaciones móviles, podrán recuperar y transformar directamente los datos del sitio web original, sin que el desarrollador tenga que crear ninguna infraestructura compleja para respaldar esto.

Sin embargo, estas aplicaciones orientadas a los visitantes de la API REST son solo el comienzo, ya que las implicaciones reales son mucho más profundas. Uno de los objetivos del equipo central de desarrollo es comenzar a usarlo en toda la interfaz de wp-admin.

Con futuras actualizaciones de WordPress, comenzaremos a ver el reemplazo de admin-ajax a favor de la API, con suerte aumentando la velocidad de las funciones básicas, como editar menús o publicar publicaciones.

Esto podría ir de la mano con el mayor enfoque de WordPress en el Personalizador y el Editor como puntos de partida fáciles de usar para los novatos de WordPress.

Si bien la API REST de WP es tremendamente útil tal como está, aún queda mucho por hacer. La API no está completa. Todavía hay más características y puntos finales para agregar.

Eventualmente, podrá interactuar con su sitio de WordPress sin siquiera visitarlo. Y aunque muchos servicios ahora usan API personalizadas para interactuar con WordPress, el cambio a una API REST de WordPress estándar significa que más sitios y servicios pueden interconectarse, hablando el mismo idioma.

WordPress comenzó como una plataforma de blogs, una forma para que los blogueros se conectaran y compartieran sus pensamientos e ideas. Con el desarrollo de la API REST de WordPress, comenzaremos a ver un nuevo nivel de conexión y uso compartido entre bastidores. Esto permitirá a los usuarios desarrollar sus pensamientos e ideas de maneras nunca antes consideradas, llevando a WordPress y a sus usuarios a fronteras completamente nuevas.