マークダウン記法で書かれたテキストをWordPressでHTMLに変換する方法

マークダウン記法で書かれたテキストをWordPressでHTMLに変換する方法はいくつかあります。お使いのWordPressのエディタの種類によって、最適な方法が異なります。

現在WordPressの主要なエディタは以下の2つです。

ブロックエディタ (Gutenberg): WordPress 5.0以降のデフォルトエディタです。
クラシックエディタ: 以前のWordPressの標準エディタで、プラグインを使って利用している場合があります。

それぞれのケースと、その他の方法について説明します。

ブロックエディタ (Gutenberg) を使用している場合

ブロックエディタには、マークダウンを扱うための機能がいくつか備わっています。

マークダウン記法を直接入力・ペーストして自動変換

多くの基本的なマークダウン記法（見出し、リスト、引用など）は、新しい段落ブロックなどに直接入力したり、他のエディタからコピー＆ペーストしたりすると、対応するブロックに自動的に変換されることがあります。

例: 行頭に # と入力してスペースキーを押すと見出しブロックに、* と入力してスペースキーを押すとリストブロックになります。

マークダウンで書かれたテキストをまとめてペーストした場合も、ある程度は自動でブロックに変換してくれます。

「マークダウン」ブロックを利用する (非推奨・現在はコアにない可能性)

以前は「マークダウン」という専用ブロックがありましたが、現在ではコア機能から削除されているか、他の方法に統合されている可能性があります。

もし利用可能なプラグインなどで追加されていれば、そのブロックにマークダウンを記述・ペーストすることでHTMLとして表示できます。

「カスタムHTML」ブロックを利用する (手動変換が必要)

まず、マークダウンで書かれたテキストを、外部のマークダウンエディタやオンラインの変換ツール（後述します）を使ってHTMLに変換します。

WordPressのブロックエディタで、「+」アイコンをクリックしてブロックを追加します。
検索窓に「カスタムHTML」と入力し、「カスタムHTML」ブロックを選択します。
変換済みのHTMLコードを「カスタムHTML」ブロックに貼り付けます。

キーボードショートカットの活用

ブロックエディタ内では、一部のマークダウン記法に似たキーボードショートカットが利用できます。例えば、## と入力してスペースを押すとH2見出しになります。これを活用するのも一つの手です。

クラシックエディタを使用している場合

クラシックエディタには、標準ではマークダウンを直接HTMLに変換する機能がありません。以下のいずれかの方法を利用します。

テキストエディタ（HTMLエディタ）モードでHTMLを直接貼り付け:

外部のマークダウンエディタやオンラインの変換ツール（後述します）を使って、マークダウンで書かれたテキストをHTMLに変換します。

WordPressのクラシックエディタの編集画面右上にある「テキスト」タブ（または「HTML」と表示されている場合もあります）をクリックして、テキストエディタモードに切り替えます。

変換済みのHTMLコードをテキストエディタに貼り付けます。

マークダウン対応プラグインを利用する:

WordPressには、マークダウンでの記述をサポートするプラグインがいくつかあります。これらのプラグインをインストールして有効化すると、エディタ内でマークダウン記法を使用できるようになります。

代表的なプラグイン:

Jetpack by WordPress.com: 多機能プラグインですが、マークダウンモジュールを有効化することで利用できます。

WP-Markdown (または類似のマークダウンプラグイン): マークダウン専用のプラグインも存在します。WordPressのプラグインディレクトリで「Markdown」と検索して、評価や更新状況の良いものを選んで試してみてください。

プラグインを使用する場合、設定や使い方については各プラグインの指示に従ってください。多くの場合、マークダウンで記述した内容が公開時に自動的にHTMLに変換されます。

外部ツールを使ってHTMLに変換してからWordPressに貼り付ける方法 (共通)

WordPressのエディタの種類に関わらず利用できる確実な方法です。

オンラインのマークダウンエディタ/コンバータを利用する:

ウェブ上には、マークダウンをHTMLにリアルタイムで変換してくれるツールがたくさんあります。

例:

Dillinger (https://dillinger.io/)

StackEdit (https://stackedit.io/)

Markdown Editor – Online (https://i6i6.co.jp/markdown/)

これらのサイトでマークダウンテキストを左側のペインに貼り付けると、右側のペインに変換されたHTMLが表示されます。そのHTMLをコピーします。

デスクトップのマークダウンエディタを利用する:

Typora, Visual Studio Code (拡張機能利用), Marked 2 (macOS) などのデスクトップアプリケーションには、マークダウンをHTMLとしてエクスポートしたり、HTMLコードをコピーしたりする機能があります。

変換したHTMLをWordPressに貼り付ける:

ブロックエディタの場合: 「カスタムHTML」ブロックにペーストします。

クラシックエディタの場合: 「テキスト」モード（HTMLモード）にペーストします。