WordPressでMarkdownを使う

これについてはたくさんの方が書いているのだが、しかし、毎度のことだが、ごくごく簡単で重要なことが無視されている。
Wordpress上でMarkdownを使おうなんてのは、基本的には「無理矢理」なので、単純には解決できない問題も出てきてしまう。

JP Markdownを選択する

JetPackなどという大層なものは不要なので、そこからMarkdown機能のみを抜き出したという、JP Markdownプラグインをインストールする。これは特に何かを設定する必要は無い。

ここが不思議なところなのだが、テキストモードでもヴィジュアルモードでも、基本的にはマークダウンの構文をそのまま使用することができる。しかし、当然問題は出てくる。

行頭の半角スペースが削除されてしまう

テキストモードにて、プログラムコードなどを貼り付ける。これは行頭の半角スペースでインデントされているのだが、一度でもビジュアルモードにすると、すべて削除されてしまう。インデントの無いプログラムコードになってしまうのだ。

これはかなり厳しい。ビジュアルモードにしたい理由は、画像を貼り付けた場合にはテキストモードでは確認できないからなのだが、しかし、この「ビジュアルモードで空白が削除されてしまう」現象を避ける方法が見つからなかった。

もう諦めたので、ビジュアルモードを使うことはやめた。間違ってもビジュアルモードにならないようにするには。wordpressのユーザ＞あなたのプロフィールで、「ビジュアルリッチエディターを使用しない」にチェックを入れればよい。

このため、プレビューでしか画像の確認はできないことになる。もともとMarkdownというのはそのようなものだから、仕方が無いと言えば仕方が無いのだが。

画像の挿入

テキストモードでも相変わらず、wordpressの機能を使い、簡単にドラッグドロップで画像を挿入することはできる。しかしこれは、htmlタグになってしまっており、Markdownの記法にはならない。

この対策としては、例えば、How to insert image in Markdown syntax in WordPressがあった。

単純にfunctions.phpに以下を追加するだけ。

add_filter( 'image_send_to_editor', 'markdown_insert_image', 10, 8 );

function markdown_insert_image( $html, $id, $caption, $title, $align, $url, $size, $alt )
{
    list( $img_src, $width, $height ) = wp_get_attachment_image_src( $id, $size );
    return "![{$title}]({$img_src})";
}

もちろん、このままでは「画像はサムネールで表示、それがクリックされたら、その画像を拡大表示する」ということはできないのだが、その必要も無いので、このままで行く。

ユーティリティmarkdown, wordpress

Posted by ysugimura