dodanie recenzji na boostrap taps poprzez repeater custom fields

w sekcji head pobieramy bibliotekę jQuery

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10/jquery.min.js"></script>

 

w sekcji footer dodajemy bibliotekę bootstrap:

<script src="js/bootstrap.min.js"></script>

 

zamieszczamy potrzebne style:

#myTab{
 width:100%;
 border-bottom:solid 2px #fff;
 font-size:16px;
 color:#353535;
 list-style: none;
 text-align:center;
}
.nav > li {
 position: relative;
 display: inline;

}
.nav > li > a {
 position: relative;
 color:#353535;
 margin:0 20px;
 padding: 10px 15px;
 display:inline-block;
}
.nav > li > a:hover,
.nav > li > a:focus {
 text-decoration: none;
 color: #e42b3d;
}
.nav-tabs > li {
 display:inline;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
 color: #e42b3d;
 cursor: default;
}

.tab-content{
 width:100%;
 border-top: 1px solid #cdcece;
}
.tab-content > .tab-pane {
 display: none;
}
.tab-content > .active {
 display: block;
}

.fade{opacity:0;-webkit-transition:opacity .65s linear;transition:opacity .65s linear}.fade.in{opacity:1}

 

w panelu WP w Custom Fields tworzymy:

reviews_home – jako Repeater z polami podrzędnymi:

lp – jako text

firm – jako text

review – jako textarea

 

w kodzie strony zamieszczamy:

      <div class="reviews_home">
      
      <!-- add the first li class active -->
      <?php $first = true;
      if(have_rows('reviews_home',12)): ?>      
        <ul id="myTab" class="nav nav-tabs cfix">
        <?php while(have_rows('reviews_home',12)): the_row();?> 
          
          <?php if($first){  ?>
          <li class="active"><a href="#review<?php the_sub_field('lp'); ?>" data-toggle="tab"><?php the_sub_field('firm'); ?></a></li>
          <?php  $first = false; continue;} ?>
          <li><a href="#reviwe<?php the_sub_field('lp'); ?>" data-toggle="tab"><?php the_sub_field('firm'); ?></a></li>
          
        <?php endwhile; ?> 
        </ul>
      <?php endif; ?>     
      
      <!-- add the first div class active -->
      <?php $first = true;
      if(have_rows('reviews_home',12)): ?>
        <!-- Tab panes -->
        <div class="tab-content cfix">
        <?php while(have_rows('reviews_home',12)): the_row();?> 
         
         <?php if($first){  ?>
         <div class="tab-pane fade active in" id="review<?php the_sub_field('lp'); ?>">
            <p><?php the_sub_field('review'); ?></p>
         </div>     
         <?php  $first = false; continue;} ?>
         <div class="tab-pane fade" id="reviwe<?php the_sub_field('lp'); ?>">
            <p><?php the_sub_field('review'); ?></p>
         </div>  
                         		
        <?php endwhile; ?> 
        </div>
        <!-- End Tab panes -->
      <?php endif; ?>      
              
      </div>

–

#Wordpress