Как создать поле Repeater с отображением данных в несколько столбиков?

Как можно организовать отображение полей в repeater в админке так, чтобы они были представлены несколькими столбцами? Например, если у меня есть поля, такие как изображение и название, текущий длинный список создает неудобства. Есть ли способ сгруппировать их в несколько столбцов, например, по 3 или 4 в ряд?
  • 4 октября 2024 г. 4:54
Ответы на вопрос 2
Чтобы организовать отображение полей в Repeater в админке WordPress с помощью кастомного поля (например, используя ACF — Advanced Custom Fields), вы можете использовать несколько подходов. Одним из них является настройка CSS для управления сеткой, а другим — использование встроенных функций ACF для создания более сложной структуры.

Вот несколько шагов и методов, которые могут помочь вам организовать поля в несколько столбцов:

### 1. Используйте стили CSS

Если у вас есть доступ к настройкам темы и возможность добавления кастомного CSS, вы можете задать стиль для отображения полей в сетке. Например:

```css
.acf-repeater {
    display: flex;
    flex-wrap: wrap;
}

.acf-repeater .acf-row {
    width: calc(33.33% - 20px); /* 3 столбца */
    margin: 10px;
}
```

### 2. Настройка ACF

При добавлении полей в Repeater через ACF, вы можете использовать класс `acf-field` для управления стилем. Например, в разделе "CSS классы" для полей Repeater в ACF можно добавить пользовательский класс.

### 3. Используйте встроенные функции ACF

В ACF есть возможность кастомизации вывода полей с помощью `acf/field_group/admin_enqueue_scripts`, где вы можете подключить свои стили и скрипты, чтобы управлять отображением.

### 4. Используйте JavaScript

Иногда может понадобиться немного JavaScript, чтобы изменить процесс отображения после загрузки страницы.

```javascript
jQuery(document).ready(function($) {
    $('.acf-repeater').flexbox(); // или любой другой способ для реализации сетки
});
```

### 5. Пример использования кастомных полей

Если вы уже знаете, как создавать поля в Repeater с помощью ACF, просто создайте пару полей, например, "Изображение" и "Название", а потом настройте вышеприведенные CSS или JavaScript для их отображения.

### Пример реализации

1. Создайте группу полей в ACF и добавьте поле Repeater.
2. Добавьте подполе "Изображение" и подполе "Название".
3. В настройках полей добавьте CSS класс для Repeater.
4. Внесите CSS стили в файл стилей вашей темы.

Надеюсь, эти способы помогут вам организовать поля Repeater в несколько столбцов в админке WordPress.
Например использовать Вкладки, Группы или Аккордеон. 

Я первым элементом добавляю Аккордеон и тогда каждый элемент списка свернут пока не нужен в тч в гутенберге для каждого блока тоже первым элементом ставлю Аккордеон так при редактировании страницы легче навигациия по блокам.
Похожие вопросы