Как создать интерфейсную форму с помощью ACF

В этом уроке я покажу вам, как создать интерфейсную форму с дополнительными настраиваемыми полями (ACF). Я подробно расскажу о том, как это работает и как вы можете настроить его в соответствии со своими потребностями.

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

Приложений для добавления полей ACF во внешний интерфейс много; вы можете добавить форму для создания и обновления сообщений, категорий или пользователей. С помощью некоторого кода вы даже можете создать общую контактную форму, где ответы сохраняются в виде сообщений настраиваемого типа, а код запускает уведомления по электронной почте в ответах формы. Так же, как обычная контактная форма. Использование функций внешнего интерфейса ACF для создания форм и предоставления посетителям возможности создавать или редактировать содержимое сайта без входа в систему является распространенным использованием. Но используйте это с осторожностью. Это легко открывает возможности для спама и злоупотреблений, а в худшем случае посетители могут уничтожить содержимое или настройки вашего сайта. Вы должны, по крайней мере, требовать, чтобы посетители входили в систему с действительными пользователями, чтобы получить доступ к формам, которые могут изменить критический контент WordPress (профиль пользователя, сообщения и т. д.).

Что мы сделаем

Я предполагаю, что сайт WordPress определил набор дополнительных полей для пользователей с пользовательской ролью (‘ member‘) с помощью ACF. У этих пользователей вообще нет прав администратора, но мы хотим предложить им возможность редактировать свои настраиваемые поля в своем профиле. Решение, которое я выбрал, заключается в создании пользовательского шаблона страницы для обновления их профиля, показывая форму только в том случае, если они вошли в систему и имеют правильную роль.

Я делаю это довольно просто в этом руководстве, поэтому я не буду включать пример добавления стандартных полей профиля пользователя в WordPress (электронная почта, пароль и т. д.). Это немного выходит за рамки этого урока. Я разрешаю редактировать поля ACF только на этой странице редактирования профиля.

С помощью ACF я создал группу полей с набором настроек для пользователей-членов:

И у меня есть собственный шаблон страницы в моей теме, который в настоящее время выглядит так — на данный момент это просто стандартный одностраничный шаблон;

В строке #11мы проверяем, вошел ли текущий пользователь в систему и имеет ли он пользовательскую роль member. Измените роль или минимальное правило на то, для чего вы хотите разрешить эту интерфейсную форму. Просто помните, что даже самая низкая роль в WordPress subscriberимеет доступ к редактированию своего профиля в панели администратора.

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

Как работают интерфейсные формы ACF

Вам нужно добавить два вызова функций в шаблон, который вы хотите использовать в качестве внешнего интерфейса; [acf_form_head](https://www.advancedcustomfields.com/resources/acf_form_head/)()и [acf_form](https://www.advancedcustomfields.com/resources/acf_form/)().

Функция acf_form_head()должна быть размещена в самом верху вашего шаблона перед любым выводом. Обычно в шаблоне это означает до [get_header](https://developer.wordpress.org/reference/functions/get_header/)(). Вызов функции обеспечивает добавление всех сценариев и стилей, чтобы поля ACF отображались правильно, а также все функции для обработки, проверки и отправки работы. Нам не нужно добавлять какие-либо параметры к этой функции.

Функция acf_form()— это функция, отображающая интерфейсную форму, и ее следует размещать там, где вы хотите, чтобы форма отображалась. Он принимает множество настроек. Нам нужно как минимум сообщить, какие поля или группы отображать и куда их сохранять.

Когда дело доходит до решения, какие поля показывать, вы обычно указываете группу полей (свойство field_groups). Но acf_form()функция также поддерживает предоставление определенных отдельных полей (свойство fields). Вы также можете указать несколько полей или групп полей, чтобы объединить их в одну форму. Из-за этого field_groupsожидает массив. Таким образом, даже если вы хотите показать только одну группу полей, вам необходимо указать этот идентификатор или слаг внутри массива.

Второе обязательное свойство, которое вам нужно указать в форме acf_form(), — это то, откуда данные должны быть загружены и где они должны быть сохранены, в свойстве post_id. Не обманывайтесь названием «пост». Правила post_idостаются теми же, когда вы используете get_field(), если вы уже знакомы с работой с ACF. Если поля предназначены для сообщения (сообщение, страница, пользовательский тип сообщения), вам нужно указать здесь только идентификатор. Но если вы хотите загружать и обновлять данные о пользователях, вам следует использовать следующий формат: user_{user ID}. Аналогично с полями для категории: category_{category ID}. Ознакомьтесь со всеми правилами в разделе «Получить значение из разных объектов» в документации ACF наget_field().

Добавление формы интерфейса ACF в наш шаблон

Сначала мы добавляем acf_form_head()в самом верху, прямо перед, get_header()но после объявления шаблона страницы (строка #3). Затем в том месте, где мы хотим отобразить форму, мы добавляем acf_form()два свойства.

Нам нужно узнать идентификатор нашей группы полей. Если вы добавили группу полей по коду (у меня есть подробный пост о том, как добавить поля ACF по коду ), вы уже предоставили слаг группы полей. Затем вы должны предоставить слаг field_groupsсвойству в массиве. Если вы добавили группу полей в панель администратора, вам нужно открыть группу в браузере и проверить URL-адрес. Нас интересует идентификатор, который стоит после " ?post=":

В моем примере это идентификатор 1145. Тогда это то, что я предоставляю в массиве field_groups.

PS: я не рекомендую жестко кодировать идентификатор, так как этот идентификатор будет разным в каждом экземпляре WordPress! Если вы работаете с локальной установкой, а также с промежуточным и производственным сервером, я определенно рекомендую вместо этого добавлять поля по коду. Таким образом, вы можете определить имя группы полей, и оно будет работать везде.

Что касается post_idсвойства, я могу получить текущий идентификатор пользователя с помощью функции WordPress [get_current_user_id](https://developer.wordpress.org/reference/functions/get_current_user_id/)(). Я объединяю строку ‘ user_‘ и результат этой функции как post_id.

И это в основном все!

Если я зайду на эту страницу, войдя в систему как пользователь-член, я получу текущие значения для этого пользователя. Все типы полей ACF работают и выглядят хорошо. И я могу обновить значения, используя интерфейсную форму, и увидеть, что они также обновляются в админке.

Дальнейшая настройка формы

Мы можем дополнительно настроить параметры, переданные в acf_form(). Обратитесь к документации ACF по acf_form(), чтобы увидеть все возможные настройки.

На данный момент форма нашего профиля пользователя отображает «Обновить сообщение» при отправке настроек. Это не имеет смысла для настроек профиля. Мы можем настроить сообщение с помощью свойства updated_message.

Если вы хотите, вы можете определить другой URL-адрес для перенаправления после отправки формы. По умолчанию та же страница перезагружается с параметром GET ‘ ?updated=true‘. Вы можете указать конкретный URL-адрес страницы благодарности или, если форма предназначена для сообщения, вы можете перенаправить на просмотр этого сообщения. Мы можем указать URL-адрес в свойстве return.

Если нам нужен другой текст на кнопке отправки формы, мы можем указать это в свойстве submit_value.

Вы также можете указать acf_form()не отображать <form>тег. Если вы хотите объединить форму ACF со своей собственной формой, вы можете установить formи ввести falseвручную. Если вы сделаете это, ACF по-прежнему сможет обновлять значения, но вам нужно позаботиться об обновлении любых других полей в вашей пользовательской форме.<form>``<input type="submit"/>

Запуск действий при отправке формы

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

Advanced Custom Fields предлагает два полезных хука, когда поля обновляются; Действие [acf/save_post](https://www.advancedcustomfields.com/resources/acf-save_post/)и фильтр [acf/pre_save_post](https://www.advancedcustomfields.com/resources/acf-pre_save_post/). Опять же, не обманывайтесь названием «пост». Они запускаются для любого обновления полей ACF, включая поля для пользователя, категории, меню и т. д.

Фильтр acf/pre_save_postзапускается только на интерфейсных формах с использованием acf_form(). В качестве параметра этого фильтра мы получаем post_idто же значение, которое мы передали выше post_id. acf_form()Фильтр ожидает, что вы вернетесь post_id. Помните, что нам нужно проанализировать это, если мы не имеем в виду идентификатор сообщения. Например, для пользователя вам нужно сделать что-то вроде:

add_filter('acf/pre_save_post', function($post_id) {
    if (strpos($post_id, 'user_') === false) {
        return $post_id;
    }
 
    $user_id = intval(substr($post_id, 5));  // Extracts the user ID
 
    // Do your thing. You'll find the submitted values in $_POST
 
    return $post_id;
});

В качестве альтернативы вы можете использовать хук acf/save_post, но помните, что он также срабатывает в админке. В качестве параметра для этого хука вы получите post_id, то же самое, что и acf/pre_save_post. При использовании важно помнить acf/save_post, что вы можете использовать приоритет хука, чтобы контролировать, запускается ли ваша функция до сохранения полей или после. Функция, подключенная к приоритету 10 или выше, будет запущена после сохранения полей. И приоритет менее 10 будет активирован до того, как ACF сохранит значения.

add_action('acf/save_post', function($post_id) {
    // You can fetch the values with standard get_field()
});
 
add_action('acf/save_post', function($post_id) {
    // You can access the submitted values in $_POST
}, 8);

Когда вы подключили функцию перед сохранением (приоритет меньше 10), вы можете сравнить отправленные значения с тем, что сохранит ACF. Вы можете сделать, get_field()чтобы получить текущее значение и сравнить его с соответствующим значением в $_POST.

Если вы хотите сделать что-то только тогда, когда поля были обновлены во внешнем интерфейсе, вы можете просто проверить, находимся ли мы в админке с помощью [is_admin](https://developer.wordpress.org/reference/functions/is_admin/)(). Ниже приведен пример того, как вы можете настроить уведомления по электронной почте, когда пользователь обновляет свои настройки во внешнем интерфейсе;

add_action('acf/save_post', function($post_id) {
    if (strpos($post_id, 'user_') === false) {
        return $post_id;
    }
 
    if (is_admin()) {
        return;  // Bail if we are updating in admin
    }
 
    $user_id = intval(substr($post_id, 5));
 
    // Use get_field() to get the saved/submitted values if needed
    // Then use wp_mail() to send an email
});