Bootstrap tabs в Wordpress

262

13 октября 2017, 14:46

За основу взяты стандартные табы HTML

<div id="text"> 
<ul class="nav nav-tabs">
    <li class="active">
        <a  href="#1" data-toggle="tab"><img src="<?php the_field('img_callback'); ?>"></a>
    </li>
    <li>
        <a href="#2" data-toggle="tab"><img src="<?php the_field('img_callback'); ?>"></a>
    </li>
    <li>
        <a href="#3" data-toggle="tab"><img src="<?php the_field('img_callback'); ?>"></a>
    </li>
</ul>
<div class="tab-content ">
    <div class="tab-pane active" id="1">
        <h3><?php the_title(); ?></h3>
        <?php the_content(); ?>
    </div>
    <div class="tab-pane" id="2">
        <h3><?php the_title(); ?></h3>
        <?php the_content(); ?>
    </div>
    <div class="tab-pane" id="3">
        <h3><?php the_title(); ?></h3>
        <?php the_content(); ?>
    </div>
</div>

Пытаюсь сделать цикл WP вывод записей определенной категории

<div id="text">                     
<ul class="nav nav-tabs">   
    <?php query_posts('cat=5&posts_per_page=5'); 
    while (have_posts()) : the_post();?>                            
        <?php
        $i=0;                               
        $image = get_field('img_callback');
        if($image){                                 
            echo('<li>');?>                             
                <a  href="#<?php echo $i++ ?>" data-toggle="tab"><img src="<?php echo $image ?>"></a>
            <?php
            echo('</li>');
            }?>                             
    <?php 
    endwhile;
    wp_reset_query();
    ?>  
</ul>
<div class="tab-content ">
    <div class="tab-pane active" id="<?php echo $i ?>">
        <h3><?php the_title(); ?></h3>
        <?php the_content(); ?>
    </div>  
</div>

Запутался, не могу понять, как сделать цикл, который будет выводить контент записи по клику на таб.

Answer 1

<div id="text">                     
<ul class="nav nav-tabs">   
    <?php query_posts('cat=5&posts_per_page=5'); 
    $i=0; 
    while (have_posts()) : the_post();?>                            
        <?php                         
        $image = get_field('img_callback');
        if($image){                                 
            echo('<li>');?>                             
                <a  href="#tab_<?php echo $i ?>" data-toggle="tab"><img src="<?php echo $image ?>"></a>
            <?php
            echo('</li>');
            }?>                             
    <?php 
    $i++;
    endwhile;
    wp_reset_query();
    ?>  
</ul>
<div class="tab-content ">
    <?php query_posts('cat=5&posts_per_page=5'); 
    $i=0; 
    while (have_posts()) : the_post();?> 
    <div class="tab-pane active" id="tab_<?php echo $i ?>">
        <h3><?php the_title(); ?></h3>
        <?php the_content(); ?>
    </div> 
    <?php 
    $i++;
    endwhile;
    wp_reset_query();
    ?>  
</div>