Cómo agregar API de terceros a WordPress (complemento y sin complemento)

Las API le permiten conectar su sitio de WordPress a servicios de terceros y fuentes de datos. Esto le permite agregar nuevas características y funcionalidad, hacer que su sitio web sea más interactivo e informativo, o integrarlo con herramientas como análisis, proveedores de marketing por correo electrónico o CRMS.

WordPress puede manejar integraciones API simples y complejas utilizando complementos, así como código personalizado. En este tutorial, le enseñaremos cómo hacer ambas cosas y discutir el impacto potencial en el rendimiento de las integraciones de API y cómo mitigarlas.

¿Qué es una API y por qué agregar uno a WordPress?

API significa "Interfaz de programación de aplicaciones". En la computación, una interfaz es algo que conecta dos o más componentes entre sí. En este caso, los componentes son diferentes sistemas o aplicaciones.

Las API les permiten intercambiar datos de forma segura, en tiempo real y de una manera que cada uno de ellos pueda entenderlos y procesarlos. Son muy comunes en la web. Si alguna vez ha iniciado sesión en un sitio web utilizando su cuenta de Google o Facebook, sucedió gracias a su API de autenticación.

En WordPress, puede usar API para extraer información de los servicios externos a su sitio de WordPress, o enviar datos. Por ejemplo, puede usarlos para:

• Mostrar actualizaciones de clima, tipos de cambio o mercado de valores en su sitio.

• Muestra los alimentos en las redes sociales.

• Publique automáticamente su contenido en las redes sociales.

• Integre su sitio con una pasarela de pago como Stripe o PayPal.

• Muestre tarifas de envío en tiempo real en su tienda en línea.

• Extraiga la información del producto de un sistema de almacén.

• Envíe datos de suscriptor desde un formulario web a un servicio de marketing por correo electrónico.

Las API también le permiten automatizar procesos en su sitio. Por ejemplo, puede externalizar la optimización de imágenes a un servicio como Imagify. En resumen, las API hacen que los sitios web sean más funcionales y fáciles de usar.

Componentes de API importantes

Para usar cualquier API, generalmente necesita algunas piezas básicas:

• URL de punto final : la URL a la que envía su solicitud. Esto le dice a la API lo que está pidiendo (por ejemplo, clima actual, lista de publicaciones de blog, etc.).

• Parámetros: estos son valores opcionales que transmite para personalizar la solicitud, como ubicación, ID, términos de búsqueda o rango de fecha. Los parámetros ayudan a refinar lo que la API le devuelve.

• Formato de datos: este es el formato en el que se transmiten los datos. El formato más común es JSON porque es liviano y fácil de usar tanto en JavaScript como en PHP. XML o texto plano también son opciones.

• Autenticación: muchas API requieren una clave o token API para verificar que se le permite acceder a los datos. Debe enviarlo para legitimar su solicitud.

No todas las API requieren que cada una de estas piezas le dé una respuesta. Discutiremos ejemplos reales a continuación.

La API REST de WordPress

WordPress tiene varias API integradas. El más prominente es la API REST. REST significa "transferencia de estado de representación", lo que simplemente significa que la API utiliza un determinado formato y arquitectura.

El propósito de la API REST es hacer que los datos de WordPress sean accesibles para otros sistemas. Esto es útil, por ejemplo, para construir aplicaciones móviles para administrar su sitio. La API REST también permite las llamadas configuraciones de WordPress sin cabeza. Aquí, conecta una interfaz de usuario personalizada, a menudo basada en JavaScript, con el extremo posterior de WordPress a través de API.

Este es un tema importante, pero no nuestro enfoque aquí. En cambio, lidiaremos con cómo puede agregar API externas a su sitio de WordPress.

Cómo agregar una API a WordPress con un complemento

Hay dos formas principales en que puede integrar API en su sitio de WordPress:

• Código: si tiene las habilidades o contratar a alguien que lo haga, puede conectar su sitio a una API usando código personalizado, generalmente PHP o JavaScript.

• Plugins: WordPress tiene soluciones de complementos para casi cualquier cosa, incluida la adición y configuración de API en su sitio web.

Repasaremos ambos, comenzando con soluciones de complemento. Estos son cómodos para los no desarrolladores porque puede configurarlos a través de una interfaz de usuario y mostrar sus datos con códigos cortos, widgets o bloques en lugar de tratar con el código o los archivos del sitio web.

Acceda a la API de Google Maps

Para nuestro primer ejemplo, aprenderemos cómo agregar un mapa de Google Maps a su sitio web. Esta habilidad es posible gracias a la API de Google Maps, que le permite incrustar mapas, agregar marcadores como ubicaciones de almacenes y cambiar el diseño de mapas.

Lo primero que necesita es crear una cuenta gratuita de Google Cloud con facturación habilitada. Una vez que tenga eso, inicie sesión y cree un nuevo proyecto en la parte superior.

Acceda a su proyecto y vaya a API y servicios, ya sea a través del menú de navegación o el acceso directo en el tablero.

Haga clic en la biblioteca , luego busque la API Maps JavaScript .

Acceder y habilitarlo. Recibirá una clave API durante el proceso, pero también puede encontrarla en claves y credenciales más adelante. Asegúrese de restringir su uso a su dominio de seguridad.

A continuación, instale y active el complemento de mapas WP Go en el menú de complementos de WordPress. Una vez listo, vaya a Maps> Configuración> Configuración avanzada , pegue en su clave de API de Google Maps y guarde la configuración.

Después de eso, puede crear un nuevo mapa utilizando la interfaz del complemento.

Guárdelo una vez que esté satisfecho. Luego puede mostrarlo en su sitio donde quiera que use el bloque de mapa o con el código corto que el complemento genera para su mapa personalizado.

Felicidades, acabas de agregar una API a tu sitio de WordPress.

Use Wpgetapi para casi cualquier API

El ejemplo anterior funciona solo para una API en particular. Si desea una solución de complemento que sea más general para integrar API en su sitio, una de las más populares es WPGetAPI.

Así es como funciona: para este ejemplo, queremos mostrar información meteorológica de OpenWeathermap.org. El primer paso para eso es crear una cuenta para ese servicio y registrarse en un plan (hay una con 1000 llamadas gratuitas por día que puede usar para las pruebas).

Toda la información para usar la API del sitio está disponible en la documentación.

Configure la llamada API

Para comenzar, instale y active WPGetAPI, luego vaya a WPGETAPI> Configuración en su tablero.

Complete la información en la primera pantalla de la siguiente manera:

• Nombre de la API: Entonces sabes para qué sirve cada API.

• Identificador único: el nombre interno de WordPress de la API para mostrarlo. Solo use letras en minúsculas y subrayos, por ejemplo, "Open_weather_map".

• URL base: la dirección general de la API, sin un punto final. En este ejemplo, eso es https://api.openweathermap.org .

Una vez listo, guarda para continuar.

Configure su punto final y parámetros

A continuación, haga clic en la pestaña API en la parte superior para configurar el resto de la llamada API.

Aquí le mostramos cómo hacer eso:

• ID único: el nombre del punto final que va a usar.

• Endpoint: esto se adjunta a la dirección base (aquí, es "datos/3.0/onecall").

• Método: la solicitud HTTP que establece si enviar, leer, crear, actualizar o eliminar algo en el punto final. Queremos recibir algo, así que usamos Get.

• Formato de resultados: si desea recibir los datos en formato PHP o JSON de la API, estamos usando JSON aquí.

• Tiempo de espera: cuánto tiempo debe permanecer abierta la conexión.

Debajo de eso, establezca los parámetros. La API del mapa de clima abierto requiere tres:

• LAT: La latitud de la ubicación para la que desea información meteorológica.

• LON: Como probablemente puedas adivinar, esta es la longitud de tu ubicación objetivo.

• APPID: Su clave API, que puede encontrar en su cuenta.

La API OpenWeathermap también acepta parámetros opcionales:

• Excluir: le permite omitir algunas partes de los datos meteorológicos, por ejemplo, pronósticos diarios o por hora.

• Unidades: Establezca sus unidades de medición preferidas.

• Lang: Elija su lenguaje de salida.

Establezca los parámetros en la sección Cadena de consulta en pares de valor clave, por ejemplo, "Lat" a la izquierda y "48.8542" a la derecha.

Guarde, luego haga clic en Prueba de finalización en la parte superior. Puede ver si funciona y revisar la respuesta.

Mostrar la salida

Si todo está bien, puede usar la etiqueta de plantilla o el código corto que WPGetapi proporciona para mostrarlo en su sitio.

Cuando ahora obtiene una vista previa de la página o la publicación, ve que aparecen los datos.

Por supuesto, actualmente son datos de JSON sin procesar, por lo que no es tan informativo de ver. La versión paga del complemento tiene funcionalidad para formatear y personalizar aún más la salida.

Acceder a las API en WordPress manualmente

Si no desea seguir la ruta del complemento, puede crear llamadas API a mano. Esto le brinda más control porque puede personalizar los datos que solicita y su salida de inmediato.

Usando PHP

Continuando con el ejemplo del mapa de clima abierto, aquí hay una función de PHP para obtener la misma información meteorológica que anteriormente:

 function get_weather_data() { $api_key = 'YOUR_API_KEY_HERE'; // Replace with your actual API key $endpoint = "https://api.openweathermap.org/data/3.0/onecall?" . http_build_query([ 'lat' => 48.8542, 'lon' => 2.3467, 'exclude' => 'minutely,hourly,daily,alerts', 'units' => 'metric', 'appid' => $api_key ]); $response = wp_remote_get($endpoint); if (is_wp_error($response)) { return '<div class="weather-widget error">Failed to fetch weather data.</div>'; } $body = wp_remote_retrieve_body($response); $data = json_decode($body, true); if (!empty($data) && isset($data['current']['temp'])) { $temp = esc_html($data['current']['temp']); return '<div class="weather-widget">Current temperature in Paris: <span class="weather-temp">' . $temp . '°C</span></div>'; } return '<div class="weather-widget error">Weather data not available.</div>'; } function weather_shortcode() { return get_weather_data(); } add_shortcode('weather', 'weather_shortcode');

Esto es lo que hace:

• Hace una llamada para las mismas coordenadas y otros parámetros.

• Usa wp_remote_get () para hacer que la solicitud HTTP obtenga.

• Extrae solo la temperatura actual de la respuesta JSON.

• Envuelva la salida en un HTML para que pueda peinarla si es necesario.

• Registra un código corto llamado "[clima]" para generar los datos en WordPress.

Coloque la función en el archivo Functions.php de su tema (infantil) o un complemento personalizado. Luego, use el código corto como antes. Así es como se ve en la página:

Javascript

También puede usar JavaScript para conectarse a API. Esto es especialmente útil para actualizaciones de contenido dinámico, solicitudes AJAX o aplicaciones de una sola página.

Aquí hay un ejemplo muy simple utilizando el método Fetch () para mostrar información aleatoria sobre los gatos de la API de datos CAT:

 <div>Loading cat fact...</div> <div class="wp-block-buttons"> <div class="wp-block-button"><a class="wp-block-button__link wp-element-button">New Cat Fact</a></div> </div> <script> function loadCatFact() { fetch('https://catfact.ninja/fact') .then(response => response.json()) .then(data => { document.getElementById('cat-fact').textContent = data.fact; }) .catch(error => { document.getElementById('cat-fact').textContent = 'Failed to load cat fact.'; console.error(error); }); } // Load the first fact when the page loads loadCatFact(); // Add button click handler for new facts document.getElementById('new-fact').addEventListener('click', loadCatFact); </script>

Puede ingresar esto en un bloque HTML personalizado para mostrarlo de inmediato en WordPress.

API de terceros y rendimiento del sitio web

Agregar API de terceros a WordPress puede afectar el rendimiento y los tiempos de carga de su sitio si no se maneja correctamente. Cada vez que una página se carga y realiza una llamada API, agrega información para cargar y aumenta el tiempo de procesamiento del servidor. Las respuestas de API lentas o no respondidas también pueden retrasar la representación de su página, mostrar secciones de página vacías o romper su sitio.

Para evitar estos problemas, es importante almacenar respuestas de la API para que no sean obtenidos en cada carga de página. Muchos complementos API como WPGetAPI tienen opciones incorporadas para eso. Si escribe llamadas API a mano, debe configurar sus propios mecanismos de almacenamiento en caché.

Además, puede reducir el impacto del rendimiento limitando las llamadas de API a eventos específicos (por ejemplo, un clic en un botón) en lugar de cada carga de página. Otra opción es programar llamadas API usando wp_cron () y almacenar los resultados para mostrar más tarde.

Mejorar el rendimiento con un complemento

Otro paso efectivo para minimizar el efecto de las llamadas API en el rendimiento del sitio es usar WP Rocket.

En primer lugar, el complemento agrega almacenamiento en caché a su sitio (incluido un caché móvil separado). Esto crea versiones estáticas de sus páginas renderizadas y permite a los visitantes ver contenido precargado en lugar de esperar respuestas de API. Esto funciona especialmente bien para los datos de API que se muestran utilizando códigos cortos o PHP del lado del servidor.

Si carga el contenido de API a través de JavaScript, WP Rocket ayuda a mejorar su tiempo de carga:

• Minificación de JavaScript para hacer que los archivos sean más pequeños (habilitado de forma predeterminada)

• Combinando varios archivos en uno para descargas más rápidas

• Aplazar y cargar archivos asincrónicamente

• Retrasar la ejecución de JavaScript

Tiene la opción de excluir scripts individuales, complementos y archivos de que se optimicen, en caso de que interfiera con la visualización de su contenido de API. Además, puede hacer todo lo anterior simplemente revisando algunos cuadros en el menú de optimización de archivos .

Además, WP Rocket viene con una gama de mejoras automáticas de rendimiento en el fondo, como:

• Compresión gzip

• Precarga para caché y enlaces

• Optimización crítica de imágenes (excluye imágenes sobre el pliegue de la carga perezosa) para mejorar la pintura contentful más grande

• Renderización de perezoso automático a los elementos de carga que aparecen más rápido en sus páginas web más rápido

Simplemente instalar y activar el complemento permite que su sitio se beneficie del 80% de las mejores prácticas de rendimiento y lo acelere de inmediato sin que se le requiera ningún esfuerzo. Además, hay muchas otras características que puede activar manualmente para aumentar la velocidad de su sitio, como:

• Carga perezosa para imágenes, incluidos fondos CSS, videos e iframes

• Precarga de archivos y fuentes externas

• Fuentes de Google autohostantes

• Optimización de la base de datos

• Opciones para conectarse fácilmente a un CDN, incluido Rocketcdn

Estudio de caso: acelera las llamadas de API con WP Rocket

Para comprender mejor cómo agregar una API externa afecta el rendimiento del sitio, y cómo puede ayudar un complemento como WP Rocket, configuramos un entorno de prueba controlado. Creamos un sitio web de Demo WordPress con contenido ficticio y agregamos un mapa de Google Maps usando mapas WP Go.

Completamente no optimizado, sus resultados de la comprensión de la página de páginas fueron los siguientes:

Luego activamos WP Rocket y las siguientes características:

• Minificar CSS y JavaScript

• Eliminar CSS no utilizado

• Cargar JavaScript diferido

• Retrasar la ejecución de JavaScript

Esto dejó a los siguientes cambios:

¡Esa es una mejora masiva en comparación con la línea de base! Aunque puede hacer que su sitio web sea mucho más atractivo, el contenido dinámico como Google Maps viene con mucho código adicional, lo que puede ralentizar su sitio. WP Rocket mitiga su impacto, y todo lo que se necesita son unos pocos clics.

Agregue API a WordPress sin el rendimiento

Las API abren infinitas posibilidades para contenido dinámico, en tiempo real e integraciones poderosas. Gracias a los complementos de WordPress e integraciones fáciles, incluso puede agregarlos a su sitio sin ser un desarrollador.

Solo tenga en cuenta que cada llamada de API puede afectar el rendimiento de la página. ¿Te sientes fuera de tu profundidad optimizándolo? WP Rocket está aquí para ayudar, ¡pruébelo sin riesgos durante 15 días!