WordPressでショートコードを入れ子にして実行する方法

WordPressのショートコードの中で、ショートコードを記述しても、内部にあるショートコードは実行されずそのまま表示される場合があります。

エディターで次のような記載を行なった場合です。

[foo]
  [bar]
[/foo]

これを解決するには、次の2つの方法があります。

1. 呼び出しもとのショートコードでdo_shortcode()関数を使用する
2. プラグイン「Outerbridge Nested Shortcodes」を利用する

WordPressでショートコードを入れ子にして実行する2つの方法

2つのショートコード

1. [ul]
2. [li]

を以下のように定義した場合に

add_shortcode("ul", "ul_func");
function ul_func($atts, $content = null) {
    return '<ul>'. $content .'</ul>';
}

add_shortcode("li", "li_func");
function li_func($atts, $content = null) {
    return '<ul>'. $content .'</ul>';
}

エディターで次の記載を行うと

[ul]
  [li]アイテム1[/li]
  [li]アイテム2[/li]
  [li]アイテム3[/li]
[/ul]

HTML上では、次のような出力になってしまいます。

<ul>
  [li]アイテム1[/li]
  [li]アイテム2[/li]
  [li]アイテム3[/li]
</ul>

しかし、次のようなHTML出力を期待しているはずです。

<ul>
  <li>アイテム1<li>
  <li>アイテム2<li>
  <li>アイテム3<li>
</ul>

これを修正する2つの方法を解説します。

①呼び出しもとのショートコードでdo_shortcode()関数を使用する

呼び出しもとのショートコードの$contentに対して、do_shortcode()関数を使用します。

今回の例では、[li]を呼び出している[ul]の$contentに、do_shortcode()関数を使用します。

add_shortcode("ul", "ul_func");
function ul_func($atts, $content = null) {
    return '<ul>'. do_shortcode($content) .'</ul>';
}

add_shortcode("li", "li_func");
function li_func($atts, $content = null) {
    return '<ul>'. $content .'</ul>';
}

②プラグイン「Outerbridge Nested Shortcodes」を利用する

Nested Shortcodes by Outerbridge

Author(s): Outerbridge

Current Version: 1.4

Last Updated: 2022年9月1日

nested-shortcodes.zip

96%Ratings 1,000+Installs WP 4.0+Requires

「Outerbridge Nested Shortcodes」の使い方は簡単です。インストールし、有効化するだけです。

特に難しい設定・操作はありません。