WordPressにライブ・ゴールド価格ウィジェットを追加する

金融ブログ、ディーラーのサイト、あるいはWordPress上のポートフォリオページを運営しているなら、プラグインもAPIキーもPHPも使わずにライブのゴールド価格を追加できる。ゴールド価格ウィジェット設定ツールがiframeをひとつ生成してくれる。カスタムHTMLブロックかElementorのHTMLウィジェットに貼り付ければ、それで動作する。

ウィジェットを設定する

goldprice.dev/widgets/gold-priceにアクセスする。サインアップもAPIキーも不要だ。通貨、単位(トロイオンスまたはグラム)、カラット、テーマ、言語を選ぶと、ページがそれに対応するiframeを生成してくれる。そのスニペットをコピーして、以下のいずれかのインストール方法で使用する。

設定ツールを使わずデフォルトのままでよい場合、USD、トロイオンス、24カラット、自動テーマ、英語向けに生成されるiframeは次のとおりだ:

<iframe src="https://goldprice.dev/embed/xau?currency=USD&unit=oz&karat=24&theme=auto&locale=en" title="Live gold price" width="360" height="190" loading="lazy" style="border:0;width:100%;max-width:360px" referrerpolicy="strict-origin-when-cross-origin"></iframe>

このウィジェットは60秒ごとに自動で更新される。goldprice.devでホストされているため、APIキーがページのソースに現れることは一切ない。

GutenbergのカスタムHTMLブロックでインストールする

1. ブロックエディタで投稿またはページを開く。
2. カスタムHTML ブロックを追加する(ブロック挿入ツールで「カスタムHTML」と検索する)。
3. コピーしたiframeスニペットをそのブロックに貼り付ける。
4. プレビュー に切り替えてカードが表示されることを確認してから公開する。

セルフホスト型のWordPressでは、管理者であれば通常これは正しく保存される。unfiltered_html 権限を持たない編集者や寄稿者としてログインしている場合、WordPressは保存時に <iframe> タグを取り除き、ブロックは空白になる。この権限がどのように割り当てられるかについては、WordPress自身のカスタムHTMLブロックのドキュメントを参照のこと。対処法は、管理者にブロックを貼り付けてもらうか、そのロールに unfiltered_html を付与することだ。

サイドバーやテンプレート領域に追加する

同じカスタムHTMLブロックは、投稿本文の外でも機能する。外観 → ウィジェット で、任意のサイドバーやフッター領域にカスタムHTMLウィジェットを追加し、同じスニペットを貼り付ける。ブロックテーマでは、サイトエディタからサイドバーやページテンプレートなどのテンプレートパーツにカスタムHTMLブロックを追加する。いずれの方法でも、ウィジェットはそのブロックが置かれた場所に表示され、自動で更新され続ける。

Elementorでインストールする

1. Elementorでページを編集する。
2. HTML ウィジェットをページにドラッグする。
3. HTMLウィジェットのコードパネルにiframeスニペットを貼り付ける。
4. ページを更新する。

ElementorのHTMLウィジェットは、iframeを含む生のマークアップを、何も取り除くことなくそのままレンダリングする。他の埋め込み方法との使い分けについては、ElementorのHTMLウィジェット・ガイドを参照のこと。

ウィジェットのオプション

設定ツールはこれらをiframeの src のクエリパラメータとして設定する。認識できない値は単にデフォルトにフォールバックするため、タイプミスがあっても埋め込みが壊れることはない。

このURLを手動で組み立てる必要はほとんどない。設定ツールでオプションを設定し、生成されたiframeをコピーすればよい。

ウィジェットが表示されない場合

セルフホスト型のWordPressで、iframeがあるべき場所が空白になる。 ほとんどの場合、上記の unfiltered_html 権限の問題だ。ブロックエディタが保存時にタグを黙って削除している。管理者としてブロックを追加し直すか、エディタのコードビューで保存済みの投稿内容を確認してiframeが取り除かれていないか調べること。

WordPress.comで何も表示されない。 WordPress.comの無料プランおよび下位プランでは、カスタムHTMLブロックでのカスタムiframe埋め込みが許可されていない。ホスティング機能が有効なプランが必要になる。対応プランについては、WordPress.comのカスタムHTMLブロック・サポートページを参照のこと。

ウィジェットは読み込まれるが、表示が切れてしまう。 カードには少なくとも幅320px、高さ190pxが必要だ。テーマのサイドバーやコンテンツ列がそれより狭い場合は、縮小するのではなく、ウィジェットを全幅の領域に配置すること。

APIの方が適している場合

iframeは通貨、単位、カラット、テーマ、言語をカバーしているが、それでも固定レイアウトの固定カードであることに変わりはない。iframeではなく自前のコンポーネントの中に価格を組み込みたい場合、テーマオプションではカバーできないデザインが必要な場合、あるいは自分のチャート用に過去データが必要な場合は、代わりに生のAPIを使って表示を自分で構築すること。ゴールド価格コンバーターは、通貨と単位の変換についてそれがどのようなものになるかを示す実例だ。

ライセンスとアトリビューション

公式のiframeは、改変されておらず、目に見えるアトリビューションがそのまま保たれている限り、個人サイトでも商用サイトでも無料で埋め込むことができる。ホワイトラベル化したり、自社独自のフィードであるかのように提示したりするには、別途Enterprise契約が必要になる。自社製品で使う生のAPIデータは、Proプラン以上から始まる通常の商用ライセンスに従う。詳細な規約は利用規約とアトリビューション・ガイドにある。