php - Multiple do_shortcode($content) within one shortcode

admin管理员组

文章数量:1122832

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

I'm trying to run a shortcode with multiple shortcodes inside of it.

I can successfully run a shortcode with one shortcode inside of it with the following code in the theme:

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'  => '',
            '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>
    ';
});

and the following within the texteditor on Wordpress:

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

However, I want to add a second div within the outside shortcode and add a second shortcode within that. My idea was something like:

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'  => '',
            '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'  => '',
            '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>
    ';
});

However, the problem is that the reader doesn't know how to distinguish between $content.

Any idea how to fix this problem?

I have also tried

do_shortcode( ' [first_inside_shortcode] ' )

but, then I cannot have multiple sections within the code on the WordPress editor

For example, this does not work:

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

Instead, it only reads the first one.

Thanks!

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

I'm trying to run a shortcode with multiple shortcodes inside of it.

I can successfully run a shortcode with one shortcode inside of it with the following code in the theme:

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>
    ';
});

and the following within the texteditor on Wordpress:

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

However, I want to add a second div within the outside shortcode and add a second shortcode within that. My idea was something like:

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>
    ';
});

However, the problem is that the reader doesn't know how to distinguish between $content.

Any idea how to fix this problem?

I have also tried

do_shortcode( ' [first_inside_shortcode] ' )

but, then I cannot have multiple sections within the code on the WordPress editor

For example, this does not work:

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

Instead, it only reads the first one.

Thanks!

• php
• theme-development
• shortcode

Share Improve this question asked Feb 25, 2019 at 15:04 Brad AhrensBrad Ahrens 13122 silver badges99 bronze badges 1

• 1 maybe you just need single shortcodes then and no nested and get your different classes otherwise? – André Kelling Commented Feb 25, 2019 at 15:21

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

You will need to work with $content inside your shortcodes PHP code. So you went already right.

---

There is info in the WP docs about nested Shortcodes

https://codex.wordpress.org/Shortcode_API#Nested_Shortcodes

---

i found this information useful too:

https://www.sitepoint.com/wordpress-nested-shortcodes/

I figured it out!

Thanks @André Kelling for your help!

So, I made three sections of code and put them inside of each other in the shortcodes within the WP editor.

Here is the PHP

  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>
        ';
    });

And here is how I did it within the editor:

[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]

本文标签： phpMultiple doshortcode(content) within one shortcode