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

千ちゃん

自分の投稿欄に、別のデータベースやサービスからのデータを一覧表示したい。どうしたらいいの？

シンさん

今回は「ショートコード」の機能を使ってできる方法を解説するよ！

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

Contants

どうやってやるの？
- サンプルソース
- 使用方法
デモ
まとめ

どうやってやるの？

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

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

ショートコードとは

ショートコードは、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(自作)を呼び出し表示します。

WebAPIで認証【PHP】Slimフレームワークで認証処理の追加法！この記事は、SlimフレームワークでWebAPI化したけど、認証ってどうするの？に答えます。 Slimフレームワークのミドルウェア...

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