СправошнаяПоиск

Включение js и css в очередь загрузки Wordpress

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

Совет: WordPress включает в себя несколько файлов JavaScript как часть пакета программного обеспечения, в том числе часто используемые библиотеки, такие как jQuery. Прежде чем добавлять свой собственный JavaScript, проверьте, можете ли вы использовать уже включенную библиотеку. Часть этих скриптов перечислена в конце материала.

Основа:

Поставьте сценарий или стиль в очередь, используя wp_enqueue_script() или wp_enqueue_style()

Таблицы стилей

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

Вместо того, чтобы загружать таблицу стилей в свой header.php, вы должны загрузить ее с помощью wp_enqueue_style. Чтобы загрузить основную таблицу стилей, вы можете поставить ее в очередь в functions.php.

Ставим в очередь style.css:

 

wp_enqueue_style( 'style', get_stylesheet_uri() );

 

WP будет искать таблицу стилей с именем «style» и загружать ее.

Основная функция для постановки стиля в очередь:

 

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

 

Вы можете включить следующие параметры:

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

Итак, если вы хотите загрузить таблицу стилей с именем «slider.css» из папки с именем «CSS» в корневом каталоге вашей темы, вы должны использовать:

 

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

 

Скрипты

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

wp_enqueue_script использует аналогичный синтаксис для wp_enqueue_style.

Поставьте в очередь ваш скрипт:

 

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

Ваша функция постановки в очередь может выглядеть так:

 

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

 

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

Комментарии WordPress имеют довольно много функций прямо из коробки, включая цепочку комментариев и расширенные формы комментариев. Чтобы комментарии работали правильно, им требуется JavaScript. Однако, поскольку в этом JavaScript необходимо определить определенные параметры, сценарий ответа на комментарий следует добавить в каждую классическую тему, использующую комментарии.

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

Правильный способ включить ответ на комментарий в классических темах — использовать условные теги для проверки наличия определенных условий, чтобы скрипт не загружался без необходимости. Например, вы можете загружать скрипты только на отдельные страницы сообщений, используя is_singular, и убедившись, что пользователь выбрал «Включить цепочку комментариев». Таким образом, вы можете настроить такую ​​​​функцию вот так:

 

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' );

 

Скрипты по умолчанию включенные и зарегистрированные WordPress

По умолчанию WordPress включает множество популярных скриптов, обычно используемых веб-разработчиками, а также скрипты, используемые самим WordPress. Некоторые из них перечислены в этой справочной таблице:

Имя скрипта Обращение (handle) Зависит от * Версия скрипта Лицензия
Image Cropper Image cropper (not used in core, see jcrop)      
Jcrop jcrop   0.9.12 MIT
SWFObject swfobject   2.2-20120417 MIT
SWFUpload swfupload   2201-20110113 MIT
SWFUpload Degrade swfupload-degrade   2201 MIT
SWFUpload Queue swfupload-queue   2201 MIT
SWFUpload Handlers swfupload-handlers   2201-20110524 MIT
jQuery jquery json2 (for AJAX calls) 3.6.0 MIT + (MIT OR BSD)
jQuery Form jquery-form jquery 4.3.0 MIT OR LGPLv3
jQuery Color jquery-color jquery 2.2.0 MIT+CC0 + (MIT OR GPLv2)
jQuery Masonry jquery-masonry jquery 3.1.2b MIT
Masonry (native Javascript) masonry imagesloaded 4.2.2 MIT
jQuery UI Core jquery-ui-core jquery 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Widget Now part of `jquery-ui-core` jquery 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Accordion jquery-ui-accordion jquery 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Autocomplete jquery-ui-autocomplete jquery 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Button jquery-ui-button jquery 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Datepicker jquery-ui-datepicker jquery 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Dialog jquery-ui-dialog jquery 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Draggable jquery-ui-draggable jquery 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Droppable jquery-ui-droppable jquery 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Menu jquery-ui-menu jquery 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Mouse jquery-ui-mouse jquery 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Position Now part of `jquery-ui-core` jquery 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Progressbar jquery-ui-progressbar jquery 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Selectable jquery-ui-selectable jquery 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Resizable jquery-ui-resizable jquery 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Selectmenu jquery-ui-selectmenu jquery 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Sortable jquery-ui-sortable jquery 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Slider jquery-ui-slider jquery 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Spinner jquery-ui-spinner jquery 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Tooltips jquery-ui-tooltip jquery 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Tabs jquery-ui-tabs jquery 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Effects jquery-effects-core jquery 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Effects – Blind jquery-effects-blind jquery-effects-core 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Effects – Bounce jquery-effects-bounce jquery-effects-core 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Effects – Clip jquery-effects-clip jquery-effects-core 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Effects – Drop jquery-effects-drop jquery-effects-core 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Effects – Explode jquery-effects-explode jquery-effects-core 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Effects – Fade jquery-effects-fade jquery-effects-core 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Effects – Fold jquery-effects-fold jquery-effects-core 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Effects – Highlight jquery-effects-highlight jquery-effects-core 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Effects – Pulsate jquery-effects-pulsate jquery-effects-core 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Effects – Scale jquery-effects-scale jquery-effects-core 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Effects – Shake jquery-effects-shake jquery-effects-core 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Effects – Slide jquery-effects-slide jquery-effects-core 1.13.1 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Effects – Transfer jquery-effects-transfer jquery-effects-core 1.13.1 MIT + CC0 + (MIT OR GPLv2)
MediaElement.js (WP 3.6+) wp-mediaelement jquery 4.2.16 MIT
jQuery Schedule schedule jquery 20m/1.0.1 MIT
jQuery Suggest suggest jquery 1.1-20110113 Public domain
ThickBox thickbox   3.1-20121105 MIT OR GPLv3
jQuery HoverIntent hoverIntent jquery 1.10.1 MIT
jQuery Hotkeys jquery-hotkeys jquery 0.2.0 MIT OR GPLv2
Simple AJAX Code-Kit sack   1.6.1 X11 License
QuickTags quicktags   1.3 LGPL2.1
Iris (Colour picker) iris jquery 1.1.1 GPLv2
Farbtastic (deprecated) farbtastic jquery 1.2 GPLv3
ColorPicker (deprecated) colorpicker jquery v2 Author’s own copyright
Tiny MCE wp-tinymce   4.9.4 LGPL2.1
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   2015-05-03 Public domain
Plupload Core plupload   2.1.9 GPLv2
Plupload All Runtimes plupload-all   2.1.1 GPLv2
Plupload HTML4 plupload-html4   2.1.1 GPLv2
Plupload HTML5 plupload-html5   2.1.1 GPLv2
Plupload Flash plupload-flash   2.1.1 GPLv2
Plupload Silverlight plupload-silverlight   2.1.1 GPLv2
Underscore js underscore   1.13.1 MIT
Backbone js backbone jquery, underscore 1.4.0 MIT
imagesLoaded imagesloaded   4.1.4 MIT
CodeMirror wp-codemirror   5.29.1-alpha-ee20357 MIT
imgAreaSelect imgareaselect jquery 0.9.8 MIT AND GPL
Удалены из ядры
Имя скрипта Обращение (handle) Удалённая версия Замена на
Scriptaculous Root scriptaculous-root WP 3.5 Google Version
Scriptaculous Builder scriptaculous-builder WP 3.5 Google Version
Scriptaculous Drag & Drop scriptaculous-dragdrop WP 3.5 Google Version
Scriptaculous Effects scriptaculous-effects WP 3.5 Google Version
Scriptaculous Slider scriptaculous-slider WP 3.5 Google Version
Scriptaculous Sound scriptaculous-sound WP 3.5 Google Version
Scriptaculous Controls scriptaculous-controls WP 3.5 Google Version
Scriptaculous scriptaculous WP 3.5 Google Version
Prototype Framework prototype WP 3.5 Google Version

Список далеко не полный. Для получения полного списка зарегистрированных файлов просмотрите $GLOBALS['wp_scripts'] в пользовательском интерфейсе администратора. Зарегистрированные скрипты могут меняться в зависимости от запрашиваемой страницы.

 * Перечисленные зависимости не являются полными.