コンテンツまでスキップ
  • 検索フィールドが空なので、候補はありません。

ウィジェットをWordPressに埋め込む方法

JTB BÓKUNのウィジェットをWordPressサイトに埋め込む手順を詳しく解説

ウィジェットの作成方法では、ウィジェットの「埋め込み予約コード」の生成方法についてご説明しました。

生成した埋め込みコードを、体験を販売するウェブサイトのHTMLに貼り付けるだけで、簡単に販売画面を作ることができます。

ここでは、WordPress(ワードプレス)を例に、埋め込みコードをHTMLに貼り付ける方法について説明します。

JTB BÓKUNでの操作手順

 

1.JTB BÓKUNにログインし、左側のメインメニューから「オンライン・セール」>「ウィジェット」へ進みます。

2.ご利用されるチャンネルを選択します(ここでは「自社ページ」を例に解説します)。

3.ホームページでの表示方法に合わせて、ウィジェットタイプを選択します(本例では「商品ページ」を選択しています)。

 

ウィジェット設定画面

 

4.商品を選択して、「埋め込みコードを生成する」をクリックします。

埋め込みコード生成ボタン

 

5.「埋め込みコードのコピー」をクリックし、メモ帳などのテキストエディタに貼り付けて保存してください。Wordなどのワープロソフトに貼り付けた場合、設定によってはウィジェットコード内の記号が自動的に全角に変換され、正常に動作しない場合がありますので、ご注意ください。

埋め込みコードのコピー

 

WordPressでの貼り付け手順

これで、JTB BÓKUN側での操作が完了しましたので、続いてWordPressでの貼り付けについて説明します。

1.WordPressにログインします。

2.既にウェブページを作成した場合、そのページをクリックします。もし新たにページを作成する場合、「新規追加」をクリックします。(以下では新規追加を例に説明します)

WordPress新規追加

 

3.「+」ボタンをクリックし、「カスタムHTML」というブロックを追加します。なお、表示された候補から見つからない場合、検索あるいは全てを表示するようにしてください。

カスタムHTMLブロック選択
カスタムHTMLブロック追加

 

4.追加したカスタムHTMLブロックの入力欄に、JTB BÓKUNよりコピーした埋め込みコードをそのまま貼り付けます。

埋め込みコード貼り付け

 

5.「プレビュー」をクリックし、表示を確認してください。問題なければ、「下書き保存」あるいは「公開」をクリックしてください。

プレビューと公開

 

ここまで、WordPressに埋め込みコードを貼り付ける方法について説明しました。

WordPress以外の主要なウェブサイトビルダーにも対応しておりますが、一部の制作ツールではJavaScriptが利用できない場合がございます。あらかじめご確認のうえご利用ください。