Comment intégrer une API externe dans WordPress

Comment appeler une API depuis WordPress? Un excellent moyen de le faire est d’utiliser un plugin (ou directement sur une page). Cela permet de remplir un widget que vous pouvez insérer n’importe où dans votre sujet.

Environ 1 site Web sur trois sur Internet utilise WordPress aujourd’hui, selon WordPress W3Techs.

Cela dit, si vous avez déjà consulté un site Web, il y a de fortes chances qu’il s’agisse d’un site WordPress. Mais vous en avez déjà un, donc vous savez qu’il est populaire.

L’un des avantages de WordPress réside dans les plugins disponibles en téléchargement. Ils ont tous été développés dans le but de rendre le site Web plus puissant. Les plugins le font sans changer le code principal. C’est aussi la raison pour cela Appeler les API – Pour augmenter le nombre de fonctionnalités que le site hôte peut fournir aux utilisateurs finaux.

Il existe un article WordPress pour ce tutoriel qui explique en détail comment le faire Créer un plugin. Si vous voulez tout savoir sur le sujet, faites une pause et lisez-y d’abord. Revenez ici lorsque vous êtes prêt à parcourir un exemple simple du début à la fin.

Ajoutons la qualité de l’air d’un endroit spécifique (Los Angeles, Californie) à un widget que vous pouvez afficher sur votre blog. L’API que nous allons utiliser est ClimaCell API météo et il inclut la qualité de l’air comme l’un de ses paramètres disponibles.

Consultez la liste des meilleures API gratuites

TL; DR: Comment appeler une API tierce dans WordPress

  1. Obtenir une clé API pour une API
  2. Créer un plugin pour ajouter un widget
  3. Personnalisez votre plugin avec l’API
  4. Utilisez l’administrateur WordPress pour ajouter le widget

Conditions requises pour appeler une API depuis WordPress

Avant d’effectuer les opérations suivantes, vous aurez besoin des éléments suivants:

  • Un site WordPress
  • Un compte RapidAPI

La configuration d’un site WordPress est un processus simple de pointer-cliquer pour de nombreux hébergeurs Web. Tel est le contexte de cet article. On suppose donc que vous avez un site WordPress avec lequel travailler. L’ouverture d’un compte RapidAPI est également un processus simple (et gratuit). Cliquez simplement sur le bouton « Connexion » ci-dessous Rapidapi.com.

Voici les principales étapes que nous allons franchir pour intégrer une API dans WordPress via un plugin:

  1. Obtenez une clé API pour l’API
  2. Créez un plugin pour ajouter un widget à votre site WordPress
  3. Personnalisez votre plugin avec votre clé API et certaines informations que vous souhaitez afficher dans le widget
  4. Utilisez la zone d’administration de WordPress pour placer le widget sur votre site Web où vous le souhaitez dans votre thème

Passons maintenant en revue les étapes plus en détail:

1. Obtenez une clé API pour l’API

Combien coûte l’API ClimaCell? Cela peut être gratuit si vous effectuez un petit nombre d’appels. Voici les détails:

Tarification de l'API ClimaCell

Pour obtenir une clé API pour l’API ClimaCell, accédez à Page de tarification ClimaCell et cliquez sur l’un des boutons bleus Sélectionner un plan. Ensuite, allez à la Points de terminaison ClimaCell Sur cette page, votre clé X-RapidAPI est affichée dans la section Paramètres d’en-tête de la zone de test de l’API.

2. Créez un plugin pour ajouter un widget à votre site WordPress

Ensuite, vous pouvez utiliser un exemple de code pour créer un nouveau plugin pour WordPress. Pour ce faire, procédez comme suit:

  1. Enregistrez le code suivant dans un fichier appelé weather-widget-plugin.php
  2. Mettez ça PHP Fichier dans un dossier appelé Weather Widget Plugin.
  3. Une fois que vous avez le fichier dans ce dossier, zippez le dossier dans un fichier appelé weather-widget-plugin.zip.
  4. Ensuite, connectez-vous à votre zone d’administration WordPress et allez dans Plugins-> Add New et cliquez sur le bouton Upload Plugin. Parcourez le fichier zip et sélectionnez-le pour le télécharger.

Fichier plugin weather-widget-plugin.php:

<?php
/*
Plugin Name: Weather Widget Plugin
Description: Show weather details in a widget
Version: 0.17
*/

// Register and load the widget
function weather_load_widget() {
    register_widget( 'weather_widget' );
}
add_action( 'widgets_init', 'weather_load_widget' );

// The widget Class
class weather_widget extends WP_Widget {

  function __construct() {
    parent::__construct(

      // Base ID of your widget
      'weather_widget',

      // Widget name will appear in UI
      __('Weather Widget', 'weather_widget_domain'),

      // Widget description
      array( 'description' => __( 'Show Weather Details in a Widget', 'weather_widget_domain' ), )
    );
  }

  // Creating widget front-end view
  public function widget( $args, $instance ) {
    $title = apply_filters( 'widget_title', $instance['title'] );

    //Only show to me during testing - replace the Xs with your IP address if you want to use this
    //if ($_SERVER['REMOTE_ADDR']==="xxx.xxx.xxx.xxx") {

      // before and after widget arguments are defined by themes
      echo $args['before_widget'];
      if ( ! empty( $title ) ) echo $args['before_title'] . $title . $args['after_title'];

      // This is where you run the code and display the output
      $curl = curl_init();
      $url = "https://climacell-microweather-v1.p.rapidapi.com/weather/nowcast?fields=epa_aqi&lat=34.0201598&lon=-118.692597";

      curl_setopt_array($curl, array(
      	CURLOPT_URL => $url,
      	CURLOPT_RETURNTRANSFER => true,
      	CURLOPT_FOLLOWLOCATION => true,
      	CURLOPT_ENCODING => "",
      	CURLOPT_MAXREDIRS => 10,
      	CURLOPT_TIMEOUT => 30,
      	CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
      	CURLOPT_CUSTOMREQUEST => "GET",
      	CURLOPT_HTTPHEADER => array(
      		"x-rapidapi-host: climacell-microweather-v1.p.rapidapi.com",
      		"x-rapidapi-key: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
      	),
      ));

      $response = curl_exec($curl);
      $err = curl_error($curl);

      curl_close($curl);

      if ($err) {
        //Only show errors while testing
      	//echo "cURL Error #:" . $err;
      } else {
        //The API returns data in JSON format, so first convert that to an array of data objects
        $responseObj = json_decode($response);

        //Gather the air quality value and timestamp for the first and last elements
        $firstEPAAQI = "<strong>".$responseObj[0]->epa_aqi->value."</strong>";
        $firstTime = date("Y-m-d H:i:s T",strtotime($responseObj[0]->observation_time->value));
        $numResults = count($responseObj);
        $lastEPAAQI = "<strong>".$responseObj[$numResults-1]->epa_aqi->value."</strong>";
        $lastTime = date("Y-m-d H:i:s T",strtotime($responseObj[$numResults-1]->observation_time->value));

        //This is the content that gets populated into the widget on your site
        echo "The <a href="https://www.airnow.gov/index.cfm?action=aqibasics.aqi">air quality EPA score</a> ".
              "is currently $firstEPAAQI at $firstTime and is forecasted to be $lastEPAAQI at $lastTime <br>";
      }

      echo $args['after_widget'];

    //} // end check for IP address for testing
  } // end public function widget

  // Widget Backend - this controls what you see in the Widget UI
  //  For this example we are just allowing the widget title to be entered
  public function form( $instance ) {
    if ( isset( $instance[ 'title' ] ) ) {
      $title = $instance[ 'title' ];
    } else {
      $title = __( 'New title', 'wpb_widget_domain' );
    }
    // Widget admin form
    ?>
    <p>
    <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
    <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
    </p>
    <?php
  }

  // Updating widget - replacing old instances with new
  public function update( $new_instance, $old_instance ) {
    $instance = array();
    $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
    return $instance;
  }
} // Class weather_widget ends here
?>

Enregistrez le fichier PHP dans un dossier, puis compressez-le dans un fichier zip. Dans la zone d’administration de WordPress, voici l’interface d’ajout de plugin:

Ajouter un plugin à WordPress

Voici à quoi ressemble l’interface utilisateur après le téléchargement du plugin:

Installer le plugin WordPress personnalisé

Avant de cliquer sur le bouton Activer le plugin, vous devez adapter le plugin à vos besoins.

3. Personnalisez votre plugin avec votre clé API et certaines informations que vous souhaitez afficher dans le widget

Vous devez d’abord remplacer les X dans le code par le vôtre Clé RapidAPI sur la ligne qui commence par: « x-rapidapi-key ». Vérifiez ensuite la fonction widget de la classe weather_widget pour voir ce qui sera imprimé dans votre nouveau widget.

Pour mettre à jour votre plugin après le téléchargement, vous devez télécharger un nouveau fichier. Vous pouvez utiliser un client FTP comme Filezilla ou vous pouvez utiliser le gestionnaire de fichiers de votre hébergeur. Ce que vous recherchez, c’est le répertoire wp-content / plugins / weather-widget-plugin / pour votre site WordPress.

Pour mettre à jour votre plugin, vous pouvez éditer le fichier localement dans votre éditeur préféré, puis le télécharger dans ce répertoire. Cela écrasera le fichier PHP existant. Cependant, pour que WordPress puisse mettre à jour sa version du fichier (au cas où vous auriez une sorte de configuration de mise en cache pour votre site), vous devrez changer la «  version  » du plugin.

Pour mettre à jour votre version, changez la 5ème ligne du fichier pour qu’elle ressemble à ceci – Version: 0.17. Lors du développement de cet exemple, j’ai commencé avec la version 0.1 et à chaque fois que j’ai apporté une modification, j’ai mis à jour la version, c’est donc la 17e version du fichier. Vous pouvez utiliser votre propre système de version. J’ai commencé à 0.1 parce que je considérerais la version 1 comme la version «release». Mais vous pouvez commencer à 1 ou même à 100 si vous le souhaitez!

Souhaitez-vous voir la qualité de l’air d’un autre endroit? Cherchez n’importe quel endroit Google Maps puis recherchez la latitude et la longitude dans l’url. Par exemple, lorsque j’ai cherché à Los Angeles, Californie, j’ai été redirigé vers une page avec une adresse comme celle-ci:

https://www.google.com/maps/place/Los+Angeles,+CA/@34.0201597,-118.6926119,10z/

Les 2 chiffres après le symbole @ dans le URL sont la latitude, la longitude (34.0201597, -118.6926119 pour cette URL). C’est ainsi que j’ai rempli les entrées requises dans l’API ClimaCell. Vous pouvez choisir n’importe quel emplacement pour créer vos propres coordonnées pour votre plugin.

Vous voudrez peut-être aussi voir les prévisions pour d’autres types de temps. Ou vous voudrez peut-être afficher tous les points de données d’une minute pour les 6 prochaines heures sur un graphique. Je n’ai tiré que la première et la dernière valeur epa_aqi des résultats. Il existe de nombreuses autres options. Si vous souhaitez un autre type de données, modifiez le paramètre d’entrée « Champs ». Choisissez n’importe quelle valeur paramètre Colonne dans le Section des données météorologiques.

Dans cet exemple, un soi-disant « Nowcast » est utilisé. Cela renvoie les points de données prévus pour chaque minute pendant les 6 heures suivantes. Si vous souhaitez une prévision horaire ou des données en temps réel, vous pouvez choisir l’un des deux autres points de terminaison. La valeur de l’URL (définie comme $ url dans l’exemple de code) change pour différents points de terminaison.

Si vous êtes satisfait de l’affichage du widget, rendez-vous sur la page Plugins dans la zone d’administration WordPress. Cliquez sur le lien Activer du plugin Weather Widget pour activer votre plugin.

4. Utilisez la zone d’administration de WordPress pour placer le widget sur votre site où vous le souhaitez dans votre thème

Enfin, passez à la page Apparence-> Widgets dans votre zone d’administration WordPress. Avec cet outil, vous placerez votre nouveau widget à l’endroit où vous souhaitez qu’il apparaisse sur votre site Web. Si vous ne voyez pas votre nouveau widget, accédez à la page des plugins pour vous assurer qu’il est activé.

Placement des widgets dans WordPress

J’ai mis ceci dans mon pied de page en le développant:

Widget météo dans le pied de page

Conclusion

Dans ce tutoriel, nous avons travaillé sur un exemple qui montre comment appeler une API à partir de WordPress avec un plugin. Nous avons ajouté un widget avec des données du API ClimaCell. Cette API contient de nombreux détails météorologiques. Nous avons choisi la qualité de l’air pour la montrer. Les données peuvent être utilisées pour information ou pour conseiller sur les mesures futures. Dans ce cas, si je vis à Los Angeles et que je veux faire un travail, je peux consulter l’indice de qualité de l’air pour m’aider à décider quand y aller. 🙂

Consultez la liste des meilleures API gratuites



Source link

Recent Posts