WordPress 角括弧：[] とクォートをエスケープして表示【ショートコードと属性値】

WordPressの文章内では「角括弧：[ ]」がショートコード用のタグとして認識されるため注意が必要です。

[br] // `<br />` に変換されてしまう
[caption]a[/caption] // `<div class="wp-caption">a</div>` に変換されてしまう

角括弧をそのまま表示させたい場合には、角括弧を二重に囲う形でエスケープする必要があります。

[[br]] // `[br]` と表示される
[[caption]a[/caption]] // `[caption]a[/caption]` と表示される

目次

ショートコードの属性値をエスケープする方法

基本的にショートコードの属性値には角括弧（[, ]）とクォート／クォーテーション（', "）を含めることができない点に注意してください。ショートコードが正常に動作しなくなったりバグに繋がる恐れがあります。

角括弧のエスケープ

ショートコードの属性値では角括弧を数値文字参照の形で表す必要があります。

[br name="[break]"] // 正常に処理されない
↓
[br name="&#91;break&#93;"] // 数値文字参照で表す
文字数値文字参照
[&#91;
]&#93;

ただし、ショートコード側には数値文字参照が渡るため、処理結果にも数値文字参照が含まれることになる場合があります。

[br name="&#91;break&#93;"]
↓
<br name="&#091;break&#093;" /> // ショートコードによる処理結果

クォートのエスケープ

属性値を囲うクォートと属性値内のクォートが異なる記号の場合はエスケープが不要です。例えば、ダブルクォート内ではシングルクォートを記述することができます。

[br name="it's a true world"] // シングルクォートのエスケープは不要
[br name='a "true" world']    // ダブルクォートのエスケープは不要

ただし、ショートコード側の実装が不十分な場合には、処理の結果に影響を与える場合があるため注意してください。

[br name='a "true" world']
↓
<br name="a "true" world"> // このような出力に繋がる恐れがある

属性値を囲うクォートと属性値内のクォートが同じ記号の場合は数値文字参照を用いる必要があります。

[br name="a "true" world"]    // ダブルクォート内でダブルクォートを記述できない
[br name='it's a true world'] // シングルクォート内でシングルクォートを記述できない
↓
[br name="a &#34;true&#34; world"] // 対処方法
[br name='it&#39;s a true world']  // 対処方法
文字数値文字参照
"&#34;
'&#39;

HTMLタグのエスケープ

ショートコードの属性値に<, >記号を含めたい場合には文字実体参照で両記号を表現する必要があります。

[br name="<"] // ショートコードとして処理されない（そのまま出力される）
↓
[br name="&lt;"] // `<br name="&lt;">`と処理される
文字文字実体参照
<&lt;
>&gt;

ちなみに、属性値には一般的なHTMLタグを含めることができます。

[br name="<hr>"] // `<br name="<hr>">`と処理される

HTMLの属性値にショートコードを記述する場合の対策

HTMLの属性値にショートコードが含まれる場合には、両者の属性のクォートを区別する必要があります。

<a href="[url src="marycore.jp"]"> // 正常にパースされない
↓
<a href="[url src='marycore.jp']"> // シングルクォートで区別する
広告