Tutorials

【ローカル不要】Claude Code on the webでWordPress REST APIに自動投稿する方法・手順を完全解説

毎回WordPressの管理画面を開いて記事を書き、カテゴリを設定して公開ボタンを押す——この作業をブラウザ上のAIが自動でやってくれたら、どれだけ時間が節約できるでしょうか。

この記事で紹介するのは、Claude Code on the webとWordPress REST APIを組み合わせた自動投稿ワークフローです。構築後は /generate-blog コマンドを打てばAIが記事を生成し、内容を確認してから /publish コマンドで一発投稿できるようになります。ローカルにツールをインストールする必要はなく、ブラウザさえあれば今日からでも始められます。

「毎週の更新が続かない」「記事を書く時間が確保できない」「技術的なセットアップが面倒で手が出せない」——そんな課題を抱えているブログ運営者にとって、このワークフローは大きな転換点になるはずです。初回セットアップは30〜60分。一度構築してしまえば、次回以降はコマンド2つで記事の生成から公開まで完結します。

Claude Code on the webとは？ローカルCLIとの違い

ブラウザだけで動くクラウドサンドボックス環境

Claude Code on the web（claude.ai/code）は、Anthropicが管理するクラウドサンドボックス上で動作するAIコーディングエージェントです。ターミナルやローカル環境は一切不要で、ブラウザを開くだけでClaude Codeのフル機能が利用できます。

サンドボックス内ではファイルの作成・編集、シェルスクリプトの実行、外部APIへのHTTPリクエストなど、ローカル版と同等の操作が可能です。MacやWindowsはもちろん、iPadやAndroidスマートフォンからでもアクセスできる点が大きな強みです。

ローカル版との違い（インストール不要・スマホ対応）

ローカル版Claude CodeはNode.jsのインストールや環境構築が必要ですが、web版はAnthropicがインフラを管理しているため、ユーザー側のセットアップはゼロです。GitHubリポジトリと接続するだけで、すぐにコードの読み書きや外部APIとの連携が始められます。

  • インストール不要：Node.js・npmのセットアップが不要
  • マルチデバイス対応：PC・スマホ・タブレットからアクセス可能
  • 環境変数管理：セッション設定のEnvironment Variables欄で管理できる
  • GitHubと直結：リポジトリを選択するだけで即座に作業開始できる

この記事で作るもの（完成イメージ・所要時間30〜60分）

この記事では、Claude Code on the webからWordPress REST APIへ記事を自動投稿するワークフローを構築する方法を解説します。完成後は、/generate-blog コマンドで記事を生成し、内容を確認してから /publish コマンドで一発投稿できるようになります。

所要時間は初回セットアップで30〜60分程度です。一度構築してしまえば、次回以降はコマンド2つで記事の生成から公開まで完結します。

前提条件と準備するもの

必要なもの一覧

作業を始める前に、以下の3点が揃っていることを確認してください。

  • WordPressサイト：HTTPS対応であること（アプリケーションパスワードのBasic認証はHTTPS必須）
  • GitHubアカウント：作業用リポジトリを管理するため
  • Anthropicアカウント：claude.ai/codeにアクセスするため（Proプラン推奨。無料プランでも動作確認はできますが、長文記事の生成や継続的な作業にはProプランのトークン上限が現実的です）

WordPressのバージョンは5.6以上が必要です。アプリケーションパスワード機能がこのバージョンで正式導入されたためです。

注意：HTTPSが無効な環境（http://〜 のサイト）では、アプリケーションパスワードを使ったBasic認証が利用できません。SSL証明書の設定を先に済ませておきましょう。

WordPressのアプリケーションパスワード発行手順と使い方

アプリケーションパスワードは、通常のログインパスワードとは別に発行できる24文字の英数字トークンです。用途別に複数発行でき、不要になったら個別に失効させられるため、セキュリティ管理がしやすいのが特徴です。

  1. WordPressの管理画面にログインする
  2. 「ユーザー」→「プロフィール」を開く
  3. ページ下部の「アプリケーションパスワード」セクションまでスクロールする
  4. 「新しいアプリケーションパスワードの名前」欄に用途を入力する（例：Claude Code）
  5. 「新しいアプリケーションパスワードを追加」ボタンをクリックする
  6. 表示された24文字のパスワードをコピーして安全な場所に保存する

このパスワードは発行時の1回しか表示されません。必ずコピーして保管してください。

GitHubにリポジトリを用意する

Claude Code on the webはGitHubリポジトリと接続して動作します。新規リポジトリを作成し、最低限以下の構成でファイルを用意してください。

your-repo/
├── .claude/
│   └── skills/        # カスタムスキル定義
├── scripts/
│   └── wp-publish.sh  # WordPress投稿スクリプト（後述）
└── drafts/            # 生成されたドラフト（.gitignore推奨）

ステップ1 — リポジトリをClaude Codeに接続する

claude.ai/codeでGitHubリポジトリを選択する

claude.ai/code にアクセスし、GitHubアカウントと連携させます。初回アクセス時はOAuth認証を求められるので、画面の指示に従って承認してください。

連携後は「New Project」または「Open Repository」からリポジトリを選択します。リポジトリを開くと、Claude Codeがコードベースを認識し、プロジェクト固有の設定（CLAUDE.md の内容など）を自動的に読み込みます。

セッション環境変数（WP_SITE_URL / WP_USERNAME / WP_APP_PASSWORD）の設定手順

WordPress REST APIへの接続に必要な認証情報は、セッションの環境変数として登録します。コード中に直接書き込む必要がなくなり、GitHubへの誤コミットを防げます。

  1. 画面左上のプロジェクト名横にある歯車アイコンをクリックする
  2. 表示されたメニューから「Project Settings」を選択する
  3. 「Environment Variables」タブを開く
  4. 以下の3つの変数をそれぞれ「Add Variable」から登録する
WP_SITE_URL=https://yoursite.example.com
WP_USERNAME=your_wp_username
WP_APP_PASSWORD=xxxx xxxx xxxx xxxx xxxx xxxx

環境変数を登録しておくことで、Claudeがbashスクリプトを実行する際に自動参照されます。アプリケーションパスワードにはスペースが含まれますが、そのまま登録して構いません。

ステップ2 — curlを使ったbashスクリプトでWordPress REST APIに投稿する

scripts/wp-publish.shを作成する

scripts/wp-publish.sh は、ドラフトファイルを受け取ってWordPress REST APIへ投稿するスクリプトです。以下の最小構成から始めてください。

#!/usr/bin/env bash
set -euo pipefail

DRAFT_FILE="${1:-}"
[[ -z "$DRAFT_FILE" ]] && { echo "Usage: $0 "; exit 1; }

# フロントマターからタイトルと本文を取得
TITLE=$(grep '^title:' "$DRAFT_FILE" | sed 's/^title: //')
CONTENT=$(sed '1,/^---$/d' "$DRAFT_FILE" | tail -n +2)

PAYLOAD=$(jq -n \
  --arg title "$TITLE" \
  --arg content "$CONTENT" \
  '{title: $title, content: $content, status: "draft"}')

curl -s -X POST \
  -u "${WP_USERNAME}:${WP_APP_PASSWORD}" \
  -H "Content-Type: application/json" \
  -d "$PAYLOAD" \
  "${WP_SITE_URL}/wp-json/wp/v2/posts"

カテゴリ・タグのID解決や --dry-run オプションが必要な場合は、このスクリプトを拡張してください。

フロントマター付きHTMLドラフトの書き方

---
title: WordPressを自動化する5つの方法
excerpt: WordPressの投稿作業を自動化する方法を解説。
categories: テクノロジー, ブログ運営
tags: WordPress, 自動化, Claude Code
status: draft
---
<h2>はじめに</h2>
<p>本文...</p>

–dry-runで動作を事前確認する

bash scripts/wp-publish.sh drafts/2026-04-23-my-post.html --dry-run

dry-runモードでは実際のAPIリクエストを送らず、送信予定のJSONペイロードを表示するだけです。本番投稿前に必ず実行して内容を確認しましょう。

ステップ3 — .claudeスキルでブログ自動化ワークフローを構築する

/generate-blogスキルで記事を自動生成する

Claude Codeのスキル機能とは、.claude/skills/ ディレクトリ内に配置したMarkdownファイルで定義するカスタムコマンドです。/generate-blog と入力するだけで、スキルファイルに書かれた手順をClaudeが自動実行します。

スキルファイルの中身はMarkdownで書かれた指示書です。以下は .claude/skills/generate-blog/SKILL.md の構造を簡略化した例です。

---
name: generate-blog
description: 指定されたトピックでブログ記事を生成する。ジャンル、トーン、文字数などをカスタマイズ可能。
---

# ブログ記事生成スキル

## 全体フロー
リサーチャー → ライター → エディター → 読者役 → ライター(改稿) → 完成

## 手順
### 0. ジャンル設定の読み込み
config/genres.json を読み込み、指定されたジャンルの設定を取得する。

### 1. リサーチャー（情報収集・構成案作成）
WebSearchでトピックに関する最新情報を調査し、
タイトル案3つと記事構成案を出力する。

### 2. ライター（初稿執筆）
リサーチ結果をもとに、WordPress互換HTML形式で本文を執筆する。

### 3. エディター（品質チェック・SEO最適化）
誤字・構成・キーワード配置を確認し、修正済み本文を出力する。

### 4. 読者役（フィードバック）
想定読者として率直なフィードバックを行う。

### 5. ライター改稿（最終版作成）
フィードバックを反映して最終版を仕上げる。

### 6. ファイル保存
drafts/YYYY-MM-DD-slug.html 形式で保存する。

スキルファイルはMarkdownで自由に記述できます。Claudeへの指示が具体的であるほど、生成される記事の品質が安定します。

drafts/フォルダに保存されたドラフトを確認・編集する

生成されたドラフトは drafts/ ディレクトリにHTMLファイルとして保存されます。以下の点を確認することをおすすめします。

  • タイトルとexcerptが適切か
  • カテゴリ・タグ名がWordPressに登録済みのものと一致しているか
  • 本文のHTML構造が崩れていないか
  • status: draft になっているか

/publishスキルでWordPressに投稿する

/publish drafts/2026-04-23-ai-future.html

投稿が成功すると、WordPressが返すレスポンスにURLが含まれます。初回は必ず下書きで投稿し、WordPress管理画面でプレビューしてから公開に切り替えることをおすすめします。

トラブルシューティング（よくある失敗と対処）

401 Unauthorized — 認証エラーの原因と対処

  • 環境変数が正しく設定されているか：チャット欄で echo $WP_USERNAME を実行して値を確認する
  • アプリケーションパスワードにスペースが含まれているか：スペースも含めてそのまま設定する
  • ユーザー名が正しいか：表示名ではなくログイン用ユーザー名（英数字）を使用する

REST APIが404になる場合（パーマリンク設定）

WordPressの管理画面で「設定」→「パーマリンク」を開き、「投稿名」などに変更して「変更を保存」をクリックすることで .htaccess が再生成され、REST APIのルーティングが有効になります。

環境変数が読み込まれない場合の確認手順

  1. 画面左上の歯車アイコン →「Project Settings」→「Environment Variables」タブで3つの変数が登録されているか確認する
  2. 変数登録後、ページをリロードしてから新しいチャットセッションを開始する
  3. チャットで env | grep WP を実行し、変数が出力されるか確認する

まとめ：ローカル不要のブログ自動投稿ワークフローを今日から始める

この記事では、Claude Code on the webを使ってWordPress REST APIへ自動投稿するワークフローの構築手順を解説しました。

  1. WordPressでアプリケーションパスワードを発行する
  2. GitHubにリポジトリを作成し、bashスクリプトとスキルファイルを用意する
  3. claude.ai/codeでリポジトリと接続し、環境変数を登録する
  4. /generate-blog で記事を生成 → 確認 → /publish で投稿する

ローカルへのインストールが不要で、ブラウザさえあれば使える点がClaude Code on the webの最大の強みといえます。まずは今日、リポジトリを作成して wp-publish.sh を置き、環境変数を設定するところから始めてみてください。最初の1本が投稿できれば、あとはスキルに任せてブログ自動化の恩恵をフルに享受できます。

Related Posts

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です