Comment ajouter des API tierces à WordPress (plugin et pas de plugin)

Les API vous permettent de connecter votre site WordPress aux services et sources de données tiers. Cela vous permet d'ajouter de nouvelles fonctionnalités et de nouvelles fonctionnalités, de rendre votre site Web plus interactif et informatif, ou de l'intégrer à des outils tels que l'analyse, les fournisseurs de marketing par e-mail ou les CRM.

WordPress peut gérer les intégrations d'API simples et complexes à l'aide des plugins ainsi que du code personnalisé. Dans ce tutoriel, nous vous apprendrons comment faire les deux ainsi que de discuter de l'impact potentiel des performances des intégrations d'API et comment les atténuer.

Qu'est-ce qu'une API et pourquoi en ajouter une à WordPress?

L'API signifie «Interface de programmation d'applications». En informatique, une interface est quelque chose qui connecte deux ou plusieurs composants les uns aux autres. Dans ce cas, les composants sont différents systèmes ou applications.

Les API leur permettent d'échanger des données en toute sécurité, en temps réel et d'une manière que chacune d'elles peut les comprendre et les traiter. Ils sont très communs sur le Web. Si vous vous êtes déjà connecté à un site Web à l'aide de votre compte Google ou Facebook, cela s'est produit grâce à leur API d'authentification.

Dans WordPress, vous pouvez utiliser des API pour extraire des informations des services externes dans votre site WordPress - ou envoyer des données. Par exemple, vous pouvez les utiliser pour:

• Montrez la météo en direct, les taux de change ou les mises à jour boursières sur votre site.

• Afficher les flux de médias sociaux.

• Publiez automatiquement votre contenu sur les réseaux sociaux.

• Intégrez votre site avec une passerelle de paiement comme Stripe ou PayPal.

• Afficher les tarifs d'expédition en temps réel dans votre boutique en ligne.

• Tirez les informations sur les produits d'un système d'entrepôt.

• Envoyez des données d'abonné à partir d'un formulaire Web à un service de marketing par e-mail.

Les API vous permettent également d'automatiser les processus sur votre site. Par exemple, vous pouvez sous-traiter l'optimisation de l'image à un service comme Imagify. En bref, les API rendent les sites Web plus fonctionnels et conviviaux.

Composants API importants

Pour utiliser n'importe quelle API, vous avez généralement besoin de quelques pièces de base:

• URL de point de terminaison : l'URL à laquelle vous envoyez votre demande. Cela indique à l'API ce que vous demandez (par exemple, la météo actuelle, la liste des articles de blog, etc.).

• Paramètres: Ce sont des valeurs facultatives que vous transmettez pour personnaliser la demande, telles que l'emplacement, l'ID, les termes de recherche ou la plage de dates. Les paramètres aident à affiner ce que l'API vous rend.

• Format de données: il s'agit du format dans lequel les données sont transmises. Le format le plus courant est JSON car il est léger et facile à utiliser dans JavaScript et PHP. XML ou le texte brut sont également des options.

• Authentification: de nombreuses API nécessitent une clé API ou un jeton pour vérifier que vous êtes autorisé à accéder aux données. Vous devez l'envoyer afin de légitimer votre demande.

Toutes les API ne nécessitent pas chacune de ces pièces pour vous donner une réponse. Nous discuterons de vrais exemples plus loin ci-dessous.

L'API WordPress REST

WordPress lui-même a plusieurs API intégrées. Le plus important est l'API de repos. REST signifie «transfert d'état de représentation», ce qui signifie simplement que l'API utilise un certain format et architecture.

Le but de l'API REST est de rendre les données WordPress accessibles à d'autres systèmes. Ceci est utile, par exemple, la création d'applications mobiles pour gérer votre site. L'API REST permet également des configurations dits de WordPress sans tête. Ici, vous connectez une interface utilisateur personnalisée, souvent basée sur JavaScript avec l'arrière-end WordPress via l'API.

C'est un sujet important, mais pas notre objectif ici. Au lieu de cela, nous traiterons de la façon dont vous pouvez ajouter des API externes à votre site WordPress.

Comment ajouter une API à WordPress avec un plugin

Il existe deux façons principales d'intégrer des API dans votre site WordPress:

• Code: Si vous avez les compétences ou embauchez quelqu'un qui le fait, vous pouvez connecter votre site à une API en utilisant du code personnalisé, généralement PHP ou JavaScript.

• Plugins: WordPress a des solutions de plugin pour presque n'importe quoi, y compris l'ajout et la configuration d'API sur votre site Web.

Nous passerons les deux, en commençant par des solutions de plugin. Ceux-ci sont confortables pour les non-développeurs car vous pouvez les configurer via une interface utilisateur et afficher leurs données avec des codes, des widgets ou des blocs au lieu de traiter avec des fichiers de code ou de site Web.

Accéder à l'API Google Maps

Pour notre premier exemple, nous apprendrons à ajouter une carte Google Maps à votre site Web. Cette capacité est possible grâce à l'API Google Maps, qui vous permet d'intégrer des cartes, d'ajouter des marqueurs comme les emplacements des magasins et de modifier la conception de la carte.

La première chose dont vous avez besoin est de créer un compte Google Cloud gratuit avec facturation activé. Une fois que vous avez cela, connectez-vous et créez un nouveau projet en haut.

Accédez à votre projet et accédez aux API et services via le menu de navigation ou le raccourci sur le tableau de bord.

Cliquez sur la bibliothèque , puis trouvez l' API JavaScript Maps .

Accéder et l'activer. Vous recevrez une clé API pendant le processus, mais vous pouvez également le trouver sous les clés et les informations d'identification plus tard. Assurez-vous de restreindre son utilisation à votre domaine pour la sécurité.

Ensuite, installez et activez le plugin WP GO MAPS à partir du menu des plugins WordPress. Une fois prêt, accédez à MAPS> Paramètres> Paramètres avancés , collez votre clé API Google Maps et enregistrez les paramètres.

Après cela, vous pouvez créer une nouvelle carte à l'aide de l'interface du plugin.

Enregistrez-le une fois que vous êtes satisfait. Vous pouvez ensuite l'afficher sur votre site où que vous souhaitiez utiliser le bloc de carte ou avec le shortcode que le plugin génère pour votre carte personnalisée.

Félicitations, vous venez d'ajouter une API à votre site WordPress.

Utilisez WPGetAPI pour presque toutes les API

L'exemple ci-dessus fonctionne uniquement pour une API particulière. Si vous voulez une solution de plugin plus générale pour intégrer les API dans votre site, l'une des plus populaires est WPGetAPI.

Voici comment cela fonctionne: pour cet exemple, nous voulons afficher les informations météorologiques sur OpenWeathermap.org. La première étape est de créer un compte pour ce service et de s'inscrire à un plan (il y en a un avec 1000 appels gratuits par jour que vous pouvez utiliser pour les tests).

Toutes les informations sur l'utilisation de l'API du site sont disponibles dans la documentation.

Configurer l'appel de l'API

Pour commencer, installer et activer WPGetAPI, puis accédez à WPGETAPI> Configuration dans votre tableau de bord.

Remplissez les informations sur le premier écran comme suit:

• Nom de l'API: Vous savez donc à quoi sert chaque API.

• Identifiant unique: le nom interne de WordPress de l'API pour l'afficher. Utilisez uniquement des lettres en minuscules et des soulignements, par exemple «Open_WEATH_MAP».

• URL de base: l'adresse générale de l'API, sans point final. Dans cet exemple, c'est https://api.openweathermap.org .

Une fois prêt, sauf pour continuer.

Configurez votre point final et vos paramètres

Ensuite, cliquez sur l'onglet de l'API en haut pour configurer le reste de l'appel de l'API.

Voici comment faire cela:

• ID unique: le nom du point final que vous allez utiliser.

• Point de terminaison: cela est annexé à l'adresse de base (ici, c'est «Data / 3.0 / OneCall»).

• Méthode: la demande HTTP qui indique d'envoyer, lire, créer, mettre à jour ou supprimer quelque chose au point de terminaison. Nous voulons recevoir quelque chose, donc nous utilisons Get.

• Format des résultats: Que vous souhaitiez recevoir les données au format PHP ou JSON à partir de l'API, nous utilisons JSON ici.

• Timeout: combien de temps la connexion doit rester ouverte.

En dessous, définissez les paramètres. L'API de la carte de la météo ouverte en nécessite trois:

• LAT: La latitude de l'emplacement pour lequel vous voulez des informations météorologiques.

• LON: Comme vous pouvez probablement le deviner, c'est la longitude de votre emplacement cible.

• Appid: Votre clé API, que vous pouvez trouver dans votre compte.

L'API OpenWeatherMap accepte également les paramètres facultatifs:

• Exclure: vous permet d'omettre certaines parties des données météorologiques, par exemple les prévisions quotidiennes ou horaires.

• Unités: Définissez vos unités de mesure préférées.

• Lang: Choisissez votre langue de sortie.

Définissez les paramètres dans la section de chaîne de requête dans les paires de valeurs clés, par exemple «lat» à gauche et «48.8542» à droite.

Enregistrer, puis cliquez sur Tester Point Point en haut. Vous pouvez voir si cela fonctionne et passer en revue la réponse.

Afficher la sortie

Si tout va bien, vous pouvez utiliser la balise de modèle ou le shortcode que WPGetAPI fournit pour l'afficher sur votre site.

Lorsque vous prévisualisez maintenant la page ou la publication, vous voyez que les données apparaissent.

Bien sûr, ce sont actuellement des données JSON brutes, donc ce n'est pas si informatif à regarder. La version payante du plugin a des fonctionnalités pour formater et personnaliser davantage la sortie.

Accéder aux API dans WordPress manuellement

Si vous ne voulez pas suivre l'itinéraire du plugin, vous pouvez créer des appels API à la main. Cela vous donne plus de contrôle car vous pouvez personnaliser immédiatement les données que vous demandez et sa sortie.

En utilisant php

Poursuivant avec l'exemple de la carte de la météo ouverte, voici une fonction PHP pour obtenir les mêmes informations météorologiques que ci-dessus:

 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');

Voici ce qu'il fait:

• Fait un appel aux mêmes coordonnées et autres paramètres.

• Utilise wp_remote_get () pour faire la demande HTTP GET.

• Tire uniquement la température actuelle de la réponse JSON.

• Enveloppe la sortie dans un HTML afin que vous puissiez le style si nécessaire.

• Enregistre un raccourci appelé «[météo]» pour la sortie des données dans WordPress.

Mettez la fonction dans le fichier functions.php de votre thème (enfant) ou d'un plugin personnalisé. Ensuite, utilisez le shortcode comme avant. Voici à quoi il ressemble sur la page:

Javascrip

Vous pouvez également utiliser JavaScript pour vous connecter aux API. Ceci est particulièrement utile pour les mises à jour de contenu dynamiques, les demandes AJAX ou les applications à une seule page.

Voici un exemple très simple utilisant la méthode fetch () pour afficher des informations aléatoires sur les chats de l'API Cat Facts:

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

Vous pouvez saisir cela dans un bloc HTML personnalisé pour l'afficher immédiatement dans WordPress.

API tierces et performances du site Web

L'ajout d'API tiers à WordPress peut avoir un impact sur les performances et les temps de chargement de votre site s'il n'est pas géré correctement. Chaque fois qu'une page se charge et fait un appel API, il ajoute des informations au chargement et augmente le temps de traitement du serveur. Les réponses API lents ou insensibles peuvent également retarder le rendu de votre page, afficher des sections de page vides ou casser votre site.

Pour éviter ces problèmes, il est important de mettre en cache les réponses de l'API afin qu'elles ne soient pas récupérées sur chaque charge de page. De nombreux plugins API comme WPGetAPI ont des options intégrées pour cela. Si vous écrivez des appels API à la main, vous devez configurer vos propres mécanismes de mise en cache.

De plus, vous pouvez réduire l'impact des performances en limitant les appels d'API à des événements spécifiques (par exemple, un clic sur un bouton) au lieu de chaque chargement de page. Une autre option consiste à planifier les appels d'API à l'aide de wp_cron () et de stocker les résultats pour afficher plus tard.

Améliorer les performances avec un plugin

Une autre étape efficace pour minimiser l'effet des appels d'API sur les performances du site consiste à utiliser WP Rocket.

Tout d'abord, le plugin ajoute de la mise en cache à votre site (y compris un cache mobile séparé). Cela crée des versions statiques de vos pages rendues et permet aux visiteurs de voir du contenu préchargé au lieu d'attendre les réponses de l'API. Cela fonctionne particulièrement bien pour les données API affichées à l'aide de shortcodes ou de PHP côté serveur.

Si vous chargez le contenu de l'API via JavaScript, WP Rocket aide à améliorer son temps de chargement par:

• MINIFICATION JavaScript pour rendre les fichiers plus petits (activés par défaut)

• Combiner plusieurs fichiers en un pour des téléchargements plus rapides

• Représenter et charger des fichiers de manière asynchrone

• Retarder l'exécution de JavaScript

Vous avez la possibilité d'exclure les scripts, les plugins et les fichiers individuels de l'optimisation, au cas où il interfère avec l'affichage de votre contenu API. De plus, vous pouvez faire tout ce qui précède en vérifiant simplement quelques cases dans le menu d'optimisation des fichiers .

De plus, WP Rocket est livré avec une gamme d'améliorations automatiques de performances en arrière-plan, telles que:

• Compression GZIP

• Précharge pour le cache et les liens

• Optimisation critique de l'image (exclut les images au-dessus du pli du chargement paresseux) pour améliorer la plus grande peinture de contenu

• Rendu paresseux automatique pour charger des éléments apparaissant plus rapidement sur vos pages Web

Le simple fait d'installer et d'activer le plugin permet à votre site de bénéficier de 80% des meilleures pratiques de performances et de l'accélérer immédiatement sans aucun effort requis de votre part. De plus, il existe de nombreuses autres fonctionnalités que vous pouvez activer manuellement pour augmenter la vitesse de votre site, comme:

• Chargement paresseux pour les images, y compris les arrière-plans CSS, les vidéos et les iframes

• Préchargement des fichiers et polices externes

• Polices Google à l'auto-hébergement

• Optimisation de la base de données

• Options pour se connecter facilement à un CDN, y compris RocketCDN

Étude de cas: accélérer les appels d'API avec WP Rocket

Pour mieux comprendre comment l'ajout d'une API externe affecte les performances du site - et comment un plugin comme WP Rocket peut aider - nous avons configuré un environnement de test contrôlé. Nous avons créé un site Web de démonstration WordPress avec du contenu factice et ajouté une carte de Google Maps à l'aide de cartes WP Go.

Complètement non optimisé, ses résultats PagesPeed Insights étaient les suivants:

Nous avons ensuite activé WP Rocket et les caractéristiques suivantes:

• Minify CSS et JavaScript

• Supprimer le CSS inutilisé

• Charger JavaScript différé

• Retarder l'exécution de JavaScript

Cela a laissé les modifications suivantes:

C'est une amélioration massive par rapport à la ligne de base! Même si cela peut rendre votre site Web beaucoup plus attrayant et un contenu dynamique comme Google Maps est livré avec beaucoup de code supplémentaire, ce qui peut ralentir votre site. WP Rocket atténue son impact - et tout ce qu'il faut, ce sont quelques clics.

Ajouter des API à WordPress sans la gueule

Les API ouvrent des possibilités infinies de contenu dynamique, en temps réel et des intégrations puissantes. Grâce aux plugins WordPress et aux intégrations faciles, vous pouvez même les ajouter à votre site sans être développeur.

Gardez à l'esprit que chaque appel API peut avoir un impact sur les performances de la page. Vous vous sentez hors de votre profondeur l'optimisant? WP Rocket est là pour vous aider - essayez-le sans risque pendant 15 jours!