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

0

ゲーム記事を書こうとしたのがきっかけで、基本的なアプリの情報はAPIから取得したら楽かなと思いました。
下記ページのアプリ基本情報はAPIから取得した情報を表示しています。
サンプル-APIから取得した情報表示

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

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

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

外部APIを取得する方法としては、JavaScriptを使用してもできますが、今回はphpのcurlで実装します。
wp_remote_getというWORDPRESSの関数もあります。こちらは紹介のみしておきます。
関数リファレンス/wp remote get

functions.phpに記載していくのですが、更新の際に変更が消えてしまわないように子テーマを作成しておきましょう。
[WORDPRESS]テーマ更新時に変更内容が上書きされないようにする

投稿本文で使用しやすいようにショートコードを作成していきます。
ショートコードの基本については下記記事をご覧ください。
[WORDPRESS]新しいショートコードの作成方法と使い方

API呼び出し部分

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_URL　・・・実行時のURLを指定します。
CURLOPT_RETURNTRANSFER　・・・実行時データを文字列で受け取ります。
curl_exec ・・・外部APIに送信します。

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

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

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

今回は、わかりやすく、functions.php内に記載してみました。
表示部分を追加したphpは下記になります。

<?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);をすることで確認できます。
ショートコードを埋め込んだ先の記事にデータが表示されます。
下記サンプルでは「アーチャー伝説」というゲームのデータを表示しています。
サンプル-APIから取得した情報表示
この例だと投稿に記載する、ショートコードは下記になります。

[appinfo id=1453651052 lang=JP]

余談ですが、wp_remote_getで取得できるAPIであればこちらを使用するのが楽です。
itunes APIはなぜかbodyが一部しか取得できなかったのでcurlにしました。
もしかしたら、何かwp_remote_getでもオプション指定で取れるのかも。

WORDPRESSおすすめの書籍

書籍は読む方だと思いますが、やはり実際に実装するとより深く学べるのを実感します。
WORDPRESS自体の本とPHPの本を読むことをお勧めします。
htmlとかCSSとかもわかると幅が広がると思いますが、デザイン部分はテンプレート任せでもなんとかなるのがWORDPRESSのいいところです。

いちばんやさしい WordPress 入門教室 (日本語) 単行本
WORDPRESS基礎。設置から丁寧に解説してくれています。
いろんな本があるのでどれでもいいのですが、出版日が最近なのと、著者が美人なので。

エンジニアのためのWordPress開発入門
本格的に開発している方むけ。実例が紹介されているのでアイデア発掘にも使えます。

LINEで送る