WordPress : Plusieurs do_shortcode($content) dans un shortcode

Publié par Jean-Michel le

TLDR ; Comment puis-je exécuter un shortcode avec plusieurs shortcodes à l’intérieur ?

J’essaie d’exécuter un shortcode avec plusieurs shortcodes à l’intérieur.

Je peux exécuter avec succès un shortcode avec un shortcode à l’intérieur avec le code suivant dans le thème :

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

et ce qui suit dans l’éditeur de texte sur WordPress :

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

Cependant, je souhaite ajouter une deuxième div dans le shortcode extérieur et ajouter un deuxième shortcode à l’intérieur. Mon idée était quelque chose comme:

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

Cependant, le problème est que le lecteur ne sait pas faire la distinction entre $content.

Une idée de comment résoudre ce problème ?

j’ai aussi essayé

do_shortcode( ' [first_inside_shortcode] ' )

mais, alors je ne peux pas avoir plusieurs sections dans le code de l’éditeur WordPress

Par exemple, cela ne fonctionne pas :

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

Au lieu de cela, il ne lit que le premier.

Merci!

Solution n°1 trouvée

J’ai compris !

Merci @André Kelling pour votre aide !

J’ai donc créé trois sections de code et les ai placées les unes dans les autres dans les codes abrégés de l’éditeur WP.

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

Et voici comment je l’ai fait dans l’éditeur :

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

Solution n°2 trouvée

Vous devrez travailler avec $contentle code PHP à l’intérieur de vos shortcodes. Donc, vous êtes déjà allé droit.


Il y a des informations dans les documents WP sur les Shortcodes imbriqués

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


j’ai trouvé cette information utile aussi:

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

Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *