Webデザインやガジェット、格安SIMの情報ブログ

【WordPress】飲食店や宿の情報をAPIから自動取得!Locketsプラグインの設定方法を解説

飲食店などをブログで紹介するときに、自分で情報を調べて地図や住所などを載せるのって大変ですよね。過去に書いたお店が閉店したり、営業時間が変更になる度に手動で修正していてはものすごく手間が掛かります。

そんな面倒を解消するために、APIを使って飲食店の店舗情報や宿の情報をAPIから自動取得してくれるWordPressプラグイン「Lockets」が登場しました。

今回はこのLocketsプラグインの基本設定や使い方、カスタマイズ例をご紹介します。

スポンサードリンク

飲食店や宿の情報をAPIから引っ張ってこれるWordPressプラグインが登場!

地域ブロガーのみなさんは美味しいご飯を食べたり、旅行に行った時にはブログ記事にして読者に紹介する機会が多いと思います。

私も飲食店などの紹介をする際は、記事の最後に住所や地図、営業時間や定休日など必要な情報を載せていますが、情報が古くなってくると場所が移転したり営業時間が変更されることもしばしば。

気づいたときには手動で修正していましたが、記事が多くなってくると気づかずそのままというパターンも多くなってきました。

今回ご紹介する「Lockets」を使えば、店舗情報をAPIから自動で取得してくれるので更新の手間がなく最新の情報が記事に反映されます。

プラグインの作者はMusilogのwackeyさん。ブログでは詳しい使い方やインストール方法が記載されていますが、備忘録としてうちのブログでも一緒に紹介しておきます。

現状対応しているサービスは以下の5つ。

  • HOTPEPPER
  • ぐるなび
  • 楽天トラベル
  • じゃらん
  • Google Maps

設定方法や使い方を紹介する前に、まずは表示される内容を確認したい方はこちらからスキップして下さい。

「Lockets」ボタンを押してお店のIDを入力するだけでショートコードが入力される

プラグインを有効可すると、WordPressの記事投稿画面に「Lockets」ボタンが出現します。店舗情報を埋め込みたい場所でこのボタンを押してください。

すると各サービスのID入力欄が現れるので、お店のURLに含まれるID情報を入力します。

HOTPEPPERホットペッパーのお店URLに含まれている「strJxxxxxxxxx」のうち「Jxxxxxxxxx」(xは数字)を入力してください。
ぐるなびLockets管理画面「暫定ぐるなび検索」で表示された店舗IDを入力してください。
楽天トラベル楽天トラベルのホテルURLに含まれている「https://travel.rakuten.co.jp/HOTEL/xxxxx/」のうち「xxxxx」(xは数字)を入力してください。
じゃらんじゃらんのホテルURLに含まれている「http://www.jalan.net/yadxxxxxx/」のうち「xxxxxx」(xは数字)を入力してください。
Google MapsGoogle Mapsに存在するスポット名称を入れて下さい。

ぐるなびのみURLからIDを調べることができないため、管理画面の「暫定ぐるなび検索」から店舗名で検索してIDを調べます。

IDを入力してOKをクリックすると、以下のようなショートコードが本文に貼り付けられます。このコード地図や店舗情報に変換されます。


[LocketsHotpepper shopid="J001009934"]

実際の表示を確認する時はこちらをクリック。

Locketsプラグインのインストール方法、設定方法

導入前にはまずはWordPressのバックアップを忘れずに行って下さい。何か不具合があったときにすぐに戻れるようにするためです。

バックアップが完了したら、WordPressの管理画面から【プラグイン】→【新規追加】から「Lockets」プラグインを検索してインストールします。

インストール完了後に有効可します。

FTPが使える環境であれば、WordPress公式プラグインページからzipファイルをダウンロードして以下のディレクトリに格納します。


/【WordPressの格納ディレクトリ】/wp-content/plugins/

有効可するとサイドメニューにLocketsの項目が追加されるので、APIを使用するための情報を入力していきます。

楽天ウェブサービスの設定方法

楽天トラベルの情報をAPIで取得するには、楽天ウェブサービスの情報登録が必要です。

楽天アフィリエイトIDと楽天デベロッパーIDはアプリID/デベロッパーIDの確認 – 楽天ウェブサービスに登録すると確認できます。

ページ右上の「アプリID発行」から登録を進めていきます。

新規アプリ登録画面にある利用規約を確認し、「アプリ新規作成フォーム」にアプリ名とアプリURLを記載します。以下のように入力して「規約に同意して新規アプリを作成」をクリック。

アプリ名:Lockets
アプリURL:https://creatorclip.info/(ブログURL)

登録が完了するとディベロッパーIDやアフィリエイトIDが出てきます。この情報をWordPressの設定画面に入力して「変更を保存」をクリックして登録します。

後者は楽天アフィリエイトに登録していないと出てこないかもしれないので、事前に登録しておくことをオススメします。

リクルートWEBサービスの設定方法

HOTPEPPERの情報を表示させるには「リクルートWEBサービス」の登録が必要です。

新規登録画面から利用規約を確認し、メールアドレスを入力して「送信」ボタンをクリック。

入力したメールアドレス宛に認証メールが届くので、記載されたURLにアクセスします。

メールアドレスの認証が完了するとAPIキーが記載されたメールが届きます。

メールの文面内にあるAPIキーを管理画面の「リクルートWEBサービスキー」に入力して、「変更を保存」をクリックします。

ぐるなびWebサービスの設定方法

ぐるなびの情報を取得するには「ぐるなびアクセスキー」の取得が必要です。

ぐるなび Web Serviceからページ右上の「新規アカウント発行」をクリックします。

ユーザー情報登録画面で「ユーザーID」「パスワード」「お名前」「メールアドレス」「個人・法人」「郵便番号」を入力します。

その下にある「アプリケーション情報」は試しに利用(一時利用)を選択しました。ぐるなびWebサービス利用規約を確認し、問題なければ確認画面に移動して登録を済ませます。

アカウントが発行されると登録したメールアドレス宛に「ユーザー登録手続」のメールが届きます。

メール内に記載された登録完了URLにアクセスするとアクセスキーがメールで届くので、管理画面の「ぐるなびアクセスキー」に入力して、「変更を保存」をクリックします。

じゃらんWebサービスの設定方法

じゃらんの宿情報の取得には「じゃらんAPIキー」が必要になります。

じゃらんWebサービスのサイドメニューより「アカウント登録」をクリック。

登録するメールアドレスを入力します。

入力したメールアドレス宛に確認メールが届きます。

届いたメール内に記載された確認URLにアクセスします。

「登録」をクリックするとAPIキーが記載されたメールが届きます。

メール内に記載されたAPIキーを管理画面の「じゃらんAPIキー」に入力し、「変更を保存」をクリックします。

その他アフィリエイト設定の設定方法

その他アフィリエイト設定では、バリューコマースのバリューコマース pidを入力するとMyLinkが利用できるようになります。

MyLinkとはじゃらんの宿へのリンクやホットペッパーでのお店へのリンクを自動でアフィリエイトリンクに変えてくれるもの。オートMyLinkについて詳しくは以下のリンクをご確認下さい。

バリューコマースの管理画面から、「広告の作成/管理」→「オートMyLink」→「オートMyLink」設定をクリック。

貼り付けコード内に含まれる「vc_pic = “XXXXXXXX”」の数字をコピーして、WordPress管理画面内の「バリューコマース pid」に入力して「変更を保存」をクリック。

プラグインを使用した表示例、コードサンプル

プラグインの設定をして、うまくhtmlやCSSを調整すると以下のような表示になります。参考までに私が利用したhtmlコードを貼り付けておきます。CSSについては適宜調整してください。

ホットペッパーの店舗情報

ステーキ&グリル パイレーツ
時間無制限!食べ飲み放題 人気No1!沖縄完全制覇!
ホットペッパーで予約する
住所沖縄県那覇市牧志2-6-2 PIER88ビル 2F
最寄り駅牧志
営業時間月~日、祝日、祝前日: 10:30~16:00 (料理L.O. 15:30 ドリンクL.O. 15:30)17:00~23:00 (料理L.O. 22:30 ドリンクL.O. 22:30)
定休日無休(木曜日定休あり)木曜日予約する方は事前にお店に連絡下さい
総席数45

HTMLカスタマイズ例・設定項目


<div class="shopInfo hotpepper">
	<div class="shopInfoInner cf">
		<div class="shopInfoImg"><img src="【写真PC向けMサイズ】"></div>
		<div class="shopInfoTtl">
			<dl>
				<dt><strong><a href="【店舗URL(PC)】">【掲載店名】</a></dt></strong></dt>
				<dd> 【お店キャッチ】</dd>
				<dd class="btn inline-block"><a href="【店舗URL(PC)】" target="_blank">ホットペッパーで予約する</a></dd>
			</dl>
		<!-- /.shopInfoTtl --></div>
	<!-- /.shopInfoInner --></div>
	<div class="shopInfoDetail">
		<table>
			<tbody>
				<tr>
					<th class="w25p">住所</th>
					<td class="w75p">【住所】 </td>
				</tr>
				<tr>
					<th>最寄り駅</th>
					<td>【最寄駅名】</td>
				</tr>
				<tr>
					<th>営業時間</th>
					<td>【営業時間】 </td>
				</tr>
				<tr>
					<th>定休日</th>
					<td>【定休日】 </td>
				</tr>
				<tr>
					<th>総席数</th>
					<td>【総席数】</td>
				</tr>
			</tbody>
		</table>
	<!-- /.shopInfoDetail--></div>
	<div class="googleMap">【Google Maps埋め込み】</div>
	<div class="shopInfoCredit">【HOT PEPPERクレジットC】</div>
<!-- /.shopInfo --></div>

設定可能な項目

基本情報
  • 【お店ID】
  • 【掲載店名】
  • 【掲載店名かな】
  • 【住所】
  • 【最寄駅名】
  • 【料金備考】
  • 【お店キャッチ】
  • 【総席数】
  • 【交通アクセス】
  • 【営業時間】
  • 【定休日】
  • 【最大宴会収容人数】
画像URL
  • 【ロゴ画像URL】
  • 【写真PC向けLサイズ】
  • 【写真PC向けMサイズ】
  • 【写真PC向けSサイズ】
リンクURL
  • 【店舗URL(PC)】
位置情報
  • 【緯度】
  • 【経度】
その他
  • 【WiFi 有無】
  • 【ウェディング・二次会】
  • 【コース】
  • 【飲み放題】
  • 【食べ放題】
  • 【個室】
  • 【掘りごたつ】
  • 【座敷】
  • 【カード可】
  • 【禁煙席】
  • 【貸切可】
  • 【携帯電話OK】
  • 【駐車場】
  • 【バリアフリー】
  • 【その他設備】
  • 【ソムリエ】
  • 【オープンエア】
  • 【ライブ・ショー】
  • 【エンタメ設備】
  • 【カラオケ】
  • 【バンド演奏可】
  • 【TV・プロジェクター】
  • 【英語メニュー】
  • 【ペット可】
  • 【お子様連れ】
  • 【ランチ】
  • 【23時以降も営業】
  • 【備考】
  • 【Google Maps埋め込み】
クレジット ※いずれか必須
  • 【HOT PEPPERクレジットA】※画像形式 小 135px × 17px
  • 【HOT PEPPERクレジットB】※画像形式 中 88px × 35px
  • 【HOT PEPPERクレジットC】※テキスト形式

ぐるなびの店舗情報

ステーキ&グリル パイレーツ
☆ネット予約でポイントが貯まる☆ ☆提携先 ANA・JAL・amazon・waon・ヤマダ電機・アメックスなどのポイントになります☆
ぐるなびで予約する
住所〒900-0013 沖縄県那覇市牧志2-6-2 PIER88 201
交通アクセス ゆいレール牧志駅徒歩3分
電話番号050-3476-5328
営業時間 ランチ:11:00~16:00(L.O.15:30)、ディナー:17:00~23:00(L.O.22:15、ドリンクL.O.22:30)(フード(l.o)22:15 ドリンク(l.o)22:30 当店は全て税抜き表示となっております。)
休業日不定休日あり
※※不定休ですが都合により木曜日が休みになる事があります。
紹介文 ~ 食べ飲み放題メニュー 時間無制限 ~
大人2980円 12歳以下890円 6歳以下350円
◆沖縄料理、創作料理、ステーキ、チキンBBQ、ゴーヤーサラダ、スープ、海ぶどう、ハンバーグ、フライドポテト、タコライス、ガーリックシュリンプ、海ぶどうサラダなど!全60品
◆ビール、ワイン、泡盛、カクテル、サワー、泡盛ベースカクテル、ハイボール、ソフトドリンクetc・・・飲み放題(全70)のお得なコース!!
◆クーポン利用で→なんと!時間無制限に!
ファミリー、カップル,社員旅行、友達旅行、誕生日会、女子会、男子会などに!
新鮮な食材をシェフが心を込めて鉄板焼きで調理します。クッキングパフォーマンスも見れます!
国際通りへお越しの際にはパイレーツのお食事を是非ご堪能下さい。

HTMLカスタマイズ例・設定項目


<div class="shopInfo gurunavi">
	<div class="shopInfoInner cf">
		<div class="shopInfoImg"><img src="【店舗画像1のURL】"></div>
		<div class="shopInfoTtl">
			<dl>
				<dt><strong><a href="【店舗URL(PC)】">【掲載店名】</a></dt></strong></dt>
				<dd>  【PR文(短:最大50文字)】 </dd>
				<dd class="btn inline-block"><a href="【店舗URL(PC)】" target="_blank">ぐるなびで予約する</a></dd>
			</dl>
		<!-- /.shopInfoTtl --></div>
	<!-- /.shopInfoInner --></div>
	<div class="shopInfoDetail">
		<table>
			<tbody>
				<tr>
					<th class="w25p">住所</th>
					<td class="w75p">【住所】 </td>
				</tr>
				<tr>
					<th>交通アクセス</th>
					<td> 【交通アクセス】</td>
				</tr>
				<tr>
					<th>電話番号</th>
					<td>【電話番号】</td>
				</tr>
				<tr>
					<th>営業時間</th>
					<td>【営業時間】 </td>
				</tr>
				<tr>
					<th>休業日</th>
					<td>【休業日】 </td>
				</tr>
				<tr>
					<th>紹介文</th>
					<td> 【PR文(長:最大200文字)】 </td>
				</tr>
			</tbody>
		</table>
	<!-- /.shopInfoDetail--></div>
	<div class="googleMap">【Google Maps埋め込み】</div>
	<div class="shopInfoCredit">【ぐるなびクレジットC】</div>
<!-- /.shopInfo --></div>

設定可能な項目

基本情報
  • 【お店ID】
  • 【掲載店名】
  • 【掲載店名かな】
  • 【住所】
  • 【最寄駅名】
  • 【電話番号】
  • 【平均予算】
  • 【宴会・パーティ平均予算】
  • 【ランチタイム平均予算】
  • 【PR文(短:最大50文字)】
  • 【PR文(長:最大200文字)】
  • 【交通アクセス】
  • 【営業時間】
  • 【休業日】
画像URL
  • 【店舗画像1のURL】
  • 【店舗画像2のURL】
  • 【QRコード】
リンクURL
  • 【店舗URL(PC)】
  • 【クーポンURL(PC)】
位置情報
  • 【緯度】
  • 【経度】
その他
  • 【Google Maps埋め込み】
クレジット ※いずれか必須
  • 【ぐるなびクレジットA】※画像形式 155px × 20px
  • 【ぐるなびクレジットB】※画像形式 90px × 35px
  • 【ぐるなびクレジットC】※テキスト形式

楽天トラベル

アパホテル<浅草 田原町駅前>
2017年8月オープン!銀座線田原町駅より徒歩約1分。浅草寺も徒歩圏内、上野まで銀座線で2駅の好立地
3,500円~
楽天トラベルで予約する
住所〒111-0035 東京都台東区西浅草1-2-3
最寄り駅田原町駅より徒歩約1分
電話番号 0570-080-111
評価 4.22

HTMLカスタマイズ例・設定項目


<div class="hotelInfo rakutenTravel">
	<div class="hotelInfoInner cf">
		<div class="hotelInfoImg"><img src="  【施設画像サムネイルURL】"></div>
		<div class="hotelInfoTtl">
			<dl>
				<dt><strong><a href=" 【施設情報ページURL】">  【施設名称】  </a></dt></strong></dt>
				<dd>【施設特色】</dd>
				<dd class="price"><span class="num">【最安料金】</span>円~</dd>
				<dd class="btn inline-block"><a href="【施設情報ページURL】" target="_blank">楽天トラベルで予約する</a></dd>
			</dl>
		<!-- /.hotelInfoTtl --></div>
	<!-- /.hotelInfoInner --></div>
	<div class="hotelInfoDetail">
		<table>
			<tbody>
				<tr>
					<th class="w25p">住所</th>
					<td class="w75p">〒【郵便番号】 【住所1】【住所2】 </td>
				</tr>
				<tr>
					<th>最寄り駅</th>
					<td>【施設へのアクセス】</td>
				</tr>
				<tr>
					<th>電話番号</th>
					<td> 【施設電話番号】</td>
				</tr>
				<tr>
					<th>評価</th>
					<td> 【★の数(総合)】</td>
				</tr>
			</tbody>
		</table>
	<!-- /.hotelInfoDetail--></div>
	<div class="googleMap">【Google Maps埋め込み】</div>
	<div class="hotelInfoCredit">【楽天ウェブサービスクレジットD】</div>
<!-- /.hotelInfo --></div>

設定可能な項目

基本項目
  • 【施設番号】
  • 【施設名称】
  • 【施設情報ページURL】
  • 【宿泊プラン一覧ページURL】
  • 【ダイナミックパッケージ宿泊プラン一覧ページURL】
  • 【お客様の声ページURL】
  • 【施設かな名称】
  • 【施設特色】
  • 【最安料金】
  • 【緯度】
  • 【経度】
  • 【郵便番号】
  • 【住所1】
  • 【住所2】
  • 【施設電話番号】
  • 【施設へのアクセス】
  • 【駐車場情報】
  • 【最寄駅名称】
  • 【施設画像URL】
  • 【施設画像サムネイルURL】
  • 【部屋画像URL】
  • 【部屋画像サムネイルURL】
  • 【施設提供地図画像URL】
  • 【投稿件数】
  • 【★の数(総合)】
  • 【お客さまの声(1件目)】
  • 【Google Maps埋め込み】
クレジット
  • 【楽天ウェブサービスクレジットA】※画像形式 Sサイズ(スクエア版)49px × 36px
  • 【楽天ウェブサービスクレジットB】※画像形式 Lサイズ(スクエア版)70px × 52px
  • 【楽天ウェブサービスクレジットC】※画像形式 Sサイズ(バナー版)221px × 21px
  • 【楽天ウェブサービスクレジットD】※テキスト形式

じゃらん

外観
アパホテル<浅草 田原町駅前>
2017年8月10日OPEN!銀座線田原町駅から徒歩1分!大浴場付
じゃらんで予約する
住所111-0035東京都台東区西浅草1-2-3
特徴東京メトロ銀座線田原町駅(1番・3番出口)より徒歩約1分、つくばエクスプレス浅草駅(A2出口)より徒歩約8分、都営浅草線浅草駅(A1出口)より徒歩約8分と交通至便。大浴場完備!

HTMLカスタマイズ例・設定項目


<div class="hotelInfo jaran">
	<div class="hotelInfoInner cf">
		<div class="hotelInfoImg"><img src="【宿画像URL】"><div class="caption">【宿画像キャプション】</div></div>
		<div class="hotelInfoTtl">
			<dl>
				<dt><strong><a href="【宿詳細ページURL】
"> 【宿名漢字】 </a></dt></strong></dt>
				<dd> 【キャッチ】 </dd>
				<dd class="btn inline-block"><a href="【宿詳細ページURL】" target="_blank">じゃらんで予約する</a></dd>
			</dl>
		<!-- /.hotelInfoTtl --></div>
	<!-- /.hotelInfoInner --></div>
	<div class="hotelInfoDetail">
		<table>
			<tbody>
				<tr>
					<th class="w25p">住所</th>
					<td class="w75p">【郵便番号】【住所】 </td>
				</tr>
				<tr>
					<th>特徴</th>
					<td>【コピー】</td>
				</tr>
			</tbody>
		</table>
	<!-- /.hotelInfoDetail--></div>
	<div class="hotelInfoCredit">【じゃらんクレジットC】</div>
<!-- /.hotelInfo --></div>

設定可能な項目

基本情報
  • 【宿番号】
  • 【宿名漢字】
  • 【郵便番号】
  • 【住所】
  • 【キャッチ】
  • 【コピー】
  • 【参考料金】
画像URL
  • 【宿画像URL】
  • 【宿画像キャプション】
リンクURL
  • 【宿詳細ページURL】
クレジット ※いずれか必須
  • 【じゃらんクレジットA】※画像形式 ブルー 88px × 50px
  • 【じゃらんクレジットB】※画像形式 グレー 88px × 50px
  • 【じゃらんクレジットC】※テキスト形式

モブログなどでも活躍しそうなプラグイン

最初こそAPIの取得に手こずってしまいましたが、一度設定してしまえば後は勝手にデータが反映されるので運用するのが楽になりました。

まだまだ導入事例が少ないので人柱覚悟で試してみましたが、これが想像以上に便利なプラグインでした。

URLからIDを調べて管理画面で貼り付けるだけでここまで多種多様な情報を引っ張ってこれるので、コピペに手間の掛かるモブログなどでも活躍してくれそうです。

グルメブロガーや旅ブロガー、地域ブロガーなどは必須のプラグインですね!

鹿
writer : 鹿
このブログを管理している鹿。Webデザインとガジェットが好き。
  • Feedly(RSS)で
    ブログを購読してみる
    購読する
  • Push7(プッシュ通知)で
    ブログを購読する
    購読する