wp_register_script()
Регистрирует файл скрипта, чтобы в дальнейшем подключать его используя функцию wp_enqueue_script().
Регистрировать скрипт отдельно нужно в тех случаях, когда мы заранее не знаем будем мы его использовать на странице или нет, но мы точно знаем что он нам пригодится на каких-то страницах. Так вот, чтобы не прописывать все параметры регистрации для каждой странице где будет нужен скрипт, мы можем зарегистрировать его в одном месте, а затем где нужно просто подключать его по идентификатору.
При написании плагина или темы рекомендуется подключать скрипты через эту функцию или через её аналог wp_enqueue_script().
Функцию нужно вызывать на следующих хука-событиях, потому что вызов функции раньше чем эти события, может создать проблемы:
-
init - когда нужно зарегистрировать скрипт везде: в админке, фронте.
-
wp_enqueue_scripts, если нужно вызвать функцию в лицевой части сайта (фронт-энде).
-
admin_enqueue_scripts, чтобы вызвать в административной части.
- login_enqueue_scripts - для страницы авторизации.
Дефолтные скрипты WP регистрируются на событии init. Сотрите функцию wp_default_scripts() и хук wp_default_scripts.
Чтобы зарегистрировать скрипт который уже есть в WP, вам нужно сначала его удалить, с помощью функции wp_deregister_script(), а затем снова зарегистрировать с нужными параметрами.
Чтобы зарегистрировать CSS стили, используйте wp_register_style().
- Использует: WP_Dependencies::add() и WP_Dependencies::add_data().
- Использует глобальную переменную $wp_scripts.
Хуков нет.
Возвращает
true|false
. 3 возвращает true/false. До этого ничего не возвращала.
Использование
wp_register_script( $handle, $src, $deps, $ver, $in_footer );
- $handle(строка) (обязательный)
- Название скрипта. Должно быть уникальным, так как оно будет использоваться для вызова в дальнейшем в функции wp_enqueue_script().
- $src(строка) (обязательный)
- URL, путь до скрипта, например, http://example.com/wp-content/themes/my-theme/my-theme-script.js. Никогда не пишите URL напрямую, если он лежит в файлах движка или плагине, используйте специальные функции путей: plugins_url() для плагинов и get_template_directory_uri() для тем. Удаленные скрипты указывайте без протокола, так: //otherdomain.com/js/their-script.js.
- $deps(массив)
- Массив названий всех зарегистрированных скриптов, от которых зависит этот. Указанные тут скрипты будут загружены перед текущем. Укажите false, если нет зависимых скриптов.
По умолчанию: array() - $ver(строка)
- Версия скрипта, которая будет добавлена в конец пути к файлу в виде аргумента (?ver=1.1). Если версии нет укажите
false
, тогда WordPress добавит в конец текущую версию WP. Если указатьnull
, никакая версия не будет добавлена.Этот параметр нужен, чтобы корректная версия скрипта была загружена пользователями, в обход кэша.
По умолчанию: false - $args(array)
Параметры подключения скрипта. Поддерживаются два параметра:
-
in_footer(bool) - По умолчанию: false. Нужно ли выводить скрипт в подвале footer. По умолчанию скрипты располагаются в head части. Если этот параметр будет равен true скрипт будет выводиться конце body тега.
Если из-за зависимости от других скриптов нет возможности подключить текущий скрипт в подвале, то значение этой переменой будет проигнорировано и скрипт будет подключен в head.
В теме должна вызываться функция wp_footer() перед закрывающим тегом </body>.
Ведет себя так же, как и предыдущая (до WP 6.3) реализация параметра $in_footer.
-
strategy(string) - По умолчанию: ''. Указывает как (по какой стратегии) должен загружаться скрипт. Доступно два значения:
defer
иasync
для отложенных и асинхронных скриптов соответственно.По умолчанию используется блокирующее поведение, это сохраняет обратную совместимость с версиями WP ниже 6.3.
До WP 6.3 этот параметр назывался
$in_footer
и принимал true/false.
С версии 6.3 параметр стал принимать массив данных, а прежний параметр$in_footer
был перенесен в элемент массиваin_footer
:[ 'in_footer' => true, 'strategy' => 'async', ]
Подробнее про это изменение читайте здесь.
По умолчанию: []
-
Примеры
#1 Подключение внешнего скрипта (простой способ)
add_action( 'init', 'register_remote_scripts' ); add_action( 'wp_enqueue_scripts', 'add_remote_scripts' ); function register_remote_scripts(){ wp_register_script( 'someScript-js', 'https://domain.com/someScript.js' , '', '', true ); } function add_remote_scripts(){ wp_enqueue_script( 'someScript-js' ); }
Или просто:
add_action( 'wp_enqueue_scripts', 'add_remote_scripts' ); function add_remote_scripts(){ wp_enqueue_script( 'someScript-js', 'https://domain.com/someScript.js' , '', '', true ); }
#2 Как подключить jquery из Google
Читайте в отдельной статье.
#3 Свежие файлы скриптов в браузере
Смотрите в вопросах:
#4 Регистрация и подключение сразу
Если мы заранее знаем, что скрипт нужен только на одной странице, то его можно сразу зарегистрировать и подключить на вывод функцией wp_enqueue_script():
add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); function my_scripts_method() { $script_url = plugins_url( '/js/newscript.js', __FILE__ ); wp_enqueue_script( 'custom-script', $script_url, ['jquery'], '1.0', true ); }
Еще примеры смотрите в описании функции wp_enqueue_script().
#5 defer и async регистрация скрипта
Пример: отложенное (defer) подключение скрипта в шапке
Стратегия загрузки указывается путем передачи пары ключ-значение стратегии в параметр $args (бывший $in_footer).
wp_register_script( 'my_script', 'https://example.com/path/to/my_script.js', [], '1.0', [ 'strategy' => 'defer' ] );
Пример: асинхронное (async) подключение скрипта в подвале
wp_register_script( 'my_script', 'https://example.com/path/to/my_script.js', [], '1.0', [ 'in_footer' => true, 'strategy' => 'async', ] );
Подробнее про стратегии загрузки скриптов.
#6 Отдельная регистрация скрипта и его подключение
add_action( 'init', 'register_myscripts' ); add_action( 'wp_enqueue_scripts', 'add_myscripts' ); // регистрируем скрипт function register_myscripts(){ $url = get_template_directory_uri() .'/myscript.js'; wp_register_script( 'myfirstscript', $url, [ 'jquery', 'jquery-ui' ], 'v2.0', true ); } // подключаем скрипты (ставим в очередь на вывод в html) function add_myscripts() { wp_enqueue_script( 'myfirstscript' ); }
Скрипты зарегистрированные WordPress
Build In PostWordPress регистрирует многие популярные скрипты по дефолту (из коробки), т.е такой скрипт существует по умолчанию в WP. Чтобы добавить такой скрипт на страницу, нужно использовать его идентификатор в wp_enqueue_script( $id ).
Список собран с версии WP 5.2.2
Актуальный на сегодня список можно посмотреть в коде функции wp_default_scripts().
Название | ID | Зависимость |
---|---|---|
utils | ||
WP Common | common | jquery, hoverIntent, utils |
wp-a11y | jquery | |
Simple AJAX Code-Kit | sack | |
QuickTags | quicktags | |
ColorPicker (deprecated) | colorpicker | prototype |
editor | utils, jquery | |
clipboard.js | clipboard | |
wp-fullscreen-stub | ||
WordPress AJAX Response | wp-ajax-response | jquery |
wp-api-request | jquery | |
wp-pointer | jquery-ui-widget, jquery-ui-position | |
Autosave | autosave | heartbeat |
Heartbeat | heartbeat | jquery, wp-hooks |
wp-auth-check | heartbeat | |
List Manipulation | wp-lists | wp-ajax-response, jquery-color |
prototype | ||
scriptaculous-root | prototype | |
scriptaculous-builder | scriptaculous-root | |
scriptaculous-dragdrop | scriptaculous-builder, scriptaculous-effects | |
scriptaculous-effects | scriptaculous-root | |
scriptaculous-slider | scriptaculous-effects | |
scriptaculous-sound | scriptaculous-root | |
scriptaculous-controls | scriptaculous-root | |
scriptaculous | scriptaculous-dragdrop, scriptaculous-slider, scriptaculous-controls | |
cropper | scriptaculous-dragdrop | |
jQuery | jquery | jquery-core, jquery-migrate |
jquery-core | ||
jquery-migrate | ||
jQuery UI Core | jquery-ui-core | jquery |
jQuery UI Effects | jquery-effects-core | jquery |
jQuery UI Effects - Blind | jquery-effects-blind | jquery-effects-core |
jQuery UI Effects - Bounce | jquery-effects-bounce | jquery-effects-core |
jQuery UI Effects - Clip | jquery-effects-clip | jquery-effects-core |
jQuery UI Effects - Drop | jquery-effects-drop | jquery-effects-core |
jQuery UI Effects - Explode | jquery-effects-explode | jquery-effects-core |
jQuery UI Effects - Fade | jquery-effects-fade | jquery-effects-core |
jQuery UI Effects - Fold | jquery-effects-fold | jquery-effects-core |
jQuery UI Effects - Highlight | jquery-effects-highlight | jquery-effects-core |
jquery-effects-puff | jquery-effects-core, jquery-effects-scale | |
jQuery UI Effects - Pulsate | jquery-effects-pulsate | jquery-effects-core |
jQuery UI Effects - Scale | jquery-effects-scale | jquery-effects-core, jquery-effects-size |
jQuery UI Effects - Shake | jquery-effects-shake | jquery-effects-core |
jquery-effects-size | jquery-effects-core | |
jQuery UI Effects - Slide | jquery-effects-slide | jquery-effects-core |
jQuery UI Effects - Transfer | jquery-effects-transfer | jquery-effects-core |
jQuery UI Accordion | jquery-ui-accordion | jquery-ui-core, jquery-ui-widget |
jQuery UI Autocomplete | jquery-ui-autocomplete | jquery-ui-menu, wp-a11y |
jQuery UI Button | jquery-ui-button | jquery-ui-core, jquery-ui-widget |
jQuery UI Datepicker | jquery-ui-datepicker | jquery-ui-core |
jQuery UI Dialog | jquery-ui-dialog | jquery-ui-resizable, jquery-ui-draggable, jquery-ui-button, jquery-ui-position |
jQuery UI Draggable | jquery-ui-draggable | jquery-ui-mouse |
jQuery UI Droppable | jquery-ui-droppable | jquery-ui-draggable |
jQuery UI Menu | jquery-ui-menu | jquery-ui-core, jquery-ui-widget, jquery-ui-position |
jQuery UI Mouse | jquery-ui-mouse | jquery-ui-core, jquery-ui-widget |
jQuery UI Position | jquery-ui-position | jquery |
jQuery UI Progressbar | jquery-ui-progressbar | jquery-ui-core, jquery-ui-widget |
jQuery UI Resizable | jquery-ui-resizable | jquery-ui-mouse |
jQuery UI Selectable | jquery-ui-selectable | jquery-ui-mouse |
jQuery UI Selectmenu | jquery-ui-selectmenu | jquery-ui-menu |
jQuery UI Slider | jquery-ui-slider | jquery-ui-mouse |
jQuery UI Sortable | jquery-ui-sortable | jquery-ui-mouse |
jQuery UI Spinner | jquery-ui-spinner | jquery-ui-button |
jQuery UI Tabs | jquery-ui-tabs | jquery-ui-core, jquery-ui-widget |
jQuery UI Tooltips | jquery-ui-tooltip | jquery-ui-core, jquery-ui-widget, jquery-ui-position |
jQuery UI Widget | jquery-ui-widget | jquery |
jQuery Form | jquery-form | jquery |
jQuery Color | jquery-color | jquery |
jQuery Schedule | schedule | jquery |
jquery-query | jquery | |
jquery-serialize-object | jquery | |
jQuery Hotkeys | jquery-hotkeys | jquery |
jquery-table-hotkeys | jquery, jquery-hotkeys | |
jquery-touch-punch | jquery-ui-widget, jquery-ui-mouse | |
jQuery Suggest | suggest | jquery |
imagesloaded | ||
Masonry (native Javascript) | masonry | imagesloaded |
jQuery Masonry | jquery-masonry | jquery, masonry |
ThickBox | thickbox | jquery |
Jcrop | jcrop | jquery |
SWFObject | swfobject | |
moxiejs | ||
Plupload Core | plupload | moxiejs |
Plupload All Runtimes | plupload-all | plupload |
Plupload HTML5 | plupload-html5 | plupload |
Plupload Flash | plupload-flash | plupload |
Plupload Silverlight | plupload-silverlight | plupload |
Plupload HTML4 | plupload-html4 | plupload |
plupload-handlers | plupload, jquery | |
wp-plupload | plupload, jquery, json2, media-models | |
SWFUpload | swfupload | |
swfupload-all | swfupload | |
SWFUpload Handlers | swfupload-handlers | swfupload-all, jquery |
Threaded Comments | comment-reply | |
JSON for JS | json2 | |
Underscore js | underscore | |
Backbone js | backbone | underscore, jquery |
wp-util | underscore, jquery | |
wp-sanitize | jquery | |
wp-backbone | backbone, wp-util | |
revisions | wp-backbone, jquery-ui-slider, hoverIntent | |
imgareaselect | jquery | |
mediaelement | jquery, mediaelement-core, mediaelement-migrate | |
mediaelement-core | ||
mediaelement-migrate | ||
mediaelement-vimeo | mediaelement | |
MediaElement.js (WP 3.6+) | wp-mediaelement | mediaelement |
wp-codemirror | ||
csslint | ||
esprima | ||
jshint | esprima | |
jsonlint | ||
htmlhint | ||
htmlhint-kses | htmlhint | |
code-editor | jquery, wp-codemirror, underscore | |
wp-theme-plugin-editor | wp-util, wp-sanitize, jquery, jquery-ui-core, wp-a11y, underscore | |
wp-playlist | wp-util, backbone, mediaelement | |
zxcvbn-async | ||
Password Strength Meter | password-strength-meter | jquery, zxcvbn-async |
user-profile | jquery, password-strength-meter, wp-util | |
language-chooser | jquery | |
user-suggest | jquery-ui-autocomplete | |
admin-bar | ||
wplink | jquery, wp-a11y | |
wpdialogs | jquery-ui-dialog | |
Word Count | word-count | |
Media Upload | media-upload | thickbox, shortcode |
jQuery HoverIntent | hoverIntent | jquery |
customize-base | jquery, json2, underscore | |
customize-loader | customize-base | |
customize-preview | wp-a11y, customize-base | |
customize-models | underscore, backbone | |
customize-views | jquery, underscore, imgareaselect, customize-models, media-editor, media-views | |
customize-controls | customize-base, wp-a11y, wp-util, jquery-ui-core | |
customize-selective-refresh | jquery, wp-util, customize-preview | |
customize-widgets | jquery, jquery-ui-sortable, jquery-ui-droppable, wp-backbone, customize-controls | |
customize-preview-widgets | jquery, wp-util, customize-preview, customize-selective-refresh | |
customize-nav-menus | jquery, wp-backbone, customize-controls, accordion, nav-menu | |
customize-preview-nav-menus | jquery, wp-util, customize-preview, customize-selective-refresh | |
wp-custom-header | wp-a11y | |
accordion | jquery | |
shortcode | underscore | |
media-models | wp-backbone | |
wp-embed | ||
media-views | utils, media-models, wp-plupload, jquery-ui-sortable, wp-mediaelement, wp-api-request | |
media-editor | shortcode, media-views | |
media-audiovideo | media-editor | |
mce-view | shortcode, jquery, media-views, media-audiovideo | |
wp-api | jquery, backbone, underscore, wp-api-request | |
react | wp-polyfill | |
react-dom | react | |
moment | ||
lodash | ||
wp-polyfill-fetch | ||
wp-polyfill-formdata | ||
wp-polyfill-node-contains | ||
wp-polyfill-element-closest | ||
wp-polyfill | ||
wp-tinymce-root | ||
wp-tinymce | wp-tinymce-root | |
wp-tinymce-lists | wp-tinymce | |
wp-api-fetch | wp-polyfill, wp-i18n, wp-url, wp-hooks | |
wp-annotations | wp-data, wp-hooks, wp-i18n, wp-polyfill, wp-rich-text | |
wp-autop | wp-polyfill | |
wp-blob | wp-polyfill | |
wp-blocks | wp-autop, wp-blob, wp-block-serialization-default-parser, wp-data, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-shortcode, lodash | |
wp-block-library | editor, lodash, wp-api-fetch, wp-autop, wp-blob, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-core-data, wp-data, wp-date, wp-editor, wp-element, wp-html-entities, wp-i18n, wp-keycodes, wp-polyfill, wp-url, wp-viewport, wp-rich-text | |
wp-block-serialization-default-parser | ||
wp-block-editor | lodash, wp-a11y, wp-blob, wp-blocks, wp-components, wp-compose, wp-core-data, wp-data, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-rich-text, wp-token-list, wp-url, wp-viewport, wp-wordcount | |
wp-components | lodash, moment, wp-a11y, wp-api-fetch, wp-compose, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-rich-text, wp-url | |
wp-compose | lodash, wp-element, wp-is-shallow-equal, wp-polyfill | |
wp-core-data | lodash, wp-api-fetch, wp-data, wp-deprecated, wp-polyfill, wp-url | |
wp-data | lodash, wp-compose, wp-element, wp-is-shallow-equal, wp-polyfill, wp-priority-queue, wp-redux-routine | |
wp-date | moment, wp-polyfill | |
wp-deprecated | wp-polyfill, wp-hooks | |
wp-dom | lodash, wp-polyfill | |
wp-dom-ready | wp-polyfill | |
wp-edit-post | jquery, lodash, postbox, media-models, media-views, wp-a11y, wp-api-fetch, wp-block-editor, wp-block-library, wp-blocks, wp-components, wp-compose, wp-core-data, wp-data, wp-dom-ready, wp-editor, wp-element, wp-embed, wp-i18n, wp-keycodes, wp-notices, wp-nux, wp-plugins, wp-polyfill, wp-url, wp-viewport | |
wp-editor | lodash, wp-api-fetch, wp-blob, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-core-data, wp-data, wp-date, wp-deprecated, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-keycodes, wp-notices, wp-nux, wp-polyfill, wp-url, wp-viewport, wp-wordcount | |
wp-element | wp-polyfill, react, react-dom, lodash, wp-escape-html | |
wp-escape-html | wp-polyfill | |
wp-format-library | wp-block-editor, wp-components, wp-editor, wp-element, wp-i18n, wp-keycodes, wp-polyfill, wp-rich-text, wp-url | |
wp-hooks | wp-polyfill | |
wp-html-entities | wp-polyfill | |
wp-i18n | wp-polyfill | |
wp-is-shallow-equal | wp-polyfill | |
wp-keycodes | lodash, wp-polyfill, wp-i18n | |
wp-list-reusable-blocks | lodash, wp-api-fetch, wp-components, wp-compose, wp-element, wp-i18n, wp-polyfill | |
wp-notices | lodash, wp-a11y, wp-data, wp-polyfill | |
wp-nux | wp-element, lodash, wp-components, wp-compose, wp-data, wp-i18n, wp-polyfill, lodash | |
wp-plugins | lodash, wp-compose, wp-element, wp-hooks, wp-polyfill | |
wp-priority-queue | ||
wp-redux-routine | wp-polyfill | |
wp-rich-text | lodash, wp-data, wp-escape-html, wp-polyfill | |
wp-shortcode | wp-polyfill, lodash | |
wp-token-list | lodash, wp-polyfill | |
wp-url | wp-polyfill | |
wp-viewport | wp-polyfill, wp-element, wp-data, wp-compose, lodash | |
wp-wordcount | wp-polyfill |
Список получен из глобальной переменной $GLOBALS['wp_scripts']
. Зарегистрированные скрипты могут меняться в зависимости от страницы на которой вы находитесь. В админке список будет больше.
Заметки
- Смотрите: WP_Dependencies::add()
- Смотрите: WP_Dependencies::add_data()
Список изменений
С версии 2.1.0 | Введена. |
С версии 4.3.0 | A return value was added. |
С версии 6.3.0 | The $in_footer parameter of type boolean was overloaded to be an $args parameter of type array. |
Код wp_register_script() wp register script WP 6.6.2
function wp_register_script( $handle, $src, $deps = array(), $ver = false, $args = array() ) { if ( ! is_array( $args ) ) { $args = array( 'in_footer' => (bool) $args, ); } _wp_scripts_maybe_doing_it_wrong( __FUNCTION__, $handle ); $wp_scripts = wp_scripts(); $registered = $wp_scripts->add( $handle, $src, $deps, $ver ); if ( ! empty( $args['in_footer'] ) ) { $wp_scripts->add_data( $handle, 'group', 1 ); } if ( ! empty( $args['strategy'] ) ) { $wp_scripts->add_data( $handle, 'strategy', $args['strategy'] ); } return $registered; }