本ページはHIGA TSUBASAが属する個人プロジェクト「COFUS」内のBLOGコンテンツです。

WordPressにてなるべくコストを掛けずに記事をマークダウン記述対応にしてみた
UPDATE2019/06/30

WordPressにてなるべくコストを掛けずに記事をマークダウン記述対応にしてみた

HIGA TSUBAS

Frontend Engineer HIGA TSUBAS

1992年生まれ、沖縄県育ち、現在大阪暮らし。フリーなフロントエンドエンジニアとしてコーディング案件をメインに行いながら、Web制作・Webサイト運営・ツール制作などの活動を行っています。

今やエンジニアであれば当たり前、非エンジニアでも多くの方が活用しているマークダウン。ドキュメントの生成を出来るだけ効率よく、そして誰が書いても差が出づらいマークダウンを採用する事も多いわけですが、残念ながらWordPressでは完全なマークダウン対応はされていません。

プラグインを用いた対応も可能ではありますが、なるべくコストを掛けずに、且つ簡素な方法でマークダウン対応を実現出来ないか試してみた結果、記事編集画面に直接マークダウンを記述+ParsedownでHTML生成が良さそうでしたのでその例をご紹介してみます。

当サイトもWordPressにて構築されていますが、実際にこれから示す例を用いてマークダウン対応を行っており、割と快適に記事更新が出来ています。

Parsedownを用いてHTMLに変換してみる

まずWordPressの記事編集画面に直接マークダウン記述をするという前提で対応する場合、当然ですがそのまま出力してもHTMLとして出力はされません。
そこでParsedownというマークダウン用パーサーを用いて変換していきます。

Parsedownを採用した理由はとにかく変換速度が速い為。マークダウンパーサーは幾つか種類がありますが、その中でも圧倒的に速いのがParsedownです。PHP Markdownと比べて5/1で変換が完了するのでその速度が分かるかと思います。

まずはfunctions.phpにてParsedownを読み込んであげる必要があります。

require_once dirname( __FILE__ ) . '/../vendor/Parsedown.php';

composerを用いてインストールしたい方は以下で。

$ composer require erusev/parsedown

基本的な使い方は以下の通りです。非常に簡素且つ少ないコードで利用出来ます。

echo $Parsedown->text('# Hello'); // <h1>Hello</h1>

上記を参考に、後はfunctions.phpにてthe_contentフィルターフックでParsedownでのHTML変換処理を噛ませてあげるだけでHTMLへ変換することが出来ます。

require_once dirname( __FILE__ ) . '/../vendor/Parsedown.php'; // パスは適宜変更.

if ( ! function_exists( 'add_parsedown' ) ) {
    /**
     * Parsedown.
     *
     * @param string $content .
     * @return $result.
     */
    function add_parsedown( $content ) {
        $parsedown = new Parsedown();
        $result    = $parsedown->setMarkupEscaped( false )->setBreaksEnabled( true )->text( $content );
        return $result;
    }
    add_filter( 'the_content', 'add_parsedown', 9, 1 );
}

幾つかオプションがありますが、ここではsetMarkupEscapedsetBreaksEnabledを指定しています。

  • setMarkupEscaped:エスケープ処理するか否か
  • setBreaksEnabled:自動で改行するか否か

オプションはWikiを確認すると良いでしょう。

setMarkupEscapedfalseにしているのは私の場合だと記事中にhtmlタグを含ませる事があるためです(CodePenなど)。ただしセキュリティーの観点から不特定多数の方が更新する様なWordPressサイトであればXSS防止の為にもtrueにしておくと安全です。

これでコストを掛けず、且つプラグインも用いずにマークダウンでの記事作成が可能になりました。

記事管理をWordPressから外してみる

上記の方法では直接マークダウンを記事編集画面に記述することが必要になりますが、当然ですが記事編集画面上ではプレビューすることが出来ません。勿論プレビュー出来るように別途JS製のマークダウンパーサーを用いる事で実現も可能でしょうが、ここは割り切ってマークダウンに対応したエディタを使ってみるのも手です。

私の場合ですとInkdropを用いて記事を書き、そのまま管理をしているのでWordPress上の記事編集画面ではコピペするのみとなります。
最近のエディタであれば基本マークダウン対応されているので好みの環境で記事編集が出来るのも強みでしょう。業務中にぱっとまとめて.mdとして保存し、後でそのままWordPressへコピペで記事追加も完了出来ます。

ただしカテゴリやタグなどの選択は手動で行う必要があります。上手いことYAML Front-Matterを用いればJSにてカテゴリやタグの選択等も自動化出来るかも?しれません(未確認)。ちなみにPHPでもFrontYAMLなどがあり、デフォルトでParsedownを利用しているので代わりにFrontYAMLを利用しても良さそうです。

コンテンツの管理までWordPressに依存させる必要性はないので、簡素にマークダウン対応しつつ記事ファイルは別途管理するのも割と有りかもしれません。


以上記事編集画面に直接マークダウンを記述+ParsedownでHTML生成でのWordPressマークダウン対応方法の例でした。

ちなみにParsedownはMarkdown Extraに対応させる事も可能です。より充実したマークダウン記述に対応させたい場合はParsedown Extraも利用してみると良いでしょう。

RECOMMEND 関連する記事