Правильный способ добавления скриптов и стилей в вашу тему — поставить их в очередь в 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'] в пользовательском интерфейсе администратора. Зарегистрированные скрипты могут меняться в зависимости от запрашиваемой страницы.
* Перечисленные зависимости не являются полными.