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

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

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

広告を表示できません。

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

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

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

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

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

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

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

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

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

広告を表示できません。

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

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

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

ぐるなびのみ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を記載します。以下のように入力して「規約に同意して新規アプリを作成」をクリック。

登録が完了するとディベロッパー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については適宜調整してください。

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

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>

ぐるなびの店舗情報

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>

楽天トラベル

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">〒【郵便番号】 【住所１】【住所２】 </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>

じゃらん

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>

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

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

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

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

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