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

2022-07-10 22:58 2022-07-10 22:58

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 を使ったインストール方法の案内があった。
使ったことのないツールだったので、まずはこれを導入。
- 参考：CentOS7 に PHP Composer を導入する – hi3103の備忘録

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 );

hi3103の備忘録