Claude Codeを使ってWordPress記事自動投稿システムをゼロから作った話【完全手順つき】

AI
2026.04.19

「ブログ記事の執筆から投稿まで、もっと効率化できないだろうか」——そんな思いから、Claude Codeを使ってWordPress記事の自動投稿システムを構築してみました。この記事では、Claude Codeの導入手順から、実際にAIに渡したプロンプト全文、途中でハマった認証エラーの解決法、図解ダイアグラムの自動挿入の仕組み、そして最終公開を手動にした理由まで、すべて包み隠さず解説します。初めて挑戦する方でもこの記事の手順通りに進めれば、同じシステムをゼロから再現できるはずです。実際、この記事もClaudeCodeを用いて生成しています。

Claude Codeとは？登録からインストールまでの全手順

Claude Codeの概要

Claude Codeは、Anthropic社が提供するターミナル上で動作するAIコーディングアシスタントです。普段使っているターミナル（コマンドプロンプトやiTerm2など）から直接AIに指示を出し、コードの生成・修正・デバッグをすべてコマンドライン上で完結できます。VSCodeのようなエディタ拡張ではなく、ターミナルネイティブで動く点が最大の特徴です。

私がこのツールを選んだ理由は単純で、「プロジェクトのディレクトリ構造を丸ごと理解した上でコードを書いてくれる」からです。ファイル間の依存関係を把握しながらコード生成してくれるので、複数ファイルにまたがるシステム開発との相性が抜群でした。

課金について（重要）

Claude Codeを使うには以下のどちらかが必要です。

① サブスク（Pro / Max）
  • Pro：約$20/月
  • Max：約$100/月
② API課金（おすすめ）

👉 実はこっちでも使えます

  • APIキーを発行して従量課金で使用
  • 使った分だけ支払う形式

👉 自分はこのAPI課金で使っています

ポイント

  • 軽く使うならAPIの方が安い
  • がっつり使うならProでもOK

アカウント作成手順

Claude Codeを使うには、まずclaude.aiでアカウントを作成し、有料プラン（ProプランまたはMaxプラン）に加入する必要があります。以下の手順で進めてください。

  1. ブラウザで https://claude.ai にアクセスする
  2. 「Sign up」をクリックし、メールアドレスまたはGoogleアカウントで新規登録する
  3. メール認証を完了させ、ログインする
  4. API使う場合はAPIキーを発行する
  5. 支払い情報（クレジットカード）を登録して確定する

無料プランではClaude Codeは利用できません。

Node.jsのインストール

Claude Code CLIを使うにはNode.jsが必要です。

手順

  1. 公式サイトにアクセス
    https://nodejs.org/
  2. LTS版をダウンロード
  3. インストール後確認
node -v
npm -v

👉 バージョンが表示されればOK　　※Node.jsはv18以上が必要です。

Claude Code CLIのインストールと認証

アカウント準備が整ったら、ターミナルでClaude Code CLIをインストールします。事前にNode.js（v18以上）がインストールされている必要があります。

npm install -g @anthropic-ai/claude-code

インストールが完了したら、以下のコマンドで認証を行います。

claude auth login

実行するとブラウザが自動的に開き、claude.aiのログイン画面が表示されます。ログイン後に「CLIからのアクセスを許可しますか？」という確認画面が出るので「Allow」をクリックしてください。ターミナルに「Authentication successful」と表示されれば認証完了です。

認証後は、任意のプロジェクトディレクトリに移動して claude コマンドを実行すれば、対話型のAIコーディングセッションが始まります。

Python環境（軽く補足）

Pythonで動くので環境も用意しておく

python -m venv venv
source venv/bin/activate
pip install requests python-dotenv

システム構成とClaude Codeへ渡した最初のプロンプト

4ファイル構成のシステム設計

4ファイル構成のシステム設計図：app.pyが各モジュールを制御し、.envが全体に環境変数を提供する
app.pyをハブとして各モジュールが役割分担し、.envが全ファイルに認証情報を供給する構成です。

今回構築したシステムは、以下の4つのPythonファイルと1つの環境変数ファイルで構成されています。

  1. app.py：メイン実行ファイル。全体のフロー（記事生成→画像挿入→WordPress投稿）を制御する
  2. article_gen.py：Claude APIを呼び出して、日本語のHTML記事を生成する
  3. image_gen.py：記事内容を分析し、図解ダイアグラム（Mermaid）を生成してWordPressにアップロード・記事に挿入する
  4. wp_uploader.py：WordPress REST APIを使って下書き（draft）として記事を投稿する
  5. .env：APIキーやWordPress認証情報などの機密情報を管理する

役割を明確に分離したのは、後から個別にデバッグや改修がしやすいからです。実際、WordPress認証でハマったときもwp_uploader.pyだけを修正すれば済んだので、この設計にして正解でした。

Claude Codeにやらせる（ここが核心）

ここが一番重要なポイントです。

まず、作業フォルダを作成します。

mkdir auto-blog
cd auto-blog

次にClaude Codeを起動します。

claude

このコマンドを実行すると、ターミナル内でClaudeが起動し、
そのままAIに指示を出せる状態になります。

Claude Codeへの最初のセットアップ用プロンプト全文

プロジェクトディレクトリを作成し、そこで claude を起動した後、以下のプロンプトをそのまま貼り付けて実行しました。これがシステム全体の設計図になります。

以下の要件を満たす、WordPress自動投稿システムをPythonで構築してください。

## ■ 目的
Claude APIを使って日本語の記事を自動生成し、図解（Mermaid）を自動挿入し、WordPressへ「下書き」として投稿する。

---

## ■ 機能要件
1. Claude APIで記事を生成（約5000文字・日本語）
2. アフィリエイトリンクを自然に2箇所挿入
3. 記事内容を分析し、図解が必要な箇所にMermaidダイアグラムを生成
4. MermaidコードをPNG画像に変換（mermaid.ink使用）
5. WordPressメディアライブラリに画像をアップロード
6. 記事内の適切な位置に画像を挿入（<figure>タグ）
7. WordPress REST APIで下書き投稿

---

## ■ 記事生成プロンプト（厳守）
以下の指示で記事を生成すること：

「あなたはAI講師です。初心者にも分かりやすく、かつ専門性のある記事を書いてください。

【条件】
・言語：日本語
・文字数：約5000文字
・構成：
　- SEOを意識したタイトル（<h1>）
　- リード文（<p>）
　- H2/H3見出しを含む本文
　- まとめ（<h2>）
・文体：読者に寄り添った丁寧な解説調
・出力形式：HTMLタグのみ（Markdown禁止）

【アフィリエイトリンク挿入】
以下の2箇所に自然に挿入すること：
① 記事の中盤（読者が解決策を求める流れ）
② 記事の最後（まとめの直後）

・リンクURL：[AFFILIATE_LINK]
・リンクテキスト：[AFFILIATE_TEXT]

不自然にならないように文脈に溶け込ませること」

---

## ■ 画像生成（Mermaid）の仕様
記事生成後、以下の処理を行うこと：

1. 記事内容を分析し、「図解があると理解しやすい箇所」を2〜3箇所特定
2. 各箇所に対して適切なMermaidダイアグラムコードを生成
   - フローチャート
   - シーケンス図
   - 構成図
   などを文脈に応じて使い分ける
3. MermaidコードをBase64エンコードし、以下の形式でPNG画像を取得：
   https://mermaid.ink/img/{Base64エンコードされたコード}
4. 取得した画像をローカルに一時保存
5. WordPress REST API（/wp-json/wp/v2/media）で画像アップロード
6. 返却された画像URLを使用して、記事内の見出し直後に以下形式で挿入：

<figure>
  <img src="画像URL" alt="図解説明">
  <figcaption>図：説明</figcaption>
</figure>

---

## ■ 技術要件
・Python 3.11
・使用ライブラリ：
　- requests
　- python-dotenv
・APIキーは .env で管理
・ログはoutput.logに保存
---

## ■ WordPress投稿仕様
・REST APIエンドポイント：/wp-json/wp/v2/posts
・ステータス：draft（下書き）
・認証：アプリケーションパスワード

---

## ■ ファイル構成
以下のファイルを生成してください：

- app.py：メイン実行（記事生成 → 画像生成 → 投稿）
- article_gen.py：Claude APIで記事生成
- image_gen.py：Mermaid生成・PNG化・アップロード・挿入
- wp_uploader.py：WordPress投稿処理
- .env：環境変数管理

---

## ■ 出力内容
以下をすべて出力してください：

1. 必要なライブラリのインストールコマンド（pip）
2. .envファイルのテンプレート
3. 各Pythonファイルの完全コード
4. セットアップ手順：
　・WordPressのアプリケーションパスワード取得方法
　・ローカル実行方法

---

## ■ 重要
・そのまま実行できるレベルでコードを書くこと
・不足している情報があれば仮の値を入れて明示すること
・初心者でも再現できるように説明を書くこと

このプロンプトを渡した結果、Claude Codeは約2分ほどで4つのファイルをすべて生成してくれました。各ファイルにはコメントつきの丁寧なコードが書かれておりました。

WordPress認証エラーで苦戦した話と解決法

401 Unauthorizedの壁

コード生成まではスムーズに進んだのですが、いざ python app.py を実行してWordPressに投稿しようとしたところ、見事にエラーで止まりました。ターミナルに表示されたのは以下のようなメッセージです。

requests.exceptions.HTTPError: 401 Client Error: Unauthorized for url: https://yourdomain.com/wp-json/wp/v2/posts

「401 Unauthorized」——つまり認証が通っていないということです。.envファイルにWordPressのユーザー名とパスワードを設定していたのですが、WordPress REST APIは通常のログインパスワードでは認証できないことを、このとき初めて知りました。

エラー文をそのままClaude Codeに投げたら解決した

401エラー発生からClaude Codeによる原因特定、アプリケーションパスワード発行、投稿成功までのトラブルシュートの流れ
エラーメッセージをClaude Codeに渡すだけで原因特定から解決手順の提示まで一気に進んだ流れです。

ここで私がやったことは非常にシンプルです。エラーメッセージをそのままコピーして、Claude Codeに以下のように伝えました。

このエラーを解決して、手順通りに直して

requests.exceptions.HTTPError: 401 Client Error: Unauthorized for url: https://yourdomain.com/wp-json/wp/v2/posts

するとClaude Codeは即座に原因を特定し、「WordPress REST APIにはApplication Password（アプリケーションパスワード）が必要です」と教えてくれた上で、以下の手順を提示してくれました。

Application Passwordの発行手順

  1. WordPress管理画面（https://yourdomain.com/wp-admin）にログインする
  2. 左メニューの「ユーザー」→「プロフィール」をクリックする
  3. ページ下部にある「アプリケーションパスワード」セクションまでスクロールする
  4. 「新しいアプリケーションパスワード名」に任意の名前（例：「auto-post-system」）を入力する
  5. 「新しいアプリケーションパスワードを追加」ボタンをクリックする
  6. 生成されたパスワード（スペース区切りの英数字）をコピーする（この画面を閉じると二度と表示されないので注意）
  7. .envファイルの WP_APP_PASSWORD に、コピーしたパスワードをスペースを含めたままペーストする

この手順通りにアプリケーションパスワードを発行し、.envファイルを更新したところ、再実行で問題なくWordPressへの投稿が成功しました。

この体験で強く感じたのは、「エラーメッセージをAIにそのまま丸ごと渡す」というアプローチの威力です。自分でStack Overflowを検索して情報を取捨選択する時間が丸ごと省略できます。エラーの文脈をAIが自動的に理解して、「何を」「どの順番で」直せばいいかを具体的に教えてくれるので、初心者でも迷うことがありません。

この一連のトラブルシュートを経て、Claude Codeは「コードを書くだけのツール」ではなく「デバッグの相棒」だと確信しました。もしあなたもシステム構築に挑戦してエラーに直面したら、まずはエラー文をそのままAIに投げてみてください。驚くほどスムーズに解決します。

ClaudeCodeにはこのような教材もあるので勉強してみると理解も深まっていいかもしれません。

図解ダイアグラムを自動挿入する仕組み

image_gen.pyの4ステップ処理フロー

image_gen.pyの処理フロー：記事分析からMermaidコード生成、PNG変換、WPアップロード、記事挿入までの4ステップ
image_gen.pyは記事の分析からダイアグラム画像の挿入まで4ステップで自動処理します。

このシステムの中で最も「作ってよかった」と感じている機能が、図解ダイアグラムの自動挿入です。ブログ記事は文章だけだと離脱率が上がりがちですが、フロー図や構成図が挿入されるだけで、読者の理解度も滞在時間も大きく改善します。

image_gen.pyは以下の4ステップで動作します。

  1. Claudeが記事を分析して挿入箇所とMermaidコードを生成：生成済みの記事HTMLをClaude APIに渡し、「図解があると理解しやすい箇所を2〜3か所特定し、それぞれにMermaidダイアグラムコードを生成してください」と指示します。Claudeは記事の見出し構造を読み取り、各見出し直後に挿入すべきダイアグラムの種類（フローチャート、シーケンス図、構成図など）を判断してMermaidコードを返してくれます。
  2. mermaid.inkでPNG画像にレンダリング：生成されたMermaidコードをBase64エンコードし、https://mermaid.ink/img/{base64エンコードされたコード} というURLにGETリクエストを送信します。レスポンスとしてPNG画像のバイナリデータが返ってくるので、これをローカルに一時保存します。
  3. WordPressメディアライブラリにアップロード：保存したPNG画像をWordPress REST APIの /wp-json/wp/v2/media エンドポイントにPOSTリクエストで送信します。アップロードが成功すると、WordPress上の画像URLが返ってきます。
  4. 記事HTMLの見出し直後に<figure>で挿入：Claudeが指定した挿入箇所（見出しの直後）に、<figure><img src="WordPress上の画像URL" alt="説明文"><figcaption>図：説明文</figcaption></figure> という形式でHTMLを挿入します。

これらの作業を自動で行ってくれるようになります。

図解が不要な場合

もし図解が不要であれば、プロンプト内の画像生成部分を削除するだけでOKです。

なぜMermaidを使うのか

画像生成AIを使って図解を作る方法もありますが、今回あえてMermaidを選んだ理由は「テキストが文字化けしない」ことです。画像生成AI（DALL-Eやstable diffusionなど）で図解を作ると、図中の日本語テキストが崩れたり読めなかったりするケースが非常に多いです。

一方、MermaidはSVGベースのダイアグラムをコードで記述するため、ノードやラベルに書かれたテキストが正確にレンダリングされます。技術記事の図解には「正確な文字情報」が不可欠なので、Mermaidとの相性は抜群でした。

実際に生成されるMermaidコードの例を示しておきます。

graph TD
    A[app.py実行] --> B[article_gen.py: 記事生成]
    B --> C[image_gen.py: 図解生成・挿入]
    C --> D[wp_uploader.py: WordPress下書き投稿]
    D --> E[管理画面で最終確認・公開]

このようにシンプルなテキストで構造図が定義でき、mermaid.inkを経由するだけでPNG画像に変換されます。APIキーも不要で、完全に無料で使える点も大きなメリットです。

最終確認は手動にした理由と実際の公開フロー

なぜ完全自動公開にしなかったか

ここまで自動化を進めると、「公開ボタンも自動で押せばいいのでは？」と思うかもしれません。技術的には可能です。WordPress REST APIのステータスを「draft」から「publish」に変更するだけで実現できます。

しかし、私はあえて最終公開を手動にしました。その理由は２つあります。

  1. AIの誤情報リスク：Claude APIが生成する記事は高品質ですが、100%正確とは限りません。技術的な手順が微妙に間違っていたり、バージョン情報が古かったりするケースがあります。公開前に人間の目でファクトチェックすることで、読者に誤った情報を届けるリスクを排除しています。
  2. SEOタイトル・メタディスクリプションの調整：AIが生成したタイトルはそのまま使えることが多いですが、検索意図とのズレがないか、競合記事のタイトルと差別化できているかを確認し、必要に応じて調整します。

自動化の範囲と手動の範囲

最終的に、自動化の範囲と手動の範囲を以下のように切り分けました。

自動化する範囲（python app.pyの一発実行で完了）：

  1. Claude APIによる約5000文字のHTML記事生成
  2. 記事内容の分析と図解ダイアグラム（Mermaid）の自動生成
  3. mermaid.inkでのPNG画像変換
  4. WordPressメディアライブラリへの画像アップロード
  5. 記事HTMLへの図解挿入
  6. アフィリエイトリンクの自動挿入
  7. WordPress REST APIへの下書き（draft）保存

手動で行う範囲：

  1. WordPress管理画面で下書き記事を開く
  2. 記事内容のファクトチェック（技術的な正確性の確認）
  3. アフィリエイトリンク前後の文脈チェックと微調整
  4. SEOタイトル・メタディスクリプション・スラッグの最終調整
  5. アイキャッチ画像の設定（必要に応じて）
  6. 公開ボタンを押す

このバランスが実運用でちょうどいい理由

この「下書きまで自動・公開は手動」というバランスが、実運用では最もストレスが少ないと感じています。記事執筆の中で最も時間がかかるのは「ゼロから文章を書く」工程であり、そこをAIに任せることで作業時間は体感で8割削減できました。

一方で、最終確認という「人間にしかできない品質チェック」を挟むことで、読者に対する責任を果たせます。「AIが書いたから間違ってるかもしれません」では通用しない以上、この最後のチェック工程は省略すべきではないと考えています。

実際の運用では、app.pyを実行してから公開までの所要時間は約15〜20分です。記事をゼロから書くと3〜5時間はかかっていたので、圧倒的な時短になっています。

まとめ

今回は、Claude Codeを使ってWordPress記事自動投稿システムをゼロから構築した全過程をお伝えしました。改めてポイントを振り返ります。

  1. Claude Codeはターミナルで動くAIコーディングアシスタントで、複数ファイルにまたがるシステム開発に特に強い
  2. 最初のプロンプトでシステム全体の設計図を渡すことで、一貫性のあるコードが一括生成される
  3. エラーが出たらエラー文をそのままAIに投げるのが最速の解決法。WordPress認証エラーもこの方法で即解決できた
  4. Mermaidによる図解自動挿入で、記事の読みやすさと滞在時間を向上させられる
  5. 下書きまで自動・公開は手動のバランスが、品質と効率の両立に最適

プログラミング経験が浅い方でも、Claude Codeに適切なプロンプトを渡せば、ここまでのシステムを構築できます。AIは完璧ではありませんが、「コードを書く」「エラーを直す」「繰り返し作業を自動化する」という領域では、もはや人間の手作業を圧倒しています。

もしこの記事を読んで「自分もやってみたい」と感じたら、まずはClaude Codeのインストールから始めてみてください。最初の一歩さえ踏み出せば、あとはAIが伴走してくれます。

また、ブログを始めるにはサーバーの準備も必要になります。迷ったら、速度・安定性ともにバランスの良いXServerがおすすめです。WordPressも簡単に始められます。

この記事が、あなたのブログ運営の効率化に少しでも役立てば幸いです。質問があればコメント欄やSNSでお気軽にどうぞ。

コメント

タイトルとURLをコピーしました