TSUBASAが属する個人プロジェクト「COFUS」内のBLOGコンテンツです。TSUBAS1992年生まれ、沖縄県育ち、現在大阪暮らし。フリーなフロントエンドエンジニアとしてコーディング案件をメインに行いながら、Web制作・Webサイト運営・ツール制作などの活動を行っています。今やエンジニアであれば当たり前、非エンジニアでも多くの方が活用しているマークダウン。ドキュメントの生成を出来るだけ効率よく、そして誰が書いても差が出づらいマークダウンを採用する事も多いわけですが、残念ながらWordPressでは完全なマークダウン対応はされていません。直接マークダウンを記述+ParsedownでHTML生成が良さそうでしたのでその例をご紹介してみます。当サイトもWordPressにて構築されていますが、実際にこれから示す例を用いてマークダウン対応を行っており、割と快適に記事更新が出来ています。Parsedownを用いてHTMLに変換してみるまずWordPressの記事編集画面に直接マークダウン記述をするという前提で対応する場合、当然ですがそのまま出力してもHTMLとして出力はされません。そこでParsedownというマークダウン用パーサーを用いて変換していきます。Parsedown(GitHub)Parsedownを採用した理由はとにかく変換速度が速い為。マークダウンパーサーは幾つか種類がありますが、その中でも圧倒的に速いのがParsedownです。Markdownと比べて5/1で変換が完了するのでその速度が分かるかと思います。デモまずはfunctions.phpにてParsedownを読み込んであげる必要があります。'/../vendor/Parsedown.php';composerを用いてインストールしたい方は以下で。erusev/parsedown基本的な使い方は以下の通りです。非常に簡素且つ少ないコードで利用出来ます。<h1>Hello</h1>上記を参考に、後はfunctions.phpにてthe_contentフィルターフックでParsedownでのHTML変換処理を噛ませてあげるだけでHTMLへ変換することが出来ます。);}幾つかオプションがありますが、ここではsetMarkupEscapedとsetBreaksEnabledを指定しています。setMarkupEscaped:エスケープ処理するか否かsetBreaksEnabled:自動で改行するか否かオプションはWikiを確認すると良いでしょう。setMarkupEscapedをfalseにしているのは私の場合だと記事中にhtmlタグを含ませる事があるためです(CodePenなど)。セキュリティーの観点から不特定多数の方が更新する様なWordPressサイトであればXSS防止の為にもtrueにしておくと安全です。これでコストを掛けず、且つプラグインも用いずにマークダウンでの記事作成が可能になりました。記事管理をWordPressから外してみる上記の方法では直接マークダウンを記事編集画面に記述することが必要になりますが、当然ですが記事編集画面上ではプレビューすることが出来ません。プレビュー出来るように別途JS製のマークダウンパーサーを用いる事で実現も可能でしょうが、ここは割り切ってマークダウンに対応したエディタを使ってみるのも手です。私の場合ですとInkdropを用いて記事を書き、そのまま管理をしているのでWordPress上の記事編集画面ではコピペするのみとなります。最近のエディタであれば基本マークダウン対応されているので好みの環境で記事編集が出来るのも強みでしょう。業務中にぱっとまとめて.mdとして保存し、後でそのままWordPressへコピペで記事追加も完了出来ます。カテゴリやタグなどの選択は手動で行う必要があります。Front-Matterを用いればJSにてカテゴリやタグの選択等も自動化出来るかも?しれません(未確認)。ちなみにPHPでもFrontYAMLなどがあり、デフォルトでParsedownを利用しているので代わりにFrontYAMLを利用しても良さそうです。直接マークダウンを記述+ParsedownでHTML生成でのWordPressマークダウン対応方法の例でした。Extraに対応させる事も可能です。Extraも利用してみると良いでしょう。GithubTwitterChatworknoteFacebookWeb制作、コーディングのご依頼お待ちしております!。