wordpress query_posts avec fondation 6 Accordéon ne fonctionne pas correctement

Je me demandais si quelqu’un pouvait m’aider. J’essaie de fusionner l’accordéon Foundation 6 avec wordpress sur une page de modèle avec un type de publication personnalisé.

voici le code que j’utilise:

     <?php
  query_posts( array(

      'post_type' => 'customposttypename',
      'taxonomyname' => 'taxonomyslug',
      'posts_per_page' => -1
  ) );


 if ( have_posts() ) : while ( have_posts() ) : the_post();
?>


    <ul class="accordion" data-accordion>



  <li class="accordion-item " data-accordion-item>
    <a href="#" class="accordion-title"><?php the_title();?></a>
    <div class="accordion-content" data-tab-content>
     <?php the_content();?>
    </div>



        </li>

</ul>
              <?php endwhile; endif; wp_reset_query(); ?>

Pour que l’accordéon soit rendu, vous avez besoin de ce balisage minimal :

<ul class="accordion" data-accordion>
  <li class="accordion-item is-active" data-accordion-item>
    <a href="#" class="accordion-title">Accordion 1</a>
    <div class="accordion-content" data-tab-content>
      I would start in the open state, due to using the `is-active` state class.
    </div>
  </li>
  <!-- ... -->
</ul>

Que j’ai utilisé (voir ci-dessus)

La requête affiche les messages avec le titre et le contenu comme je le souhaite et elle est enveloppée dans l’accordéon de base, mais une fois qu’un onglet est ouvert, je ne peux plus cliquer dessus pour le fermer. Je suis conscient que l’on doit être ouvert à tout moment, sauf indication contraire (j’aimerais qu’un reste ouvert à chaque fois). J’ai plus d’un message. Je me demandais également comment j’allais ajouter la classe is-active au premier message généré. J’apprécierais vraiment l’aide.

Solution n°1 trouvée

Il semble que votre code ajoute un nouveau <ul>pour chaque publication. Ce que vous voulez vraiment, c’est un seul <ul>enroulé autour de tous les messages.

Query_posts est également mal vu car il modifie la requête principale. Vous pouvez utiliser get_posts à la place et ajouter une variable $i pour déterminer si vous êtes sur le premier message ou non. Si c’est le cas, ajoutez la is-activeclasse.

Essayer:

<?php
$myposts = get_posts(array(
'post_type' => 'customposttypename',
'taxonomyname' => 'taxonomyslug',
'posts_per_page' => -1
));
if(count($myposts) > 0) {
?><ul class="accordion" data-accordion><?php
for($i=0; $i<count($myposts); $i++) {
setup_postdata($myposts[$i]);
?><li class="accordion-item<?php if($i==0) { echo ' is-active'; } ?>" data-accordion-item>
<a href="#" class="accordion-title"><?php echo $myposts[$i]->post_name; ?></a>
<div class="accordion-content" data-tab-content>
<?php echo $myposts[$i]->post_content; ?>
</div>
</li><?php
}
?></ul><?php
} ?>


// ajouté et _