スポンサーリンク
ブログ

WordPress投稿欄に一覧表を表示する【WebAPI編】

WordPress投稿欄に一覧表を表示する【WebAPI編】

千ちゃん
千ちゃん
自分の投稿欄に、別のデータベースやサービスからのデータを一覧表示したい。どうしたらいいの?
シンさん
シンさん
今回は「ショートコード」の機能を使ってできる方法を解説するよ!

コーディングはよく分からないけど、コピペはできる!という人にはおすすめです!

どうやってやるの?

今回はWebAPIを呼び出し、「ショートコード」を作成し投稿欄に張り付けます。

サンプルソースをテーマのfunction.php内にコピペして修正をします。

今回WebAPIを採用していますが、シンプルにDBへ接続して表示することも可能です。

WordPress投稿欄に一覧表を表示する【WebAPI編】-概念図

サンプルソース

WebAPIアドレスや実際にTABLEタグのクラス・構成は適時読み替えて下さい。

コード上半分ではWebAPIを呼び出し、JSON形式で読み取ったデータを下半分でTABLEタグに置換する処理を記述しています。

※コード上半分をデータベース接続に変更すれば、任意のデータベーステーブルを表示できます。

function call_api() {
	$base_url = '*******'; //WebAPIアドレス

	//WebAPI呼び出し
	$curl = curl_init();
	$option = [
	    CURLOPT_URL => $base_url,
	    CURLOPT_CUSTOMREQUEST => 'GET', //GETメソッド
	    CURLOPT_SSL_VERIFYPEER => false,
            CURLOPT_RETURNTRANSFER => true,
	];
	curl_setopt_array($curl, $option);

	$response = curl_exec($curl);
    	$result = json_decode($response, true); 

	$wapi='<table class="*****"><thead><tr>'.
    	    //テーブル構造ヘッダー
	    '</tr></thead><tbody>';
	
	foreach ($result as $value){
            $wapi.='<tr><td>'.'*******'.'</td></tr>';//テーブル内容
	}
	$wapi.='</tbody></table>';
    
	curl_close($curl);
        return $wapi;
}  
add_shortcode("wapi", "call_api"); 

使用方法

投稿記事の任意の場所にショートコードを記入します。

[wapi]

※[]は半角で使ってください

デモ

デモとして、技術記事で紹介しているD3.jsサンプルで呼び出している愛知県市町村データWebAPI(自作)を呼び出し表示します。

D3.jsでWebに地図を描くPART2【DBとの接続方法紹介!】 この記事は、Webに線画した地図とDB(データベース)を連動したいんだけど、どうしたらいいの?に答えます。 前回紹介したD3.js...

WebAPI仕様

WebAPIは下記仕様で作成する。
Dbに登録してある市役所の住所・電話番号・公式サイトURLが取得できる。
※現在は、豊田市・岡崎市・豊橋市のみ(2019.1.28現在)

  • Request URL:https://ssit.jp/api/holls
  • Method:GET
  • Header:name=”H-API-KEY”/value=”AUTH_API_KEY_20181203″

実行結果

市町村名 ホームページURL
【豊田市】 http://www.city.toyota.aichi.jp/
【岡崎市】 http://www.city.okazaki.lg.jp/
【豊橋市】 http://www.city.toyohashi.lg.jp/

※aタグを組み合わせれば表からリンクをすることもできます。

ソース

function call_api() {
	$base_url = 'https://ssit.jp';
	$header = [
            'H-API-KEY: AUTH_API_KEY_20181203',
	];

        //WebAPI呼び出し
	$curl = curl_init();
	$option = [
	    CURLOPT_URL => $base_url.'/api/holls',
	    CURLOPT_CUSTOMREQUEST => 'GET',
	    CURLOPT_SSL_VERIFYPEER => false,
            CURLOPT_HTTPHEADER => $header,
            CURLOPT_RETURNTRANSFER => true,
	];
	curl_setopt_array($curl, $option);

	$response = curl_exec($curl);
        $result = json_decode($response, true); 

        //TABLE ヘッダー部生成
	$wapi='<table class="demo03"><thead><tr>'.
	    '<th width="50%">市町村名</th><th width="50%">ホームページURL</th>'.
	    '</tr></thead><tbody>';
	
    //TABLE データ行生成
	foreach ($result as $value){
            $wapi.='<tr><td>【'.$value["cityName"].'】</td><td align="right">'.$value["link"].
                '</td></tr>';
	}
	$wapi.='</tbody></table>';
    
	curl_close($curl);
        return $wapi;
}  
add_shortcode("wapi", "call_api");  

まとめ

WordPressは使い勝手が良いですが、セキュリティの関係上プログラミングなどの要素はカプセル化されています。

ショートカットは一番簡単で実装しやすい方法です。

プラグインやテーマそのものはハードルが高いなという人にもおすすめです。

WebAPIは敷居が高いという方には、データベースへ直接接続する方法もあります。