機能紹介·

WordPressに取引成績をリアルタイム表示する方法(プラグイン不要)

MT4、MT5、cTrader、TradeLocker口座のエクイティカーブと統計を、カスタムHTMLブロック1つでWordPressサイトにリアルタイム表示。Gutenberg、Elementor、Divi、クラシックエディターに対応。

WordPressサイトに取引成績を載せるのに、プラグインはいりません。必要なのはブロック1つとコード1つだけです。

そのコードとは、ShowMyTradesのウィジェットです。口座の状況をリアルタイムで表示し、自動で更新されます。このガイドでは、WordPressのエディターごとにコードを入れる場所と、WordPressが知らないうちにコードを消してしまう3つのケースを説明します。

✅ 始める前に

ShowMyTradesで公開中の口座が必要です。まだない場合も、数分で用意でき、費用はかかりません。

  1. 新規登録し、取引口座を読み取り専用で連携します(MT4・MT5、cTrader、TradeLocker)。
  2. 口座の設定で、公開設定を公開中(または限定公開)にします。
  3. ダッシュボードでウィジェットを開き、口座とウィジェットを選んでコードをコピーします。

コードは<iframe>と、それに続く数行の<script>でできています。

<iframe
  id="smt-equity-a1b2c3d4e"
  src="https://showmytrades.com/widget/YOUR-ACCOUNT-SLUG?type=equity&theme=auto"
  width="100%"
  height="400"
  loading="lazy"
  frameborder="0"
  style="border-radius: 8px; width: 100%;">
</iframe>
<script>
(function() {
  var iframe = document.getElementById('smt-equity-a1b2c3d4e');
  window.addEventListener('message', function(e) {
    if (e.data?.type === 'widget-resize' && e.source === iframe.contentWindow) {
      iframe.height = e.data.height;
    }
  });
})();
</script>

🧱 ブロックエディター(Gutenberg)

現在のWordPressには、どれもこのエディターが入っています。

  1. ページまたは投稿を開き、チャートを入れたい位置で「+」をクリックします。
  2. カスタムHTMLを検索して、ブロックを追加します。
  3. コードをまるごと貼り付けます。
  4. ブロックツールバーのプレビューでウィジェットを確認し、更新または公開をクリックします。

段落ブロックやページに直接貼り付けるのは避けてください。コードがそのまま文字として表示されてしまいます。使うのは必ずカスタムHTMLブロックです。

サイドバーやフッターに置く場合は、外観 → ウィジェット(ブロックテーマでは外観 → エディター)を開き、同じカスタムHTMLブロックを追加します。サイドバー向けの大きさになっているのは統計カードのウィジェットです。

🧩 ページビルダーとクラシックエディター

エディターコードを入れる場所
ElementorHTMLウィジェットをページにドラッグし、コード欄に貼り付け
Diviコードモジュールを追加して貼り付け
WPBakeryRaw HTML要素を追加して貼り付け
Beaver BuilderHTMLモジュールを追加して貼り付け
クラシックエディター「ビジュアル」タブから「テキスト」タブに切り替えて貼り付け、「ビジュアル」に戻さずに保存

どのエディターでも原則は同じです。文章用の要素ではなく、コードをそのまま入れるための要素を使ってください。

📐 テーマに合わせてサイズを調整

WordPressでは、ウィジェット作成ページの2つの設定が効いてきます。

幅:パーセントで指定。幅の単位をパーセントにして、値を100にします。こうするとウィジェットがテーマのコンテンツ幅いっぱいに広がり、スマートフォンでもそれに合わせて縮みます。デスクトップでちょうどよく見えるピクセル固定の幅は、スマートフォンでははみ出してしまいます。

テーマ:明示的に指定。「自動」は訪問者のシステム設定に従うもので、WordPressのテーマには合わせません。サイトが常にライトまたはダークなら、ウィジェット作成ページでライトかダークを選んでおけば、ウィジェットがページから浮くことはありません。透明度も含めて、背景色を自由に指定することもできます。

高さは自動で決まります。コードに含まれるスクリプトが、内容に合わせて枠の高さを変えるからです。

🚫 WordPressがコードを消してしまう3つのケース

保存してもチャートが表示されないときは、ほぼ間違いなく次のどれかです。

状況何が起きるか対処法
プラグインが使えないプランのWordPress.comカスタムHTMLからスクリプトが削除され、ほとんどの外部サイトのiframeも削除される代わりに自動更新画像形式(下記)を使うか、カスタムコードが使えるプランに変更する
権限上、生のHTMLを投稿できない(投稿者・寄稿者。マルチサイトではネットワーク管理者以外の全員)保存時にWordPressがiframeとスクリプトを取り除く管理者にブロックの追加を頼む
セキュリティ系・高速化系のプラグインインラインスクリプトや他ドメインのiframeをブロックするプラグインがあるプラグインの設定でshowmytrades.comを許可する

いちばん多いのは1つ目です。自分が管理者のセルフホスト版WordPressなら、どれも当てはまりません。

🖼️ 必ず使える代わりの手段:自動更新画像

各口座には11種類の自動更新画像も用意されています。普通の画像なので消されることがなく、取引データが変わると自動で描き直されます。

ウィジェット作成ページで自動更新画像を選び、種類とテーマを選んでHTMLをコピーします。

<a href="https://showmytrades.com/account/YOUR-ACCOUNT-SLUG" target="_blank">
  <img src="https://showmytrades.com/api/widget-image/YOUR-ACCOUNT-SLUG/summary_light.png"
       alt="Trading Performance" width="500" height="290" loading="lazy" decoding="async" />
</a>

このコードはカスタムHTMLブロックに貼り付けても構いませんし、WordPressの画像ブロックを追加して「URLから挿入」を選び、画像のアドレスを貼り付けるだけでも使えます。そのあと、画像に口座ページへのリンクを設定します。

画像はインタラクティブではありません。マウスを重ねても反応せず、表示の切り替えもできません。iframeが使えない場所では画像を、それ以外の場所ではiframeを使ってください。

📍 サイトのどこに置くか

  • 「成績」や「運用実績」の専用ページ:フルダッシュボードのウィジェットを幅100%で。運用実績ページの作り方をご覧ください。
  • トップページ:エクイティカーブに、1行の説明を添えて。
  • サイドバーやフッター:統計カード(収益率、ドローダウン、残高、有効証拠金)。
  • EAやシグナルの商品ページ:価格の上にエクイティカーブ、下に月次リターン。販売ページでEAのフォワード実績をリアルタイムに見せる方法をご覧ください。
  • ブログ記事:ウィジェットを1つ、本文で成績に触れている箇所に。

❓ よくある質問

プラグインは必要ですか?

いいえ。カスタムHTMLブロックはWordPressに標準で入っています。ウィジェットはShowMyTradesがホストして更新しているので、プラグインを入れても何も変わりません。

ウィジェットでサイトが重くなりませんか?

iframeは遅延読み込みされます。つまり、訪問者がその近くまでスクロールしたときに初めて、ブラウザが読み込みます。自分のページの表示が先です。

キャッシュプラグインと一緒に使えますか?

使えます。キャッシュされるのはページで、ウィジェットの中身ではありません。ウィジェットは読み込まれるたびに、最新のデータをShowMyTradesから取得します。

ウィジェットはSEOにプラスですか、マイナスですか?

直接にはどちらでもありません。検索エンジンはiframeの中身を、その配信元のサイトのものとして扱います。効果があるのは周りのページのほうです。チャートが何を示しているのか、中身のある文章を書いてください。

口座の公開リンクを変更しました。WordPress側も直す必要がありますか?

ありません。古いアドレスもそのまま使えるので、貼り付け済みのウィジェットは変更後のリンクに自動で追従します。

1つのページに複数の口座を表示できますか?

できます。口座ごとにカスタムHTMLブロックを1つずつ追加するか、統計インラインのウィジェットを行として積み重ねてください。複数の取引口座を1ページに表示する方法をご覧ください。

🔗 関連ガイド


無料で口座を連携し、ウィジェットをコピーしてカスタムHTMLブロックに貼り付けてください。先にウィジェット作成ページを見てみたい場合は、登録なしで開けます。