Функция wp_register_script() регистрирует скрипт для последующего добавления в очередь с помощью wp_enqueue_script(). Регистрировать скрипты заранее полезно, если они зависят от других скриптов, что позволяет автоматически подключать их в правильном порядке.
wp_register_script(
string $handle,
string|false $src,
string[] $deps = array(),
string|bool|null $ver = false,
array|bool $args = array()
): bool
Параметры
$handle(string, обязательный)
Уникальное имя для скрипта. Используется для ссылки на скрипт при его подключении.$src(string|false, обязательный)
Полный URL или путь к скрипту относительно корневой директории WordPress. Если значение установлено вfalse, скрипт будет алиасом для других скриптов, от которых он зависит.$deps(string[], необязательный)
Массив идентификаторов других зарегистрированных скриптов, от которых зависит текущий скрипт. Например,jquery. По умолчанию — пустой массив.$ver(string|bool|null, необязательный)
Версия скрипта. Будет добавлена к URL скрипта в виде параметра?ver=1.0.0для контроля кэширования. Еслиfalse, будет использована версия WordPress. Еслиnull, версия не будет добавлена.$args(array|bool, необязательный)
Опции для загрузки скрипта:in_footer(bool) — указывает, должен ли скрипт быть загружен в нижней части страницы (в футере). По умолчанию:false.strategy(string) — стратегия загрузки скрипта:'defer'или'async'. Доступно с WordPress 6.3.
Возвращаемое значение
bool
Возвращаетtrue, если скрипт был успешно зарегистрирован, илиfalse, если регистрация не удалась.
Когда использовать wp_register_script()
Регистрация скрипта с помощью wp_register_script() рекомендуется в тех случаях, когда вы не уверены, понадобится ли скрипт на всех страницах. Зарегистрировав скрипт один раз, его можно легко подключить через wp_enqueue_script() только там, где это действительно нужно.
Основные хуки для регистрации и подключения скриптов
init: Используется для регистрации скриптов на всех страницах сайта, включая админку.wp_enqueue_scripts: Применяется для подключения скриптов на фронтэнде.admin_enqueue_scripts: Подключение скриптов в админке WordPress.login_enqueue_scripts: Подключение скриптов на странице авторизации.
Важно: Регистрация должна происходить после срабатывания этих хуков, иначе скрипты могут быть неправильно подключены или вовсе не загружены.
Пример 1: Регистрация и подключение скрипта в плагине
function myplugin_register_scripts() {
wp_register_script(
'myplugin-script',
plugins_url('js/myplugin-script.js', __FILE__),
array('jquery'),
'1.0.0',
true
);
wp_enqueue_script('myplugin-script');
}
add_action('wp_enqueue_scripts', 'myplugin_register_scripts');
В этом примере скрипт myplugin-script.js регистрируется с зависимостью от jQuery и подключается в футере.
Пример 2: Использование внутри класса плагина
class MyPlugin_Scripts {
public function __construct() {
add_action('wp_enqueue_scripts', array($this, 'register_scripts'));
}
public function register_scripts() {
wp_register_script(
'myplugin-class-script',
plugins_url('js/myplugin-class-script.js', __FILE__),
array(),
'1.0.0',
true
);
wp_enqueue_script('myplugin-class-script');
}
}
new MyPlugin_Scripts();
Этот код регистрирует и подключает скрипт внутри класса плагина.
Пример 3: Регистрация скрипта с использованием стратегии загрузки defer
function enqueue_deferred_script() {
wp_register_script(
'my-deferred-script',
get_template_directory_uri() . '/js/deferred.js',
array(),
'1.0.0',
array('strategy' => 'defer')
);
wp_enqueue_script('my-deferred-script');
}
add_action('wp_enqueue_scripts', 'enqueue_deferred_script');
Скрипт deferred.js будет загружен с атрибутом defer, что позволит браузеру выполнить его после загрузки DOM.
Пример 4: Условная регистрация и подключение скрипта
function conditionally_enqueue_scripts() {
wp_register_script(
'dependent-script',
get_template_directory_uri() . '/js/dependent.js'
);
wp_enqueue_script(
'main-script',
get_template_directory_uri() . '/js/main.js',
array('dependent-script')
);
}
add_action('wp_enqueue_scripts', 'conditionally_enqueue_scripts');
В этом примере скрипт dependent.js будет автоматически подключен перед main.js при его добавлении в очередь.
Управление стратегиями загрузки
Начиная с WordPress 6.3, параметр $in_footer был заменен на массив с ключом in_footer, и добавилась возможность задавать стратегию загрузки скриптов: defer (отложенная загрузка) и async (асинхронная загрузка).
Примеры использования:
- Отложенная загрузка (defer):
wp_register_script(
'my-defer-script',
'https://example.com/script.js',
[],
'1.0',
[ 'strategy' => 'defer' ]
);
- Асинхронная загрузка (async):
wp_register_script(
'my-async-script',
'https://example.com/script.js',
[],
'1.0',
[ 'in_footer' => true, 'strategy' => 'async' ]
);
Использование wp_deregister_script()
Если вам нужно перерегистрировать скрипт, который уже зарегистрирован WordPress, сперва его необходимо удалить с помощью функции wp_deregister_script(), а затем зарегистрировать заново с нужными параметрами.
Пример регистрации и подключения в одном шаге
Если вы уверены, что скрипт нужен только на одной странице, его можно сразу зарегистрировать и подключить:
add_action( 'wp_enqueue_scripts', 'enqueue_my_scripts' );
function enqueue_my_scripts() {
wp_enqueue_script( 'custom-script', plugins_url( '/js/newscript.js', __FILE__ ), ['jquery'], '1.0', true );
}
Список встроенных скриптов WordPress
WordPress поставляется с зарегистрированными по умолчанию скриптами, которые можно подключать, используя их идентификаторы. Пример часто используемых:
| Название скрипта | ID | Зависимости |
|---|---|---|
| jQuery | jquery | jquery-core, jquery-migrate |
| Autosave | autosave | heartbeat |
| WP API Request | wp-api-request | jquery |
| ColorPicker | colorpicker | prototype |
| Heartbeat | heartbeat | jquery, wp-hooks |
| SWFObject | swfobject | |
| Masonry | masonry | imagesloaded |
Чтобы подключить, например, jQuery:
wp_enqueue_script( 'jquery' );
Все скрипты
| ID | Путь к файлу в WordPress |
|---|---|
| utils | /wp-includes/js/utils.js |
| common | /wp-admin/js/common.js |
| sack | /wp-includes/js/tw-sack.js |
| quicktags | /wp-includes/js/quicktags.js |
| colorpicker | /wp-includes/js/colorpicker.js |
| editor | /wp-admin/js/editor.js |
| wp-fullscreen | /wp-admin/js/wp-fullscreen.js |
| wp-ajax-response | /wp-includes/js/wp-ajax-response.js |
| wp-pointer | /wp-includes/js/wp-pointer.js |
| autosave | /wp-includes/js/autosave.js |
| heartbeat | /wp-includes/js/heartbeat.js |
| wp-auth-check | /wp-includes/js/wp-auth-check.js |
| wp-lists | /wp-includes/js/wp-lists.js |
| prototype | external: //ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js |
| scriptaculous-root | external: //ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js |
| scriptaculous-builder | external: //ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/builder.js |
| scriptaculous-dragdrop | external: //ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/dragdrop.js |
| scriptaculous-effects | external: //ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/effects.js |
| scriptaculous-slider | external: //ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/slider.js |
| scriptaculous-sound | external: //ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/sound.js |
| scriptaculous-controls | external: //ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/controls.js |
| scriptaculous | scriptaculous-dragdrop, scriptaculous-slider, scriptaculous-controls |
| cropper | /wp-includes/js/crop/cropper.js |
| jquery (v1.10.2 as of WP 3.8) | jquery-core, jquery-migrate |
| jquery-core | /wp-includes/js/jquery/jquery.js |
| jquery-migrate | /wp-includes/js/jquery/jquery-migrate.js (v1.10.2 as of WP 3.8) |
| jquery-ui-core | /wp-includes/js/jquery/ui/jquery.ui.core.min.js |
| jquery-effects-core | /wp-includes/js/jquery/ui/jquery.ui.effect.min.js |
| jquery-effects-blind | /wp-includes/js/jquery/ui/jquery.ui.effect-blind.min.js |
| jquery-effects-bounce | /wp-includes/js/jquery/ui/jquery.ui.effect-bounce.min.js |
| jquery-effects-clip | /wp-includes/js/jquery/ui/jquery.ui.effect-clip.min.js |
| jquery-effects-drop | /wp-includes/js/jquery/ui/jquery.ui.effect-drop.min.js |
| jquery-effects-explode | /wp-includes/js/jquery/ui/jquery.ui.effect-explode.min.js |
| jquery-effects-fade | /wp-includes/js/jquery/ui/jquery.ui.effect-fade.min.js |
| jquery-effects-fold | /wp-includes/js/jquery/ui/jquery.ui.effect-fold.min.js |
| jquery-effects-highlight | /wp-includes/js/jquery/ui/jquery.ui.effect-highlight.min.js |
| jquery-effects-pulsate | /wp-includes/js/jquery/ui/jquery.ui.effect-pulsate.min.js |
| jquery-effects-scale | /wp-includes/js/jquery/ui/jquery.ui.effect-scale.min.js |
| jquery-effects-shake | /wp-includes/js/jquery/ui/jquery.ui.effect-shake.min.js |
| jquery-effects-slide | /wp-includes/js/jquery/ui/jquery.ui.effect-slide.min.js |
| jquery-effects-transfer | /wp-includes/js/jquery/ui/jquery.ui.effect-transfer.min.js |
| jquery-ui-accordion | /wp-includes/js/jquery/ui/jquery.ui.accordion.min.js |
| jquery-ui-autocomplete | /wp-includes/js/jquery/ui/jquery.ui.autocomplete.min.js |
| jquery-ui-button | /wp-includes/js/jquery/ui/jquery.ui.button.min.js |
| jquery-ui-datepicker | /wp-includes/js/jquery/ui/jquery.ui.datepicker.min.js |
| jquery-ui-dialog | /wp-includes/js/jquery/ui/jquery.ui.dialog.min.js |
| jquery-ui-draggable | /wp-includes/js/jquery/ui/jquery.ui.draggable.min.js |
| jquery-ui-droppable | /wp-includes/js/jquery/ui/jquery.ui.droppable.min.js |
| jquery-ui-menu | /wp-includes/js/jquery/ui/jquery.ui.menu.min.js |
| jquery-ui-mouse | /wp-includes/js/jquery/ui/jquery.ui.mouse.min.js |
| jquery-ui-position | /wp-includes/js/jquery/ui/jquery.ui.position.min.js |
| jquery-ui-progressbar | /wp-includes/js/jquery/ui/jquery.ui.progressbar.min.js |
| jquery-ui-resizable | /wp-includes/js/jquery/ui/jquery.ui.resizable.min.js |
| jquery-ui-selectable | /wp-includes/js/jquery/ui/jquery.ui.selectable.min.js |
| jquery-ui-slider | /wp-includes/js/jquery/ui/jquery.ui.slider.min.js |
| jquery-ui-sortable | /wp-includes/js/jquery/ui/jquery.ui.sortable.min.js |
| jquery-ui-spinner | /wp-includes/js/jquery/ui/jquery.ui.spinner.min.js |
| jquery-ui-tabs | /wp-includes/js/jquery/ui/jquery.ui.tabs.min.js |
| jquery-ui-tooltip | /wp-includes/js/jquery/ui/jquery.ui.tooltip.min.js |
| jquery-ui-widget | /wp-includes/js/jquery/ui/jquery.ui.widget.min.js |
| jquery-form | /wp-includes/js/jquery/jquery.form.js |
| jquery-color | /wp-includes/js/jquery/jquery.color.min.js |
| suggest | /wp-includes/js/jquery/suggest.js |
| schedule | /wp-includes/js/jquery/jquery.schedule.js |
| jquery-query | /wp-includes/js/jquery/jquery.query.js |
| jquery-serialize-object | /wp-includes/js/jquery/jquery.serialize-object.js |
| jquery-hotkeys | /wp-includes/js/jquery/jquery.hotkeys.js |
| jquery-table-hotkeys | /wp-includes/js/jquery/jquery.table-hotkeys.js |
| jquery-touch-punch | /wp-includes/js/jquery/jquery.ui.touch-punch.js |
| jquery-masonry | /wp-includes/js/jquery/jquery.masonry.min.js |
| thickbox | /wp-includes/js/thickbox/thickbox.js |
| jcrop | /wp-includes/js/jcrop/jquery.Jcrop.js |
| swfobject | /wp-includes/js/swfobject.js |
| plupload | /wp-includes/js/plupload/plupload.js |
| plupload-html5 | wp-includes/js/plupload/plupload.html5.js |
| plupload-flash | /wp-includes/js/plupload/plupload.flash.js“ |
| plupload-silverlight | /wp-includes/js/plupload/plupload.silverlight.js |
| plupload-html4 | /wp-includes/js/plupload/plupload.html4.js |
| plupload-all | plupload, plupload-html5, plupload-flash, plupload-silverlight, plupload-html4 |
| plupload-handlers | /wp-includes/js/plupload/handlers.js |
| wp-plupload | /wp-includes/js/plupload/wp-plupload.js |
| swfupload | /wp-includes/js/swfupload/swfupload.js |
| swfupload-swfobject | /wp-includes/js/swfupload/plugins/swfupload.swfobject.js |
| swfupload-queue | /wp-includes/js/swfupload/plugins/swfupload.queue.js |
| swfupload-speed | /wp-includes/js/swfupload/plugins/swfupload.speed.js |
| swfupload-all | /wp-includes/js/swfupload/swfupload-all.js |
| swfupload-handlers | /wp-includes/js/swfupload/handlers.js |
| comment-reply | /wp-includes/js/comment-reply.js |
| json2 | /wp-includes/js/json2.js |
| underscore | /wp-includes/js/underscore.min.js |
| backbone | /wp-includes/js/backbone.min.js |
| wp-util | /wp-includes/js/wp-util.js |
| wp-backbone | /wp-includes/js/wp-backbone.js |
| revisions | /wp-admin/js/revisions.js |
| imgareaselect | /wp-includes/js/imgareaselect/jquery.imgareaselect.js |
| mediaelement | /wp-includes/js/mediaelement/mediaelement-and-player.min.js |
| wp-mediaelement | /wp-includes/js/mediaelement/wp-mediaelement.js |
| zxcvbn-async | /wp-includes/js/zxcvbn-async.js |
| password-strength-meter | /wp-admin/js/password-strength-meter.js |
| user-profile | /wp-admin/js/user-profile.js |
| user-suggest | /wp-admin/js/user-suggest.js |
| admin-bar | /wp-includes/js/admin-bar.js |
| wplink | /wp-includes/js/wplink.js |
| wpdialogs | /wp-includes/js/tinymce/plugins/wpdialogs/js/wpdialog.js |
| wpdialogs-popup | /wp-includes/js/tinymce/plugins/wpdialogs/js/popup.js |
| word-count | /wp-admin/js/word-count.js |
| media-upload | /wp-admin/js/media-upload.js |
| hoverIntent | /wp-includes/js/hoverIntent.js |
| customize-base | /wp-includes/js/customize-base.js |
| customize-loader | |
| customize-preview | |
| customize-controls | |
| accordion | |
| shortcode | |
| media-models | |
| media-views | |
| media-editor | |
| mce-view | |
| admin-tags | |
| admin-comments | |
| xfn | |
| postbox | |
| post | |
| link | |
| comment | |
| admin-gallery | |
| admin-widgets | |
| theme | |
| theme-install | |
| inline-edit-post | |
| inline-edit-tax | |
| plugin-install | |
| farbtastic | |
| iris | |
| wp-color-picker | |
| dashboard | |
| list-revisions | |
| media | |
| image-edit | |
| set-post-thumbnail | |
| nav-menu | |
| custom-header | |
| custom-background | |
| media-gallery | |
| svg-painter | |
Заключение
Функция wp_register_script() — это мощный инструмент для управления загрузкой скриптов в WordPress. Она позволяет избежать повторной регистрации скриптов на каждой странице и помогает оптимизировать производительность сайта.