ホテルの宿泊料金をWordPressのブログに表示するプラグインを作りました

プログラミング ホテル
2022.11.05

※この記事はプロモーションを含みます

ホテルのアフィリエイトを始めた時に、ブログにホテルの宿泊料金を表示したいと思うことはないでしょうか。単純に楽天トラベル等で宿泊料金を確認してブログに転記するのであれば簡単ですが、ホテルの宿泊料金は常に変化しますし、ページ数が増えてくると管理が大変になってきます。

そういう方がここでご説明するプラグインを使うと、楽天トラベルから取得した最新の最低料金をブログ（Wordpress + Cocoon）に表示することができます。本記事に書いてある方法を使えば人間がいちいち楽天のサイトで最新の料金を確認しなくても自動更新されますのでページ数が増えても手間がかかりません。

実際の使用感

実際に表示されるのは以下のようなバナーです。

上の画像で「￥8,350／人〜（詳細を確認）」という料金が楽天トラベルロゴと共に表示されています。このようなバナーをブログに表示します。料金は楽天APIで公表されている料金に追従します。

実際に使っているページを見たい方は以下のページを見てみてください。

【2023年最新版】 淡路島のおしゃれ&高級ホテル・旅館10選 高級ホテルの集う島！
淡路島はホテルニューアワジグループを始めとした高級宿が集中しており、サービスや料理を競っている激戦区。それだけに洗練されたサービスが期待できるエリアです。オーシャンビューの露天風呂付き客室や鱧、淡路牛、トラフグなど魅力的な宿や料理が沢山あります。
awesome-travel.com
2022.07.17

使用方法

共通設定

まずは一回のみ行えばいい共通設定です。

  1. WordPressの「メインページ → 外観 → テーマファイルエディター」を開く。
  2. 右側のメニューから「テーマヘッダー (header.php)」をクリック。
  3. 表示されたソースコードから「</head>」と書いてある行を探す。
  4. </head> と書いてある直前に以下のコードをコピー&ペーストする。
<script type="text/javascript" language="javascript">
    var vcSid = "1111111";
    var vcPid = "222222222";
　　var appId = "3333333333333333333"; 
</script><script type="text/javascript" src="https://awesome-travel-api.pages.dev/awesome-travel.js" async></script>

上記のコード中で、vcSid, vcPidはバリューコマースでの特有の値です。これは人によって異なりますので、以下のサイトを参考に自分の番号で置き換えてください。

5分で楽々！バリューコマースsidとpidの確認方法

appId は楽天DeveloperのアプリケーションIDです。これも人によって異なりますので、以下から確認してみてください。また事前に楽天Developerへの登録が必要ですので、以下のサイトを確認してやってみてください。

楽天アプリケーションID取得方法と設定方法

ここまでの内容は最初に一回だけやればいいです。

楽天トラベルでホテル番号を確認する

次に宿泊料金を表示したいホテルの、楽天トラベル上でのホテル番号を取得します。

  1. まずは楽天トラベルで目的のホテルのページを開きます。
  2. 以下のスクリーンショットの赤枠の部分（URLの数字）をコピーしてください。これがホテル番号です。

ページ毎、ホテルごとの設定

あとはページ内でホテルの料金を表示したいところでCocoonの「カスタムhtml」を設置して

<div awesome-service="rakuten" hotelno="183193"></div>

のようにコードを書きます。 hotelno=”183193″ の部分には前項でコピーした、目的のホテルのホテル番号をペーストします。

実際の見え方は以下のようになります。これは「OMO7大阪 by 星野リゾート」の現時点での最低料金です（クリックすると楽天トラベルの該当ホテルのページへジャンプします）

注意事項

  1. １ページ内に複数のホテル料金を表示しても問題ありません。ただし楽天APIからの情報取得は１秒以上間隔を開けて取得することが求められているため、複数設置した場合は１秒程度の間隔を開けて順次取得、表示に反映します。
  2. ホテルに空き室がなく最低料金が取得できない場合は「満室」と表示されます。

使用条件

  1. 今回ご紹介する方法は楽天トラベルの最低料金をページ内に表示するものです。一休.comやじゃらんはAPIが公開されておらず、同様の方法で表示する方法はありません。
  2. 料金表示をクリックすると楽天にジャンプしますが、その際にバリューコマースを経由します。つまり今回の料金表示のリンクは、バリューコマースを通して楽天のアフィリエイトをしている場合です。
  3. 直接、楽天トラベル アフィリエイトのリンクを張ることはできません（必要であれば作るかどうかはわかりませんが twitter にメッセージください）
  4. 本機能を提供しているソースコードのコピー、再配布、改変は自由ですが著作権は放棄しません。著作権は本ブログの管理者（鹿野弘恵）にあります。
  5. 本ソフトウエアのライセンスはICSライセンスです。
  6. 本ソフトウエアは事前の告知なくデザインや機能を変更します（それが問題になる場合は鹿野のTwitterまで別途ご相談ください）。
  7. 本ソフトウエアを使ったことによって、本ソフトウエアの使用者にいかなる損害が発生した場合も開発者である鹿野弘恵には一切の責任が発生しないものとします。
タイトルとURLをコピーしました