Я пытаюсь интегрировать вкладки Bootstrap с ACF.
Но как мне получить данные, когда я создаю более одной вкладки?
Когда я использую вкладку в это время, я могу тянуть таким образом, но когда я использую более одной, как я должен делать?
Как создать цикл для использования нескольких вкладок?
Как вытащить вкладку ссылок и контента?
Входные коды
<!-- tab start -->
<div class="row mar0 tabrk">
<ul class="tabnav nav-pills">
<li class="active"><a data-toggle="pill" href="#home"><img class="img-responsive" src="logo.png"></a></li>
<li><a data-toggle="pill" href="#menu1"><img class="img-responsive" src="logo.png"></a></li>
</ul>
<div class="tabbody tab-content">
<div id="home" class="tab-pane fade in active">
<ul>
<li>
<div class="media">
<div class="media-left" style="border-color: #ecb319;">
<a href="#">
<img class="media-object" src="images/marka/1.png">
</a>
</div>
<div class="media-body">
<h4 class="media-heading" style="color: #ecb319;">Asset Management</h4>
<p>Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.</p>
</div>
</div>
</li>
<li>
<div class="media">
<div class="media-left" style="border-color: #a8bbe1;">
<a href="#">
<img class="media-object" src="images/marka/2.png">
</a>
</div>
<div class="media-body">
<h4 class="media-heading" style="color: #a8bbe1;">Asset Management</h4>
<p>Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.</p>
</div>
</div>
</li>
<li>
<div class="media">
<div class="media-left" style="border-color: #3dd0d9;">
<a href="#">
<img class="media-object" src="images/marka/3.png">
</a>
</div>
<div class="media-body">
<h4 class="media-heading" style="color: #3dd0d9;">Asset Management</h4>
<p>Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.</p>
</div>
</div>
</li>
<li>
<div class="media">
<div class="media-left" style="border-color: #8a8065;">
<a href="#">
<img class="media-object" src="images/marka/4.png">
</a>
</div>
<div class="media-body">
<h4 class="media-heading" style="color: #8a8065;">Asset Management</h4>
<p>Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.</p>
</div>
</div>
</li>
<li>
<div class="media">
<div class="media-left" style="border-color: #a4d46b;">
<a href="#">
<img class="media-object" src="images/marka/5.png">
</a>
</div>
<div class="media-body">
<h4 class="media-heading" style="color: #a4d46b;">Asset Management</h4>
<p>Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.</p>
</div>
</div>
</li>
<li>
<div class="media">
<div class="media-left" style="border-color: #164f9c;">
<a href="#">
<img class="media-object" src="images/marka/6.png">
</a>
</div>
<div class="media-body">
<h4 class="media-heading" style="color: #164f9c;">Asset Management</h4>
<p>Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.</p>
</div>
</div>
</li>
<li>
<div class="media">
<div class="media-left" style="border-color:#f0441c;">
<a href="#">
<img class="media-object" src="images/marka/7.png">
</a>
</div>
<div class="media-body">
<h4 class="media-heading" style="color: #f0441c;">Asset Management</h4>
<p>Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.</p>
</div>
</div>
</li>
<li>
<div class="media">
<div class="media-left" style="border-color: #9c6cb2;">
<a href="#">
<img class="media-object" src="images/marka/8.png">
</a>
</div>
<div class="media-body">
<h4 class="media-heading" style="color: #9c6cb2;">Asset Management</h4>
<p>Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.</p>
</div>
</div>
</li>
<li>
<div class="media">
<div class="media-left" style="border-color:#17dfc0; ">
<a href="#">
<img class="media-object" src="images/marka/9.png">
</a>
</div>
<div class="media-body">
<h4 class="media-heading" style="color: #17dfc0;">Asset Management</h4>
<p>Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.</p>
</div>
</div>
</li>
</ul>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<!-- tab end -->
Сейчас:
<div class="row mar0 tabrk">
<ul class="tabnav nav-pills">
<?php $image = get_field('marka_logo');
?>
<li class="active"><a data-toggle="pill" href="#home"><img class="img-responsive" src="<?php echo $image['url']; ?>"></a></li>
</ul>
<div class="tabbody tab-content">
<div id="home" class="tab-pane fade in active">
<ul>
<?php
// check if the repeater field has rows of data
if( have_rows('marka_ozellikler') ):
// loop through the rows of data
while ( have_rows('marka_ozellikler') ) : the_row();
?>
<li>
<div class="media">
<div class="media-left" style="border-color: <?php the_sub_field('marka_color'); ?>;">
<a href="#">
<img class="media-object" src="<?php the_sub_field('marka_sol_gorsel'); ?>">
</a>
</div>
<div class="media-body">
<h4 class="media-heading" style="color: <?php the_sub_field('marka_color'); ?>;"><?php the_sub_field('marka_baslik'); ?></h4>
<p><?php the_sub_field('marka_aciklama'); ?></p>
</div>
</div>
</li>
<?php
endwhile;
else :
// no rows found
endif;
?>
</ul>
</div>
</div>
</div>
Что я хочу:
Изображение:
Спасибо