TLDR; How can I run a shortcode with multiple shortcodes inside of it?

我正在尝试运行一个包含多个短代码的短代码。

我可以使用主题中的以下代码成功运行一个包含一个短代码的短代码：

add_shortcode(\'outside_shortcode\', function($attr, $content = null) {
        return
        \'
            <section class="example_section">
                <div class="container">
                    <div class="row">
                        \' . do_shortcode($content) . \'
                    </div>
                </div>
            </section>
        \';
    });
add_shortcode(\'inside_shortcode\', function($atts, $content = null) {
    $atts = shortcode_atts(
        array(
            \'link\'  => \'https://link.com\',
            \'image\' => \'nameofimage\',
        ), $atts);
    return
    \'
        <div class="col-6">
            <a href="#!">
                <div class="example">
                    <span class="helper"></span>
                    <img src="/wp-content/themes/mytheme/assets/images\' . $atts[\'image\'] . \'.png">
                </div>
            </a>
        </div>
    \';
});

Wordpress上的texteditor中包含以下内容：

[outside_shortcode]
[inside_shortcode link=\'https://mysite/section1\' image=\'funimage\']
[inside_shortcode link=\'https://mysite/section2\' image=\'coolimage\']
[/outside_shortcode]

但是，我想在外部短代码中添加第二个div，并在其中添加第二个短代码。我的想法是：

add_shortcode(\'outside_shortcode\', function($attr, $content = null) {
        return
        \'
            <section class="first_section">
                <div class="container">
                    <div class="row">
                        \' . do_shortcode($content) . \'
                    </div>
                </div>
            </section>
            <section class="second_section">
                <div class="container">
                    <div class="row">
                        \' . do_shortcode($content) . \'
                    </div>
                </div>
            </section>
        \';
    });
add_shortcode(\'first_inside_shortcode\', function($atts, $content = null) {
    $atts = shortcode_atts(
        array(
            \'link\'  => \'https://link.com\',
            \'image\' => \'nameofimage\',
        ), $atts);
    return
    \'
        <div class="col-6 iamfirst">
            <a href="#!">
                <div class="example">
                    <span class="helper"></span>
                    <img src="/wp-content/themes/mytheme/assets/images\' . $atts[\'image\'] . \'.png">
                </div>
            </a>
        </div>
    \';
});
add_shortcode(\'second_inside_shortcode\', function($atts, $content = null) {
    $atts = shortcode_atts(
        array(
            \'link\'  => \'https://link.com\',
            \'image\' => \'nameofimage\',
        ), $atts);
    return
    \'
        <div class="col-6 iamsecond">
            <a href="#!">
                <div class="example">
                    <span class="helper"></span>
                    <img src="/wp-content/themes/mytheme/assets/images\' . $atts[\'image\'] . \'.png">
                </div>
            </a>
        </div>
    \';
});

然而，问题是读者不知道如何区分$内容。

知道如何解决这个问题吗？

我也试过了

do_shortcode( \' [first_inside_shortcode] \' )

但是，在WordPress编辑器的代码中不能有多个部分

例如，这不起作用：

[outside_shortcode]
[inside_shortcode link=\'https://mysite/section1\' image=\'funimage\']
[inside_shortcode link=\'https://mysite/section2\' image=\'coolimage\']
[/outside_shortcode]

相反，它只读取第一个。

谢谢

  add_shortcode(\'main_section\', function($attr, $content = null) {
        return
        \'
            <section class="main">
                <div class="container">
                    \' . do_shortcode($content ) . \'
                </div>
            </section>
        \';
    });

    add_shortcode(\'middle_section\', function($atts, $content = null) {
        $atts = shortcode_atts(
            array(
                \'class\'  => \'all\',
            ), $atts);
        return
        \'
            <div class="row middle example-\' . $atts[\'class\'] . \'">
                \' . do_shortcode($content ) . \'
            </div>
        \';
    });

    add_shortcode(\'inside_section\', function($atts, $content = null) {
        $atts = shortcode_atts(
            array(
                \'link\'  => \'https://example.com\',
                \'image\' => \'imagename\',
            ), $atts);
        return
        \'
            <div class="col-6 col-md-4 col-lg-3 col-xl-2 mx-auto">
                <a href="\' . $atts[\'link\'] . \'">
                    <div class="image-cover">
                        <span class="helper"></span>
                        <img src="/wp-content/themes/mysite/assets/images/main/logos/\' . $atts[\'image\'] . \'.png">
                    </div>
                </a>
            </div>
        \';
    });

[main_section]
    [middle_section class=\'all\']
        [inside_section link=\'https://example.com/section1\' image=\'image1\']
        [inside_section link=\'https://example.com/section2\' image=\'image2\']
    [/middle_section]
    [middle_section class=\'telco\']
        [inside_section link=\'https://example.com/section3\' image=\'image3\']
        [inside_section link=\'https://example.com/section4\' image=\'image4\']
    [/middle_section]
[/main_section]