Вложенные вкладки с повторителем - Расширенные пользовательские поля Wordpress - PullRequest
0 голосов
/ 05 ноября 2018

Я хочу создать вкладки в Wordpress, используя плагин Advance Custom Field с модулем Repeater.

Это мой фактический код:

<?php

if( have_rows('menu_sections') ): ?>
    <ul class="nav nav-tabs" id="" role="tablist">
        <?php $i=0; while ( have_rows('menu_sections') ) : the_row(); ?>
            <?php
            $string = sanitize_title( get_sub_field('section_title') );
            ?>
            <li role="presentation" <?php if ($i==0) { ?>class="active"<?php } ?>  >
                <a  role="tab" data-toggle="tab"><?php the_sub_field('section_title'); ?></a>
            </li>
        <?php $i++; endwhile; ?>
    </ul>

    <div class="tab-content">
        <?php $i=0; while ( have_rows('menu_sections') ) : the_row(); ?>
            <?php
            $string = sanitize_title( get_sub_field('section_title') );
            ?>
            <div role="tabpanel" class="tab-pane text-left fade <?php if ($i==0) { ?>in active<?php } ?>" id="<?php echo $string; ?>">
                <?php
                while (have_rows('section_items')) {
                    the_row();
                    // Display each item as a list
                    ?>
                    <ul>
                        <li class="list-unstyled"><?php the_sub_field('dish_name'); ?></li>
                        <li class="list-unstyled"><?php the_sub_field('dish_description'); ?></li>
                        <li class="list-unstyled"><?php the_sub_field('dish_price'); ?></li>
                    </ul>
                    <?php
                } // end while have rows section_items
                ?>
            </div>
        <?php $i++; endwhile; ?>
    </div>
<?php endif; ?>

Этот фактический код отображает это:

enter image description here

Теперь, если я выберу другую вкладку, она не изменит информацию о карте, как вы можете видеть на следующем изображении:

enter image description here

Я использую вкладки начальной загрузки с CDN

Вот что отображает консоль Gooogle: enter image description here

Итак, я пробовал много разных способов, но безуспешно.

Я знаю, как сделать их без вложенного повторителя, и в этом случае я не знаю, почему это не работает. Я прочитал несколько других постов, но без особого успеха Так что я думаю, что если он не показывает что-то с css ??

Я оценю помощь. Привет!

1 Ответ

0 голосов
/ 05 ноября 2018

Попробуйте изменить

<li role="presentation" <?php if ($i==0) { ?>class="active"<?php } ?>  >
  <a  role="tab" data-toggle="tab"><?php the_sub_field('section_title'); ?></a>
</li>

до

<li role="presentation" <?php if ($i==0) { ?>class="active"<?php } ?>  >
  <a  role="tab" data-toggle="tab" href="#tab-<?php echo $i; ?>"><?php the_sub_field('section_title'); ?></a>
</li>

и

<div role="tabpanel" class="tab-pane text-left fade <?php if ($i==0) { ?>in active<?php } ?>" id="<?php echo $string; ?>">

до

<div role="tabpanel" class="tab-pane text-left fade <?php if ($i==0) { ?>in active<?php } ?>" id="tab-<?php echo $i; ?>">

Я надеюсь, что это решит проблему. Вы назначаете заголовок раздела в качестве идентификатора для панели вкладок, которая также может содержать пробел. Всегда рекомендуется использовать идентификатор без пробелов.

...