web-dev-qa-db-ja.com

カスタム投稿タイプのWordpressループでブートストラップアコーディオンを機能させる（折りたたみの問題）

まず最初に私はプラグインがあることをよく知っていますが、私はNOT BS Short codeプラグインについて話しています。私は実際のブートストラップアコーディオンについて話しています。それで、ここで私が達成しようとしていることはこれであり、私は質問のアコーディオンを生成するためにカスタム投稿タイプとフィールドを使用しようとしていることにかなり近いです。だから私は簡単なタイトルフィールドと質問への答えのためのWISYWIGエディタを備えた "Questions"のカスタム投稿タイプを持っています。

これが私のコードです：

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

問題：

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

各アコーディオンには固有のIDがあり、カスタムループでループするとすべての質問が表示されるので問題があります。ただし、すべてのアコーディオンは同じIDのcollapseOne

WordPressがアコーディオンをループするたびに一意のIDを生成する方法を教えてください。 （私がその儀式を言ったならば）

独自のhref、aria-controls、およびidがないため、アコーディオンがどのように "Open"を読み込むかを確認してください。

href="#collapseOne"

aria-controls="collapseOne"

id="collapseOne"

enter image description here

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

カウンタを設定する必要なしに、組み込みのWordPressクエリプロパティ$the_query->current_post（最初の投稿は0になります）でこれを行うことができます。

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

関連するビットは<?php echo ($the_query->current_post == 0 ? ' in' : ''); ?>です

1
cfx

気にしないでください。私は<?php the_ID(); ?>を使ってユニークなidを設定しましたが、それでも問題はありませんでした。最初のアコーディオンのクラスが"in"であることがわかったので、実際の質問は

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

そして私は簡単なカウンターを使ってそれをしました。 <?php $c = 0; ?>はループの終わりでそれをインクリメントしてから、そのエコーの"in" if c is = to 1を条件付きで与えます。

コードは次のとおりです。

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

以下のコードを試してください。あなたのコードでは、collapseOneはループを通して繰り返されました。私はカウンタとして$ iを追加し、それをidとhref linkとして設定しました。

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