K&S PLAGEを支援する

飲食店ホテルなどの記事作成支援するLocketsプラグイン

5.0
スポンサーリンク
2018.06.28
この記事は約20分で読めます。

WordPress,プラグイン,Locketsかじゃらん,ぐるなび,API,自動取得

スポンサーリンク

飲食店や宿の情報をAPIから自動取得

完成画面

ホットペッパー

個室あり。宴会・大事な接待やデート、女子会などにもおすすめ

ひご家 鹿児島本店
コロナ対策徹底中！ 鹿児島県産食材に拘る
ホットペッパーで予約する
住所 鹿児島県鹿児島市山之口町8-16　MI.BLD　1F
最寄り駅 天文館通
営業時間 月～土、祝前日: 18:00～翌0:00日、祝日: 16:00～23:00
定休日 不定休
総席数 36
Powered by ホットペッパー Webサービス

ぐるなび

★鹿児島初★『グランピング』が日帰りで楽しめるスポット

GOOD LUCK～STAR GARDEN～（グッドラック・スターガーデン）
ぐるなびで予約する
住所 〒891-0151 鹿児島県鹿児島市光山1-27-2
交通アクセス ＪＲ指宿枕崎線坂之上駅徒歩18分
電話番号 050-3373-8970
営業時間 月～日・祝前日・祝日 11:00～23:00(※BBQの営業時間となります) 金～日・祝日 11:00～17:00(L.O.16:00)(※併設のCafeは週末限定)
休業日 不定休日あり
紹介文 ※現在カフェ営業は休止中となっております。 ★鹿児島初★『グランピング』が日帰りで楽しめるスポット ◆フォトジェニックなキャンピングテントやハンモック配置
Supported by ぐるなびWebService

楽天トラベル

全室オーシャンビューの贅沢ロケーションでリゾートステイを満喫

カフーリゾートフチャク　コンド・ホテル
平均70平米のゆとりある客室、全室オーシャンビューの贅沢ロケーションでリゾートステイを満喫
8,050円～
楽天トラベルで予約する
住所 〒904-0413 沖縄県国頭郡恩納村冨着志利福地原246-1
最寄り駅 那覇空港よりお車で約6０分（沖縄自動車道利用／最寄　石川IC）
電話番号 098-964-7000
評価 4.54
Supported by Rakuten Developers

じゃらん

ハウステンボス迄10分★絶品グルメと絶景露天が評判のリゾート

庭園外観
大江戸温泉物語　西海橋コラソンホテル
夕食時アルコール無料などのインクルーシブサービス実施中
じゃらんで予約する
住所 859-3451長崎県佐世保市針尾東町２５２３－１
特徴 2月28日までは、全プラン「オールインクルーシブ」となり、ご滞在中のドリンクが無料。リゾート感たっぷりの贅沢バイキングやオーシャンビューの天然温泉をご満喫ください♪
じゃらん Web サービス

WordPressプラグイン「Lockets」カスタマイズ参考サイト

設定方法については、がっつりこちらを参考にさせていただきました。
Creator Clip（クリエイタークリップ）を運営しているカワイイ鹿さん

【WordPress】飲食店や宿の情報をAPIから自動取得！Locketsプラグインの設定方法を解説
飲食店などをブログで紹介するときに、自分で情報を調べて地図や住所などを載せるのって大変ですよね。過去に書いたお…
creatorclip.info

【WordPress】プラグイン「Lockets」

Lockets
A plug-in that gets information on spots such as shops and inns from various APIs and displays the latest information embedded in the blog.
wordpress.org
このプラグインを使用すると、飲食店情報をリクルート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">〒【郵便番号】 【住所１】【住所２】 </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>

ぐるなびWebサービス

<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>
<th>紹介文</th>
<td>【PR文（長:最大200文字）】</td>

下記に変更してます

<div class="shopInfo gurunavi">
  <div class="shopInfoInner cf">
    <div class="shopInfoImg">
      <img src="【店舗画像1のURL】">
    </div>
    <div class="shopInfoTtl">
      <dl>
        <dt>
          <a href="【店舗URL(PC)】" target="_blank" class="shopInfoTtl">【掲載店名】</a>
        </dt>
        <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>
        <tr>
          <th>紹介文</th>
          <td>【PR文（短:最大50文字）】</td>
        </tr>
      </tbody>
    </table>
    <!-- /.shopInfoDetail-->
  </div>
  <div class="googleMap">【Google Maps埋め込み】</div>
  <div class="shopInfoCredit">【ぐるなびクレジットC】</div>
  <!-- /.shopInfo -->
</div>

CSS

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表記を右寄せ小さめにしてます。
突然Locketsボタンが表示されなくなった。プラグインを全て停止し、調べたところ原因は画像共有サイト【WordPress】Pixabay Imagesプラグインでした。
WordPressでPixabay Imagesを利用したい場合は一度PixabayWEBサイトからご自分のPCへダウンロードしてから投稿画面のメディアを追加ボタンをご利用下さい。
スポンサーリンク
WordPress プラグイン
Lockets WordPress ぐるなび じゃらん プラグイン ホットペッパー
Please share
Follow Me
スポンサーリンク
この記事が気に入ったら
いいね！しよう
最新情報をお届けします。

国産ワードプレステーマ

DINA
クラブ・ライブハウス向けWordPressテーマ

OOPS!
ビジネス・店舗HP向けWordPressテーマ

「Welcart」対応WordPressテーマ

ICONIC
Welcart対応WordPressテーマ

GLAMOUR
Welcart対応WordPressテーマ

sao

田舎暮らしに憧れて東京から鹿児島へ。のんびり田舎暮らしとはいきませんが(*''▽'')この記事良かったよ～参考になったよ！などコメント頂けたらとても嬉しいです。また、wordpress設定・構築やウェルカートに関するご質問等もお気軽にご連絡下さい。
支援者募集中 tippin.me ほしい物リスト

Follow Me
sao
K&S PLAGE
スポンサーリンク

コメント

タイトルとURLをコピーしました