wp_register_script()
Реєструє файл скрипта, щоб надалі підключати його, використовуючи функцію wp_enqueue_script() .
Реєструвати скрипт окремо потрібно в тих випадках, коли ми заздалегідь не знаємо будемо ми його використовувати на сторінці чи ні, але ми точно знаємо, що він стане нам у нагоді на якихось сторінках. Так ось, щоб не прописувати всі параметри реєстрації для кожної сторінки, де буде потрібен скрипт, ми можемо зареєструвати його в одному місці, а потім де потрібно просто підключати його по ідентифікатору.
При написанні плагіна або теми рекомендується підключати скрипти через цю функцію або її аналог wp_enqueue_script() .
Функцію потрібно викликати на хука-подіях, тому що виклик функції раніше, ніж ці події, може створити проблеми:
init – коли потрібно зареєструвати скрипт скрізь: в адмінці, фронті.
wp_enqueue_scripts , якщо потрібно викликати функцію в передній частині сайту (фронт-енде).
admin_enqueue_scripts , щоб викликати в адміністративній частині.
- login_enqueue_scripts – для сторінки авторизації.
Дефолтні скрипти WP реєструються на події wp_default_scripts .
Щоб зареєструвати скрипт, який вже є у WP, потрібно спочатку його видалити, за допомогою функції wp_deregister_script() , а потім знову зареєструвати з потрібними параметрами.
Виклик будь-якої з трьох функцій реєстрації скриптів: wp_deregister_script() , wp_register_script() або wp_enqueue_script() створює клас WP_Scripts та визначає глобальну змінну $wp_scripts . До цього WordPress нічого не знає про цей клас і не використовує його. не відбувається реєстрація жодних скриптів із таблиці нижче.
Щоб зареєструвати стилі CSS, використовуйте wp_register_style() .
- Використовує: 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 - $in_footer
(логічний) - Де виводити скрипт: у head чи footer. Зазвичай скрипти розташовуються у head частині. Якщо цей параметр дорівнюватиме true скрипт буде додано в кінець body тега, для цього тема повинна містити функцію
wp_footer() перед закриваючим тегом
</body>.
Типово: false
Приклади
#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() .
#2 Як підключити jquery з Google
Читайте в окремій статті .
#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 );
}#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_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 як 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_Dependencies::add()
- Дивіться: WP_Dependencies::add_data()
список змін
| З версії 2.1.0 | Введено. |
| З версії 4.3.0 | A return value був added. |
wp register script WP 6.0.2
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; }