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

5.0
2018.06.28
この記事は約16分で読めます。

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

飲食店や宿の情報を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
最寄り駅那覇空港よりお車で約6０分（沖縄自動車道利用／最寄　石川IC）
電話番号 098-964-7000
評価 4.37
Supported by Rakuten Developers

じゃらん

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

庭園外観
大江戸温泉物語　西海橋コラソンホテル
3/19～4/30　　営業再開キャンペーン　心ゆくまで【かに食べ放題】
じゃらんで予約する
住所859-3451長崎県佐世保市針尾東町２５２３－１
特徴3/1～5/31　海の香り大地の恵みを楽しむ地中海フェア開催！全プラン「オールインクルーシブ」となり、ご滞在中のドリンクが無料！
じゃらん 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>

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へダウンロードしてから投稿画面のメディアを追加ボタンをご利用下さい。

ぐるなびWebサービス無料APIサービスの提供を終了

無料APIサービスが2021年6月30日に終了する案内がございました。
これに伴い、当サイトではサービス記載を消去致しました。
継続してぐるなびWebサービスAPIを利用したい場合、
有料となりますのでご注意下さい。
詳しくは公式サイトにてご確認下さい。
スポンサーリンク
WordPress プラグイン
Lockets WordPress ぐるなび じゃらん プラグイン ホットペッパー
＼Please share／
＼Follow Me／
スポンサーリンク

国産ワードプレステーマ

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

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

Welcart対応WordPressテーマ

ICONIC
Welcart対応WordPressテーマ

GLAMOUR
Welcart対応WordPressテーマ

sao

田舎暮らしに憧れて東京から鹿児島へ。現実は思ってた以上に厳しく挫折( ;∀;)この記事良かったよ～参考になったよ！などコメント頂けたらとても嬉しいです。wordpress設定・構築やウェルカートに関するご質問等もお気軽にご連絡下さい。

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

コメント