Добавление JS и CSS на WordPress

Опубликовано автором

Добавление обработки действия на подгрузку скриптов для сайта:

add_action('wp_enqueue_scripts', function() {
	// ...
}, 900);

Добавление обработки действия на подгрузку скриптов для админки:

add_action('admin_enqueue_scripts', function() {
	// ...
}, 900);

 

Подключение JavaScript файл на страницу

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); подробно

$handle — название скрипта (рабочее название). Строка в нижнем регистре

$src — URL файла скрипта

$deps — массив зависимых скриптов

$ver — версия, которая будет указана в URL

$in_footer — подключать скрипт в подвале (по умолчанию: false)

Пример загрузки штатного скрипта scriptaculous

add_action('wp_enqueue_scripts', function() {
	wp_enqueue_script('scriptaculous');
}, 900);

Пример подключаемого скрипта, зависящего от jQuery

add_action('wp_enqueue_scripts', function() {
	wp_enqueue_script('custom-script', plugins_url('/js/newscript.js', __FILE__), ['jquery'], '1.0');
}, 900);

Пример подгрузки скрипта только для детальной записи

add_action('wp', function() {
	if (is_single()) {
		add_action('wp_enqueue_scripts', function() {
			wp_enqueue_script('newscript', plugins_url('/js/newscript.js', __FILE__), ['scriptaculous'], '1.0');
		});
	}
});

Пример загрузки скрипта из темы

add_action('wp_enqueue_scripts', function() {
	wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/custom_script.js', ['jquery'], '1.0');
}, 900);

Пример загрузки скрипта только для страниц плагина

add_action('admin_menu', 'my_plugin_admin_menu');
function my_plugin_admin_menu() {
	// Регистрируем страницу плагина
	$page = add_submenu_page(
		'edit.php',                     // Родительская страница меню
		__( 'Мой плагин', 'myPlugin' ), // Название пункта меню
		__( 'Мой плагин', 'myPlugin' ), // Заголовок страницы
		'manage_options',               // Возможность, определяющая уровень доступа к пункту
		'my_plugin-options',            // Ярлык (часть адреса) страницы плагина
		'my_plugin_manage_menu'         // Функция, которая выводит страницу
	);

	// Используем зарегистрированную страницу для загрузки скрипта
	add_action( 'load-' . $page, 'my_plugin_admin_scripts' );
}

## Эта функция будет вызвана только на странице плагина, подключаем скрипт
function my_plugin_admin_scripts() {
	wp_enqueue_script( 'my-plugin-script', plugins_url('/script.js', __FILE__) );
}

function my_plugin_manage_menu() {
	// Выводим страницу плагина
}

 

Добавление файла CSS стилей

wp_enqueue_style( $handle, $src, $deps, $ver, $media ); подробно

$handle — название файла стилей (рабочее название). Строка в нижнем регистре

$src — URL файла стилей

$deps — массив зависимых стилей

$ver — версия, которая будет указана в URL

$media — Устанавливается значение атрибута media. media указывает тип устройства для которого будет работать текущий стиль. Может быть: all, screen, handheld, print или all (max-width:480px). По умолчанию: ‘all’. подробнее

Пример подключения файла стилей style.css текущей темы

add_action('wp_print_styles', function() {
	wp_enqueue_style('theme-style', get_stylesheet_uri());
});

Загрузка стилей на странице настроек плагина

add_action( 'admin_menu', 'my_plugin_admin_menu' );

function my_plugin_admin_menu() {
	// регистрируем страницу плагина
	$page = add_submenu_page(
		'edit.php',
		 __( 'My Plugin', 'myPlugin' ), 
		 __( 'My Plugin', 'myPlugin' ),
		 'administrator',
		 __FILE__, 
		'my_plugin_manage_menu'
	);

	// используя идентификатор страницы плагина подключаемся к нужному событию
	add_action('load-'. $page, 'my_plugin_admin_styles');
}

// Эта функция будет вызвана только на странице настроек плагина,
function my_plugin_admin_styles() {
	wp_enqueue_style( 'myPluginStylesheet', plugins_url('stylesheet.css', __FILE__) );
}

// Страница настроек
function my_plugin_manage_menu() {
   // код страницы настроек
}

 

Добавление дополнительного javascript кода к зарегистрированному скрипту

wp_add_inline_script( $handle, $data, $position ); подробно

$handle — название (ID) скрипта к которому будут добавлен дополнительный блок скрипта

$data — JS код в виде строки. Открывающий/закрывающий <script> добавляется автоматически

$position — куда добавить код: до (before) или после (after) указанного в $handle скрипта. По умолчанию: ‘after’

Пример

add_action('wp_enqueue_scripts', function(){
	wp_enqueue_script('my_scripts', get_stylesheet_directory_uri() .'/my_scripts.js' );

	// добавим произвольный код
	wp_add_inline_script('my_scripts', 'alert("Привет!");');
});

/* Получим в HTML коде
<script type='text/javascript' src='http://example.com/wp-content/themes/mytheme/my_scripts.js'></script>
<script type='text/javascript'>
alert("Привет!");
</script>
*/

Пример произвольного кода JS перед файлом

add_action( 'wp_enqueue_scripts', function(){

	wp_enqueue_script( 'my_scripts', get_stylesheet_directory_uri() .'/my_scripts.js' );

	// добавим произвольный код
	wp_add_inline_script( 'my_scripts', 'var color1 = "red"; var color2 = "blue";', 'before' );
});

/* Получим в HTML коде
<script type='text/javascript'>
var color1 = "red"; var color2 = "blue";
</script>
<script type='text/javascript' src='http://example.com/wp-content/themes/mytheme/my_scripts.js'></script>
*/

Пример нескольких вызовов wp_add_inline_script() для одного скрипта

add_action('wp_enqueue_scripts', function(){
	wp_enqueue_script('my_scripts', get_stylesheet_directory_uri() .'/my_scripts.js' );

	// добавим произвольный код
	wp_add_inline_script('my_scripts', 'var color1 = "red"; var color2 = "blue";' );
	wp_add_inline_script('my_scripts', 'var color3 = "#fff"; var color3 = "#000";' );
});

/* Получим в HTML коде
<script type='text/javascript' src='http://example.com/wp-content/themes/mytheme/my_scripts.js'></script>
<script type='text/javascript'>
var color1 = "red"; var color2 = "blue";
var color3 = "#fff"; var color3 = "#000";
</script>
*/

 

Регистрация файлов скрипта для последующего подключения

wp_register_script( $handle, $src, $deps, $ver, $in_footer ); подробно

$handle — название скрипта (рабочее название). Строка в нижнем регистре

$src — URL файла скрипта

$deps — массив зависимых скриптов

$ver — версия, которая будет указана в URL

$in_footer — подключать скрипт в подвале (по умолчанию: false)

Пример замены зарегистрированного скрипта jQuery на другой адрес

add_action('wp_enqueue_scripts', function() {
	wp_deregister_script('jquery');
	wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
	wp_enqueue_script('jquery');
}, 11);

 

Скрипты, которые идут в комплекте с WP 5.2.2

Название 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
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’]. Зарегистрированные скрипты могут меняться в зависимости от страницы на которой вы находитесь. В админке список будет больше.