WordPress : Plusieurs do_shortcode($content) dans un shortcode
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 $content
le 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/
0 commentaire