MENU
  1. ホーム
  2. AI 活用・効率化
  3. Markdown原稿をAIでSWELLブロックに変換して投稿する方法｜Claude Codeの実例

Markdown原稿をAIでSWELLブロックに変換して投稿する方法｜Claude Codeの実例

PR
AI 活用・効率化
Markdown原稿をSWELLブロックに変換してWordPressへ下書き投稿

Markdownで書いた原稿をWordPressへ移すと、見出しや段落の設定、SWELLブロックの追加といった作業が必要になります。

Claude Codeを使えば、Markdown原稿をWordPress標準ブロックとSWELL独自ブロックへ変換し、下書きとして保存できます。見出しや段落も個別のブロックとして保存されるため、投稿後は通常の編集画面から修正できます。

この記事では、WordPressで作ったSWELLブロックを見本としてClaude Codeへ渡し、Markdown原稿の変換から下書き保存まで進める方法を紹介します。

※SWELLの固定ページをClaude Codeで作る方法は、別の記事で紹介します。

※WordPressやSWELLの仕様は変わることがあります。本記事は2026年9月時点の内容です。

目次

Markdownをそのまま送ると、あとから編集しにくくなる

原稿全体を「カスタムHTML」ブロックへ貼り付けたり、HTMLのままREST APIで送ったりすると、画面にはきちんと表示されます。ただし、見出しや段落が1つのHTMLとしてまとまるため、あとから見出しや段落だけを直しにくくなります。SWELLのステップやアコーディオンも、普段の編集画面と同じようには扱えません。

原因は、ブロックを区切るコメントがないことです。WordPressのブロックは、HTMLとブロックを識別するコメントを組み合わせて保存されます。コメントがなければ、WordPressのparse_blocks()で解析した場合も、ブロック名を持たない部分として扱われます。

そこで、Markdown原稿を次の形に変換してから送ります。

  • 見出しは「見出しブロック」
  • 本文は「段落ブロック」
  • 箇条書きは「リストブロック」
  • コードは「コードブロック」
  • 手順は「SWELLのステップブロック」

見出し・段落・リスト・コードはWordPress標準ブロック、手順はSWELL独自ブロックです。この形で下書きにしておけば、投稿後もWordPressの編集画面からブロック単位で修正できます。

実際に見つかった問題

この方法を整理するきっかけは、WordPressへ送った下書きの多くが、期待したブロック形式になっていなかったことです。

変換用の関数は用意していましたが、SWELLのステップ部分にしか使われておらず、通常の見出しや段落は、区切りのないHTMLのまま送られていました。

たとえば、ある下書きには<p>が87個ありましたが、<!-- wp:paragraph -->は5個しかありませんでした。

「変換する関数があること」と、「本文全体がその関数を通っていること」は別です。見た目だけでは気づきにくい問題なので、機械的に確認できる部分はコードで止めるようにしています。その方法は、後半の「エラーを防ぐために送信前に検査する」で紹介します。

WordPressブロックへ変換して下書き保存する流れ

作業は、次の5つの手順で進めます。

  1. WordPressで見本となるSWELLブロックを作成する
  2. コードエディターを開き、保存されている記述をコピーする
  3. Claude Codeに見本を渡し、Markdown原稿を変換するスクリプトを作成する
  4. WordPress REST APIを使って下書きとして送る
  5. 編集画面とプレビューで表示を確認する
AIが書いたMarkdown原稿がHTML変換とブロックの区切りを経てREST APIで下書きになるまでの流れを示した図

この作業で重要なのは、SWELLブロックの記述をAIに推測させないことです。

保存されるHTMLや属性は、SWELLのバージョンやブロックの設定によって変わる可能性があります。自分のWordPressで作成したブロックを見本としてClaude Codeに渡し、その記述に合わせて変換させます。

Claude Codeへの依頼文は、各STEPの中で紹介します。SWELLやWordPressの環境によって生成結果は変わるため、エラーが出た場合は指示を追加して調整してください。

準備するもの

この記事の方法では、次のものを使います。

  • Markdownで書いた原稿ファイル
  • SWELLを使用しているWordPressサイト
  • Claude Code
  • Python 3
  • Pythonのmarkdownとrequestsライブラリ
  • WordPressのアプリケーションパスワード

Pythonライブラリは、作業用フォルダで次のコマンドを実行して用意します。

python3 -m pip install markdown requests

いきなり公開中の記事で試さず、最初は新しい下書きかテスト環境を使ってください。

STEP 1｜WordPressで見本のSWELLブロックを作成する

まず、WordPressの編集画面で、AIに生成させたいSWELLブロックを1つ作成します。

ステップブロックを使いたい場合は、次のような簡単な見本で構いません。

  • STEP 01：下書きを作成する
  • STEP 02：内容を確認する

タイトルと本文を入力し、普段使いたいデザインや設定も選びます。

見本は1種類ずつ作成します。ステップ、アコーディオン、キャプション付きブロックを一度に置くと、どこからどこまでが目的のブロックなのか分かりにくくなります。

STEP 2｜コードエディターから記述をコピーする

見本を作ったら、編集画面右上の「オプション」を開き、「コードエディター」へ切り替えます。

ショートカットでも切り替えられます。

  • Mac：Shift + Option + Command + M
  • Windows：Ctrl + Shift + Alt + M

コードエディターには、ブロックが実際に保存される形で表示されます。

ブロックコメントの仕組み

WordPressのブロックは、HTMLとブロックを識別するためのコメントを組み合わせて保存されます。段落ブロックは、次のような記述です。

<!-- wp:paragraph -->
<p>ここが本文です。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->が段落ブロックの開始、<!-- /wp:paragraph -->が終了を表します。WordPressの公式ドキュメントでも、ブロックはHTMLコメントによって区切られた状態で保存されると説明されています。

参考：Markup representation of a block – Block Editor Handbook

HTMLだけでもWebページには表示できますが、ブロックを示すコメントがなければ、見出しや段落などの個別ブロックとして認識されません。投稿後もブロックエディターから編集するためには、HTMLだけでなく、開始・終了コメントを含めて生成する必要があります。

SWELLのステップブロックの記述

SWELLのステップブロックでは、次のようにloos/から始まるブロック名が使われます。

<!-- wp:loos/step -->
...
<!-- wp:loos/step-item {"stepLabel":"STEP","theNum":"01"} -->
...
<!-- /wp:loos/step-item -->
...
<!-- /wp:loos/step -->

この記述を、途中で省略せずにコピーします。特に確認したいのは次の3点です。

  • <!-- wp:loos/... -->に書かれているブロック名
  • 波かっこ {} 内の設定値
  • HTML側のclass名やdata-numなどの属性

設定値とHTMLの属性が対応している場合は、両方を同じ値にします。片方だけを変更すると、編集画面で正しく認識されなかったり、表示が崩れたりすることがあります。

よく使うSWELLブロックの名前

このサイトで確認した主なブロック名は次のとおりです。

SWELLのブロック投稿本文に保存される名前
ステップloos/step、loos/step-item
アコーディオンloos/accordion、loos/accordion-item
ブログパーツloos/blog-parts
キャプション付きブロックloos/cap-block

ただし、この表だけを使ってHTMLを組み立てるのではなく、自分の環境のコードエディターに表示された記述を見本にしてください。

見本をファイルに保存して、Claude Codeへ指定する

コピーした記述は、たとえばsamples/swell-step.htmlという名前で保存します。そのうえで、Claude Codeへ次のように依頼します。

samples/swell-step.html を読み込んでください。

このファイルには、自分のWordPressで作成したSWELLのステップブロックを、
コードエディターからコピーして保存しています。

SWELLブロックの記述を推測せず、
見本と同じ構造・属性・class名で生成してください。

見本のファイル名と、そのファイルをどのように使うのかを明記します。

「SWELLのステップブロックを作って」とだけ依頼すると、一般的なHTMLをもとに、存在しない記述が生成されることがあります。自分のWordPressから取得した記述を参照させることで、実際のブロックに合わせて生成できます。

STEP 3｜Claude Codeに変換スクリプトの作成を依頼する

見本を読み込ませたら、Markdown原稿をWordPress標準ブロックとSWELL独自ブロックへ変換するPythonスクリプトを依頼します。変換の条件は次のように伝えます。

Markdownで書いた記事を、WordPressのブロック形式へ変換するPythonスクリプトを作ってください。

要件：
- 見出し、段落、箇条書き、番号付きリスト、コードをWordPress標準ブロックにする
- 手順部分はSWELLのステップブロックにする
- SWELLブロックの記述は推測しない
- samples/swell-step.html を正しい見本として、その構造・属性・class名に合わせる
- ブロックの開始と終了が対応しているか検査する
- WordPressへ送るときは必ず下書きにする
- 既存のファイルは変更せず、新しいスクリプトとして作成する

変換する内容だけでなく、変更してよい範囲も指定します。この例では、既存ファイルを変更せず、新しいスクリプトとして作成するよう依頼しています。

「SWELLのステップブロックを書いて」だけでは、Claude Codeが一般的なHTMLから形を推測する可能性があります。実際の見本ファイルを指定し、「これを正解として使う」と伝えることが重要です。

スクリプトの役割

Claude Codeが作るスクリプトは、大きく次の2つの処理に分かれます。

  • MarkdownをHTMLにしたあと、見出し・段落・リスト・コードを、それぞれWordPress標準ブロックのコメントで囲む
  • 手順の部分を、見本と同じ構造のSWELLステップブロックに組み立てる

標準ブロックの変換は、たとえば見出しなら次のような処理です。<h2>〜<h4>を探し、見出しブロックの開始・終了コメントで囲みます。

def wrap_headings(html):
    def replace_heading(match):
        level, text = match.group(1), match.group(2)
        attrs = "" if level == "2" else f' {{"level":{level}}}'
        return (
            f'<!-- wp:heading{attrs} -->\n'
            f'<h{level} class="wp-block-heading">{text}</h{level}>\n'
            '<!-- /wp:heading -->'
        )
    return re.sub(r"<h([234])>(.*?)</h\1>", replace_heading, html, flags=re.S)

たとえば、次のMarkdownを渡します。

## 見出し

ここが本文です。

変換後は次の形になります。

<!-- wp:heading -->
<h2 class="wp-block-heading">見出し</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>ここが本文です。</p>
<!-- /wp:paragraph -->

段落・リスト・コードも、同じ考え方で開始・終了コメントを付けます。入れ子になったリスト、表、引用、画像などを使う場合は、追加の変換処理が必要です。複雑なHTMLを正規表現だけで変換すると、意図しない場所まで置換することがあります。実際の運用では、使うMarkdownの書き方を絞るか、HTMLパーサーを使った処理も検討してください。

SWELLのステップブロックは、自分の環境からコピーした見本に合わせて組み立てます。このサイトで確認したステップ1つ分は、次のような構造でした。

<!-- wp:loos/step-item {"stepLabel":"STEP","theNum":"01"} -->
<div class="swell-block-step__item">
<div class="swell-block-step__number u-bg-main" data-num="01">
<span class="__label">STEP</span>
</div>
<div class="swell-block-step__title u-fz-l">タイトル</div>
<div class="swell-block-step__body">本文</div>
</div>
<!-- /wp:loos/step-item -->

スクリプトは、この形の番号とタイトル、本文だけを差し替えながら、手順の数だけステップを並べます。SWELLを更新したあとや、別のサイトで使う場合は、もう一度見本を取り直してください。テーマのバージョンや設定が違えば、同じ記述になるとは限りません。

STEP 4｜WordPressへ下書き保存する

作ったブロックは、WordPress REST APIを使って投稿できます。

アプリケーションパスワードを発行する

WordPress管理画面の「ユーザー」から自分のプロフィールを開き、「アプリケーションパスワード」で新しいパスワードを発行します。

これは普段のログインパスワードとは別のものです。WordPress 5.6以降では、HTTPSのサイトで利用できます。

参考：Authentication – REST API Handbook

発行した値を、Claude Codeの会話やPythonファイルへ直接書かないでください。環境変数など、公開されない場所から読み込みます。

次はMacのターミナルで一時的に設定する例です。アプリケーションパスワードは入力中の文字が画面に出ず、コマンド履歴にも値そのものを残しません。

export WP_URL="https://example.com"
export WP_USERNAME="ユーザー名"
read -s WP_APP_PASSWORD
export WP_APP_PASSWORD

read -s WP_APP_PASSWORDを実行したら、アプリケーションパスワードを貼り付けてEnterキーを押します。

この方法で設定した値は、ターミナルを閉じると消えます。継続して使う場合は、1Passwordなどの認証情報を管理できる仕組みから、実行時だけ渡す方法もあります。また、投稿専用ユーザーを用意する場合は、必要以上に強い権限を与えないようにします。

REST APIで下書きを作成する

送信の中心になるのは、次の部分です。変換したブロックをcontentに渡し、statusにはdraftを指定します。

response = requests.post(
    f"{wp_url}/wp-json/wp/v2/posts",
    auth=HTTPBasicAuth(wp_username, wp_app_password),
    json={
        "title": "記事タイトル",
        "content": content,
        "status": "draft",
    },
    timeout=30,
)
response.raise_for_status()

投稿状態には、必ずdraftを指定します。コードを読んだときにも「下書きとして送る」という意図が分かり、誤って公開状態を指定するのを防げます。

参考：Posts – REST API Handbook

送信後の内容を読み返す

投稿できたら、保存された本文をREST APIから読み返します。context=editを付けると、保存されている編集用の本文をcontent.rawで確認できます。

response = requests.get(
    f"{wp_url}/wp-json/wp/v2/posts/{post_id}",
    auth=HTTPBasicAuth(wp_username, wp_app_password),
    params={"context": "edit"},
    timeout=30,
)
saved_content = response.json()["content"]["raw"]

Claude Codeへの依頼文

送信と読み返しは、次のようにまとめて依頼できます。

変換した記事を、WordPress REST APIを使って下書きとして保存してください。

条件：
- 投稿ステータスは draft にする
- 公開はしない
- 保存後、投稿内容をAPIから再取得する
- 再取得した編集用の本文と、送信前に生成したブロックの記述を比較する
- 内容に違いがある場合は、変更された箇所を表示する

確認するときに比較するのは、変換前のMarkdown原稿ではありません。送信前に生成したブロックの記述と、WordPressから再取得した編集用の本文を比較します。これにより、送信時に本文の一部が欠けたり、記述が変わったりしていないかを確認できます。

STEP 5｜編集画面とプレビューで確認する

REST APIへの送信が成功しても、作業は終わりではありません。

WordPressの下書きを開き、次を確認します。

  • 見出しや段落を個別に選択できるか
  • SWELLのステップが通常の編集画面で開けるか
  • 「このブロックには、想定されていないか無効なコンテンツが含まれています」と表示されていないか
  • パソコンとスマートフォンのプレビューが崩れていないか
  • 変更していない部分まで書き換わっていないか

ブロックエラーが出る場合は、保存されたHTMLと、そのブロックが期待しているHTMLが一致していない可能性があります。WordPress公式も、ブロックが想定するマークアップと実際のHTMLが一致しないと、無効なコンテンツとして扱われることがあると説明しています。

参考：Block Error: Unexpected or Invalid Content – WordPress.org

エラーが出たときは、その場で「修復」を押す前に、STEP 1で作った見本と生成結果を比較してください。Claude Codeには、表示された症状をそのまま伝えます。

WordPressの編集画面で記事を開くと、
Q&Aブロックの回答が表示されません。

すぐに修正せず、生成した記述と見本を比較して、
原因を特定してください。
原因が分かったら、必要な箇所だけを修正してください。

症状、確認してほしい内容、変更してよい範囲を分けて伝えると、原因を確認しながら修正を進められます。

エラーを防ぐために送信前に検査する

ブロックの開始コメントだけがあり、終了コメントが抜けていると、投稿全体の構造が崩れます。記述が崩れたまま送信すると、編集画面で「このブロックには、想定されていないか無効なコンテンツが含まれています」と表示されることがあります。

そこで、WordPressへ送る前の検査もClaude Codeへ依頼します。

変換後、WordPressへ送信する前に次の項目を検査してください。

- ブロックの開始コメントと終了コメントが対応しているか
- ブロックの入れ子が崩れていないか
- 閉じられていないHTMLタグがないか

問題が見つかった場合は送信を中止し、
該当するブロックと問題の内容を表示してください。

検査の中心になるのは、開始コメントを順番に積み、終了コメントが来たら取り出して照合する処理です。自己終了型のブロックにも対応させます。

def validate_block_comments(content):
    stack = []
    for closing, name, tail in BLOCK_COMMENT.findall(content):
        if not closing and tail.rstrip().endswith("/"):
            continue  # 自己終了型
        if not closing:
            stack.append(name)
        elif not stack or stack[-1] != name:
            raise ValueError(f"ブロックの終了位置が不正です: {name}")
        else:
            stack.pop()
    if stack:
        raise ValueError(f"閉じられていないブロックがあります: {stack}")

エラーが出た場合は、WordPressへ送らず、生成処理を直します。

この検査で分かるのは、コメントの開始と終了が対応しているかどうかです。SWELLが期待するclass名や属性まで正しいことを保証するものではないため、最後は編集画面で確認します。

編集画面を開いたままAPIで更新しない

WordPressの編集画面を開いたままAPIで本文を更新すると、あとから編集画面で保存した内容によって、API側の変更を上書きする可能性があります。APIで更新する前に編集画面を閉じ、更新後に開き直してください。

最初から公開しない

REST APIで送るときは、必ずstatusをdraftにします。下書きを開き、ブロックエラーとプレビューを確認してから、自分で公開します。

既存の記事は全文置換しない

公開済みの記事を修正する場合は、最初にcontext=editで最新の本文を取得します。古いファイルをもとに全文を送り直すと、WordPress側で加えた変更まで消してしまう可能性があります。対象部分だけを変更し、差分を確認してから送るほうが安全です。

認証情報をコードや会話へ書かない

アプリケーションパスワードをPythonファイルやClaude Codeとの会話に直接書くと、履歴やGitに残る可能性があります。環境変数や1Passwordなどを使い、実行時だけ読み込ませてください。

この方法が向いている人

向いている人

  • 同じ形式の記事を継続して作成する
  • 手順記事でSWELLのステップをよく使う
  • Markdownで書いた原稿をWordPressへ移す作業を減らしたい
  • 投稿後もブロック単位で編集したい

向いていない人

  • 作る記事が1〜2本だけ
  • コードやREST APIを使いたくない
  • 変換後の内容を自分で確認せず、そのまま公開したい

記事数が少ない場合は、生成したブロックHTMLをコードエディターへ手動で貼る方法でも十分です。最初からREST APIまで自動化する必要はありません。

よくある質問

Q. カスタムHTMLブロックでは駄目ですか？

表示するだけなら使えます。ただし、見出しや段落が1つのHTMLとしてまとまるため、あとからブロック単位で編集しにくくなります。

記事全体ではなく、通常のブロックでは表現できない一部分だけに使います。

Q. Claude Code以外のAIでもできますか？

できます。必要なのは、見本ファイルを読み、コードを作成・実行できる環境です。

ただし、この記事ではローカルファイルの参照やPythonの実行まで任せやすいClaude Codeを例にしています。

Q. SWELLブロックの記述をAIに聞くだけでは駄目ですか？

おすすめしません。AIが知っている情報が古かったり、実際には存在しない属性を補ったりする可能性があります。

自分のWordPressで作成した見本を渡し、その形に合わせて生成させるほうが、記述の食い違いを減らせます。

Q. SWELLを更新したら記述は変わりますか？

変わる可能性があります。SWELLを更新したあとは、よく使うブロックを1つ作り、コードエディターの記述が以前と同じか確認してください。

Q. 下書きが正しく表示されないときは、何を確認しますか？

次の順番で確認します。REST APIのレスポンスにエラーが出ていないか、保存されたcontent.rawに本文が入っているか、ブロックの開始と終了が対応しているか、SWELLの見本とclass名・属性が一致しているか、キャッシュを消しても同じ状態か。

まとめ

Markdown原稿を、HTMLのままではなくWordPress標準ブロックとSWELL独自ブロックへ変換して下書き保存すれば、投稿後もブロック単位で編集できます。

  • 自分のWordPressで見本のSWELLブロックを作成する
  • コードエディターから実際の記述をコピーする
  • Claude Codeには、見本を正解として使うように伝える
  • 変換スクリプトで、標準ブロックとSWELL独自ブロックを組み立てる
  • 送る前に、ブロックの開始と終了を検査する
  • REST APIでは必ず下書きとして送る
  • 送信後は編集画面とプレビューを自分で確認する

いちばん大切なのは、SWELL独自ブロックをAIに推測させないことです。

まずはステップブロックを1つだけ作り、コードエディターで記述を確認するところから始めてみてください。見本が1つあれば、Claude Codeへ「この形で増やしてください」と具体的に頼めるようになります。

AIに原稿を書かせてから公開までの進め方は、Claude Codeでブログを運営する方法で紹介しています。

SWELLの子テーマやCSSを安全に調整したい場合は、Claude CodeでSWELLを安全にカスタマイズする方法もあわせてご覧ください。

これからSWELLを導入する場合は、SWELL公式サイトで、この記事に出てきたステップやアコーディオンを含むブロックの一覧を確認できます。

気になったことは、お気軽に

この記事のとおりに進めてみて、うまくいかないところがあれば遠慮なく聞いてください。

制作や設定のご相談も、同じ窓口で受けています。

AI 活用・効率化
AI業務効率化 API Claude Code WordPress ブログ運営
Markdown原稿をSWELLブロックに変換してWordPressへ下書き投稿

この記事が気に入ったら
フォローしてね！

よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

目次