wp_enqueue_script() — подключение JavaScript

Рекомендуемый метод подключения файлов JavaScript в WordPress. Имеет ряд особенностей:

  • скрипты вставляются на страницы сайта через функции wp_head() и wp_footer(),
  • в админке же скрипты объединяются в один с помощью PHP-обработчика load-scripts.php,
  • позволяет подключать скрипты с учетом их зависимостей друг от друга;

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

wp_enqueue_script( $handle, $src = false, $deps = array(), $ver = false, $in_footer = false )
$handle
(строка) какое-нибудь название (идентификатор), придуманное вами (строка в нижнем регистре), либо можно подключить уже зарегистрированные (через wp_register_script()) ранее скрипты, используя их идентификаторы
$src
(строка) абсолютный URL файла JavaScript, который требуется подключить, этот параметр (и все последующие тоже) нужен только для незарегистрированных скриптов
$deps
(массив) массив идентификаторов скриптов, от которых зависит подключаемый скрипт
$ver
(строка) версия файла. Если установить значение null, то версия не будет указываться. По умолчанию — текущая версия WordPress.
$in_footer
(логическое) по умолчанию файлы JavaScript подключаются внутри тегов <head>. Если же указать данный параметр равным true, тогда скрипт будет вставлен непосредственно перед закрывающим тегом </body>.

Примеры подключения на страницах сайта

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

Для вставки скриптов во фронтэнде (т.е. не в админке), используйте хук wp_enqueue_scripts, пример:

function true_include_myscript() {
 	wp_enqueue_script( 'myscript', get_stylesheet_directory_uri() . '/script.js', '', '3.0', false );
}
 
add_action( 'wp_enqueue_scripts', 'true_include_myscript' );

Тот же самый пример, но только с зависимостью от jQuery:

function true_include_myscript_dep_jquery() {
 	wp_enqueue_script( 'myscript', get_stylesheet_directory_uri() . '/script.js', array('jquery') );
}
 
add_action( 'wp_enqueue_scripts', 'true_include_myscript_dep_jquery' );

Или подключим уже зарегистрированный ранее jQuery:

function true_include_jquery() {
 	wp_enqueue_script( 'jquery' );
}
 
add_action( 'wp_enqueue_scripts', 'true_include_jquery' );

Пример подключения в админке

Для подключения скриптов только в бэкэнде, т.е. только в админке, используйте хук admin_enqueue_scripts, например:

function true_include_in_admin() {
 	wp_enqueue_script( 'jquery' );
}
 
add_action( 'admin_enqueue_scripts', 'true_include_in_admin' );

Подключение скрипта только на странице настроек конкретного плагина

Получается, что мы подключаем необходимый JavaScript файл только там, где нужно — это же здорово!

add_action( 'admin_init', 'true_plugin_admin_init' );
add_action( 'admin_menu', 'true_plugin_admin_menu' );
 
function true_plugin_admin_init() {
	/* 
	 * Регистрируем скрипт,
	 * он кстати должен находиться той же папке, что и файл, в который будет вставлен этот код.
	 */
	wp_register_script( 'myscript', plugins_url( '/myscript.js', __FILE__ ) );
}
 
function true_plugin_admin_menu() {
	/* 
	 * Добавляем субменю настроек плагина в Параметры.
	 */
	$page_hook_suffix = add_submenu_page( 'options-general.php', 'Мой плагин', 'Настройки моего плагина', 'manage_options', 'true-plugin', 'true_plugin_print_page' );
 
	/*
	 * Нетрудно догадаться, что вся фишка кроется в переменной $page_hook_suffix
	 */
	add_action('admin_print_scripts-' . $page_hook_suffix, 'true_plugin_admin_scripts');
}
 
function true_plugin_admin_scripts() {
	/* 
	 * Подключаем наш уже зарегистрированный ранее скрипт.
	 */
	wp_enqueue_script( 'myscript' );
}
 
function true_plugin_print_page() {
	/*
	 * Cодержимое страницы настроек.
	 */
	echo 'Привет';
}

Таблица стандартных скриптов в WordPress

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

Название скрипта Идентификатор Расположение файла Зависимости
Jcrop jcrop /wp-includes/js/jcrop/jquery.Jcrop.min.js
SWFObject swfobject /wp-includes/js/swfobject.js
SWFUpload swfupload /wp-includes/js/swfupload/swfupload.js
SWFUpload Queue swfupload-queue /wp-includes/js/swfupload/plugins/swfupload.queue.js
SWFUpload Handlers swfupload-handlers /wp-includes/js/swfupload/handlers.min.js
jQuery jquery /wp-includes/js/jquery/jquery.js json2 (для AJAX запросов)
jQuery Form jquery-form /wp-includes/js/jquery/jquery.form.min.js jquery
jQuery Color jquery-color /wp-includes/js/jquery/jquery.color.min.js jquery
jQuery Masonry jquery-masonry /wp-includes/js/jquery/jquery.masonry.min.js jquery
jQuery UI Core jquery-ui-core /wp-includes/js/jquery/ui/jquery.ui.core.min.js jquery
jQuery UI Widget jquery-ui-widget /wp-includes/js/jquery/ui/jquery.ui.widget.min.js jquery
jQuery UI Mouse jquery-ui-mouse /wp-includes/js/jquery/ui/jquery.ui.mouse.min.js jquery
jQuery UI Accordion jquery-ui-accordion /wp-includes/js/jquery/ui/jquery.ui.accordion.min.js jquery
jQuery UI Autocomplete jquery-ui-autocomplete /wp-includes/js/jquery/ui/jquery.ui.autocomplete.min.js jquery
jQuery UI Slider jquery-ui-slider /wp-includes/js/jquery/ui/jquery.ui.slider.min.js jquery
jQuery UI Tabs jquery-ui-tabs /wp-includes/js/jquery/ui/jquery.ui.tabs.min.js jquery
jQuery UI Sortable jquery-ui-sortable /wp-includes/js/jquery/ui/jquery.ui.sortable.min.js jquery
jQuery UI Draggable jquery-ui-draggable /wp-includes/js/jquery/ui/jquery.ui.draggable.min.js jquery
jQuery UI Droppable jquery-ui-droppable /wp-includes/js/jquery/ui/jquery.ui.droppable.min.js jquery
jQuery UI Selectable jquery-ui-selectable /wp-includes/js/jquery/ui/jquery.ui.selectable.min.js jquery
jQuery UI Position jquery-ui-position /wp-includes/js/jquery/ui/jquery.ui.position.min.js jquery
jQuery UI Datepicker jquery-ui-datepicker /wp-includes/js/jquery/ui/jquery.ui.datepicker.min.js jquery
jQuery UI Resizable jquery-ui-resizable /wp-includes/js/jquery/ui/jquery.ui.resizable.min.js jquery
jQuery UI Dialog jquery-ui-dialog /wp-includes/js/jquery/ui/jquery.ui.dialog.min.js jquery
jQuery UI Button jquery-ui-button /wp-includes/js/jquery/ui/jquery.ui.button.min.js jquery
jQuery UI Effects jquery-effects-core /wp-includes/js/jquery/ui/jquery.ui.effect.min.js jquery
jQuery UI Effects — Blind jquery-effects-blind /wp-includes/js/jquery/ui/jquery.ui.effect-blind.min.js jquery-effects-core
jQuery UI Effects — Bounce jquery-effects-bounce /wp-includes/js/jquery/ui/jquery.ui.effect-bounce.min.js jquery-effects-core
jQuery UI Effects — Clip jquery-effects-clip /wp-includes/js/jquery/ui/jquery.ui.effect-clip.min.js jquery-effects-core
jQuery UI Effects — Drop jquery-effects-drop /wp-includes/js/jquery/ui/jquery.ui.effect-drop.min.js jquery-effects-core
jQuery UI Effects — Explode jquery-effects-explode /wp-includes/js/jquery/ui/jquery.ui.effect-explode.min.js jquery-effects-core
jQuery UI Effects — Fade jquery-effects-fade /wp-includes/js/jquery/ui/jquery.ui.effect-fade.min.js jquery-effects-core
jQuery UI Effects — Fold jquery-effects-fold /wp-includes/js/jquery/ui/jquery.ui.effect-fold.min.js jquery-effects-core
jQuery UI Effects — Highlight jquery-effects-highlight /wp-includes/js/jquery/ui/jquery.ui.effect-highlight.min.js jquery-effects-core
jQuery UI Effects — Pulsate jquery-effects-pulsate /wp-includes/js/jquery/ui/jquery.ui.effect-pulsate.min.js jquery-effects-core
jQuery UI Effects — Scale jquery-effects-scale /wp-includes/js/jquery/ui/jquery.ui.effect-scale.min.js jquery-effects-core
jQuery UI Effects — Shake jquery-effects-shake /wp-includes/js/jquery/ui/jquery.ui.effect-shake.min.js jquery-effects-core
jQuery UI Effects — Slide jquery-effects-slide /wp-includes/js/jquery/ui/jquery.ui.effect-slide.min.js jquery-effects-core
jQuery UI Effects — Transfer jquery-effects-transfer /wp-includes/js/jquery/ui/jquery.ui.effect-transfer.min.js jquery-effects-core
jQuery Schedule schedule /wp-includes/js/jquery/jquery.schedule.js jquery
jQuery Suggest suggest /wp-includes/js/jquery/suggest.min.js jquery
ThickBox thickbox /wp-includes/js/thickbox/thickbox.js
jQuery Hotkeys jquery-hotkeys /wp-includes/js/jquery/jquery.hotkeys.min.js jquery
Simple AJAX Code-Kit sack /wp-includes/js/tw-sack.min.js
QuickTags quicktags /wp-includes/js/quicktags.min.js
Autosave autosave /wp-includes/js/autosave.min.js
WordPress AJAX Response wp-ajax-response /wp-includes/js/wp-ajax-response.min.js
List Manipulation wp-lists /wp-includes/js/wp-lists.min.js
WP Common common /wp-admin/js/common.min.js
Индикатор сложности пароля password-strength-meter /wp-admin/js/password-strength-meter.min.js
Древовидные комментарии comment-reply /wp-includes/js/comment-reply.min.js
Медиазагрузчик media-upload /wp-admin/js/media-upload.min.js
Счетчик слов word-count /wp-admin/js/word-count.min.js
JSON for JS json2 /wp-includes/js/json2.min.js
Plupload plupload /wp-includes/js/plupload/plupload.js
Underscore js underscore /wp-includes/js/underscore.min.js
Backbone js backbone /wp-includes/js/backbone.min.js

Комментарии 28

  • Лариса16 октября 2013 в 13:10 #

    Михаил, здравствуйте! Возник вопрос: в Кодексе в описании этой функции нет параметра in_footer. Так как все-таки на самом деле? Дело в том, что занимаюсь переносом скриптов из хедера в подвал, и было бы очень удобно, если бы функция действительно принимала этот параметр)

    • Миша16 октября 2013 в 13:10 #

      Добрый день)
      а в чем собственно вопрос? этот параметр есть, по умолчанию принимает значение false

      • Лариса16 октября 2013 в 13:10 #

        Вопрос только в том, что на странице описания этой функции в Кодексе об этом параметре нет ни слова - http://codex.wordpress.org/%D0%A1%D0%BF%D1%80%D0%B0%D0%B2%D0%BE%D1%87%D0%BD%D0%B8%D0%BA_%D0%BF%D0%BE_%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D1%8F%D0%BC/wp_enqueue_script. А у Вас прочитала, вот и спрашиваю.

        • Миша17 октября 2013 в 00:10 #

          русская версия Кодекса мягко говоря не очень) да и в английской иногда бывают недочеты.

  • Лариса16 октября 2013 в 14:10 #

    И вернулась сказать спасибо) Действительно есть и действительно работает. Большое спасибо :)

  • Евгений28 ноября 2013 в 05:11 #

    Спасибо за статью.
    Нашел тут сайт с русским сервером скриптов
    http://salat-production.ru/interactive-jquery-mootools-cdn.php

  • VRS24 марта 2014 в 04:03 #

    Доброй ночи.
    Подскажи, пожалуйста, а как подключить новый медиазагрузчик?
    Вот такой код выводит "старый"

    function my_add_upload_scripts() {  
            wp_enqueue_script('media-upload');  
            wp_enqueue_script('thickbox');  
            wp_register_script(  
                        'my-upload-script'  
                        /* Подключаем JS-код задающий поведение  
                         * загрузчика и указывающий, куда вставлять  
                         * ссылку после загрузки изображения 
                         * Его код будет приведен ниже. 
                         */  
                        ,get_bloginfo('template_url').'/js/upload.js'  
                        /* Указываем скрипты, от которых  
                         * зависит наш JS-код 
                         */  
                        ,array('jquery','media-upload','thickbox')  
            );  
            wp_enqueue_script('my-upload-script');  
        }  
     
        // Запускаем функцию подключения загрузчика  
        if( is_admin() )  
        add_action('admin_print_scripts', 'my_add_upload_scripts');

    пробовала менять media-upload на plupload-full, но не работает.

  • Антон15 августа 2014 в 19:08 #

    $deps
    (массив) массив идентификаторов скриптов, от которых зависит подключаемый скрипт

    Вот про $deps я вообще ничего не понял какие там должны быть идентификаторы?? Что от чего зависит (т.е как может быть что бы скрипты друг от друга зависили)??

    Можете пожалуйста подробнее растолковать.

    • Миша15 августа 2014 в 21:08 #

      Ну например у вас есть какой-то код jQuery и он не будет работать пока не поключена сама библиотека jQuery — один из примеров такой зависимости.

      • Антон15 августа 2014 в 21:08 #

        Да например js код какой то не может работать без jq но можно прописать же так например

        wp_enqueue_script( 'myscript', get_stylesheet_directory_uri() . '/jq.js', '', '3.0', false );
        wp_enqueue_script( 'myscript', get_stylesheet_directory_uri() . '/js.js', '', '3.0', false );

        и все будет зависеть и все без всяких array в чем тогда разница?

        • Миша16 августа 2014 в 09:08 #

          Дело в том, что скрипты могут подключаться в разных местах, не только в теме, но и в плагинах, поэтому, чтобы все файлы задействовались в правильном порядке, нужно указывать этот параметр $deps.

          • Антон16 августа 2014 в 19:08 #

            Все понял спасибо. И еще как сделать так что бы Jquery подключался у меня в wp_footer перед боди. Пишу вот так wp_enqueue_script('jquery'); но он у меня в шапке подключается.

  • Сайра23 января 2015 в 14:01 #

    Всем здравствуйте!!! Извините за вопрос, скорее всего он для всех Вас покажется очень глупым. Я прописываю такой код в WP

    Ваш департамент<span style="color: #c43b1d;">*</span><br /><select id="change" onChange = "onChange()"><option></option>
    <option value="1">Департамент бухгалтерского и налогового учета</option>
    <option value="2">Департамент взаимодействия с телерадиоканалами</option>
    <option value="3">Департамент государственных закупок и логистики</option>
    <option value="4">Департамент информационных технологий</option>
    <option value="5">Департамент казначейства</option></select>
    Ваш отдел<span style="color: #c43b1d;">*</span><br /><select id = "change1" style="display: none;"><option></option>
    <option value="1">Отдел бухгалтерского учета</option>
    <option value="2">Отдел налогового учета</option>
    </select>
     
    <select id = "change2" style="display: none;"><option></option>
    <option value="1">Отдел работы с радиоканалами</option>
    </select>
     
    <select id = "change3" style="display: none;"><option></option>
    <option value="1">Отдел государственных закупок</option>
    <option value="2">Отдел планирования государственных закупок и логистики</option>
    <option value="2">Отдел электронных закупок</option>
    </select>
     
    <select id = "change4" style="display: none;"><option></option>
    <option value="1">Отдел администрирования корпоративных систем и управления безопасностью информационных технологий</option>
    <option value="2">Отдел администрирования серверов и операционных систем</option>
    <option value="1">Отдел развития и эксплуатации транспортных сетей и коммуникаций</option>
    <option value="2">Отдел технической поддержки и регионального управления</option>
    </select>
     
    <select id = "change5" style="display: block;"><option></option>
    <option value="1">Отдел бухгалтерского учета</option>
    <option value="2">Отдел налогового учета</option>
    <option value="3">Отдел работы с телерадиоканалами</option>
    <option value="4">Отдел государственных закупок</option>
    <option value="5">Отдел планирования государственных закупок и логистики</option>
    <option value="6">Отдел электронных закупок</option>
    <option value="7">Отдел администрирования корпоративных систем и управления безопасностью информационных технологий</option>
    <option value="8">Отдел администрирования серверов и операционных систем</option>
    <option value="9">Отдел развития и эксплуатации транспортных сетей и коммуникаций</option>
    <option value="0">Отдел технической поддержки и регионального управления</option></select>
     
    <SCRIPT LANGUAGE = "JavaScript" TYPE = "text/javascript">
    function onChange(){
    var objSel = document.getElementById("change");;
    var select1 = document.getElementById("change1");
    var select2 = document.getElementById("change2");
    var select3 = document.getElementById("change3");
    var select4 = document.getElementById("change4");
    var select5 = document.getElementById("change5");
    if (objSel.value == 1) {
    select1.style.display = 'block';
    select2.style.display = 'none';
    select3.style.display = 'none';
    select4.style.display = 'none';
    select5.style.display = 'none';
    }
    if (objSel.value == 2) {
    select2.style.display = 'block';
    select1.style.display = 'none';
    select3.style.display = 'none';
    select4.style.display = 'none';
    select5.style.display = 'none';
    }
    if (objSel.value == 3) {
    select3.style.display = 'block';
    select1.style.display = 'none';
    select2.style.display = 'none';
    select4.style.display = 'none';
    select5.style.display = 'none';
    }
    if (objSel.value == 4) {
    select4.style.display = 'block';
    select2.style.display = 'none';
    select3.style.display = 'none';
    select1.style.display = 'none';
    select5.style.display = 'none';
    }
     
    }
    </script>

    и если честно, то он у меня не работает(((( а я не знаю куда вставлять код, чтобы подключить JS((( ПОМОГИТЕ ПОЖАЛУЙСТА

    • Миша24 января 2015 в 13:01 #

      Здравствуйте! Скажите, какая у этого кода задача?

      • Сайра4 февраля 2015 в 07:02 #

        у меня имеется два selectmenu. При выборе департамента, у меня автоматически должен появляться отдел. Если этот код сохранить через блокнот в расширении .js, то все идеально работает, а на WР никак не могу подключить. На сколько я поняла, мне необходимо сохранить мой скрипт в расширении js и положить его в папку плагины, а потом просто ссылаться на него, но никак не разобралась и ничего не заработало((((

  • Сайра4 февраля 2015 в 07:02 #

    то есть, если сохранить в блокноте в расширении .html то все работатет

    • Миша4 февраля 2015 в 08:02 #

      В таком случае сначала просто вставьте этот код в WordPress туда, где его нужно вывести, в какой-нибудь php-файл.

      Сохранять его в .js неправильно, так как там также имеется и html код.

  • артем14 мая 2015 в 23:05 #

    здравствуйте. хочу реализовать на блоге вордпресс печать по этой инструкции: _http://loco.ru/materials/107-php-print-this-page-feature-javascript. я не понимаю, как подключить скрипт через отдельный Js-файл. пробовал, но не получается. можете объяснить и сколько стоит?

    • Миша15 мая 2015 в 07:05 #

      Здравствуйте. Вот так:

      <script src="URL скрипта"></script>
      • артем15 мая 2015 в 18:05 #

        Миша, огромное спасибо, заработало...только в бланке печати русские буквы отображаются в виде символов (когда подключаю Js файл). когда скрипт просто вставляю в тело, то буквы отображаются нормально. может еще что-то надо указать, чтобы кириллица отображалась?

  • Aleksander12 июня 2015 в 10:06 #

    Добрый день!
    Помогите пожалуйста, хочу добавить себе всплывающее меню, как в примере http://codepen.io/laviperchik/pen/uyqmh, но не получается добавить javascript, не хочет открываться, я вызываю джаву в function.php:

    function slide_bar_scripts() {
    	wp_enqueue_script('jquery'); // скорее всего он уже будет подключен, это на всякий случай
     	wp_enqueue_script( 'slide_bar', get_stylesheet_directory_uri() . '/slidebar.js');
    }
     
    add_action( 'wp_enqueue_scripts', 'slide_bar_scripts' );

    кидаю в папку с темой:

    /*! bigSlide - v0.4.3 - 2014-01-25
    * http://ascott1.github.io/bigSlide.js/
    * Copyright (c) 2014 Adam D. Scott; Licensed MIT */
    !function(a){"use strict";a.fn.bigSlide=function(b){var c=a.extend({menu:"#menu",push:".push",side:"left",menuWidth:"15.625em",speed:"300"},b),d=this,e=a(c.menu),f=a(c.push),g=c.menuWidth,h={position:"fixed",top:"0",bottom:"0","settings.side":"-"+c.menuWidth,width:c.menuWidth,height:"100%"},i={"-webkit-transition":c.side+" "+c.speed+"ms ease","-moz-transition":c.side+" "+c.speed+"ms ease","-ms-transition":c.side+" "+c.speed+"ms ease","-o-transition":c.side+" "+c.speed+"ms ease",transition:c.side+" "+c.speed+"ms ease"};return e.css(h),f.css(c.side,"0"),e.css(i),f.css(i),e._state="closed",e.open=function(){e._state="open",e.css(c.side,"0"),f.css(c.side,g)},e.close=function(){e._state="closed",e.css(c.side,"-"+g),f.css(c.side,"0")},d.on("click.bigSlide",function(a){a.preventDefault(),"closed"===e._state?e.open():e.close()}),d.on("touchend",function(a){d.trigger("click.bigSlide"),a.preventDefault()}),e}}(jQuery);    
    $(document).ready(function() {
            $('.menu-link').bigSlide();
        });

    но ничего не происходит, что я не так делаю?
    Большое человеческое спасибо!

    • Миша13 июня 2015 в 19:06 #

      Добрый день!
      Дочерние темы используете?
      Зависимости от jQuery проставьте тоже.

Оставить комментарий / вопрос

phpjsHTMLCSSSQLПросто код
  Для того, чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или авторизуйтесь на сайте.
Получайте новости блога по email или следите за мной в социальных сетях.
  • Vladislav: Подправил имеющийся у меня код, по вашим рекомендациям, миниатюры начали отображаться, но они стали очень огромными, что...

  • Миша: Лишь предложил решение. Думаю можно нашаманить и так, чтобы чисто для рубрик было, не уверен только, что обойдётся без и...

  • Алексей: так надо комментарии в рубриках, а не на страницах в category.php а не в page.php

  • Миша: Здравствуйте! Сам WordPress это не поддерживает, но можно пойти хитрым путём. Первое, что пришло мне в голову, это:...

  • Алексей: Миша, здравствуйте! Подскажите, пожалуйста, что нужно, чтобы сделать комментарии на страницах рубрик. Я когда то давно...