web-dev-qa-db-fra.com

Obtenir que l'accordéon Bootstrap fonctionne dans une boucle Wordpress avec un type de publication personnalisé (problème de réduction)

Tout d'abord, je suis bien conscient qu'il existe un plugin, mais je parle dePASdu plugin BS Short code. Je parle de l'accordéon bootstrap. Voici donc ce que j'essaie d'accomplir. Je suis assez proche. J'essaie d'utiliser des types et des champs de publication personnalisés pour générer un accordéon de questions. J'ai donc un type de message personnalisé de "Questions" avec un simple champ de titre et un éditeur WISYWIG pour la réponse à la question.

Alors voici mon code: 

<?php get_header(); ?>

<?php

    $args = array(
        'post_type' => 'question'
    );
    $the_query = new WP_Query( $args );
?>

<div class="wrap">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

<?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          <?php the_title(); ?>
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        <?php the_field('answer'); ?>
      </div>
    </div>
  </div>

<?php endwhile; else: ?>

    <p>Please fill out some questions.</p>

<?php endif; ?>
<?php wp_reset_postdata(); ?>

</div><!--end of the accordion wrap-->
</div><!-- wrapper-->

<?php get_footer(); ?>

Le problème: 

<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">

Le problème réside dans ce morceau de code car chaque accordéon a un identifiant unique et lorsque je le répète dans la boucle personnalisée, toutes mes questions sont affichées MAIS elles commencent toutes non fermées et s'ouvrent car elles ont toutes le même identifiant, collapseOne

Comment puis-je générer un identifiant unique à chaque fois que WordPress passe en boucle dans l'accordéon? (si j'ai dit ce rite)

Voyez comment l'accordéon charge "Ouvrir" car il n'a pas de href, aria-controls et id unique.

href="#collapseOne"

aria-controls="collapseOne"

id="collapseOne"

enter image description here

custom-post-typescustom-fieldtwitter-bootstrap
3
Lucas Santos

Vous pouvez le faire avec une propriété de requête WordPress intégrée $the_query->current_post (le premier message sera 0) sans qu'il soit nécessaire de configurer un compteur:

<?php get_header(); ?>

<?php

    $args = array(
        'post_type' => 'question',
        'order'     => 'ASC'
    );
    $the_query = new WP_Query( $args );
?>
<div class="wrap">

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : ?>
  <?php $the_query->the_post(); ?>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="heading-<?php the_ID(); ?>">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse-<?php the_ID(); ?>" aria-expanded="true" aria-controls="collapse-<?php the_ID(); ?>">
          <?php the_title(); ?>
        </a>
      </h4>
    </div>

    <div id="collapse-<?php the_ID(); ?>" class="panel-collapse collapse<?php echo ($the_query->current_post == 0 ? ' in' : ''); ?>" role="tabpanel" aria-labelledby="heading-<?php the_ID(); ?>">
      <div class="panel-body">
        <?php the_field('answer'); ?>
      </div>
    </div>
  </div>


<?php endwhile; else: ?>

    <p>Please fill out some questions.</p>

<?php endif; ?>
<?php wp_reset_postdata(); ?>
</div><!--end of the accordion wrap-->


</div><!--wrapper-->



<?php get_footer(); ?>

Le bit pertinent est <?php echo ($the_query->current_post == 0 ? ' in' : ''); ?>

1
cfx

Peu importe je l'ai eu. J'ai utilisé <?php the_ID(); ?> pour définir des identifiants uniques, mais ce n'était pas le problème. Il s’est avéré que le premier accordéon avait une classe de "in", donc la vraie question était:

How can I only give a class to the first post of a loop?

et je l'ai fait en utilisant un simple compteur. <?php $c = 0; ?> l'incrémente à la fin de la boucle, puis donnez une condition correspondant à "in" if c is = to 1 de echo.

Heres le code:

<?php get_header(); ?>

<?php

    $args = array(
        'post_type' => 'question',
        'order'     => 'ASC'
    );
    $the_query = new WP_Query( $args );
?>
<?php $c = 0; ?>

<div class="wrap">

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); $c++; ?>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="heading-<?php the_ID(); ?>">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse-<?php the_ID(); ?>" aria-expanded="true" aria-controls="collapse-<?php the_ID(); ?>">
          <?php the_title(); ?>
        </a>
      </h4>
    </div>

    <div id="collapse-<?php the_ID(); ?>" class="panel-collapse collapse <?php if( $c == 1 ) echo 'in'; ?>" role="tabpanel" aria-labelledby="heading-<?php the_ID(); ?>">
      <div class="panel-body">
        <?php the_field('answer'); ?>
      </div>
    </div>
  </div>


<?php endwhile; else: ?>

    <p>Please fill out some questions.</p>

<?php endif; ?>
<?php wp_reset_postdata(); ?>
</div><!--end of the accordion wrap-->


</div><!--wrapper-->



<?php get_footer(); ?>
1
Lucas Santos

Essayez le code ci-dessous. Dans votre code, collapseOne a été répété tout au long de la boucle. J'ai ajouté $ i en tant que compteur et le définit comme lien id et href

<?php get_header(); ?>

    <?php

        $args = array(
            'post_type' => 'question'
        );
        $the_query = new WP_Query( $args );
    ?>

    <div class="wrap">
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <?php $i=1; ?>
    <?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo $i; ?>" aria-expanded="true" aria-controls="collapseOne">
              <?php the_title(); ?>
            </a>
          </h4>
        </div>
        <div id="collapse<?php echo $i; ?>" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
          <div class="panel-body">
            <?php the_field('answer'); ?>
          </div>
        </div>
      </div>


    <?php $i++; endwhile; else: ?>

        <p>Please fill out some questions.</p>

    <?php endif; ?>
    <?php wp_reset_postdata(); ?>

    </div><!--end of the accordion wrap-->
    </div><!-- wrapper-->

    <?php get_footer(); ?>
0
Karun