WordPress│GitHub Actionsで集めたデータを参照&表示する方法

外部から取ってきたデータを、毎日決まった時刻に WordPress の記事へ反映したい。

よくある要件です。

株価でも天気でも為替でも、やることは同じです。

「どこか（GitHub Actions）で定期実行してデータを作り、それを WordPress に表示する」。

問題はその2つをどうつなぐかでした。

実際に組んでみたら、教科書どおりにいかない箇所が次々に出てきたので、動く最小構成と一緒に共有します。

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社

カスタマイズの依頼・相談

なぜ「WordPress から取りに行く」ではダメだったのか

最初に考えるのは、たぶんこれです。

記事のページで JavaScript を書いて、データ元の API を直接 fetch() すればいいのでは？

これはほぼ確実に失敗します。

多くの API は CORS ヘッダを返さないので、ブラウザ側で遮断されます。

私が使いたかった API も、コマンドラインからは普通に取れるのにブラウザからは一切通りませんでした。

# これは通る
curl "https://example.com/api/data"

# ブラウザの JavaScript からは CORS でブロックされる

つまりサーバー同士で受け渡す必要がある、ということです。

次に考えるのが「GitHub Pages に JSON を置いて、WordPress から取りに行く」。

これは動きますが、リポジトリを非公開にすると GitHub Pages は有料プランが必要です。

コードを人に見せたくない場合はここで詰まります。

そこで逆向きにしました。

GitHub Actions（定期実行）
  └ データを取得・加工
      └ WordPress の受信エンドポイントに POST
          └ プラグインがオプションに保存
              └ ショートコードが表示

この形にすると、こうなります。

• リポジトリは非公開のままでいい
• 記事の表示時に外部通信が一切発生しない（保存済みの値を読むだけ）
• サーバーを借りる必要がない（GitHub Actions の無料枠で足りる）

3つ目が地味に効きます。

1日1回の実行なら、月の消費は10分弱です。

以下サンプルコードと知見です。