[WORDPRESS]Display information obtained from an external API in a post

When I tried to write a game article, I thought it would be easier if I got basic app information from the API.
The basic information of the app on the following page displays the information obtained from the API.
Sample – Information display obtained from API

Because I use an iPhone, there was such an API when I looked for it thinking whether it was good only by the information of IOS for the time being.
iTunes Search API

I would like to display the above on the post of WORDPRESS.

Get data from external API using curl in php

As a way to get the external API, you can also use JavaScript, but this time we will implement it in php curl.
There is also a wordpress function called wp_remote_get.I'll leave this as an introduction.
Function Reference/wp Remote Get

As i will write in functions.php, let's create a child theme so that the changes do not disappear at the time of update.
[WORDPRESS]Prevent changes from being overwritten when updating themes

We will create a shortcode that is easy to use in the post body.
See the following article for the basics of shortcodes.
[WORDPRESS]How to create and use a new shortcode

API call part

function getAppInfo($atts = array()) {
    shortcode_atts(array(
      'id' => '',
      'lang' => ''
    ), $atts);
    $url = "https://itunes.apple.com/lookup?id=" . $atts['id'] . "&country=" . $atts['lang'];
  
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  
    $response = curl_exec($ch);
    $result = json_decode($response);
    $appInfoData = $result->results[0];
   ・・・・・
}
add_shortcode('appinfo', 'getAppInfo');

Generate the $url of the API destination using "id" and "lang" obtained from the attributes of the shortcode.
The id part is the id of the app (the app id is listed in the url query when you search on the itunes site.))
lang is the display language.Jp is JP in Japanese, and US is us in the United States.

curl part

curl_setopt Specify run-time options.
CURLOPT_URL Specify the run-time URL.
CURLOPT_RETURNTRANSFER Receives data as a string at run time.
curl_exec Send to external API.

Convert json data from strings received in json_decode to PHP variables so that php can use them.

At this point, you're done getting the data.The next is to view the retrieved data.

Display data obtained from API in WORDPRESS posts

This time, easy to understand, I tried to describe in functions.php.
Php with the addition of the display part is as follows.

<?php
    function getAppInfo($atts = array()) {
      shortcode_atts(array(
        'id' => '',
        'lang' => ''
      ), $atts);
      $url = "https://itunes.apple.com/lookup?id=" . $atts['id'] . "&country=" . $atts['lang'];
    
      $ch = curl_init();
      curl_setopt($ch, CURLOPT_URL, $url);
      curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    
      $response = curl_exec($ch);
      $result = json_decode($response);
      $appInfoData = $result->results[0];
      ob_start();
      ?>
        <div class="app-info-name">
          <a href="<?php echo $appInfoData->trackViewUrl; ?>" target="_blank" rel="noopener"><?php echo $appInfoData->trackName; ?></a>
        </div>
      <?php
      return ob_get_clean();
    }
add_shortcode('appinfo', 'getAppInfo');
?>

This time I tried to display the display of the name and the link to the corresponding page.
You can check the data received by var_dump (appInfoData);.
The data appears in the article where you embed the shortcode.
The following sample shows the data of the game "Archero".
Sample – Information display obtained from API
In this example, the shortcode listed in the post is as follows.

[appinfo id=1453651052 lang=US]

As an aside, it is easy to use this if it is an API that can be acquired in the wp_remote_get.
For some reason, the itunes API was curled because body could only get a part.
Maybe I can take it by specifying an option even if I wp_remote_get something.