WordPressをMarkdown形式で使いたい(2)

WordPressをMarkdown形式で使いたい(2) — WordPress, Markdown, Gutenberg AIテキスト
2026.03.02

こんにちは、パレイド技術部です。

前回の続きで、WordPressへの画像アップロード機能を拡張します。 WPEMBEDPH0000

今回からシリーズで、WordPressの編集性能を上げる工夫を進めます。

Markdown上の取り扱い

Markdown形式では、画像のリンクは![alt text](URL or file path)のように記述します。 運用上は、記事のMarkdownファイルに直接画像をコピペして使うことが多いでしょう。 VS CodeはデフォルトではMarkdownの画像は表示されませんが、プレビューの拡張機能を入れると便利です。 pareido.jp では Markdown Preview Enhanced を利用しています。

WordPress への本音

pareido.jp では WordPress を利用していますが、WordPressでの記事管理、特に Gutenberg エディタの編集性が記事更新のネックになっています。 編集途中にカーソルが飛んだり、「戻す」やブロックの削除といった操作も直感的な動作をしません。 ユーザー体験は良くないというのが正直な感想です。

Gutenbergも登場からだいぶ経ちますが、良くも悪くも一貫しており、今後も改善が見込めるかと言われると難しそうに感じます。

Markdown で 編集したい

普段は Obsidian や VS Code でメモ書きを管理しており、ここから WordPress にコピペによって転記しています。 また、途中の下調べやファクトチェック、文章の推敲のため、ChatGPT などのAIツールへのコピペも頻繁に行います。 普段使いがChatGPTのため、Gemini等も使いづらい。ChatGPT Atlasの登場で少し楽になりましたが、Atlas自体の完成度や結局のところのWordPressの使いにくさが目立ちます。

Markdown であれば使い慣れたエディタの環境で編集が可能で、他とのコピペもかなりスムーズになります。 また、今後開発を進めるAI編集者との共同作業への柔軟な対応も期待できます。

AI支援でのツール開発に光明

実は以前から何度か、Markdownでの相互運用はトライしています。 最後の挑戦は半年ほど前、GPT4mini の世代でコード支援を利用して実装を進めました。 しかしまだハルシネーションも多く、コード数が数ファイルを超えるとプロジェクト管理が破綻し、途中で断念しました。

Markdown のインポートを行うプラグインも試しましたが、更新が止まっていたり有料だったりと、安心して使えるものがなかなか見当たりません。 Claude Code に相談してみたところ実装可能とのことで、早速試してみます。 当時もGPT4miniは気軽にそう答えてくれたことを微かに思い出しつつ…

まずは当時を思い出しながら仕様を決めていきます。 幸い、今の世代のAIによるコード支援はプロジェクト管理の能力が格段に上がっているため、継ぎ足し方式での拡張もリファクタリングも問題ないでしょう。 欲張らず、少しずつ機能を足していくアプローチをとります。

WordPress と ローカルの Obsidian vault または VS Code のプロジェクトで同期ができること

今回の用途では、編集はローカルのファイルシステムとMarkdownが扱えるエディタでほとんどを済ませます。 ただ、装飾やプラグイン、ちょっとしたメンテナンスの編集にGutenbergを使うことはあるため、相互に可能な状態を目指します。

WordPress上での編集を諦めたり、クラシックエディタを使うと実装は簡単なのですが、Gutenbergはブロックの扱いに癖があり、また頻繁に仕様が変更されることも難しさの一因です。 また、REST APIでそのまま記事を取得すると、WordPressのブロックタグ<!-- wp:xxx -->がHTMLタグに展開されてしまいます。これはcontext=editパラメータを指定して取得するとrawの状態、つまりブロックタグを残した状態で取得ができます。

MDファイルのアップロード

WordPressの見出しや引用等に対応するため、MDファイルの基本的な形式をそのまま反映できるものとします。 また、編集やアップロードに必要なWordPressの管理情報はfrontYAMLとしてMDファイルの先頭に追記します。

見出しは主にH2〜H5を利用します。ブログ記事の場合はH1はタイトルに使われます。 記事の最後に対応する記法の例を載せておきます。

カテゴリとタグの編集

WordPressでは、カテゴリやタグはIDとなる番号で識別されています。 別途APIで取得し、IDと文字列を辞書で相互に変換する必要があります。 新規のタグやカテゴリの追加もできると便利でしょう。カテゴリは大きな変更になるので、手作業のミスを鑑みてユーザーの確認を取るべきかもしれません。

その他WordPressブロックのパススルー

WordPressは拡張プラグインでブロック定義が無数に増える仕組みです。 pareido.jp では cocoon を利用していますが、ブログカード、マーカーによるハイライト、タブボックスなどがそれにあたります。 この辺りはネイティブにサポートを増やすと大変なので、タグをそのまま変換せずMDファイルでも取り扱えるようにしました。 ハイライトはタグをいちいち打つのは不便なので、何か簡易な方法があってもいいかもしれませんが今後のToDoとします。

画像はちょっと難しい

画像はアップロードが簡単ではないのでまた別途考えることにします。 また、アイキャッチ（サムネイル）は既存ツールを活用して凌ぎます。将来的には統合したい。

https://pareido.jp/ai-thumbnail-automatic-generation
pareido.jp

まとめ

WordPressの編集体験に不満を感じつつも、長年の資産やプラグインの豊富さから離れるのは現実的ではありません。そこで、普段使い慣れたMarkdownエディタで執筆し、ツールでWordPressと同期する仕組みを作ることにしました。

今回の記事では方針を整理しましたが、実際にClaude Codeを使って変換ツールを実装し、見出し・リスト・コードブロック・ブログカードなど主要なブロックの往復変換ができるところまで確認しています。画像の扱いやCocoon固有ブロックの対応など課題は残りますが、日常的な記事更新のワークフローとしては十分実用的な手応えがあります。

次回以降、実装の詳細や実際の運用で見えてきた課題について掘り下げていく予定です。

参考）MarkdownとWordpressの変換例

下記は Claude Code に実装してもらったイメージです。 編集画面で無事にマッピングがされています。

WordPressのスクショ貼る alt text

Markdownの原文です。１記事＝１ファイルとしています。

---
title: "【テスト】Gutenbergブロック往復検証記事"
slug: test-gutenberg-roundtrip
status: draft
date_publish: "2026-03-18"
category:
  - テスト
tags:
  - テスト
  - Gutenberg
  - Markdown
---

# 【テスト】Gutenbergブロック往復検証記事

この記事はWordPress ↔ Markdown の**往復変換テスト**用です。各ブロックタイプが正しく変換されるか確認します。

## H2見出し：段落と装飾

通常の段落テキストです。**太字**、*イタリック*、~~打ち消し~~、`インラインコード` を含みます。

[リンクテキスト](https://pareido.jp/)はこのように書きます。複数の装飾を**組み合わせた*太字イタリック***も確認します。

## H2見出し：リスト

### H3見出し：箇条書き

- 箇条書き項目1
- 箇条書き項目2
    - ネスト項目2-1
    - ネスト項目2-2
- 箇条書き項目3

### H3見出し：番号付きリスト

1. 番号付き項目1
2. 番号付き項目2
3. 番号付き項目3

## H2見出し：引用とコード

### H3見出し：ブロック引用

> これはブロック引用のテキストです。
> 複数行にわたる引用も含みます。

### H3見出し：コードブロック（Python）

```python
def hello_world():
    """シンプルなテスト関数"""
    message = "Hello, WordPress!"
    print(message)
    return message

result = hello_world()

H3見出し：コードブロック（Shell）

cd /path/to/project
python wp_downloader.py --post-id 123 --output ./test/

H2見出し：テーブル

カラム1 カラム2 カラム3
セルA セルB セルC
セルD セルE セルF
セルG セルH セルI

H2見出し：区切り線

上記のコンテンツと下記のコンテンツを区切ります。

区切り線の後の段落です。

H2見出し：画像

H3見出し：外部画像URL

テスト画像

H3見出し：画像なし（altテキストのみ）

画像が存在しない場合のフォールバック確認用。実際の画像パスに差し替えてテストしてください。

H2見出し：埋め込みとブログカード

H3見出し：ブログカード（有効URL）

https://pareido.jp/ai-thumbnail-automatic-generation
pareido.jp

H3見出し：ブログカード（なし）

H2見出し：H4以下の見出し

H4見出しのテスト

H4レベルの見出しです。level属性が正しく付与されるか確認します。

H5見出しのテスト

H5レベルの見出しです。

H2見出し：長文段落

Gutenbergブロックエディタは2018年にWordPress 5.0で導入されました。従来のクラシックエディタに代わり、コンテンツをブロック単位で管理する新しいパラダイムを採用しています。各ブロックは独立したHTMLコメント <!-- wp:ブロック名 --> で囲まれており、REST APIを通じてこの形式のままやり取りすることが可能です。

この往復テストの目的は、Markdown形式で記述した記事をWordPressにアップロードし、WordPress APIの context=edit パラメータを使って生のGutenbergマークアップを取得し、再びMarkdownに変換した際に元の内容が保持されることを確認することです。

段落が複数にわたるケースも確認します。改行を含む複数文からなる段落は、HTMLの <p> タグひとつに対応します。Markdownでは空行が段落の区切りになります。 “`

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