スマートフォン・タブレットからインターネットサーバーオペレーション 2016

APPW.jp 2016

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>

WordPress Shortcode を SVG Fallbacks で試します

python-wordpress-xmlrpc ライブラリで投稿