WordPress.comコネクタを試す｜WP記事を別サイトに横展開

これは何？ WordPress.comの記事を読み出せます。既存のWPブログを別ブランドサイトやアプリに横展開できます。

これで何ができるようになる？#

• WPブログの記事を、別ブランドのキレイなフロントで再表示
• WP記事の中から特定カテゴリだけ抜き出してマガジン化
• 記事更新があったらSlackやメールで購読者に通知

こんな人にハマります / そうでない人#

• ✅ 向いている：既に運営中のWPブログ資産を活かしたい人、フロントだけ刷新したいケース
• ⚠️ 向いていない：これから新規ブログを始める人（NotionやMDX管理の方が軽い）

はじめての接続手順#

1. Connectors → WordPress.com → Connect
2. WordPress.comアカウントで認証
3. 対象サイトを選択

Appコネクタ実践：3つのユースケース#

「接続だけしたけど、結局何ができるの？」となりがちなので、実際に動くところまで作る代表ユースケースを3つ紹介します。各ケースで、Lovableチャットへ貼るプロンプト・裏側で起きていること・失敗しがちなポイントまでセットで解説します。

ケース①：ヘッドレスWP（記事一覧＋詳細ページ）

もっとも王道。WP.comを記事の入れ物として残し、フロントだけLovableで作り直すパターンです。最短でブランドサイトの見た目を刷新できます。

WordPress.comコネクタ経由で、サイトID 12345678 の最新記事20件を取得するサーバー関数 listPosts を作って。
/blog ページで、その記事をカード一覧（タイトル・抜粋・アイキャッチ・公開日）で表示。
/blog/$slug ページで本文HTMLをサニタイズして表示し、関連記事3件を下に出して。

• 使うエンドポイント：GET /rest/v1.1/sites/{site}/posts、GET /rest/v1.1/sites/{site}/posts/slug:{slug}
• サイトIDはフロントに出さず、サーバー関数内で固定 or 環境変数で持つ
• 本文は必ず DOMPurify などでサニタイズしてから dangerouslySetInnerHTML

ケース②：特定カテゴリだけ抜き出してマガジン化

既存WPの中の「tech」「事例」など特定カテゴリだけを使って、別ドメインの専門メディアを立ち上げるパターン。元ブログを汚さずに横展開できます。

WordPress.comの category=tech の記事だけ取得する getTechPosts サーバー関数を作って。
LPは Hero +『最新記事3本』+『すべての記事』の3セクション構成。
記事詳細では同カテゴリの関連記事を出し、CTAに『本家ブログを見る』リンクを置いて。

• クエリ：?category=tech&number=20&fields=ID,title,excerpt,slug,date,featured_image
• fields を絞ると転送量が減り、初期表示が速くなる
• /blog/category/$category のような動的ルートにすると拡張が楽

ケース③：新着記事をSlack / メール通知

WP.comには公式webhookがないので、cronで定期ポーリングして差分だけ通知する構成にします。Lovable Cloudのスケジューラ＋Slackコネクタ（または Resend）と組み合わせるのが定番。

5分おきに /api/public/cron/wp-poll を叩いて、前回チェック時刻 (last_checked_at) 以降に公開されたWP記事を取得。
新着があれば Slack #blog にタイトル・URL・抜粋を投稿し、last_checked_at をDBに更新して。

• クエリ：?after={ISO8601}&order=DESC&number=10
• last_checked_at は posts.date 最大値で更新（cron実行時刻ではなく記事日時を基準に）
• 失敗時もテーブル更新しない＝再送で復旧できる設計に

コネクタ呼び出しの作法（共通）

• コネクタAPIキーは process.env.WORDPRESS_COM_API_KEY、ゲートウェイは process.env.LOVABLE_API_KEY を必ずサーバー関数側で読む
• URLは https://connector-gateway.lovable.dev/wordpress_com/... 経由（公式SDKや直接APIは通らない）
• Authorization: Bearer ${LOVABLE_API_KEY} と X-Connection-Api-Key: ${WORDPRESS_COM_API_KEY} の2ヘッダ必須
• 401が返ったら接続切れ → reconnect、404はサイトIDかパスのtypoを疑う

よくある失敗とリカバリ#

裏側ではこうなっています（少しだけ技術の話）#

WordPress.comとのやり取りは「サーバー関数」と呼ばれる安全な裏側のプログラムを通って行われます。あなたのブラウザに直接APIキーを置かないので、誰かにキーを盗まれる心配がありません。Lovableが自動でこの仕組みを作ってくれるので、構造を理解しなくても安全に使えます。

次の一歩#

フロントだけLovable・記事管理は使い慣れたWPに残す『ヘッドレスWP構成』が、移行コスト最小で見栄え最大の正攻法です。