Дисплеи, планета, шестеренки


Плагин 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.




Оставить комментарий