【WordPress】ショートコードを入れ子で

WordPressのショートコードの基本的な使い方と、入れ子で使用する場合のメモです。以下のコードは無名関数を使用しているので、PHPのバージョンが5.3未満では動きません。ショートコードについては公式サイトに詳しいです。

ショートコードの基本的な使い方

期待する出力結果(ブラウザでの表示)

ブログ画面で期待する出力結果は以下です。

山田太郎さんの年齢は30歳で、趣味は読書です。

投稿画面(WordPressテキストエディタ)

先程の文章はテキストエディタ側で見ると以下の文字列となっています。[]で囲んだものがショートコードです。

[profile name="山田太郎" age="30" favorite="読書"]

ショートコード定義

functions.phpでショートコードの設定・定義・展開を指示します。第一引数がショートコード名となります。

add_shortcode('profile', function ($atts) {

    extract(shortcode_atts(array(
        'name'     => '匿名', // デフォルト値設定。省略可
        'age'      => '?',
        'favorite' => '秘密'
    ), $atts));

    return $name. 'さんの年齢は'. $age. '歳で、趣味は'. $favorite. 'です。';
});

囲み型ショートコード

囲み型ショートコードの定義方法です。

// 期待する出力結果
<div class="short-code">ショートコード</div>

// WordPressのテキストエディタ
[short-code]ショートコード[/short-code]

// functions.php
add_shortcode('short-code', function ($atts, $content = null) {
    return '<div class="short-code">'. $content. '</div>';
});

ショートコードを入れ子で

ショートコードを入れ子で使用する場合です。

// 期待する出力結果
<section class="class">
<h1>ショートコードの入れ子</h1>
ショートコードの入れ子にはdo_shortcode()を…。
</section>

// WordPressのテキストエディタ
[block class="class"]
[poem title="ショートコードの入れ子" str="ショートコードの入れ子にはdo_shortcode()を…。"]
[/block]

// functions.php
add_shortcode('block', function ($atts, $content = null) {
    extract(shortcode_atts(array(
        'class' => '',
    ), $atts));

    $format = '<section class="%s">
               %s
               </section>';

    return sprintf($format, $class, do_shortcode($content));
});

add_shortcode('poem', function ($atts) {
    extract(shortcode_atts(array(
        'title' => '',
        'str'   => ''
    ), $atts));

    $format = '<h1>%s</h1>
               %s
              ';

    return sprintf($format, $title, $str);
});

以上、簡単なメモです。