[WORDPRESS]投稿に外部APIから取得した情報を表示する

ゲーム記事を書こうとしたのがきっかけで、基本的なアプリの情報はAPIから取得したら楽かなと思いました。

下記ページのアプリ基本情報はAPIから取得した情報を表示しています。

自分はiPhoneなのでとりあえずIOSの情報だけで良いかと思って探してみたらこんなAPIがありました。

上記をWORDPRESSの投稿上に表示してみたいと思います。

phpでcurlを使用して外部APIからデータを取得する

外部APIを取得する方法としては、JavaScriptを使用してもできますが、今回はphpのcurlで実装します。

wp_remote_getというWORDPRESSの関数もあります。こちらは紹介のみしておきます。

functions.phpに記載していくのですが、更新の際に変更が消えてしまわないように子テーマを作成しておきましょう。

[WORDPRESS]テーマ更新時に変更内容が上書きされないようにする

投稿本文で使用しやすいようにショートコードを作成していきます。

[WORDPRESS]新しいショートコードの作成方法と使い方

javascript

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

ショートコードの属性から取得した、「id」と「lang」を使用してAPI送信先の$urlを生成します。

id部分はアプリのid（アプリをitunesのサイトで検索するとURLのクエリに記載されています。）

langは表示言語です。日本語ならJP、アメリカならUSです。

curl部分

curl_setopt　・・・実行時のオプションを指定します。

CURLOPT_RETURNTRANSFER　・・・実行時データを文字列で受け取ります。

json_decodeで受け取った文字列のJSONデータをPHPの変数に変換してPHPで使用できるようにします。

ここまででデータ取得までは完了です。次は取得したデータの表示になります。

WORDPRESSの投稿でAPIから取得したデータを表示する

今回は、わかりやすく、functions.php内に記載してみました。

javascript

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

他に受け取ったデータはvar_dump(appInfoData);をすることで確認できます。

下記サンプルでは「アーチャー伝説」というゲームのデータを表示しています。

text