WordPress と Parsedown で Markdown を使う方法

html タグを書かなくても、文章を html にするプログラム(パーサーという)があります。データベースには文章だけを入れて、出力するときは php などのスクリプトがパーサーを使って html にするというしくみです。

文章(markdown)
↓(パーサー)
html

文章は markdown という形式で書き、それを Parsedown というパーサーで html にする場合は次のようにします。

ダウンロード

ここから Parsedown.php というファイルをダウンロードし、WordPressの子テーマの直下に入れます。子テーマには single.php や page.php があり、同じ階層に Parsedown.php を置きます。WordPress は更新によって子テーマ(と画像やユーザー設定)以外が自動的に変わってしまうので、こうしたオリジナルのスクリプトは子テーマに入れます。

single.php
page.php
Parsedown.php
...

single.php

子テーマの初期状態によりますが、single.php で content.php を呼びだすのではなく、single.php に html を直接書いている場合は、最初に Parsedown.php を読みこむといいでしょう。

single.php

<?php
include( locate_template( 'Parsedown.php' ) );
$parsedown = new Parsedown();
if ( is_single() )
{
    if ( have_posts() )
    {
        while ( have_posts() )
        {
            the_post();
            $title = get_the_title();
            $content = $parsedown->setBreaksEnabled( TRUE )->text( get_the_content() );
        }
        wp_reset_postdata();
    }
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta content="initial-scale=1, minimum-scale=1, width=device-width" name="viewport">
    <title><?= $title ?></title>
</head>
<body>
    <h1><?= $title ?></h1>
    <?= $content ?>
</body>
</html>

上のコードは single.php のベースになるコードです。このサイトもこのコードをもとに作られています。コードは php html の順に書き、Parsedown.php は include( locate_template( 'Parsedown.php' ) ) で読みこんでいます。

Parsedown はクラスであり、new でオブジェクトを作ります。かなめになる部分は

$content = $parsedown->setBreaksEnabled( TRUE )->text( get_the_content() )

です。get_the_content はWordPress 専用の重要な関数で、その記事の内容を呼びだしています。Parsedown クラスの text という関数で文章を html に整形できます。つまり

$content = $parsedown->text( get_the_content() )

で WordPress のデータベースに入っている記事を html にできます。ただしこれでは改行が br にならないため、このサイトでは setBreaksEnabled( TRUE ) というオプションをつけています。

広告