ショートコードの中にショートコードを入れることは出来るの？

2019年5月24日2019年6月3日

みなさん、ショートコードの中にショートコードを書きたいと思ったことはありませんか？

こんな、経験ありませんか？
アンダーラインをひいたり、リンクを貼ったり。

設定をしないと、このように内側のショートコードが、そのまま表示されてしまいます。

これを下のようにする方法です。

この時の投稿画面は、このように成ります。（ショートコードが分かりやすいように、改行をいれています）

[box]枠で囲った文章の中で、注目してほしい部分に
　　[underline] アンダーライン[/underline]
を引きたい[/box]

実は、これ簡単に出来るんです。

ショートコードをちょっと修正

ソースコード

function fncBox ($atts, $content = null) {
    $content = do_shortcode (shortcode_unautop ($content)); //ショートコードの入れ子があっても実行する
	return ("<div class=box>" . $content . "</div>");
}
add_shortcode ('box', 'fncBox');

解説

外側になるショートコード（この場合はbox）に２行目の一行を追加します。

処理としては、[box]という囲み方のショートコードに、引数（$content）『例えば・・・・引きたい』が渡されます。ショートコードの２行目で、引数として受け取った$contentに[underline]ショートコードが入ってるから、ショートコードの処理をして、$contentに戻してねって感じです。

もちろん、ショートコードが入っていなければ、何もされないので、入れる場合と入れない場合を分けてショートコードを作る必要はありません。

注意事項

ショートコードの入れ子は、とても便利ですが、注意点があります。

WordPressの仕様上、同じショートコード同士を、複数入れ子にすることができません。

[box]外側のboxに囲まれた文字[box]内側のboxに囲まれたbox[/box][/box]
このようなショートコードは書けません。

詳しく調べたい方はこちら
WordPress Codex 日本語版 ショートコード API 入れ子のショートコード

どうしても、複数入れ子にしたい場合は、ショートコードをbox1・box2のように同じ内容のショートコードを作って下さい。

まとめ

ショートコードの入れ子は、非常に簡単です。自分でショートコードを作った人なら、一行を加えるだけです。