Подключение стилей и скриптов в WordPress

Как подключить файлы стилей и скрипты в Wordpress?

При разработке собственной темы часто требуется подключить дополнительные файлы стилей(css) и скрипты(javascript). Однако надо знать, что не только тема использует таблицы стилей и скрипты, но и плагины. Чтобы не произошло конфликта между подключаемыми файлами, следует использовать стандартный способ подключения css и javascript в WordPress.

Процесс добавление файлов стилей и скриптов подразумевает создание функции, которая ставит все файлы в очередь. WP для каждого файла создает дескриптор(то же самое, что идентификатор) и путь до него, а также определяет зависимость от других стилей и скриптов(напр. Jquery). Вызывается функция во время срабатывания хука. В результате в коде HTML страниц создаются теги подключения файлов с расширением .css и .js.

Как добавить скрипты и стили в WP тему?

Правильный способ подключить скрипты и стили — добавить их в файле functions.php. В первую очередь надо добавить код подключения style.css, так как он является обязательных файлом для всех тем, а затем можно вставлять и другие.

WordPress уже имеет много предустановленных javascript скриптов, в том числе входящие в пакет Jquery. Посему перед тем, как использовать собственные скрипты, убедитесь в наличие необходимых(от которых зависит работа вашего кода) файлов.

Итак, вставка js и css осуществляется с помощью функций: wp_enqueue_script() и wp_enqueue_style().

Рассмотрим по отдельности каждую из представленных функций.

Каскадные таблицы стилей(Css)

За то, как выглядит сайт во фронтенде отвечает файл стилей. Кроме того, в css файле содержится информация о теме. Поэтому style.css является обязательным файлом любой темы WordPress.

Подключить стили можно в header.php, но правильным вариантом считается вставка функции wp_enqueue_style() в functions.php.

Поставить в очередь style.css

wp_enqueue_style( 'style', get_stylesheet_uri() );

Функция будет искать файл с названием ‘style’ и загружать его.

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

Она может принимать ряд параметров:

  • $handle – название файла таблицы стилей
  • $src – путь до файла стилей. Все остальные параметры не являются обязательными.
  • $deps – указывает на зависимость текущего файла стилей от других. Если этот параметр передан в функцию, то текущая таблица стилей не загрузится до зависимого.
  • $ver – версия файла стилей.
  • $media – определяет для каких типов устройств будет подключен css файл.

В данном примере функция подключает файл с именем slider.css из подкаталога(/css).

wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css',false,'1.1','all');

Скрипты(Js)

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

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);

Функции можно передать эти параметры:

  • $handle – название js файла
  • $src – расположение файла скрипта
  • $deps – массив скриптов, от которых зависит подключения текущего js файла.
  • $ver – версия файла скрипта.
  • $in_footer – это параметр типа булев(true/false), который позволяет вставить скрипт в подвал HTML документа, а не в шапку. Тем самым не задерживать загрузку дерева DOM.

Подключение файла c именем ‘script’ из подкаталога(/js) в подвал веб-сайта.

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

Скрипт ответа на комментарий

В примере ниже скрипт подключения ответа на комментарий будет загружаться только на в отдельной записи или странице, где разрешено оставлять вложенные комментарии.

if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
    wp_enqueue_script( 'comment-reply' );
}

Объединение нескольких функции добавления скриптов и стилей

Если необходимо поставить в очередь на подключение несколько файлов, то проще всего это сделать — создать одну функцию и зарегистрировать ее на хук-событие wp_enqueue_scripts. Указанные ниже код должен размещаться ниже функции ‘первоначальной настройки темы’.

function add_theme_scripts() {
  wp_enqueue_style( 'style', get_stylesheet_uri() );
 
  wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', array(), '1.1', 'all');
 
  wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
 
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
      wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

Список js скриптов, которые входят в набор WordPress

По умолчанию WordPress подключает много популярных скриптов. Указанный ниже список не исчерпывающий. Весь набор загружаемых системой скриптов можно посмотреть в wp-includes/script-loader.php в функции wp_default_scripts().

Название скрипта Дескриптор Зависимость
Image Cropper Image cropper (не испльзуется в ядре, см. jcrop)
Jcrop jcrop
SWFObject swfobject
SWFUpload swfupload
SWFUpload Degrade swfupload-degrade
SWFUpload Queue swfupload-queue
SWFUpload Handlers swfupload-handlers
jQuery jquery json2 (for AJAX calls)
jQuery Form jquery-form jquery
jQuery Color jquery-color jquery
jQuery Masonry jquery-masonry jquery
jQuery UI Core jquery-ui-core jquery
jQuery UI Widget jquery-ui-widget jquery
jQuery UI Mouse jquery-ui-mouse jquery
jQuery UI Accordion jquery-ui-accordion jquery
jQuery UI Autocomplete jquery-ui-autocomplete jquery
jQuery UI Slider jquery-ui-slider jquery
jQuery UI Progressbar jquery-ui-progressbar jquery
jQuery UI Tabs jquery-ui-tabs jquery
jQuery UI Sortable jquery-ui-sortable jquery
jQuery UI Draggable jquery-ui-draggable jquery
jQuery UI Droppable jquery-ui-droppable jquery
jQuery UI Selectable jquery-ui-selectable jquery
jQuery UI Position jquery-ui-position jquery
jQuery UI Datepicker jquery-ui-datepicker jquery
jQuery UI Tooltips jquery-ui-tooltip jquery
jQuery UI Resizable jquery-ui-resizable jquery
jQuery UI Dialog jquery-ui-dialog jquery
jQuery UI Button jquery-ui-button 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 UI Effects – Pulsate jquery-effects-pulsate jquery-effects-core
jQuery UI Effects – Scale jquery-effects-scale jquery-effects-core
jQuery UI Effects – Shake jquery-effects-shake jquery-effects-core
jQuery UI Effects – Slide jquery-effects-slide jquery-effects-core
jQuery UI Effects – Transfer jquery-effects-transfer jquery-effects-core
MediaElement.js (WP 3.6+) wp-mediaelement jquery
jQuery Schedule schedule jquery
jQuery Suggest suggest jquery
ThickBox thickbox
jQuery HoverIntent hoverIntent jquery
jQuery Hotkeys jquery-hotkeys jquery
Simple AJAX Code-Kit sack
QuickTags quicktags
Iris (Colour picker) iris jquery
Farbtastic (deprecated) farbtastic jquery
ColorPicker (deprecated) colorpicker jquery
Tiny MCE tiny_mce
Autosave autosave
WordPress AJAX Response wp-ajax-response
List Manipulation wp-lists
WP Common common
WP Editor editorremov
WP Editor Functions editor-functions
AJAX Cat ajaxcat
Admin Categories admin-categories
Admin Tags admin-tags
Admin custom fields admin-custom-fields
Password Strength Meter password-strength-meter
Admin Comments admin-comments
Admin Users admin-users
Admin Forms admin-forms
XFN xfn
Upload upload
PostBox postbox
Slug slug
Post post
Page page
Link link
Comment comment
Threaded Comments comment-reply
Admin Gallery admin-gallery
Media Upload media-upload
Admin widgets admin-widgets
Word Count word-count
Theme Preview theme-preview
JSON for JS json2
Plupload Core plupload
Plupload All Runtimes plupload-all
Plupload HTML4 plupload-html4
Plupload HTML5 plupload-html5
Plupload Flash plupload-flash
Plupload Silverlight plupload-silverlight
Underscore js underscore
Backbone js backbone

Источник: https://developer.wordpress.org/themes/basics/including-css-javascript/