WordPressのサイトに下のようなフレーバーチャートを追加するには？

参考：さけのわ「さけのわウィジェット」

さけのわさんが大変ありがたいことに「さけのわウィジェット」というものを公開してくださっています。

これを使うといい感じのサイトが出来上がるので、WordPressへの導入方法をご紹介します！

設置方法（手順1,2についてはさけのわさんの公式サイトと同じ内容です。）

1. 銘柄キーの取得

フレーバーを設置したい銘柄をさけのわ さんのサイトで検索してページを表示します。
上のURLの”brand/”の後ろが銘柄キーなのでその部分をコピーします。
下の例だと3qwc8weが銘柄キーとなります。

2. タグの作成

下の二行コードの二行目のdata-sakenowa-brand-key=”~~~~~~”　の” “の中身を上で取得した銘柄キーに変更します。
この二行がタグとなりタグをサイトに埋め込むことでブラウザでは上のようなフレーバーチャートが表示されます。

<script src="https://kioke.sakenowa.com/widget/widget.js"></script>
<div data-sakenowa-brand-key="~~~~~~" data-sakenowa-layout="1"></div>

3. WordPressに埋め込む

wordpressの編集ページにおいて、ブロックを追加する際に「カスタムHTML」を選択します。
そうすると以下のようなブロックが表示されるので、

そこに手順2で作成したタグを書き込みます。

4. WordPressのページを公開

最後にページを公開して完成です。
フレーバーチャートが表示されていることを確認しましょう。

参考

さけのわ「さけのわウィジェット」