WordPress как на ладони

wp_register_script()WP 2.1.0

Регистрирует файл скрипта, чтобы в дальнейшем подключать его используя функцию 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().

Хуков нет.

Возвращает

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
$in_footer(логический)
Где выводить скрипт: в head или footer. Обычно скрипты располагаются в head части. Если этот параметр будет равен true скрипт будет добавлен в конец body тега, для этого тема должна содержать функцию wp_footer() перед закрывающим тегом </body>.
По умолчанию: false

Примеры

0

#1 Регистрация и подключение сразу

Если мы заранее знаем, что скрипт нужен только на одной странице, то его можно сразу зарегистрировать и подключить на вывод функцией 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().

0

#2 Как подключить jquery из Google

Читайте в отдельной статье.

0

#3 Подключение внешнего скрипта (простой способ)

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 );
}
-1

#4 Отдельная регистрация скрипта и его подключение

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

WordPress регистрирует многие популярные скрипты по дефолту (из коробки), т.е такой скрипт существует по умолчанию в 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']. Зарегистрированные скрипты могут меняться в зависимости от страницы на которой вы находитесь. В админке список будет больше.

Заметки

Список изменений

С версии 2.1.0 Введена.
С версии 4.3.0 A return value was added.

Код wp_register_script() WP 6.1.1

function wp_register_script( $handle, $src, $deps = array(), $ver = false, $in_footer = false ) {
	_wp_scripts_maybe_doing_it_wrong( __FUNCTION__, $handle );

	$wp_scripts = wp_scripts();

	$registered = $wp_scripts->add( $handle, $src, $deps, $ver );
	if ( $in_footer ) {
		$wp_scripts->add_data( $handle, 'group', 1 );
	}

	return $registered;
}
11 комментариев
    Войти