飲食店や宿の情報をAPIから自動取得
完成画面
ホットペッパー
個室あり。宴会・大事な接待やデート、女子会などにもおすすめ

- 黒豚しゃぶしゃぶと郷土料理 ひご家 ひごや 鹿児島本店
- コロナ対策徹底中! 鹿児島県産食材に拘る
- ホットペッパーで予約する
住所 | 鹿児島県鹿児島市山之口町8-16 MI.BLD 1F |
---|---|
最寄り駅 | 天文館通 |
営業時間 | 月~土、祝前日: 18:00~翌0:00 (料理L.O. 23:00 ドリンクL.O. 23:00)日、祝日: 16:00~23:00 (料理L.O. 22:00 ドリンクL.O. 22:00) |
定休日 | 不定休 |
総席数 | 36 |
Powered by ホットペッパー Webサービス
楽天トラベル
全室オーシャンビューの贅沢ロケーションでリゾートステイを満喫

- カフーリゾートフチャク コンド・ホテル
- 平均70平米のゆとりある客室、全室オーシャンビューの贅沢ロケーションでリゾートステイを満喫
- 8,400円~
- 楽天トラベルで予約する
住所 | 〒904-0413 沖縄県国頭郡恩納村冨着志利福地原246-1 |
---|---|
最寄り駅 | 那覇空港よりお車で約60分(沖縄自動車道利用/最寄 石川IC) |
電話番号 | 098-964-7000 |
評価 | 4.37 |
じゃらん
ハウステンボス迄10分★絶品グルメと絶景露天が評判のリゾート

庭園外観
- 大江戸温泉物語 西海橋コラソンホテル
- 3/19~4/30 営業再開キャンペーン 心ゆくまで【かに食べ放題】
- じゃらんで予約する
住所 | 859-3451長崎県佐世保市針尾東町2523-1 |
---|---|
特徴 | 3/1~5/31 海の香り大地の恵みを楽しむ地中海フェア開催!全プラン「オールインクルーシブ」となり、ご滞在中のドリンクが無料! |
WordPressプラグイン「Lockets」カスタマイズ参考サイト
設定方法については、がっつりこちらを参考にさせていただきました。
Creator Clip(クリエイタークリップ)を運営しているカワイイ鹿さん
【WordPress】プラグイン「Lockets」
このプラグインを使用すると、飲食店情報をリクルートWEBサービスなどのAPIから取得し、ブログ記事内にショートコードを入力するだけで、お店の住所や営業時間などの基本情報だけでなく、地図やクーポンなど様々な情報を表示することが出来るようになります。
バリューコマースLinkSwitch設定方法
バリューコマースの「オートMyLinkは、LinkSwitch(リンクスイッチ)に名称変更」は、じゃらんnetやホットペッパーのリンクなどの直接リンクをアフィリエイトリンクに自動で一括切り替えしてくれる素晴らしい機能です(プラグインに関係無く過去に書いた記事のリンクもアフィリエイトリンクに変換されます)
LinkSwitchについて詳しくは以下のリンクをご確認下さい。
valuecommercelinkswitchバリューコマースのアフィリエイト登録が完了したら広告検索/作成➡プログラム検索でLockets設定に必要なホットペッパー・ぐるなび・ホテル・宿予約サイト「じゃらんnet」をキーワード検索し広告作成ボタンを押します。画像↓表示されるのでOKを押すと提携完了
広告管理/ツール➡LinkSwitch➡LinkSwitch設定
貼り付けコード内に含まれる「vc_pic = “XXXXX”」の数字をコピーします。
WordPress管理画面➡Lockets➡その他アフィリエイト「バリューコマース pid」に数字を貼り付けて「変更を保存」をクリック
HTMLカスタマイズもCreator Clip(クリエイタークリップ)さんのをそのまま使わせて頂いてます。CSSの関しての記載が無かったので当サイトが参考になれば嬉しいです。
HTMLカスタマイズ
Creator Clip(クリエイタークリップ)さんのHTMLカスタマイズ例では楽天トラベル・じゃらんは【hotelInfo】で統一されてます。ホットペッパー・ぐるなびは【shopInfo】で統一されてます。
HTMLカスタマイズ変更箇所 <div class="hotelInfoTtl"> 間の2ヵ所を変更してます <!-- /.hotelInfoTtl --></div> <div class="shopInfoTtl"> 間の2ヵ所変更してます <!-- /.shopInfoTtl --></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>
下記に変更してます
<div class="hotelInfo rakutenTravel"> <div class="hotelInfoInner cf"> <div class="hotelInfoImg"> <img src=" 【施設画像サムネイルURL】"> </div> <div class="hotelInfoTtl"> <dl> <dt> <a href="【施設情報ページURL】" target="_blank" class="hotelInfoTtl">【施設名称】 </a> </dt> <dd>【施設特色】</dd> <dd class="price"> <span class="num">【最安料金】</span>円~ </dd> <dd> <a href="【施設情報ページURL】" target="_blank" class="square_btn">楽天トラベルで予約する</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>
じゃらんWebサービス
<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>
下記に変更してます
<div class="hotelInfo jaran"> <div class="hotelInfoInner cf"> <div class="hotelInfoImg"> <img src="【宿画像URL】"> <div class="caption">【宿画像キャプション】</div> </div> <div class="hotelInfoTtl"> <dl> <dt> <a href="【宿詳細ページURL】" target="_blank" class="hotelInfoTtl">【宿名漢字】 </a> </dt> <dd>【キャッチ】 </dd> <dd> <a href="【宿詳細ページURL】" target="_blank" class="square_btn">じゃらんで予約する</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>
リクルートWEBサービス【ホットペッパー】
<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>
下記に変更してます
<div class="shopInfo hotpepper"> <div class="shopInfoInner cf"> <div class="shopInfoImg"> <img src="【写真PC向けMサイズ】"> </div> <div class="shopInfoTtl"> <dl> <dt> <a href="【店舗URL(PC)】" target="_blank" class="shopInfoTtl">【掲載店名】 </a> </dt> <dd>【お店キャッチ】</dd> <dd> <a href="【店舗URL(PC)】" target="_blank" class="square_btn">ホットペッパーで予約する</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>
wordpresの設定?外観?CSS編集
又はご使用テーマのstyle.cssに下記をコピー貼り付けし保存して下さい。
.square_btn{ width:250px; font-weight:bold; text-decoration:none; display:block; text-align:center; padding:10px 3px; color: white; background: #7FBFFF; border-radius:5px; } .square_btn:hover { background: #E5FFFF; color: #7FBFFF; } div.hotelInfoCredit{ font-size:12px; text-align:right; } div.shopInfoCredit{ font-size:12px; text-align:right; } div.hotelInfoTtl{ font-size:15px; font-weight:bold; text-decoration:none; display:block; text-align:left; padding:5px; } div.hotelInfoTtl a{ font-size:20px; font-weight:bold; text-decoration:none; display:block; text-decoration:none; } div.shopInfoTtl{ font-size:15px; font-weight:bold; text-decoration:none; display:block; text-align:left; padding:5px; } div.shopInfoTtl a{ font-size:20px; font-weight:bold; text-decoration:none; display:block; text-decoration:none; } .googleMap { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; } .googleMap iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }
ボタンの色など変更したい場合は.square_btnと.square_btn:hoverの 【color:】【background:】で変更できます。Credit表記を右寄せ小さめにしてます。
ぐるなびWebサービス無料APIサービスの提供を終了
無料APIサービスが2021年6月30日に終了する案内がございました。
これに伴い、当サイトではサービス記載を消去致しました。
継続してぐるなびWebサービスAPIを利用したい場合、
有料となりますのでご注意下さい。
詳しくは公式サイトにてご確認下さい。
これに伴い、当サイトではサービス記載を消去致しました。
継続してぐるなびWebサービスAPIを利用したい場合、
有料となりますのでご注意下さい。
詳しくは公式サイトにてご確認下さい。
コメント