「Lockets」飲食店、ホテル、商品情報をショートコードで正確に表示するプラグイン!

Photo by chuttersnap on Unsplash

先日、WordBenchのイベントに参加してきました。イベントの発表で「Lockets」という飲食店、ホテル、商品情報をWebサービスから取得してくれるプラグインを作られた方のお話を聞いて「面白い!便利!」と思いましたので早速試してみました。

飲食店、ホテル、商品情報をWebサービスから取得してくれるプラグイン「Lockets」とは?

ブログを書いていて、「このあいだ行ったお店のことを書こう」と思うときがあります。せっかくなので正確な住所や情報、できれば写真なども載せたいと思いますが。。。非常に面倒ですよね(^_^;)。

それを解消してくれるプラグインが Lockets です。

まずはどんな感じで情報が載せられるのか、ということをお見せします。

飲食店での例:ホットペッパー

Lockets をインストールして、設定すると投稿固定ページの編集画面に

[Lockets] というボタンが表示されるようになります。

このボタンをクリックすると、

このような画面が表示されますので、

検索キーワードに、お店の名前などを入れて、検索対象で、検索対象サービスをチェックし、検索をクリック

すると、

このように検索結果が表示されるので、挿入をクリック

このようにショートコードが入ります。これをこの投稿で見てみます
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓Locketsで表示↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

PARTENZA パルテンツァ

~特別な日を演出する~ お洒落なイタリアン肉バル

住所:東京都八王子市中町4-12 クレインビル3F

交通アクセス:【八王子駅より徒歩5分】歓送迎会ご予約大歓迎です!

営業時間:月、水~日、祝日、祝前日: 17:00~翌0:00 (料理L.O. 23:00 ドリンクL.O. 23:30)

定休日:火

ホットペッパー Webサービス


↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑Locketsで表示↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

こんな感じにお店の名前(リンクしている)、写真、住所、アクセス、営業時間、定休日、googleマップが自動的に表示されます!

お店情報のショートコード

にある shopid は、ホットペッパーでお店を表示したときの

URLにあるJからはじまる数字のようですので、このショートコードに、お店のshopidを付けるだけで、表示させることもできます。

飲食店を表示するWebサービスはこのほかぐるなびも利用することができます。

ホテルの例:楽天トラベル

ホテルを楽天トラベルで表示してみます。

八王子というキーワードで、検索対象を楽天トラベルとして**検索穂うぃにをクリック

このように沢山のホテルが表示されました。一番上にあるホテルの挿入をクリック

このようにショートコードが入ります。これをこの投稿で見てみます

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓Locketsで表示↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

ザ・ビー八王子

「京王八王子駅」の目前で、「JR八王子駅」からも徒歩7分という好立地
192-0046
東京都八王子市明神町4-6-12

宿泊プランはこちら

楽天ウェブサービスセンター


↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑Locketsで表示↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

このようにホテルの名前、写真、説明、住所、宿泊プランへのリンク、googleマップが表示されました!

このショートコードは楽天トラベルのURLにある数字のようでした。

楽天トラベルで八王子プリンスホテルを表示したときのURL

を見ると、4桁の 1582 を使えばいいのではないか?と思われます

とこのようにしてみると、

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓Locketsで表示↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

京王プラザホテル八王子

JR八王子駅北口徒歩1分。 2016年4月エグゼクティブルームリニューアル!
192-0083
東京都八王子市旭町14-1

宿泊プランはこちら

楽天ウェブサービスセンター


↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑Locketsで表示↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

案の定、表示されました。ホームページで見つけて直接ショートコードを書くこともできます。

ホテルで使えるWebサービスは他にじゃらんもあります。

商品の例:Amazon

商品の例をAmazonで見てみます。

Locketsの画面で検索キーワードをWordPress、検索対象をAmazon.co.jp検索商品表示(β)にして検索をクリック

沢山商品が表示されます。最初の商品の挿入をクリック

このようにショートコードが入ります。これをこの投稿で見てみます
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓Locketsで表示↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓


いちばんやさしいWordPressの教本第3版 人気講師が教える本格Webサイトの作り方 (「いちばんやさしい教本」)


↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑Locketsで表示↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

このようにamazon商品のリンクが貼り付けられました。

ショートコードにある asin は、書籍の場合amazonの商品ページにある

ISBN-10の数字のようですので、検索をしなくてもAmazonの商品ページからこのショートコードで、商品を表示することができます。

書籍以外の場合は、URLにある

この辺のコードかな?と思って

貼ってみたところ

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓Locketsで表示↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓


Echo Dot (エコードット) 第2世代 - スマートスピーカー with Alexa、ブラック



アルドイノ エキストラヴァージン オリーブオイル フルクトゥス 750ml


↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑Locketsで表示↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

このように表示することができるようでした!

商品はこのほか楽天市場タグ検索商品表示(β)でも表示することができます。

Locketsのインストール

Locketsをインストールする方法を書きます。

ダッシュボード プラグイン>新規追加 をクリック

locketsと入力すると

このプラグインが見つかりますので、今すぐインストールをクリック

有効化をクリック。これでインストールが終了です。

Locketsの設定をする

ここが一番ハードルの高いところなのですが、最初に1回やっておけばあとは使うだけです。設定とは何か?ということがわかる画面があります。

インストール直後に

Locketsをクリックすると

埋め込める情報一覧[NG]というマークが付いているものばかりです。これらを使えるようにするにはそれぞれの設定が必要となります。

今回、このプラグインを試すに当たって可能な限り設定してみました。設定後の画面は

こんな感じで[NG]だったところが[OK]になりました。

すべての設定をするのは色々大変だと思いますので、まずは自分が使いたいところから設定をしていくといいと思います。方法については、

設定画面を表示させて、

設定画面に表示された項目名(この場合は楽天アフィリエイトIDなど)で検索をすると、どのようにしたらそのIDを取得できるかがわかると思います。

ホットペッパーを使うための設定方法

ホットペッパーを使うための設定がとても簡単でしたので、これだけご紹介しておきます。必要なキーはリクルートWEBサービスキーです。

https://webservice.recruit.co.jp/register/index.html

こちらのページで

メールアドレスを入力して送信をクリックします。

このメールが届くので

メールの中にあるURLをクリック

このような表示になります。

APIキー発行完了のお知らせが来ます。メールを開くと

APIキーが書かれています。これをコピーして、

ダッシュボード Lockets>リクルートWEBサービス をクリック

リクルートWEBサービスキーにペーストします。

画面の一番下にある変更を保存をクリック。

これでホットペッパーでの検索ができるようになりました。

Locketsは簡単、正確、自由度が高い!便利なプラグイン

Locketsは簡単、正確、自由度が高い!便利なプラグインです。
一覧すると、

  • 一度設定をしておけば複数のWEBサービスから自動的に情報を表示することができる
  • WEBサービスから情報を取得するので、常に新しい情報を表示できる
  • 取得した情報はテンプレートを変更することで好きな形で表示できる
  • 地域情報のWEBサイトに様々な情報を掲載することができる

という感じです。アフィリエイトのWEBサービスを使う場合はとても簡単にアフィリエイトリンクが作れるので、ありがたいですね!

取得した情報はテンプレートを変更することで好きな形で表示できるということについて説明をしていなかったので、少しだけ書いてみます

取得した情報をテンプレートを変更することで好きな形で表示する方法

楽天トラベルを例に、テンプレートを変更する方法を試してみます。

ダッシュボードLockets>楽天WEBサービスをクリック

置き換え用の文字列は下記の通りというところにある 【XXXX】 というものがWEBサービスから提供される項目です。これを使って、表示テンプレートを変更します(表示テンプレートに何も記述がなければデフォルトの形で表示されます)。

こんな感じに入力してみました(このサイトで行うと表示がすべてこの形になってしまうので別のWEBサイトで試しています)。

これで先ほどと同じショートコードで表示してみると、

こんな感じに、ホテル専門サイトのような表示を行うことができました!データによって表示の形が変わったりすることもあるのでいくつか表示してみて調整してみると良いと思います。

最後になりますが、こんなに良いプラグインを開発していただき、プラス・ムーブメント合同会社さんに感謝します(^^)/

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
ゆうそうとITブログはMIXHOSTで運営中
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

280人の購読者に加わりましょう

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。