F.R.I.D.A.Y - WordPress MCP Server for Claude Code

WordPressエディタとClaude Codeを接続し、AIで記事を直接編集できるシステムです。

特徴

• ✅ Claude Pro/Teamサブスクリプションで利用可能（APIコスト不要）
• ✅ WordPressで選択したブロックをClaude Codeが自動認識
• ✅ ブロックの書き換え・追加が可能
• ✅ 特定記事のみを対象にした軽量設計

システム構成

WordPress Editor (ブラウザ)
  ↓ [ブロック選択情報]
F.R.I.D.A.Y Bridge Plugin
  ↓ HTTP POST (localhost:3000)
MCP Server (このプロジェクト)
  ↓ MCP Protocol
Claude Code

セットアップ手順

1. MCPサーバーのセットアップ

# 依存関係をインストール
npm install

# TypeScriptをビルド
npm run build

2. WordPress設定

Application Passwordの生成

1. WordPress管理画面にログイン
2. ユーザー > プロフィール を開く
3. アプリケーションパスワード セクションまでスクロール
4. 新しいアプリケーション名を入力（例: "F.R.I.D.A.Y"）
5. 新しいアプリケーションパスワードを追加 をクリック
6. 生成されたパスワードをコピー（スペース込みでOK）

環境変数の設定

.env.example をコピーして .env を作成：

cp .env.example .env

.env ファイルを編集：

WP_URL=https://your-wordpress-site.com
WP_USERNAME=your-username
WP_APP_PASSWORD=xxxx xxxx xxxx xxxx xxxx xxxx

3. WordPressプラグインのインストール

1. wordpress-plugin/ フォルダ全体をWordPressの wp-content/plugins/ にアップロード
2. WordPress管理画面で プラグイン > インストール済みプラグイン を開く
3. F.R.I.D.A.Y Bridge を有効化
4. 設定 > F.R.I.D.A.Y Bridge で接続テストを実行

4. Claude Codeの設定

Claude Codeの設定ファイルに以下を追加：

Windows: %APPDATA%\Code\User\globalStorage\claude-code\mcp-config.json Mac: ~/Library/Application Support/Code/User/globalStorage/claude-code/mcp-config.json

{
  "mcpServers": {
    "friday-wordpress": {
      "command": "node",
      "args": ["C:\\Users\\桃原歩夢\\Documents\\F.R.I.D.A.Y\\dist\\index.js"],
      "env": {
        "WP_URL": "https://your-wordpress-site.com",
        "WP_USERNAME": "your-username",
        "WP_APP_PASSWORD": "your-app-password"
      }
    }
  }
}

注意: args のパスは絶対パスで指定してください。

5. サーバーの起動

npm start

成功すると以下のメッセージが表示されます：

Bridge server started on port 3000
F.R.I.D.A.Y MCP server running

使い方

🎯 自動処理モード（推奨・最速）

ワンコマンドで完全自動処理！

1. F.R.I.D.A.Yサーバーを起動

   npm start

2. WordPressで記事を開く

   • ブロックエディタで編集したい記事を開く
   • F.R.I.D.A.Yサイドバーが「✓ 接続済み」と表示されることを確認

3. ブロックを選択

   • 編集したいブロック（段落、見出し等）をクリックして選択

4. Webアプリで指示を送信

   • テンプレートエディタ（http://localhost:3000）を開く
   • テンプレートを選択（文字量2倍、リスト追加など）
   • 「実行」ボタンをクリック

5. Claude Codeで実行

   • Claude Codeのチャットで /go または GO と入力
   • 自動的に指示を検出 → 処理 → WordPress反映
   • APIコスト不要！Claude Codeが全部やってくれます！

🛠️ 手動編集モード（細かい制御が必要な場合）

1. WordPressで記事を開く

   • ブロックエディタで編集したい記事を開く
   • F.R.I.D.A.Yサイドバーが「✓ 接続済み」と表示されることを確認

2. ブロックを選択

   • 編集したいブロック（段落、見出し等）をクリックして選択
   • 自動的にMCPサーバーに情報が送信される

3. Claude Codeで編集

   • Claude Code（VSCode拡張）を開く
   • 以下のような指示を出す

使用例

選択ブロックの確認

現在選択中のブロックを教えて

ブロックの書き換え

選択中の段落をもっとプロフェッショナルな表現に書き換えて

ブロックの追加

選択中のブロックの後に、この内容を補足する段落を追加して

記事IDを指定して取得

記事ID 123 の内容を取得して

利用可能なツール

MCPサーバーが提供するツール一覧：

get_current_post

現在編集中の記事全体を取得

get_selected_block

現在選択中のブロックの情報を取得

update_selected_block

選択中のブロックの内容を更新

パラメータ:

• content (string): 新しいブロックの内容

get_post_by_id

指定したIDの記事を取得

パラメータ:

• postId (number): 記事ID

add_block_after_selected

選択中のブロックの後に新しいブロックを追加

パラメータ:

• blockType (string): ブロックタイプ（例: core/paragraph, core/heading）
• content (string): ブロックの内容

トラブルシューティング

接続できない

1. MCPサーバーが起動しているか確認

   npm start

2. ブラウザでヘルスチェック

   http://localhost:3000/health

   → {"status":"ok","message":"F.R.I.D.A.Y Bridge Server is running"} が返ればOK

3. WordPress管理画面で「接続テスト」を実行

ブロック選択が認識されない

1. F.R.I.D.A.Yサイドバーを確認（✓接続済みになっているか）
2. ブラウザのコンソールでエラーを確認
3. MCPサーバーのログを確認

認証エラー

1. Application Passwordが正しいか確認
2. WordPressのREST APIが有効か確認

   https://your-site.com/wp-json/wp/v2/posts

開発

開発モード

npm run dev

TypeScriptの変更を監視して自動ビルドします。

ログの確認

MCPサーバーのログはターミナルに出力されます：

[Bridge] Post set: ID=123, Title=Sample Post
[Bridge] Block selected: core/paragraph (block-abc123)

技術仕様

• 言語: TypeScript, PHP, JavaScript
• MCP SDK: @modelcontextprotocol/sdk ^1.0.0
• WordPress API: REST API v2
• 通信: HTTP (localhost:3000)
• 対応WordPress: 6.0以上（ブロックエディタ必須）

セキュリティ

• ローカル環境でのみ動作（localhost:3000）
• Application Passwordを使用（マスターパスワード不要）
• CORS設定は開発用（本番環境では適切なオリジンを設定）

ライセンス

MIT

サポート

問題が発生した場合は、以下を確認してください：

1. Node.jsのバージョン（推奨: v18以上）
2. WordPressのバージョン（推奨: 6.0以上）
3. Claude Codeの設定ファイルのパス

Happy Editing with F.R.I.D.A.Y! 🚀