Claude CodeからWordPressの記事を作成・編集してみた

2026.02.03 09:00
2026.03.16 13:32

前回の記事（Claude CodeからWordPressの記事一覧を取得してみた）では、MCP（Model Context Protocol）を使ってClaude CodeからWordPressに接続し、記事一覧を取得するところまでやりました。

今回はその続きで、実際に記事の作成・編集をClaude Codeからやってみます。
さらに、毎回同じ手順を踏むのが面倒になったので、スキル（スラッシュコマンド）として自動化した話もまとめます。

記事を作成してみる

Claude Codeに「記事を作って」と頼むと、WordPress MCPの wp_create_post ツールを使って記事を投稿してくれます。

たとえばこんな感じで指示します。

「Dockerで開発環境を作る」というタイトルで記事を書いて。カテゴリはPHPで。

すると、Claude Codeが内容を考えて、Gutenbergブロック形式のHTMLを組み立てて、下書きとして投稿してくれます。

内部的には、こんなリクエストが飛んでいます。

{
  "title": "Dockerで開発環境を作る",
  "content": "<!-- wp:paragraph --><p>記事の内容...</p><!-- /wp:paragraph -->",
  "status": "draft",
  "categories": [4]
}

投稿が完了すると、記事IDやプレビューURLが返ってきます。ブラウザで管理画面を開かなくても、ターミナルだけで記事が作れるのは新鮮でした。

記事を編集してみる

作った記事を修正したいときは、wp_update_post を使います。

記事ID:10506 に「ハマったポイント」のセクションを追加して

Claude Codeは既存の記事を wp_get_post で取得して、内容を読み取ったうえで指示どおりにセクションを追加し、wp_update_post で更新してくれます。

タイトルやカテゴリの変更、タグの追加なども同じ要領で、自然言語で指示するだけです。

スキル化してみた

何度か記事を作っているうちに、毎回同じことを伝えるのが面倒になってきました。

  • 「Gutenbergブロック形式で書いて」
  • 「コードブロックはHCBプラグインの形式で」
  • 「下書きで投稿して」
  • 「タグも設定して」

そこで、Claude Codeのスラッシュコマンド機能を使って、これらの手順をスキルとしてまとめました。

プロジェクトの .claude/skills/ ディレクトリに、Markdownファイルでスキルを定義します。

# WordPress記事作成・編集スキル

## モード判定
- 作成モード: 新しい記事を作る場合
- 編集モード: 既存記事を編集する場合

## 手順
1. WordPress認証確認
2. Gutenbergブロック形式でコンテンツ作成
3. セルフレビューで品質チェック
4. 下書きとして投稿
5. タグの自動設定
6. 完了報告

これを .claude/skills/wp-post/SKILL.md として置いておくと、ターミナルで /wp-post と打つだけでスキルが呼び出せるようになります。

/wp-post タイトル「SCSSのmixinまとめ」、内容はよく使うmixinの紹介、カテゴリはHTML・CSS

認証確認からタグ設定まで、すべて自動でやってくれます。作成だけでなく、編集モードも同じスキルに統合しました。

/wp-post 記事ID:10506 ハマったポイントのセクションを追加して

引数の内容から作成か編集かを自動判定してくれるので、使い分けを意識する必要もありません。

ハマったポイント

記事の作成・編集自体はスムーズにできたのですが、Gutenbergのブロック形式でいくつかハマりました。

クラシックエディタになってしまう

最初に作った記事をWordPressの編集画面で開いたら、Gutenbergではなくクラシックエディタとして表示されていました。

原因は、コンテンツにGutenbergのブロックコメント（<!-- wp:paragraph --> など）を付けていなかったことです。素のHTMLだけだと、WordPressはクラシック形式として認識します。

すべての要素をブロックコメントで囲むことで解決しました。

コードブロックでバリデーションエラー

Gutenberg形式にしたら、今度はコードブロックで「このブロックには、想定されていないか無効なコンテンツが含まれています」というエラーが出ました。

このブログでは Highlighting Code Block（HCB） というプラグインを使っています。Gutenbergは、ブロックの保存時HTMLとエディタ上のHTMLを比較して、一致しない場合にエラーを出します。

つまり、HCBプラグインが期待する正確なHTML構造でないとダメなのです。

HCBブロックの正しい書き方

実際にGutenbergエディタでHCBブロックを作り、コードエディターで確認したところ、正しい形式はこうでした。

<!-- wp:loos-hcb/code-block {"langType":"json","langName":"JSON"} -->
<div class="hcb_wrap"><pre class="prism line-numbers lang-json" data-lang="JSON"><code>コード内容</code></pre></div>
<!-- /wp:loos-hcb/code-block -->

ポイントは3つありました。

  • pre のクラスは undefined-numbers（line-numbers ではない）
  • ブロックコメントの属性（langType, langName）とHTML側の属性（lang-*, data-lang）を一致させる
  • コード内の " や < はHTMLエンコードが必要

これらをスキルのルールに組み込んだことで、以降は正しいフォーマットで自動出力されるようになりました。

使ってみた感想

前回の「一覧取得」だけでも便利でしたが、作成・編集までできるようになると実用度が一気に上がりました。

  • 記事の骨格を作るのが速い（構成を考えてもらえる）
  • コードブロックの形式を覚えなくていい（スキルが正しい形式で出す）
  • タグやカテゴリの設定まで一気にやってくれる
  • セルフレビュー機能で投稿前にチェックが入る

一方で、Gutenbergのブロック形式は細かいルールが多く、最初はかなり試行錯誤しました。特にプラグイン独自のブロック（今回のHCBなど）は、実際にエディタで作ったHTMLを見て正解を確認する必要がありました。

ただ、一度スキルに正しいルールを組み込んでしまえば、あとは何も考えなくて済みます。
この記事自体も、実はそのスキルを使って作成しています。

今回は以上です！