WordPressで記事本文にHTMLを記述するスマートな方法

以前に書いた「WordPress投稿の一部分でのみwpautopを無効化する」というエントリーを、もう少しWordPressに詳しくない方にもピンとくるように簡単に書いてみようと思います。

実現したいこと

<div class="sample">
    <p>このように記事中にHTMLを載せたい!</p>
</div>

一般的な方法

一般的な方法には以下の2つがあります。

• 特殊文字を置換した上で貼付ける
• 何らかのプラグインをインストールする

が、これらは面倒で非効率です。

もっと簡単に実現できる

次のコードをfunctions.phpに貼付けるだけで簡単に実現できます。

// 部分的にwpautopを無効化
function noautop($t){
	$scode = 'code';// 対象となるショートコード

	if( mb_strpos($t, "[{$scode}]") === false || mb_strpos($t, "[/{$scode}]") === false ) return $t;
	remove_filter('the_content', 'wpautop');

	$br = 0;
	while( mb_strpos($t, "[{$scode}]") !== false && mb_strpos($t, "[/{$scode}]") !== false ){
		$slice_start = mb_strpos($t, "[{$scode}]");
		$slice_end = mb_strpos($t, "[/{$scode}]");
		while( $slice_start > $slice_end ){
			$slice_end = mb_strpos($t, "[/{$scode}]", $slice_end + 1);
			if( $slice_end === false ) break 2;
		}
		$autop[] = mb_substr($t, 0, $slice_start);
		$noautop[] = mb_substr($t, $slice_start, $slice_end + mb_strlen("[/{$scode}]") - $slice_start);
		$t = mb_substr($t, $slice_end + mb_strlen("[/{$scode}]"));
		if( $br++ > 1024 ) break;
	}

	$result = "";
	if( isset($autop) && is_array($autop) ){
		for($i = 0; $i < count($autop); $i++){
			$result .= wpautop($autop[$i]).$noautop[$i];
		}
	}
	$result .= wpautop($t);
	return $result;
}
add_filter('the_content', 'noautop', 1);

// codeというショートコードを登録
function sc_code_func($attribute, $content = ""){
	$content = htmlspecialchars($content);
	$content = str_replace("&amp;#038;", "&amp;", $content);
	return '<pre><code>'.$content.'</code></pre>';
}
add_shortcode('code', 'sc_code_func');

こうすることで、投稿作成時にテキストエリアへ次のように、

[code]<div class="sample">
    <p><?php echo 'usisan'; ?></p>
</div>[/code]

HTMLを[code]〜[/code]で挟んでそのまま貼付ければ、

このように綺麗に表示してくれるようになります。

終わり

仕組みなどの詳しいことは、冒頭に書いた元記事を参照してください。
個人的にはすごく便利だと思うので、少しでもインターネットでの知識共有の助けになればと思います。