前回は、簡単なFast APIを作り、Renderにデプロイしました。
今回は、そのAPIをWordPressから呼び出す方法を紹介します。
APIコードの修正
外部からAPIにアクセスするので、その許可を別途コードに追加する必要があります。
前回コードを以下のように書き換えます。
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
app = FastAPI()
# 許可するオリジンを指定
origins = [
"http://localhost:8060", # 例: ローカルのWordPress開発環境
"https://your-wordpress-site.com", # 本番環境のWordPressサイト
]
app.add_middleware(
CORSMiddleware,
allow_origins=origins,
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
@app.get("/")
async def read_root():
return {"message": "Hello from FastAPI!"}
origins = [
"http://localhost:8060", # 例: ローカルのWordPress開発環境
"https://your-wordpress-site.com", # 本番環境のWordPressサイト
]
app.add_middleware(
CORSMiddleware,
allow_origins=origins,
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
この部分を追加しました。
WordPressからFastAPIの呼び出し
呼び出し方はいくつかありますが、今回は、WordPressの固定ページのテンプレートから呼び出ししてみたいと思います。
固定ページのテンプレートとしてカスタムテンプレートを作成し、FastAPIのエンドポイントを呼び出してメッセージを表示する方法を説明します。これにより、特定のページにのみこの機能を追加できます。
カスタムテンプレートファイルを作成
-
WordPressテーマフォルダに新しいテンプレートファイルを作成
– 使用しているテーマのフォルダ(例:wp-content/themes/your-theme/
)に移動し、新しいPHPファイル(例:template-fetch-api.php
)を作成します。 -
カスタムテンプレートのPHPコードを追加
– 新しく作成したテンプレートファイルに以下のコードを追加します。
“`php
“`
- このコードでは、固定ページに
<div id="api-message"></div>
を追加し、その中にAPIから取得したメッセージを表示します。
固定ページにカスタムテンプレートを適用
WordPress管理画面で新しい固定ページを作成
WordPressダッシュボードにログインし、「固定ページ」→「新規追加」で新しいページを作成します。
作成したページにカスタムテンプレートを適用
ページ編集画面の「テンプレート」のドロップダウンメニューから「Fetch API Template」(先ほど作成したテンプレート名)を選択します。
ページを公開
ページを公開し、公開ページを確認します。
結果を確認
WordPressサイトにアクセスし、FastAPIからのメッセージ(”Hello from FastAPI!”)が表示されていることを確認します。