Как в WP реализовать возможность удобного добавления вкладок через acf?

Ссылка скопирована
PHP WYSIWYG
1 ответ

Всем мира и добра!
Уважаемые знатоки, подскажите как в админку WP, добавить поля для ввода отдельно для каждой вкладки.
Как работает сейчас:
В админке, в соответствующем разделе, при клике "Добавить" появляется возможность добавить вкладку (задаю имя и выводится поле WYSIWYG редактор).
код вывода сейчас: 

<!-- Tabs -->           <div class="tabs">             <!-- Tab links -->              <ul class="tab-list">               <?php if (have_rows('tabses')) : while (have_rows('tabses')) : the_row(); ?>                   <li class="tab-list__item"><?php the_sub_field('tabs_name'); ?></li>               <?php endwhile;               endif; ?>             </ul>              <!-- end tab links -->              <!-- Tab content -->             <div class="tab-list__content" >               <?php if (have_rows('tabses')) : while (have_rows('tabses')) : the_row(); ?>                   <div class="tab-content"><?php the_sub_field('tabs_content'); ?></div>               <?php endwhile;               endif; ?>             </div>             <!-- end tab content -->           </div>           <!-- end tabs -->

<!-- Tabs --> <div class="tabs"> <!-- Tab links --> <ul class="tab-list"> <?php if (have_rows('tabses')) : while (have_rows('tabses')) : the_row(); ?> <li class="tab-list__item"><?php the_sub_field('tabs_name'); ?></li> <?php endwhile; endif; ?> </ul> <!-- end tab links --> <!-- Tab content --> <div class="tab-list__content" > <?php if (have_rows('tabses')) : while (have_rows('tabses')) : the_row(); ?> <div class="tab-content"><?php the_sub_field('tabs_content'); ?></div> <?php endwhile; endif; ?> </div> <!-- end tab content --> </div> <!-- end tabs -->

сейчас всё это выводится через "повторитель" На изображении текущая реализация.

Как в WP реализовать возможность удобного добавления вкладок через acf?

Текущая задача:
Так как в разных вкладках, разный контент, нужны поля для ввода к вкладкам.
Первая вкладка, которая создаётся может быть WYSIWYG редактор.
Вторая вкладка которая должна создаваться это список li:

<ul class="list">  	<li class="list-item" data-clue="Текст подсказки"><i class="fa fa-check-square-o" aria-hidden="true"></i> <span class="list-text">Выводимый текст</span></li>

<ul class="list"> <li class="list-item" data-clue="Текст подсказки"><i class="fa fa-check-square-o" aria-hidden="true"></i> <span class="list-text">Выводимый текст</span></li>

Третья вкладка это файлы опубликованные с описанием
Вопрос: Как реализовать возможность удобного добавления вкладок с выше описанным через acf?

Дополнительно:

Как в WP реализовать возможность удобного добавления вкладок через acf?

Здравствуйте. То что вы описали -- удобно решается с помощью типа поля Flexible Content. Вы можете создать несколько вариантов ваших вкладок и выбирать их в любом количестве и последовательности.
Работа с флексибл контент похожа на работу с репитером, только наборы полей могут быть разными.

Ответы:

У вас один повторитель, нужно 2 один в другом, ссыль на доку

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Игорь Волков Ответ

Для такой задачи в ACF нужно использовать не одно WYSIWYG-поле, а повторитель. Структура простая: группа полей → repeater tabs → внутри него два поля: название вкладки и содержимое вкладки. Тогда редактор сможет нажимать «Добавить вкладку» сколько угодно раз, а каждая вкладка будет иметь свой заголовок и свой WYSIWYG.

Пример структуры ACF:

  • tabs — Repeater;
  • tab_title — Text;
  • tab_content — WYSIWYG Editor.

Вывод:

<?php if (have_rows('tabs')) : ?>
  <div class="tabs">
    <ul class="tab-list">
      <?php $i = 0; while (have_rows('tabs')) : the_row(); ?>
        <li class="tab-list__item <?php echo $i === 0 ? 'active' : ''; ?>" data-tab="tab-<?php echo esc_attr($i); ?>">
          <?php echo esc_html(get_sub_field('tab_title')); ?>
        </li>
      <?php $i++; endwhile; ?>
    </ul>
 
    <div class="tab-list__content">
      <?php $i = 0; while (have_rows('tabs')) : the_row(); ?>
        <div id="tab-<?php echo esc_attr($i); ?>" class="tab-panel <?php echo $i === 0 ? 'active' : ''; ?>">
          <?php echo wp_kses_post(get_sub_field('tab_content')); ?>
        </div>
      <?php $i++; endwhile; ?>
    </div>
  </div>
<?php endif; ?>

<?php if (have_rows('tabs')) : ?> <div class="tabs"> <ul class="tab-list"> <?php $i = 0; while (have_rows('tabs')) : the_row(); ?> <li class="tab-list__item <?php echo $i === 0 ? 'active' : ''; ?>" data-tab="tab-<?php echo esc_attr($i); ?>"> <?php echo esc_html(get_sub_field('tab_title')); ?> </li> <?php $i++; endwhile; ?> </ul> <div class="tab-list__content"> <?php $i = 0; while (have_rows('tabs')) : the_row(); ?> <div id="tab-<?php echo esc_attr($i); ?>" class="tab-panel <?php echo $i === 0 ? 'active' : ''; ?>"> <?php echo wp_kses_post(get_sub_field('tab_content')); ?> </div> <?php $i++; endwhile; ?> </div> </div> <?php endif; ?>

Ключевой момент: не выводите WYSIWYG через esc_html(), иначе HTML-разметка редактора превратится в текст. Используйте wp_kses_post() или the_sub_field(), если доверяете редакторам.

Если вкладки должны быть разными по типам контента, например текст, галерея, таблица, блок с ценами, лучше использовать ACF Flexible Content. Но для обычных вкладок «заголовок + текст» repeater проще, быстрее и понятнее для администратора.

Для вкладок обязательно добавьте простую JS-логику переключения и ARIA-атрибуты, если блок публичный. Заголовки вкладок лучше хранить текстом, а содержимое через WYSIWYG. Не храните всё одной строкой с разделителями: редактор быстро ошибётся, а потом будет сложно менять порядок вкладок и переносить контент.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов Telegram Как диагностировать ошибку с подключением к прокси в мобильном приложении Telegram? 0 ответов