WordPress Classic Editor で Markdown 記法を使えるようにする

WEB

背景・目的

  • 仕事で Kibela を、プライベートで Notion を利用しており、Markdown でのドキュメント管理が増えてきた
  • このブログ(WordPress)でも Markdown 記法の文章を扱えるようにしたい

前提

目指すゴール

  • wp_posts テーブルの post_content カラムには、Markdown 記法の文章をそのまま格納する
  • the_content() を通したときに適切なHTMLに変換される

WordPress 内のエディタについて

WordPress 内のエディタは、以下2点を前提条件とする。

  • Classic Editor を使用する
  • ビジュアルリッチエディターは使用しない

ブロックエディタを使わない理由
  • WordPress 5.0 から導入されたブロックエディタ( Gutenberg )についても、Markdown に対応しはじめた。
  • 試してみたものの、あれは結局「Markdown 書ける」というものなので、自分の目的にはそぐわなかった。
    • HTML形式に変換された状態でデータベースに保存されてしまう
    • あくまでも Markdown 形式のままドキュメントを保存・更新したい
  • よって、時流には逆らうことになるが、Classic Editor を継続利用することにした。

使用するライブラリ

Better Markdown Parser in PHP
https://parsedown.org/

やったこと

Composer の導入

Composer で Parsedown をインストール

サーバーに ssh で接続。

$ ssh ユーザー名@hi3103.net

実行場所はホームディレクトリとした。

$ pwd
/home/ユーザー名

composer で erusev/parsedown をインストールする。

$ composer require erusev/parsedown

以下の場所に格納された。

/home/ユーザー名/vendor

ライブラリの読み込み方法

comporser で管理しているライブラリをまとめて読み込む場合は、vendor フォルダの直下にある autload.php を読み込む。

require_once('/home/ユーザー名/vendor/autoload.php');

ピンポイントで Parsedown だけ読み込む場合は、 Parsedown.php を読み込めばOK。

require_once('/home/ユーザー名/vendor/erusev/parsedown/Parsedown.php');

functions.php に関数を作成

ソース
/* Markdown->HTMLに変換する
=================================================================== */
function parsedown( $content ) {
    //Parsedown.phpの読み込み
    require_once('/home/homepage/vendor/erusev/parsedown/Parsedown.php');

    //MarkdownをHTMLに変換
    $pd = new Parsedown();
    $content = $pd->setUrlsLinked(false)->text($content);

    //見出しレベルを変更
    $content = str_replace( 'h3>', 'h5>', $content );//h3->h5
    $content = str_replace( 'h2>', 'h4>', $content );//h2->h4
    $content = str_replace( 'h1>', 'h3>', $content );//h1->h3

    return $content;
}
add_filter( 'the_content', 'parsedown', 9 );//do_shortcode実行後じゃないとが崩れる
add_filter( 'the_content', 'do_shortcode', 8 );//7以下だとが動かない
Parsedown のオプションについて

以下のように設定した。

  • setBreaksEnabled :改行を<br> に変換する
    • 使わない
      • 初期値 false のため記述なし
  • setMarkupEscaped :Markdown中のHTMLをエスケープする
    • 使わない
      • 初期値 false のため記述なし
      • なお、コードの中は勝手にエスケープ処理してくれる
  • setUrlsLinked:URLを自動的にリンクテキストにする
    • 使わない
      • 初期値 true なので false をセット
      • embed などショートコードの展開時に都合が悪いため
ショートコードについて
  • the_content にフックさせる際、順番によってショートコードが動いたり動かなかったりと苦戦した。
  • 動作を完璧にするのはめんどくさい…。
  • というわけで、本ブログでは以下3点が使えればよいと割り切った。
    • embed
      • YouTube動画を埋め込む
    • caption
      • 画像にキャプションをつける
    • audio
      • 音声ファイルのプレイヤーを埋め込む
  • よって、以下の2点はサポートしないと決め、ショートコード自体を削除した。
    • gallery
    • playlist
/* 使わないショートコードを削除する
---------------------------------------------------------------------- */
function remove_my_shortcodes() {
    remove_shortcode( 'gallery' );
    remove_shortcode( 'playlist' );
}
add_action( 'init', 'remove_my_shortcodes',20 );

参考

Comments

  • スパム対策のため、コメント本文にURLが含まれている場合は「承認待ち」となり、すぐに投稿が反映されません。ご了承ください。
  • 公序良俗に反する内容、個人が特定できる情報、スパム投稿と思われるコメント等については、予告なく編集・削除する場合があります。