Плагин Advanced Custom Fields (ACF) для WordPress: использование и вывод полей

После того, как вы установите и активируете плагин ACF для WordPress в меню административной части вашего сайта появится новый пункт – «Произвольные поля». Именно здесь и будут собраны все нужные инструменты.

Добавление произвольных полей с помощью плагина ACF для WordPress

Войдите в пункт меню «Произвольные поля»:

Откроется рабочее поле плагина. Произвольные поля в ACF по умолчанию делятся на группы, и начать вам нужно с того, чтобы создать первую группу полей. Для этого нажмите кнопку «Добавить новую»:

Мы проиллюстрируем процесс добавления произвольных полей на примере условной карточки товара, которая будет содержать изображение товара, его название и цену.

Введите название группы полей (у нас это «Карточка товара») и нажмите кнопку «+ Добавить поле». Откроется подробная форма, где вам следует указать все параметры поля. Параметры в плагине снабжены довольно понятными комментариями, которые помогут вам сориентироваться. Пункты, обязательные к заполнению будут отмечены звездочкой – «*».

В самом конце формы вы увидите кнопку «+ Добавить поле», точно такую же, как и в самом начале. Нажав на нее, вы сможете добавить следующее произвольное поле. В нашем случае это «Наименование товара»

:Открывшаяся форма будет полностью аналогична предыдущей, только здесь уже в пункте «Тип поля» следует выбрать не «Изображение», а «Текст».

Аналогичным образом мы добавляем произвольное поле «Цена товара», возвращаемся в самое начало «большой» формы и нажимаем справа вверху кнопку «Опубликовать». Если вы правильно заполнили все обязательные пункты, группа полей будет интегрирована в систему:

Теперь, добавляя новую запись (пункт меню «Записи» -> «Добавить новую»), вы всегда будете видеть внизу рабочего поля новые поля, которых раньше не было:

Отображение произвольных полей

Все вышеописанное – это необходимая мера для того, чтобы на вашем сайте появились нужные вам произвольные поля. Необходимая, но не достаточная. Для того чтобы поставить точку в этом вопросе и насладиться результатом, нужно немного подправить код шаблона (темы) WordPress, введя несколько специальных строк кода.

Выбираем в админке пункт меню «Внешний вид» -> «Редактор».

В списке шаблонов справа выберите «Отдельная запись (single.php)» — откроется код шаблона. Именно в него и следует вставить три блока кода, которые будут соответствовать тем трем произвольным полям, которые мы создали средствами плагина (изображение товара, наименование товара, цена товара).

Для отображения изображения используйте следующий код:

$image = get_field(‘foto_tovara’);

if( !empty($image) ): ?>

<img src=»<?php echo $image[‘url’]; ?>» alt=»<?php echo $image[‘alt’]; ?>» />

<?php endif; ?>

Обратите внимание. Этот код вы можете скопировать в точности, только вам нужно будет заменить имя поля с «нашего» на «свое». В нашем примере имя поля – это ‘foto_tovara’:

Для отображения текстовых полей (наименование товара, цена товара) код гораздо проще – всего по одной строке для каждого поля:

<?php echo get_post_meta($post->ID, ‘naimenovanije_tovara’, true); ?>

<?php echo get_post_meta($post->ID, ‘cena_tovara’, true); ?>

Здесь тоже вам нужно будет изменить только имя поля.

После того, как вы добавите эти блоки кода в шаблон «Отдельная страница (single.php)», нажмите кнопку «Обновить файл» в самом низу. С этого момента произвольные поля будут отображаться в записях и страницах.

Имейте в виду. Произвольные поля будут отображаться именно там, где вы вставили указанный код. И если вы вставили строки кода подряд одну за другой, то и отображаться поля будут точно так же, без всяких пробелов и разделителей. Для того чтобы разместить произвольные поля там, где вы хотите, используйте средства языка разметки HTML.