Comment intégrer une API tierce dans un site Web WordPress

Pour bien comprendre la procédure du plug-in WPGetAPI, suivez les étapes ci-dessous. Nous intégrerions une API externe – Quotable API, qui renvoie une citation aléatoire chaque fois que l’utilisateur l’appelle. Après l’avoir intégré dans le site WordPress, ses données seraient affichées.

Étape 1 : Installer et activer le plugin

Pour lancer le processus, installez et activez le plugin sur votre site WordPress. Si vous n’avez pas de compte WordPress, créez-en un et sous les plugins dans la barre latérale gauche, recherchez le plugin WPGetAPI.

Après l’activation du plugin, choisissez l’API que vous souhaitez intégrer, similaire à l’API Quotable que nous utilisons dans cette procédure. Et avant de commencer l’intégration, consultez la documentation de l’API pour en savoir plus sur son mécanisme d’authentification, ses fonctionnalités appropriées, l’URL de base de l’API, etc. Comprendre l’API est essentiel, car toutes ces données seront utilisées dans d’autres procédures.

De plus, WPGetAPI se décline en deux catégories, la version gratuite et la version pro. Si vous débutez, alors la version gratuite est appropriée. Sinon, il faut opter pour la version pro pour des fonctionnalités étendues.

Étape 2 : Configurer l’API tierce

Après avoir sélectionné l’API que vous souhaitez intégrer, il est maintenant temps de la configurer à l’aide du plugin WPGetAPI. Tout d’abord, accédez au tableau de bord WordPress de votre site et, dans le panneau de la barre latérale, cliquez sur WPGetAPI. L’interface du plugin propose désormais différents onglets, notamment Configuration, OAuth 2.0, Zoho, Quotable, Binance et WordPress.

Vous devez sélectionner l’onglet Configuration pour remplir les détails de l’API tierce.

De plus, vous devez entrer les détails dans trois champs obligatoires – Nom de l’API, ID unique et URL de base.
Le nom de l’API peut être tout ce que vous choisissez, car son objectif principal est d’identifier l’API. Dans ce cas, nous l’avons configuré comme Quotable, car il devient facile de se référer à l’API Quotable. De plus, l’ID unique est également similaire au nom de l’API, car vous pouvez saisir n’importe quoi. Mais n’oubliez pas de créer un identifiant avec uniquement des lettres minuscules, un trait de soulignement et des valeurs numériques.
Et pour le champ URL de base, vous devez suivre la documentation de l’API, car elle y est présente. L’URL de base de l’API Quotable est “https://api.quotable.io”.
Après avoir rempli tous les détails nécessaires, enregistrez-les et poursuivez le processus via l’interface WPGetAPI.

Étape 3 : Configurer les paramètres du point de terminaison

Dans l’intégration de l’API, le point de terminaison est l’endroit où la communication entre l’API et le site WordPress se produit. Vous pouvez également le traiter comme un emplacement où résident la ressource ou les données. Lors de l’intégration de l’API pour un site WordPress, il est nécessaire de configurer le point de terminaison. Il indiquera au site Web l’emplacement où il peut envoyer et accéder aux données.

Vous pouvez facilement trouver le point de terminaison nécessaire à son intégration réussie dans la documentation de votre API. Après avoir enregistré le nom de l’API, l’ID unique et l’URL de base, vous devez configurer le point de terminaison. Le plugin WPGetAPI vous montrera un formulaire demandant les détails du point de terminaison de l’API.

De plus, vous devez entrer les détails suivants :

De même, pour l’ID unique de l’API, vous devez créer un tel ID pour la référence du point de terminaison. Et il serait utilisé lors de la configuration de l’affichage des données sur la page Web.

C’est le point de terminaison de l’API, que vous pouvez obtenir à partir de la documentation ou d’une autre source légitime de l’API.

GET, POST, PUT, PATCH et DELETE sont les principales méthodes d’API que vous pouvez saisir dans le champ de méthode. Dans le cas de l’API Quotable, nous utiliserons la méthode GET, car nous devons obtenir une citation aléatoire à afficher sur notre site.

Vous devez déclarer le format dans lequel vous souhaitez recevoir les données de l’API. Vous pouvez choisir parmi les deux principales alternatives – 1) JSON String et 2) PHP Array. Les experts préfèrent la chaîne JSON en raison de sa compatibilité avec les balises de modèle et les méthodes d’affichage des données de code court.

Étape 4 : Tester la configuration de l’API

Lorsque vous intégrez une API manuellement, la tester devient une tâche fastidieuse. De plus, les tests manuels nécessitent plus d’efforts et de temps, ce qui peut également augmenter le budget de développement. Cependant, avec le mécanisme de test intégré, le plug-in WPGetAPI élimine les efforts, le temps et les coûts supplémentaires.

Après avoir saisi tous les détails du point de terminaison, le plugin débloquera le bouton Tester le point de terminaison. Et lorsque vous cliquez dessus, le test de l’API sera lancé. Dans notre cas, nous avons déclaré la méthode GET, ce qui signifie que l’API récupérera une citation aléatoire.

Pour démarrer le test, cliquez sur le bouton Test Endpoint et attendez la réponse. Une fois le processus terminé, le plugin affichera tous les résultats sur la même interface. Et vous pouvez afficher toutes les parties du test, y compris l’URL complète, la sortie de données, la chaîne de requête, les en-têtes, etc.

Comme le montre l’extrait ci-dessus, l’API a été configurée avec succès et obtient les données (citation aléatoire). Et la sortie est sous forme de tableau car nous avons sélectionné le tableau PHP à l’étape précédente comme format de données.

De plus, la sortie peut varier en fonction du fonctionnement de l’API, de la méthode sélectionnée, du format de données et d’autres facteurs associés. Par conséquent, vous devez toujours tester l’intégration avant de configurer le mécanisme d’affichage des données sur le site Web.

Étape 5 : Afficher les données reçues via l’API

Après la configuration et les tests du point de terminaison, il est temps d’afficher les données récupérées sur l’interface. Et pour ce faire, WordPress propose une approche Template Tag et Shortcode. Bien que, pour les deux mécanismes, vous devez comprendre PHP, car il est utilisé dans le backend WordPress et prend en charge les requêtes et les réponses API.

Explorons les deux méthodes une par une.

Alternative n° 1 : balise de modèle

Le mécanisme de balise de modèle est assez simple si vous connaissez PHP. Sous cette méthode, vous devez déclarer une variable et stocker les données récupérées par l’API. De plus, vous pouvez utiliser cette variable à n’importe quel endroit de la page Web.

Vous devez ajouter le code de balise de modèle aux fichiers de thème principaux de WordPress. Par exemple, pour afficher les données récupérées dans l’en-tête, ajoutez-les au fichier header.php ; sinon, sélectionnez le fichier PHP approprié.

Alternative #2 : Shortcode

Si vous choisissez Shortcode, vous n’avez pas besoin de connaître PHP. Mais assurez-vous de sélectionner la chaîne JSON comme format de données lors de la configuration du point de terminaison. Pour afficher des données à l’aide de Shortcode, rendez-vous sur le tableau de bord WordPress, et sous les pages, ajoutez le Shortcode de votre API.

Désormais, lorsque vous afficherez la page, elle affichera le code complet de la réponse reçue de l’API. Cependant, vous ne pouvez afficher les données qu’en convertissant le format de données de l’API en HTML.