WordPress Shortcode で HTML コードを表示

WordPress の投稿記事中に HTML コードを表示するには、HTML エスケープが必要となります。通常は、SyntaxHighlighter プラグインを利用するのが一般的で、エスケープ処理だけでなく、ビジュアル効果の高いアウトプットが得られます。今回は、エスケープ処理を WordPress Shortcode で作成してみます。

HTML エスケープ処理は、HTML タグに使われる < を &lt;、> を &gt;、そのほか & を &amp; などの変換を行います。

HTML エスケープ処理には、WordPress の esc_html () 関数や PHP の htmlspecialchars () 関数などが利用できます。ただし、WordPress 投稿記事中では、これらの関数を直接使用できませんので、WordPress の Shortcode で呼び出すこととします。

テーマのための関数（functions.php）に書き加えます。基本的には、WordPress の esc_html () 関数を呼び出すだけです。

function html_entity( $args, $content = "" ) {
  $outputhtml = esc_html($content);
  return $outputhtml;
}
add_shortcode('htmlen', 'html_entity');

記事中は、対象の HTML コードコンテンツをショートコードタグで囲みます。

<pre><code>
[htmlen]
<svg width="320" height="320">
<image xlink:href="a.svg" 
src="a.png" width="320" height="320" />
</svg>
[/htmlen]
</code></pre>

関数リファレンス/add shortcode – WordPress Codex 日本語版