Le shortcode WordPress ne fonctionne pas lorsqu’il est enveloppé en HTML

J’ai créé des pages WordPress qui contiennent des éléments HTML comme <div>et <ul>par exemple

<div id="main" class="large-12 medium-12 columns clearfix" role="main">
  <h2 class="press-list-header">Articles</h2>
    <ul class="press-list">

    </ul>
</div>

Je voudrais placer des codes courts à l’intérieur de ces éléments HTML comme ceci :

<div id="main" class="large-12 medium-12 columns clearfix" role="main">
  <h2 class="press-list-header">Articles</h2>
    <ul class="press-list">
[picture image="http://example.com/image1.jpg" thumbnail="http://example.com/image1-thumbnail.jpg"]
[picture image="http://example.com/image2.jpg" thumbnail="http://example.com/image2-thumbnail.jpg"]
[picture image="http://example.com/image3.jpg" thumbnail="http://example.com/image3-thumbnail.jpg"]
    </ul>
</div>

Lorsque je fais cela, les codes courts s’affichent simplement sous forme de texte normal sur la page rendue. Si je place simplement les codes abrégés en dehors des éléments HTML, ils fonctionnent correctement en rendant le contenu attendu sur la page.

Comment puis-je faire en sorte que mes codes courts restituent leur contenu enveloppé dans des éléments HTML ?

METTRE À JOUR

J’aurais dû être plus descriptif. Je veux qu’il soit facile pour mon client d’insérer un code court dans l’éditeur TinyMCE pour les pages et les publications. Je ne veux pas qu’ils aient à gérer du code php ou html. De toute façon , ils n’auront pas accès à ces .phpfichiers modèles puisqu’ils ne sont pas développeurs. J’ai obtenu que les codes abrégés fonctionnent correctement pour les publications uniquement, mais pas pour les pages. Je crois que la raison en est le fait que j’utilise un modèle appelé custom-page.phppour toutes mes pages qui ressemble à :

<?php /* Template Name: Custom */ ?>
<?php get_header(); ?>

  <div id="content">
    <div id="inner-content" class="row clearfix">

      <?php the_post(); global $post; echo $post->post_content; ?>

    </div> <!-- end #inner-content -->
  </div> <!-- end #content -->

<?php get_footer(); ?>

J’ai déterminé que le problème réside dans la ligne

<?php the_post(); global $post; echo $post->post_content; ?>

Pour une raison quelconque, il ne fait que rendre le texte du code court. Il ne permet pas aux codes courts de s’exécuter et de restituer le contenu attendu. Comment puis-je réécrire cette ligne pour que les codes courts s’exécutent correctement ?

Solution n°1 trouvée

tu dois faire comme ça

<?php
echo do_shortcode("[picture image='http://example.com/image1.jpg' thumbnail='http://example.com/image1-thumbnail.jpg']");
?>

Solution n°2 trouvée

Vous recherchez do_shortcode():

<?php echo do_shortcode("[shortcode]"); ?>

Ainsi, dans votre modèle, il ressemblera à ceci :

<div id="main" class="large-12 medium-12 columns clearfix" role="main">
  <h2 class="press-list-header">Articles</h2>
    <ul class="press-list">
<?php echo do_shortcode("[picture image="http://example.com/image1.jpg" thumbnail="http://example.com/image1-thumbnail.jpg"]"); ?>
<?php echo do_shortcode("[picture image="http://example.com/image2.jpg" thumbnail="http://example.com/image2-thumbnail.jpg"]"); ?>
<?php echo do_shortcode("[picture image="http://example.com/image3.jpg" thumbnail="http://example.com/image3-thumbnail.jpg"]"); ?>
    </ul>
</div>

En ajoutant à votre UPDATE , la do_shortcodefonction est toujours la voie à suivre :

<?php the_post(); global $post; echo do_shortcode($post->post_content); ?>

Solution n°3 trouvée

 <?php echo do_shortcode('<div id="main" class="large-12 medium-12 columns clearfix"   role="main">
 <h2 class="press-list-header">Articles</h2>
 <ul class="press-list">
 [picture image="http://example.com/image1.jpg" thumbnail="http://example.com/image1-thumbnail.jpg"]
 [picture image="http://example.com/image2.jpg" thumbnail="http://example.com/image2-thumbnail.jpg"]
 [picture image="http://example.com/image3.jpg" thumbnail="http://example.com/image3-thumbnail.jpg"]
 </ul>
</div>');