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

wp_register_script() WP 2.1

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

Регистрация скриптов нужна, чтобы взять под контроль внедряемые скрипты: учесть зависимость одних от других (например, выводить jQuery UI скрипты после того как будет добавлен основной скрипт jQuery) и не выводить одни и те же скрипты по нескольку раз.

При написании плагина или темы рекомендуется подключать скрипты этой функцией или её аналогом wp_enqueue_script().

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

  • wp_enqueue_scripts, если нужно вызвать функцию в лицевой части сайта (фронт-энде).

  • admin_enqueue_scripts, чтобы вызвать в административной части.

  • login_enqueue_scripts - для страницы авторизации.

Чтобы зарегистрировать скрипт который уже есть в WP, вам нужно сначала его удалить, с помощью функции wp_deregister_script(), а затем снова зарегистрировать с нужными параметрами.

Вызов любой из трех функций регистрации скриптов: wp_deregister_script(), wp_register_script() или wp_enqueue_script() создает класс WP_Scripts и определяет глобальную переменную $wp_scripts. До этого WordPress ничего не знает об этом классе и не использует его, т.е. не происходит регистрация никаких скриптов из таблицы ниже.

Хуков нет.

Возвращает

C версии WP 4.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

Примеры

Примеры смотрите в описании функции wp_enqueue_script().

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

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

Скрипты зарегистрированные WordPress

WordPress содержит многие популярные скрипты. Чтобы подключить такие скрипты нужно использовать функцию wp_enqueue_script( $handle ), где в $handle нужно указать одно из следующих названий (актуально для WP 3.8+).

Актуальный список можно посмотреть в коде функции wp_default_scripts()

Идентификатор Путь в 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_Scripts::add() и WP_Scripts::add_data().
  • Использует глобальную переменную: $wp_scripts.

Код wp register script: wp-includes/functions.wp-scripts.php WP 4.8.2

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

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

	return $registered;
}

Cвязанные функции

Из метки: script

Еще из раздела: Регистрация script и style

wp_register_script 12 комментариев
Вопросы 1 Все
  • campusboy1848 cайт: wp-plus.ru
    function my_scripts_method() {
    	wp_deregister_script( 'jquery' ); // отменяем зарегистрированный jQuery
    	wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', false, null, true );
    	wp_enqueue_script( 'jquery' );
     wp_enqueue_script( 'template.js', get_bloginfo( 'template_directory' ).'/js/template.js', array( 'jquery' ), null, true );
    }
    add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

    Странно, но jquery всё равно отображается в шапке сайта! А мой скрипт, как и указано, в футере. Как так? Что за самоуправство? mosking

    -1
    Ответить2.5 года назад #
    • Kama4464

      $in_footer = true - это лишь рекомендация. Если в шапке вызывается скрипт в котором указана зависимость от jQuery, то jQuery подключится в шапке, перед зависимым скриптом...

      У тебя есть такой плагин... Чтобы перенести jQuery в подвал, нужно чтобы все зависимые скрипты тоже вызывались в подвале. Ну и конечно у jQuery $in_footer = true должно быть.

      Также для справки: в твоем коде не обязательно отдельно вызывать jQuery.

      // wp_enqueue_script( 'jquery' ); // Эту строку можно удалить, в следующей есть зависимость jQuery будет подключен автоматом.
      wp_enqueue_script( 'template.js', get_bloginfo( 'template_directory' ).'/js/template.js', array('jquery'), null, true );

      П.С. вообще я бы порекомендовал несколько раз подумать прежде чем jQuery в подвал совать, в результате больше проблем может быть... В таком случае невозможно писать скрипты инлайн в HTML. А иногда это нужно, я уже не говорю про то что это удобно.

      3
      Ответить2.5 года назад #
  • Добрый день!
    А если я размещаю на сайте информер, скажем погодный или новостной информеры от Яндекса или платёжную форму от Яндекс-денег. Они, соответственно ссылаются на удалённые скрипты. Как с ними правильно поступить?

    Ответить2.4 года назад #
    • Kama4464

      Вешайте полный код на хуки wp_head или wp_footer. Обычно такие коды независимы и подключать их отдельно не страшно.

      Ответить2.4 года назад #
      • Я новичок и пока не очень понимаю что это такое - "вешать на хуки". smile Я из этого кода соорудила шорт-код и разместила его (шорт-код) в текстовом виджете. Мне информер, собственно, там и нужен был - в сайдбаре. Это совсем неправильно?

        Ответить2.4 года назад #
        • campusboy1848 cайт: wp-plus.ru

          "вешать на хуки" - это значит указать функции, когда ей выполняться автоматически. К примеру, если вы в шапке сайте указываете функцию wp_head();, то создав специальный хук, ваша произвольная функция будет всегда выполняться, как только WP инициализирует функцию wp_head().

          Регистрируя скрипты через wp_register_script() в function.php мы сообщаем движку, что вот такой код я уже поставил. Если поставить какой-либо плагин, который будет использовать такой же скрипт, то он заглянет в настройки, увидит, что такой скрипт на сайте уже есть и повторно его подключать не будет. Избегаем дублей скриптов, избегаем проблем.

          Я из этого кода соорудила шорт-код и разместила его (шорт-код) в текстовом виджете. Мне информер, собственно, там и нужен был - в сайдбаре. Это совсем неправильно?

          Смотря какой скрипт! Если у вас был, к примеру, код рекламы (гугл, тизерок, не важно), то есть обычный html+js, то не вижу смысла делать шорткод, потом в виджет. Сразу в виджет его пихать и всё прекрасно отработает без лишней нагрузки. В общем, уточните, что за скрипт.

          Ответить2.4 года назад #
  • Art

    Страшно жить просто. sad

    Чтобы просто сделать нажимающуюся кнопку - нужен аджакс. Чтобы подключить аджакс, нужно подключить jquery, правильно зарегистрировать то, проверить, подключено ли это, потом вызвать еще вон то... И после этого уже можно работать с аджаксом, у которого нужны свои проверки и так далее.

    Господи, ну почему все так сложно? Мне надо просто нажать кнопку!

    1
    Ответить1.5 года назад #
  • Seosko cайт: seosko.ru

    Чем больше читаю про перенос js в подвал, тем больше не понятно. Правильно ли я понимаю, что js из папки wp-include лучше не подключать в подвале, иначе могут быть ошибки?

    Ответитьгод назад #
    • Kama4464

      Нет, так сказать нельзя. Ошибки будут когда не учтен порядок подключения скриптов, не важно где они подключаются в шапке или в подвале. Главное тут одно, все все скрипты на странице должны подключаться в своем порядке. Из многих не все зависят друг от друга. Но вот те которые зависят должны подключаться в соответствии с зависимостью. Зависимость указывается при подключении и если там все указано правильно. То нет разницы где будет указано выводить скрипты в шапке или подвале... Так в теории сложно объяснить чтобы было все ясно и понятно, вам самому нужно посидеть и разобраться как и что работает, кое где проверить, поковырять и в один прекрасный момент вы все поймете...

      Ответитьгод назад #
  • Было бы здорово в статье раскрыть основы подключения главного jquery, то что вы пишете в комментах выше.

    P.S. Если не ошибаюсь, то стандартный jquery сейчас отменяется через jquery-core:

    wp_deregister_script( 'jquery-core' );

    и регистрируется тоже:

      wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', false, null );

    а вот подключается уже jquery:

    wp_enqueue_script( 'jquery' );

    и подключение jQuery через гугл позволит избежать конфликта с применением $ и ускорит его загрузку.

  • Здравствуйте!

    Столкнулся с забавной проблемой. При добавлении API Google reCaptcha, в некоторых ситуация требуется указать

    https://www.google.com/recaptcha/api.js?onload=reCaptchaCallback&render=explicit

    При использовании wp_register_script, симоволы '&' в указанной строке заменяются на '& #038;', и нужные параметры не отрабатывают... Попытался маскировать & и писать "\&" - добавляется еще и обозначение "\"...

    Это как-то можно обойти?

    Ответить4 месяца назад #

Здравствуйте, !

Ваш комментарий