Обзор
✋ Мы выпустили новый JavaScript API, полный мощных функций, действий и фильтров! Если вы используете ACF 5.7 или выше, ознакомьтесь с нашим JavaScript API.
В этой статье мы расскажем, как добавить собственный JS для взаимодействия с полями и настройками ACF и их изменения. Как и многие actions и filters WordPress, ACF использует для своего JavaScript похожую модель.
Начало работы
Есть два способа добавить пользовательский JavaScript в админку WordPress: подключить файл скрипта или добавить встроенный скрипт. Если вы планируете писать много функциональности, рекомендуется подключать отдельный JS-файл.
Подключение
Чтобы подключить JS-файл в админке, можно использовать функцию wp_enqueue_script, например так.
functions.php
function my_admin_enqueue_scripts() {
wp_enqueue_script( 'my-admin-js', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action('acf/input/admin_enqueue_scripts', 'my_admin_enqueue_scripts');Встроенный
Чтобы добавить встроенный JS в админке, можно использовать действие acf/input/admin_footer. Это действие выполняется в подвале любой страницы админки, где могут быть поля ACF.
functions.php
function my_acf_input_admin_footer() {
?>
<script type="text/javascript">
(function($) {
// JS здесь
})(jQuery);
</script>
<?php
}
add_action('acf/input/admin_footer', 'my_acf_input_admin_footer');Действия
Ниже приведён список всех доступных JS-действий. Подключиться к действию можно с помощью JS-функции add_action у объекта acf. Если вы используете действие ready, рекомендуется также подключиться к действию append с той же функциональностью.
Ready
Вызывается, когда документ готов после первоначальной загрузки страницы.
acf.add_action('ready', function( $el ){
// $el будет эквивалентен $('body')
// найти конкретное поле
var $field = $('#my-wrapper-id');
// выполнить что-нибудь с $field
});Это действие также срабатывает для каждого поля через действия ready_field и ready_field/type={$field_type}.
Append
Вызывается, когда на страницу добавляется новый HTML. Это происходит при добавлении новой строки repeater, нового layout flexible content и при загрузке новых групп полей через AJAX. Если вы используете действие append, рекомендуется также подключиться к этому действию с той же функциональностью.
acf.add_action('append', function( $el ){
// $el будет эквивалентен новому элементу, который добавляется $('tr.row')
// найти конкретное поле
var $field = $el.find('#my-wrapper-id');
// выполнить что-нибудь с $field
});Это действие также срабатывает для каждого поля через действия append_field и append_field/type={$field_type}.
Load
Вызывается, когда окно загрузило все ресурсы. Это действие предпочтительнее, чем ‘ready’, если для логики нужны ширина и высота изображения.
acf.add_action('load', function( $el ){
// $el будет эквивалентен $('body')
// найти конкретное поле
var $field = $el.find('#my-wrapper-id');
// выполнить что-нибудь с $field
});Это действие также срабатывает для каждого поля через действия load_field и load_field/type={$field_type}.
Remove
Вызывается, когда HTML удаляется со страницы. Это происходит при удалении строки repeater или layout flexible content.
acf.add_action('remove', function( $el ){
// $el будет эквивалентен новому элементу, который удаляется $('tr.row')
// найти конкретное поле
var $field = $el.find('#my-wrapper-id');
// выполнить что-нибудь с $field
});Это действие также срабатывает для каждого поля через действия remove_field и remove_field/type={$field_type}.
sortstart
Вызывается, когда HTML начинает перемещаться по странице с помощью drag-and-drop. Это происходит при изменении порядка строки repeater или layout flexible content.
acf.add_action('sortstart', function( $el ){
// $el будет эквивалентен новому элементу, который перемещается $('tr.row')
// найти конкретное поле
var $field = $el.find('#my-wrapper-id');
// выполнить что-нибудь с $field
});Это действие также срабатывает для каждого поля через действия sortstart_field и sortstart_field/type={$field_type}.
sortstop
Вызывается, когда HTML завершил перемещение по странице с помощью drag-and-drop. Это происходит при изменении порядка строки repeater или layout flexible content.
acf.add_action('sortstop', function( $el ){
// $el будет эквивалентен новому элементу, который перемещается $('tr.row')
// найти конкретное поле
var $field = $el.find('#my-wrapper-id');
// выполнить что-нибудь с $field
});Это действие также срабатывает для каждого поля через действия sortstop_field и sortstop_field/type={$field_type}.
hide_field
Вызывается, когда поле скрыто либо через вкладку, либо с помощью условной логики.
acf.add_action('hide_field', function( $field, context ){
// context — строка со значением либо 'tab', либо 'conditional_logic'
// выполнить что-нибудь с $field
});Это действие также срабатывает для конкретного поля через hide_field/type={$field_type}.
show_field
Вызывается, когда поле показано либо через вкладку, либо с помощью условной логики.
acf.add_action('show_field', function( $field, context ){
// context — строка со значением либо 'tab', либо 'conditional_logic'
// выполнить что-нибудь с $field
});Это действие также срабатывает для конкретного поля через show_field/type={$field_type}.
date_picker_init
Вызывается, когда инициализирован date picker. Добавлено в v5.5.8
acf.add_action('date_picker_init', function( $input, args, $field ){
// $input (jQuery) элемент текстового input
// args (object) аргументы, переданные функции datepicker
// $field (jQuery) элемент поля
});date_time_picker_init
Вызывается, когда инициализирован date time picker. Добавлено в v5.5.8
acf.add_action('date_time_picker_init', function( $input, args, $field ){
// $input (jQuery) элемент текстового input
// args (object) аргументы, переданные функции datepicker
// $field (jQuery) элемент поля
});time_picker_init
Вызывается, когда инициализирован time picker. Добавлено в v5.5.8
acf.add_action('time_picker_init', function( $input, args, $field ){
// $input (jQuery) элемент текстового input
// args (object) аргументы, переданные функции datepicker
// $field (jQuery) элемент поля
});select2_init
Вызывается, когда инициализирован элемент Select2. По умолчанию ACF включает библиотеку Select2 v3, для инициализации которой требуется скрытый input. Можно подключить библиотеку Select2 v4, и в этом случае аргумент $input передаст элемент ‘select’ вместо скрытого input из-за изменений в библиотеке. Добавлено в v5.5.8
acf.add_action('select2_init', function( $input, args, settings, $field ){
// $input (jQuery) элемент скрытого input
// args (object) аргументы, переданные функции select2
// settings (object) параметры, переданные функции acf.select2
// $field (jQuery) элемент поля
});wysiwyg_tinymce_init
Вызывается, когда инициализирован элемент WYSIWYG tinymce. Добавлено в v5.5.8
acf.add_action('wysiwyg_tinymce_init', function( ed, id, mceInit, $field ){
// ed (object) объект tinymce, возвращаемый функцией init
// id (string) идентификатор экземпляра tinymce
// mceInit (object) аргументы, переданные функции tinymce
// $field (jQuery) элемент поля
});wysiwyg_quicktags_init
Вызывается, когда инициализирован элемент WYSIWYG quicktags. Каждый экземпляр tinymce также может содержать режим редактирования ‘text’, который показывает базовые кнопки quicktag. Добавлено в v5.5.8
acf.add_action('wysiwyg_quicktags_init', function( qtag, id, qtInit, $field ){
// qtag (object) объект quick tag, возвращаемый функцией init
// id (string) идентификатор экземпляра qtag
// qtInit (object) аргументы, переданные функции quick tag
// $field (jQuery) элемент поля
});google_map_init
Вызывается, когда инициализирован элемент Google Map. Добавлено в v5.5.11
acf.add_action('google_map_init', function( map, marker, $field ){
// map (object) объект Google Map, возвращаемый функцией google.maps.Map()
// marker (object) объект маркера, возвращаемый функцией google.maps.Marker()
// $field (jQuery) элемент поля
});Фильтры
validation_complete
Этот фильтр позволяет настраивать JSON-ответ проверки. Вызывается после завершения AJAX-валидации, но до показа ошибок или отправки формы.
acf.add_filter('validation_complete', function( json, $form ){
// если есть ошибки?
if( json.errors ) {
}
// вернуть
return json;
});wysiwyg_tinymce_settings
Этот фильтр позволяет настраивать параметры tinyMCE для каждого поля WYSIWYG. Вызывается перед созданием экземпляра tinyMCE.
acf.add_filter('wysiwyg_tinymce_settings', function( mceInit, id, $field ){
// что-нибудь сделать с mceInit
// вернуть
return mceInit;
});wysiwyg_quicktags_settings
Этот фильтр позволяет настраивать параметры quicktags для каждого поля WYSIWYG. Вызывается перед созданием текстового экземпляра.
acf.add_filter('wysiwyg_quicktags_settings', function( qtInit, id, $field ){
// что-нибудь сделать с qtInit
// вернуть
return qtInit;
});date_picker_args
Этот фильтр позволяет настраивать параметры date picker для каждого поля date picker. Вызывается перед созданием экземпляра date picker. Полный список параметров можно найти здесь: https://api.jqueryui.com/datepicker/
acf.add_filter('date_picker_args', function( args, $field ){
// что-нибудь сделать с args
// вернуть
return args;
});date_time_picker_args
Этот фильтр позволяет настраивать параметры date time picker для каждого поля date time picker. Вызывается перед созданием экземпляра date time picker. Полный список параметров можно найти здесь: http://trentrichardson.com/examples/timepicker/
acf.add_filter('date_time_picker_args', function( args, $field ){
// что-нибудь сделать с args
// вернуть
return args;
});time_picker_args
Этот фильтр позволяет настраивать параметры time picker для каждого поля time picker. Вызывается перед созданием экземпляра time picker. Полный список параметров можно найти здесь: http://trentrichardson.com/examples/timepicker/
acf.add_filter('time_picker_args', function( args, $field ){
// что-нибудь сделать с args
// вернуть
return args;
});google_map_args
Этот фильтр позволяет настраивать параметры Google Maps для каждого поля Google Maps. Вызывается перед созданием экземпляра карты.
acf.add_filter('google_map_args', function( args, $field ){
// что-нибудь сделать с args
// вернуть
return args;
});select2_args
Этот фильтр позволяет настраивать параметры select2 для каждого поля select. Вызывается перед созданием экземпляра select2.
acf.add_filter('select2_args', function( args, $select, settings, $field ){
// что-нибудь сделать с args
// вернуть
return args;
});select2_ajax_data
Этот фильтр позволяет настраивать данные, отправляемые в AJAX-запросе, для каждого поля select. Вызывается перед созданием AJAX-запроса select2.
acf.add_filter('select2_ajax_data', function( data, args, $input, $field ){
// что-нибудь сделать с data
// вернуть
return data;
});color_picker_args
Этот фильтр позволяет настраивать параметры color picker (wpColorPicker) для каждого поля color picker. Фильтр вызывается перед созданием экземпляра wpColorPicker. Добавлено в v 5.3.6
acf.add_filter('color_picker_args', function( args, $field ){
// что-нибудь сделать с args
args.palettes = ['#5ee8bf', '#2f353e', '#f55e4f']
// вернуть
return args;
});Обновлено: 01.06.2026