Создание таблиц в WordPress с помощью плагина Advanced Custom Fields

Если вы работает с WordPress, то скорее всего знаете о плагине Advanced Custom Fields. Не вижу смысла его описывать, ни один проект не обходится без этого плагина и он существенно расширяет функционал. Так же очень часто требуется выводить данные в таблицах, но в плагине ACF изначально такая возможность не предусмотрена. Поэтому необходимо установить дополнительный плагин, который, в свою очередь, расширит ACF и в нем появится возможность добавления таблиц.

Называется он: Advanced Custom Fields: Table Field и устанавливается стандартным способом.

И при выборе типа поля появляется Table.

После того, как вы создадите поле Table для определенного типа записей или страниц, можно начинать заполнять таблицу. Крестики означают добавление строк и колонок, минусы — удаление. Таблицы динамические и можно добавить неограниченное количество ячеек. Вот реальный пример с одного медицинского сайта.

Вывод таблицы в WordPress

На этом месте начинается самое интересное, потому как мы будем немного программировать. Первым делом добавим всю таблицу в переменную:

1

$price = get_field('table');

Затем запускаем цикл foreach

1
2
3
4
5
6
7
8
9

foreach ( $price['body'] as $price ) {
if ( isset( $price ) ) { ?>
 <tr>
  <td class="p-md-3 ">< ?php echo $price[0]['c']; ?></td>
  <td class="p-md-3">< ?php echo $price[1]['c'] ? $price[1]['c'] . ' руб.' : ""; ?> </td>
  <td class="p-md-3 ">< ?php echo $price[2]['c']; ?> руб.</td>
  </tr>
< ?php }
}

Полный код таблицы в WordPress будет выглядеть примерно так:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<table class="table mt-5 ">
    <thead>
    <tr>
        <th class="p-md-3 ">Наименование</th>
        <th class="p-md-3 ">Акция</th>
        <th class="p-md-3 ">Цена</th>
    </tr>
    </thead>
    <tbody>
	< ?php
	foreach ( $price['body'] as $price ) {
		if ( isset( $price ) ) {
			?>
            <tr>
                <td class="p-md-3 ">< ?php echo $price[0]['c']; ?></td>
                <td class="p-md-3">< ?php echo $price[1]['c'] ? $price[1]['c'] . ' руб.' : ""; ?> </td>
                <td class="p-md-3 ">< ?php echo $price[2]['c']; ?> руб.</td>
            </tr>
		< ?php }
	} ?>
 
    </tbody>
</table>

Небольшая расшифровка:

Это может показаться сложным для понимания. но если вы попробуете пару раз вставить таблицу на страницы WordPress сайта, то вам станет понятно как это работает и существенно облегчает жизнь контент-менеджерам м разработчикам в том числе. Теперь выводить данные в табличном виде гораздо удобнее.