WordPress投稿中で一部のMarkdown記法を利用する

2015/07/01
WordPress

WordPress投稿に見出しやリストなどをつけようとすると、htmlを書かなければならず少し面倒なときがありますよね。

ということで、記事中の任意の箇所で一部のMarkdown記法が使えるようになるショートコードを作成してみました。

「一部の」というのは、大人の都合によるものですが、以下の限定的な記法がサポートされています。

見出し
リンク
順序なしリスト
順序ありリスト

これだけ!?

すみません、ひとまず使用頻度の高いもののみに対応しています。

また、若干フレーバードなものになっていて、下に全ての記法を載せますが、ulとolについては少し注意が必要となっています。
(「- 」をul、「+ 」をolとしています。)

コード本体と使い方

それでは、実際のコードは以下のようになります。
これを functions.php の任意の場所にペーストしてください。

function scfunc_md($atts, $content = ""){
	$result = "";
	$h_level_min = 3;// 最小の見出しレベル
	$content = explode("\n", str_replace(array("\r\n", "\r"), "\n", $content));
	$list = array("type" => "ul", "items" => array());
	while( list($i, $line) = each($content) ){
		if( mb_strpos($line, "#") === 0 && preg_match('/^(#+)\s*(.+)$/', $line, $matches) ){
			$h_level = $h_level_min + strlen($matches[1]) - 1;
			if( $h_level > 6 ) $h_level = 6;
			$line = "<h{$h_level}>{$matches[2]}</h{$h_level}>";
		}
		if( mb_strpos($line, "]") && mb_strpos($line, ")") && preg_match_all('/\[([^\]]+)\]\(([^)]+)\)/', $line, $matches) ){
			for($i = 0; $i < count($matches[0]); $i++){
				$line = str_replace($matches[0][$i], "<a href=\"{$matches[2][$i]}\">{$matches[1][$i]}</a>", $line);
			}
		}
		if( mb_strpos($line, "-") === 0 && preg_match('/^-\s*(.+)$/', $line, $matches) ){
			$list["type"] = "ul";
			$list["items"][] = $matches[1];
		}else if( mb_strpos($line, "+") === 0 && preg_match('/^\+\s*(.+)$/', $line, $matches) ){
			$list["type"] = "ol";
			$list["items"][] = $matches[1];
		}else if( !empty($list["items"]) ){
			$line = "<{$list['type']}><li>".implode("</li><li>", $list["items"])."</li></{$list['type']}>\n{$line}";
			$list["items"] = array();
		}
		if( !empty($list["items"]) ) continue;
		$result .= "{$line}\n";
	}
	return $result;
}

function give_priority_to_md($content){
	global $shortcode_tags;
	$org = $shortcode_tags;
	remove_all_shortcodes();
	add_shortcode('md', 'scfunc_md');
	$content = do_shortcode($content);
	$shortcode_tags = $org;
	return $content;
}
add_filter('the_content', 'give_priority_to_md', 8);

「最小の見出しレベル」とコメントのある部分は、hタグの最小レベル(ハッシュ記号が1つのときのレベル)を設定するためのものです。

デフォルトの「1」のままでも問題ありませんが、適切に利用することで、投稿作成時やサイトのメンテナンス時に恩恵を受けることができます。

上記のコードをペーストしたら、あとは投稿作成時に、Markdownテキストとして解釈してほしい部分を[md]から[/md]で囲んでください。

ほどんどの場合は本分全体を囲ってしまえば良いかと思います。

例:

[md]# Markdown テスト
## リスト
- アイテム1
- アイテム2
- アイテム3
<a href="#">サンプルリンク</a>[/md]

このように書くと、以下のように出力されます。

<h1>Markdown テスト</h1> <h2>リスト</h2> <ul><li>アイテム1</li><li>アイテム2</li><li>アイテム3</li></ul> <a href="#">サンプルリンク</a>

サポートしている記法

以下に、使用可能なすべての記法を載せます。

見出し(html: h1 - h6)

Markdown:

# 見出しです
## 見出しです
### 見出しです

結果:

<h1>見出しです</h1> <h2>見出しです</h2> <h3>見出しです</h3>

※ $h_level_minを「1」とした場合

リンク(html: a)

Markdown:

<a href="http://usisan.net">usisan</a>

結果:

<a href="http://usisan.net">usisan</a>

順序なしリスト(html: ul > li)

Markdown:

- 順序なしリストです
- 順序なしリストです
- 順序なしリストです

結果:

<ul><li>順序なしリストです</li><li>順序なしリストです</li><li>順序なしリストです</li></ul>

順序ありリスト(html: ol > li)

Markdown:

+ 順序ありリストです
+ 順序ありリストです
+ 順序ありリストです

結果:

<ol><li>順序ありリストです</li><li>順序ありリストです</li><li>順序ありリストです</li></ol>

おわり

実は、この記事自体もこれを使って書いていました。

見出しやリストをパパっと書くことができて、全体的にいつもより楽だと感じたので、これからも使っていこうと思います。

よかったらみなさんも自己責任のもとご自由にお使いください。

なお関連して、本分中にhtml等のソースコードを手軽にペーストできるショートコードも以前に公開しているので、合わせて読んでみてください。

WordPress投稿の一部分でのみwpautopを無効化する

この記事へコメントする

※承認制のため、即時には反映されません。

WordPress投稿中で一部のMarkdown記法を利用する