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

Publié par Jean-Michel le

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)

Lire également:  Convention de nommage de page pour wordpress

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.

Lire également:  La bonne façon d'inclure/exiger des fichiers PHP dans WordPress

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.

Lire également:  Wordpress : Bouton Réinitialiser/Actualiser le formulaire de recherche dans le thème WordPress

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 _

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 *