it-swarm.com.de

Das Bootstrap-Akkordeon in einer Wordpress-Schleife mit benutzerdefiniertem Post-Typ zum Laufen bringen (Minimierungsproblem)

Zunächst einmal ist mir klar, dass es ein Plugin gibt, aber ich sprecheNICHTüber das BS-Kurzcode-Plugin. Ich spreche über das eigentliche Bootstrap-Akkordeon. Also hier ist, was ich versuche zu erreichen, ich bin ziemlich nah dran, ich versuche, benutzerdefinierte Beitragstypen und Felder zu verwenden, um ein Akkordeon von Fragen zu generieren. Ich habe also einen benutzerdefinierten Beitragstyp "Fragen" mit einem einfachen Titelfeld und einem WISYWIG-Editor zur Beantwortung der Frage.

Also hier ist mein 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(); ?>

Das Problem:

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

Das Problem liegt in diesem Teil des Codes, weil jedes Akkordeon eine eindeutige ID hat und wenn ich es durch die benutzerdefinierte Schleife schleife, werden alle meine Fragen gut angezeigt, aber sie fangen alle nicht reduziert und offen an, weil sie alle die gleiche ID von collapseOne haben.

Wie kann ich eine eindeutige ID für jede WordPress-Schleife durch das Akkordeon generieren? (Wenn ich diesen Ritus sagte)

Sehen Sie, wie das Akkordeon "Open" lädt, weil es keine eindeutige href, aria-controls und id hat.

href="#collapseOne"

aria-controls="collapseOne"

id="collapseOne"

enter image description here

3
Lucas Santos

Sie können dies mit einer integrierten WordPress-Abfrageeigenschaft $the_query->current_post (der erste Beitrag ist 0) tun, ohne einen Zähler einrichten zu müssen:

<?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(); ?>

Das relevante Bit ist <?php echo ($the_query->current_post == 0 ? ' in' : ''); ?>

1
cfx

Egal, ich habe es verstanden. Ich habe <?php the_ID(); ?> verwendet, um eindeutige IDs festzulegen, aber auch das war nicht das Problem. Es stellte sich heraus, dass das erste Akkordeon eine Klasse von "in" hatte, also war die wahre Frage

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

und ich tat das, indem ich einen einfachen Kostenzähler verwendete. <?php $c = 0; ?> erhöht es am Ende der Schleife und gibt dann eine Bedingung an, die den "in" if c is = to 1 des Echos wiedergibt.

Hier ist der 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

Versuchen Sie den folgenden Code. In Ihrem Code wurde collapseOne in der gesamten Schleife wiederholt. Ich habe $ i als Zähler hinzugefügt und als ID- und HREF-Link festgelegt

<?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